office-tools-m/components/page-head/page-head.vue

<template>
	<view>
		<view class="bg-white padding-lr-15 uni-top">
			<view class="flex justify-between top-button">
				<uni-easyinput :prefixIcon="searchShow ? 'bottom' : 'right'" suffixIcon="search"
					v-model="queryfrom.styleNum" placeholder="搜索工厂款号" @iconClick="iconClick" @confirm="getData(1)">
				</uni-easyinput>
				<view v-if="showQutation" style="width: 60px;margin-left: 10rpx;">
					<button @click="goQutation" type="primary" class="import-btn">
						<view style="font-size: 16px;">报价</view>
					</button>
				</view>
				<view style="margin-top: -4px;margin-left: 5rpx;">
					<uni-icons @click="scan" type="scan" size="43" color="#409EFF"></uni-icons>
				</view>
			</view>
			<view class="flex" v-if="searchShow">
				<view class="flex-sub padding-left-xs padding-top-xs">
					<uni-easyinput v-model="queryfrom.version" placeholder="搜索版本号"
						@confirm="getData(1)"></uni-easyinput>
					<uni-easyinput style="margin-top: 5px;" v-model="queryfrom.color" placeholder="搜索颜色"
						@confirm="getData(1)"></uni-easyinput>
				</view>
			</view>
			<view class="flex justify-between padding-top-sm" v-if="searchShow">
				<button class="mini-btn" type="default" size="mini" @click="searchShow = !searchShow">
					<text class="cuIcon-fold" style="margin-right: 5px;"></text>收回
				</button>
				<button class="mini-btn" type="primary" size="mini" @click="getData(1)">搜索</button>
			</view>
		</view>
		<view style="padding: 20px;" class="padding">
		</view>
		<uni-popup style="width: 100%;" class="" ref="popup" type="dialog" border-radius="10px 10px 10px 10px">
			<div style="width: 100%;" class="bg-white">我是分界线</div>
		</uni-popup>
	</view>
</template>
<script>
	/**
	 * Section 标题栏
	 * @description 标题栏
	 * @property {String} type = [line|circle|square] 标题装饰类型
	 * @value line 竖线
	 * @value circle 圆形
	 * @value square 正方形
	 * @property {String} title 主标题
	 * @property {String} titleFontSize 主标题字体大小
	 * @property {String} titleColor 主标题字体颜色
	 * @property {String} subTitle 副标题
	 * @property {String} subTitleFontSize 副标题字体大小
	 * @property {String} subTitleColor 副标题字体颜色
	 * @property {String} padding 默认插槽 padding
	 */
	import jweixin from 'weixin-js-sdk'
	import {
		getSign
	} from '@/api/trade/shoe-style.js'
	export default {
		name: 'pageHead',
		emits: ['click'],
		props: {
			showQutation: {
				type: Boolean,
				default: true
			},
		},
		data() {
			return {
				searchShow: false,
				getSign: getSign,
				queryfrom: {
					version: '',
					styleNum: '',
					color: ''
				}
			}
		},
		created() {
			this.getConfig()
		},
		methods: {
			goQutation() {
				uni.navigateTo({
					url: '/pages/trade/quotation/QuotationAdd'
				})
			},
			openPopup() {
				this.$refs.popup.open('center')
			},
			getConfig() {
				this.getSign({
					url: location.href,
					appid: 'wx2cfd24c7380cdc08',
				}).then(res => {
					var s = res.data
					jweixin.config({
						debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
						appId: s.appId, // 必填，公众号的唯一标识
						timestamp: s.timestamp, // 必填，生成签名的时间戳
						nonceStr: s.nonceStr, // 必填，生成签名的随机串
						signature: s.signature, // 必填，签名
						jsApiList: ['scanQRCode'] // 必填，需要使用的JS接口列表
					})
				})
			},
			scan() {
				const _this = this
				jweixin.scanQRCode({
					needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
					scanType: ['qrCode', 'barCode'], // 可以指定扫二维码还是一维码，默认二者都有
					success: function(res) {
						let str = res.resultStr // 当needResult 为 1 时，扫码返回的结果
						// let exURL = "https://zhtool.huaxiazhizao.com/pages/trade/shoe-style/ShoeStyleView?data=1";
						let encodedURL = encodeURI(str)
						// console.log(encodedURL)
						window.location.href = encodedURL
					}
				})
			},
			iconClick(type) {
				if (type === 'prefix') {
					this.searchShow = !this.searchShow
				} else {
					this.$emit('headGetData', this.queryfrom)
				};
				// uni.showToast({
				// 	title: `点击了${type==='prefix'?'左侧':'右侧'}的图标`,
				// 	icon: 'none'
				// })
			},
			getData() {
				this.$emit('headGetData', this.queryfrom)
			}
		}
	}
</script>
<style lang="scss">
	.uni-top {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
	}
</style>