yl-gzh/pages/lr/eat.vue

<template>
	<view style="height: 100%;">
		<!-- <web-view src="../../static/index.html"></web-view> -->

		<uni-card style="height: 80%;">
			<uni-section title="会员信息" type="line">
				<template v-slot:right>
					<uni-icons @click="openPopup" type="help" size="17"></uni-icons>
				</template>
				<uni-forms :modelValue="formData">
					<uni-forms-item label="姓名">
						<uni-easyinput disabled type="text" v-model="formData.lrXm" placeholder="请输入姓名" />
					</uni-forms-item>
					<uni-forms-item label="类别" required>
						<!-- <uni-data-select v-model="formData.xflb" :localdata="xflbOptions"></uni-data-select> -->
						<uni-data-checkbox :disabled="disabled" v-model="formData.xflb" :localdata="xflbOptions"
							@change="lbChange"></uni-data-checkbox>
					</uni-forms-item>

					<uni-forms-item v-if="formData.xflb == '0'" label="套餐" required>
						<!-- <uni-data-select v-model="formData.xftc" :localdata="tcOptions"></uni-data-select> -->

						<uni-data-picker placeholder="请选择套餐" popup-title="请选择套餐" :localdata="tcOptions"
							v-model="formData.tcId" @nodeclick="jg">
						</uni-data-picker>
					</uni-forms-item>

					<uni-forms-item v-if="formData.xflb == '1'" label="金额" required>
						<uni-easyinput type="number" v-model="formData.ycje" placeholder="请输入消费金额" @blur="jg" />
					</uni-forms-item>

					<uni-forms-item v-if="formData.xflb == '0'" label="总价">
						<uni-easyinput disabled type="text" v-model="formData.zj" placeholder="请输入总价" />
					</uni-forms-item>

					<uni-forms-item label="折后价">
						<uni-easyinput disabled type="text" v-model="formData.zhj" placeholder="请输入折后价" />
					</uni-forms-item>

					<uni-button type="primary" @click="submit">提交</uni-button>
				</uni-forms>
			</uni-section>
		</uni-card>

		<uni-popup ref="popup" type="center">
			<scroll-view>
				<view class="jsBox">
					<image class="jsImg" src="../../static/images/tcbj.png"></image>
					<view class="jsText">
						<text class="jsTitle">结算记账流程</text>
						<text class="jstext">1.请工作人员采集会员清晰的人像信息</text>
						<text class="jstext">2.如未能匹配会员信息请重新采集人像信息或重新维护会员信息</text>
						<text class="jstext">3.如识别出多人信息请输入身份证后四位验证真正会员信息</text>
						<text class="jstext">4.类别选套餐或自定义金额</text>
						<text class="jstext">5.选择相应套餐或输入自定义金额</text>
						<text class="jstext">6.系统自动计算折后价</text>
						<text class="jstext">7.点击提交按钮完成结算记账</text>
					</view>
					<view class="jsBtn" @click="closePopup">我知道了</view>
				</view>
			</scroll-view>
		</uni-popup>



		<uni-popup ref="popup1" type="dialog">
			<uni-transition ref="ani" custom-class="transition" :mode-class="modeClass" :styles="styles" :show="show">
				<uni-popup-dialog mode="input" title="身份验证" placeholder="请输入身份证后四位" :maxlength="4" :duration="2000"
					:before-close="true" @close="close" @confirm="confirm"></uni-popup-dialog>
			</uni-transition>

		</uni-popup>
	</view>
</template>
</view>
</template>
<script>
	import {
		getToken,
		getUser
	} from '@/common/auth.js'
	import {
		translate,
		base64ToUrl
	} from '@/common/image.js'
	import config from '@/config.js';
	import {
		CheckZjhm,
		TcList,
		GetJg,
		SaveYcxx
	} from '@/api/kh.js'
	export default {
		data() {
			return {
				show: true,
				modeClass: 'fade',
				styles: {},

				// 字典
				dicts: {
					// 结算方式
					JC002: []
				},
				disabled: false,
				formData: {
					jmZjhm: '',
					lrXm: '',
					xflb: '',
					tcId: '',
					jg: '',
					zj: '',
					ycje: '',
					zhj: '',
				},
				tcOptions: [],
				xflbOptions: [],
				// 身份证号加密
				idcardMD5: '',
				userInfo: {},
				khInfo: {},
				// 人像base64
				face: '',
				// 组id
				groupId: '',
				// 人像地址
				src: "/static/images/head.png",
				// 百度云access_token
				token: '',
				client_id: config.face_client_id,
				client_secret: config.face_client_secret,
				khParam: {
					ids: "",
					id: ""
				}
			}
		},
		watch: {
			'dicts.JC002': function(val, oldVal) {
				this.zuzhuang()
			}
		},
		onLoad() {
			this.getDictList(Object.keys(this.dicts), this.dicts)
		},
		beforeMount() {},
		mounted() {
			this.userInfo = getUser()
			this.groupId = this.userInfo.dept.locationCode.substring(0, 6)
			this.tcList()
			// this.start()
			this.getKhInfo()
		},
		onReady() {},
		methods: {
			lbChange() {
				this.formData.zj = ''
				this.formData.zhj = ''
				this.formData.tcId = ''
				this.formData.ycje = ''
			},
			submit() {
				// 0套餐 1现金
				if (this.formData.xflb == '0') {
					this.formData.ycje = this.formData.zj
				}
				this.formData.yhje = this.formData.ycje - this.formData.zhj
				this.formData.ssqh = this.userInfo.dept.locationCode
				SaveYcxx(this.formData).then(res => {})
			},
			jg(e) {
				// 0套餐 1现金
				if (this.formData.xflb == '0') {
					this.formData.zj = e.dj
					this.formData.jg = this.formData.zj
				} else {
					this.formData.jg = this.formData.ycje
				}

				uni.showLoading({
					title: '计算价格中...'
				})
				GetJg(this.formData).then(res => {
					uni.hideLoading()
					this.formData.zhj = res.data.jg
				})
			},
			confirm(e) {
				if (e && e.length == 4) {
					this.getKhInfo()
					this.$refs.popup1.close()
				} else {
					this.$refs.ani.step({
						translateX: '10px',
						scale: 1
					}, {
						timingFunction: 'linear',
						duration: 150
					})
					this.$refs.ani.step({
						translateX: '-10px',
						scale: 1
					}, {
						timingFunction: 'linear',
						duration: 150
					})
					this.$refs.ani.step({
						translateX: '0px',
						scale: 1
					}, {
						timingFunction: 'linear',
						duration: 150
					})

					this.$refs.ani.run()
				}
			},
			close() {
				uni.switchTab({
					url: '../index/index'
				})
			},
			zuzhuang() {
				if (this.userInfo.jsfs) {
					let jsfs = this.userInfo.jsfs.split(",")
					if (jsfs.length == 1) this.disabled = true
					if (jsfs.length > 0) this.formData.xflb = jsfs[0]
					this.dicts.JC002.filter(dic => jsfs.some(fs => {
						if (dic.value == fs) {
							this.xflbOptions.push({
								text: dic.text,
								value: dic.value
							})
						}
					}))
				}
			},
			openPopup() {
				this.$refs.popup.open()
			},
			closePopup() {
				this.$refs.popup.close()
			},
			start() {
				this.takePhoto()
			},
			tcList() {
				TcList({
					jgId: this.userInfo.jgId
				}).then(res => {
					res.rows.forEach(e => {
						this.tcOptions.push({
							value: e.id,
							text: e.mc,
							dj: e.dj,
						})
					})
				})
			},
			takePhoto() {
				uni.chooseImage({
					count: 1,
					mediaType: ['image'],
					sizeType: ['compressed'],
					sourceType: ['camera'],
					success: (res) => {
						uni.showLoading({
							title: '正在识别中...'
						})

						let size = res.tempFiles[0].size
						let scale = 1
						if (size / 1024 / 1024 > 0.9) scale = 0.4

						translate(res.tempFilePaths[0], scale, 'blob', this.setSrc)
					},
					fail: (err) => {
						console.log(err);
					}
				})
			},
			setSrc(e, blobUrl) {
				this.src = blobUrl
				uni.getFileInfo({
					filePath: blobUrl,
					success: (res) => {
						let size = res.size
						let scale = 1
						if (size / 1024 / 1024 > 0.4) {
							scale = 0.6
							translate(this.src, scale, 'blob', this.setSrc)
						} else {
							e = e.replace('data:image/jpeg;base64,', "");
							this.face = e
							this.getAccessToken()
						}
					},
					fail: (err) => {
						console.log(err);
					}
				})
			},
			getAccessToken() {
				uni.request({
					url: '/baiduApi/oauth/2.0/token',
					data: {
						grant_type: 'client_credentials',
						client_id: this.client_id,
						client_secret: this.client_secret
					},
					method: 'POST',
					header: {
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					success: (res) => {
						if (res.statusCode == 200) {
							this.token = res.data.access_token
							this.faceSearch()
						} else {
							uni.showToast({
								icon: 'none',
								title: '人像识别异常，请稍后重试'
							})
							uni.hideLoading()
						}
					},
					error: (err) => {
						uni.hideLoading()
					}
				})
			},
			// 人脸搜索
			faceSearch() {
				let face = this.face
				let data = {
					image: face,
					image_type: 'BASE64',
					group_id_list: this.groupId,
					match_threshold: config.score,
					max_user_num: 50
				}
				uni.request({
					url: '/baiduApi/rest/2.0/face/v3/search?access_token=' + this.token,
					data: data,
					method: 'POST',
					header: {
						'Content-Type': 'application/json'
					},
					success: (res) => {
						if (res.data.error_msg == 'SUCCESS') {
							// this.isSearch = true
							if (res.data.result.user_list.length < 1) {
								uni.showModal({
									title: '提示',
									content: "未找到该会员信息，请重新采集人像",
									confirmText: '确定',
									success: function(res) {
										uni.switchTab({
											url: '../index/index'
										})
									}
								})
							} else {
								let idcards = []
								res.data.result.user_list.forEach(e => {
									idcards.push(e.user_id)
								})
								this.khParam.ids = idcards.join(',')
								if (res.data.result.user_list.length > 1) {
									this.$refs.popup1.open()
									uni.hideLoading()
								} else {
									this.getKhInfo()
								}
							}
						} else {
							uni.showModal({
								title: '提示',
								content: "未找到该人员信息，请重新采集人像",
								showCancel: false,
								confirmText: '确定',
								success: function(res) {
									uni.switchTab({
										url: '../index/index'
									})
								}
							})

						}

					},
					error: (err) => {
						uni.hideLoading()
					}
				})
			},
			getKhInfo() {
				this.khParam = {
					"ids": "a49a68acfc35635d5a30d3a17ec86415",
					// "ids": "a49a68acfc35635d5a30d3a17ec86415,a49a68acfc35635d5a30d3a17ec86414,a49a68acfc35635d5a30d3a17ec86413",
					"id": ""
				}
				CheckZjhm(this.khParam).then(res => {
					if (res.data.msg == '匹配成功') {
						this.khInfo = JSON.parse(res.data.lr)
						this.formData.lrXm = this.khInfo.lrXm
						this.formData.jmZjhm = this.khInfo.lrJmzjhm

						uni.hideLoading()
					} else {
						uni.showModal({
							title: '提示',
							content: "未找到该人员信息，请重新采集人像",
							showCancel: false,
							confirmText: '确定',
							success: function(res) {
								uni.switchTab({
									url: '../index/index'
								})
							}
						})
					}
				})
			},
		}
	}
</script>

<style scoped>
	.jsBox {
		width: 90vw;
		min-height: 55vh;
		/* 	position: absolute;
		top: 0;
		left: 0;
		z-index: 1; */
	}

	.jsImg {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
	}

	.jsText {
		width: 90%;
		position: absolute;
		left: 5%;
		top: 5%;
		z-index: 2;
	}

	.jsTitle {
		font-size: 20px;
		font-weight: bold;
		text-align: center;
		/* width: 100%; */
		display: block;
		color: #000000;
		margin-bottom: 5vh;
	}

	.jstext {
		font-size: 16px;
		font-weight: 400;
		color: #666666;
		line-height: 4vh;
		text-align: left;
		display: block;
	}

	.jsBtn {
		width: 30%;
		position: absolute;
		left: 35%;
		bottom: 3%;
		z-index: 3;
		text-align: center;
		background: linear-gradient(148deg, #FFD334 0%, #F59A02 100%);
		box-shadow: 0px 2px 5px 0px rgba(245, 154, 2, 0.4);
		border-radius: 5vw;
		color: #fff;
		font-size: 16px;
		font-weight: 400;
		line-height: 5vh;
	}

	/* #ifndef APP-NVUE */
	.transition {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100px;
		height: 100px;
		border-radius: 5px;
		text-align: center;
		background-color: #4cd964;
		box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.2);
	}

	/* #endif */

	.text {
		font-size: 14px;
		color: #fff;
	}
</style>