zh-cashier-app/pages/index/order.vue

<template>
	<view class="index-home flex-common-css">
		<!-- 1 -->
		<view class="box-1 align-items-start">
			<image src="@/static/img/jiankong.png" mode=""></image>
			<view class="fs-32 fc-3 fw-b">你已进入监控区域</view>

			<view class="box-1-time">
				<Countdown ref="countdown"></Countdown>
			</view>
		</view>


		<!-- 2 -->
		<view v-if="goodsList.length == 0" class="scroll-view-css">
			<image class="no-img" src="@/static/img/no-goods.png" mode="scaleToFill"></image>
			<view class="fs-30 fc-6 text-align-center">请扫码添加商品</view>
		</view>
		<scroll-view v-else scroll-y="true" class="scroll-view-css list-box">
			<view class="goods-box flex-justify-space" v-for="(item,i) in goodsList" :key="i">
				<image :src="item.cover_img" mode="scaleToFill"></image>

				<view class="flex-1">
					<view class="flex-justify-space">
						<view class="text-1 text-overflow-ellipsis-one">{{item.goods_name}}</view>
						<uni-icons @click="delGoods(i)" type="trash" size="20"></uni-icons>
					</view>
					<view class="flex-justify-space">
						<view class="fs-24 fc-ED301D">￥{{item.price}}</view>
						<view class="align-items-center">
							<view class="num-buttom" v-if="item.num > 1" @click="reduce(i)">-</view>
							<view class="num-box">{{item.num}}</view>
							<view class="num-buttom" @click="add(i)">+</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>



		<view class="box-2-b align-items-center">
			<view class="box-2-shou flex-justify-center align-items-center" @click="headInput()">
				<image src="@/static/img/txm.png" mode=""></image>
				<view class="fs-30 fc-3 fw-400">手输条码</view>
			</view>
			<view v-if="shop_id == 299" class="box-2-shou flex-justify-center align-items-center" @click="openMenber()">
				<image src="@/static/img/huiyuan.png" mode=""></image>
				<view v-if="!member_id" class="fs-30 fc-3 fw-400">会员登录</view>
				<view v-else class="fs-30 fc-3 fw-400">更换会员</view>
			</view>
			<view v-if="member_id" class="flex-justify-center align-items-center">
				<view class="fs-24 fc-074B86 fw-400">会员ID {{member_id}}</view>
			</view>
		</view>

		<!-- 3 -->
		<view class="box-2">
			<view class="flex-justify-space">
				<view class="">
					<view class="fs-30 fc-3">
						共{{totalNum}}件
						<span v-if="discount&&discount>0">,已优惠</span>
						<span class="fs-30 fc-ED301D fw-600 mr-10"
							v-if="discount&&discount>0">￥{{(totalPrice - (totalPrice*discount)).toFixed(2)}}</span>
						<span class="fs-30 fc-ED301D fw-600" v-if="discount&&discount>0">{{discount*10||'0'}}折</span>
					</view>
					<view class="">
						<span class="fs-30 fc-3">合计</span>
						<span class="fs-30 fc-ED301D">￥</span>
						<span class="fs-40 fc-ED301D fw-600"
							v-if="discount&&discount>0">{{(totalPrice*discount).toFixed(2)}}</span>
						<span class="fs-40 fc-ED301D fw-600" v-else>{{totalPrice}}</span>
					</view>
				</view>
				<view class="to-save text-align-center fs-32 fc-f" @click="save()">去结算</view>
			</view>
		</view>


		<keyboard-listener v-if="outscan" @keyup="monitorKeyboard"></keyboard-listener>

		<!-- 支付类型 -->
		<uni-popup ref="popup" :mask-click="false">
			<view class="">
				<view class="pop-view mb-25">
					<view class="fs-32 fw-600 pop-1 pop-view-1">请选择支付类型</view>
					<view class="pop-2">
						<view class="fs-32 pop-1 pop-view-1 fc-lv" @click="selectTyep(1)">微信</view>
						<view class="fs-32 pop-1 fc-lan" @click="selectTyep(2)">支付宝</view>
					</view>
				</view>
				<view class="code-view-1" @click="closePay()">取消支付</view>
			</view>

		</uni-popup>

		<!-- 付款码 -->
		<uni-popup ref="popupCode" :mask-click="false">
			<view class="">
				<view class="code-view">
					<view class="fs-42 fw-b fc-lan text-align-center">请出示{{payType == 1?'微信':'支付宝'}}付款码</view>
					<view class="text-align-center">
						<span class="fs-30 fc-9">应付</span>
						<span class="fs-42 fc-ED301D fw-b">￥{{totalPrice}}</span>
					</view>
					<image src="@/static/img/code-1.png" mode="scaleToFill"></image>
					<view class="fs-30 fc-6 text-align-center">对准下方扫描口</view>
				</view>
				<view class="code-view-1" @click="closePay()">取消支付</view>
			</view>
		</uni-popup>

		<!-- 手动输入条形码 -->
		<uni-popup ref="inputDialog" type="dialog">
			<uni-popup-dialog v-model="headValue" mode="input" title="输入条码" placeholder="请输入条码"
				@confirm="dialogInputConfirm"></uni-popup-dialog>
		</uni-popup>
		
		<!-- 选择会员登录方式 -->
		<uni-popup ref="memberType" type="center" :mask-click="false">
			<view class="member-type-box">
				<view class="member-type-box-title mb-40">
					<view class="fs-32 fw-b text-align-center">选择会员登录方式</view>
					<image @click="closeMemberTypePop()" src="@/static/member/close.png" mode=""></image>
				</view>
				<view class="flex-justify-around member-type-box-icon">
					<view class="" @click="openPhone()">
						<image src="@/static/img/phone-login.png" mode=""></image>
						<view class="">手机号登录</view>
					</view>
					<view class="" @click="openPOP()">
						<image src="@/static/img/code-login.png" mode=""></image>
						<view class="">扫码登录</view>
					</view>
				</view>
			</view>
		</uni-popup>
		
		<!-- 会员输入手机号 -->
		<uni-popup ref="inputPhone" type="bottom" :mask-click="false">
			<view class="flex-common-css member-pop-view">
				<view class="member-pop-phone-1 flex-1"></view>
				<view class="member-pop-phone-2">
					<view class="member-type-box-title mb-40">
						<view class="fs-32 fw-b text-align-center">手机号登录会员</view>
						<image @click="closePhone()" src="@/static/member/fanhui.png" mode=""></image>
					</view>
					<view class="member-phone-input mb-25" :class="phone?'fc-3':'fc-9'">
						{{phone||'请输入手机号'}}
						<image @click="closeALL()" src="@/static/member/close.png" mode=""></image>
					</view>
					<view class="flex-wrap-wrap flex-justify-space">
						<view class="phone-num-box text-align-center fw-600 fs-30" @click="inputPhoneNum(item)" v-for="(item,i) in numList" :key="i">{{item}}</view>
						<view class="phone-num-box text-align-center fw-600 fs-30 fc-f bgc-lv" @click="memberPhoneLogin()">登录</view>
						<view class="phone-num-box text-align-center fw-600 fs-30" @click="inputPhoneNum(0)">0</view>
						<view class="phone-num-box text-align-center fw-600 fs-42 bgc-hui fc-ED301D" @click="delPhoneNum()">←</view>
					</view>
				</view>
			</view>
		</uni-popup>
		
		<!-- 会员扫码 -->
		<uni-popup ref="inputMember" type="bottom" :mask-click="false">
			<view class="flex-common-css member-pop-view">
				<view class="member-pop-view-1"></view>
				<view class="member-pop-view-2 flex-1">
					<view class="flex-justify-space align-items-center mb-40">
						<image class="img-11" src="@/static/member/shuom.png" mode=""></image>
						<image @click="closePOP()" class="img-close" src="@/static/member/close.png" mode=""></image>
					</view>
					<view class="mb-40">
						<view class="align-items-center mb-13">
							<view class="yuan">1</view>
							<view class="align-items-center">
								<view class="fs-30">微信搜索</view>
								<view class="fs-30 fc-1778FD">振合网实体联盟</view>
								<view class="fs-30">公众号,点击</view>
								<view class="fs-30 fc-1778FD">民营经济</view>
							</view>
						</view>
						<view class="bg-1 flex-justify-center align-items-center">
							<image class="img-12" src="@/static/member/1.png" mode=""></image>
							<image class="img-13" src="@/static/member/right.png" mode=""></image>
							<image class="img-12" src="@/static/member/2.png" mode=""></image>
						</view>
					</view>
					<view class="mb-40">
						<view class="align-items-center mb-13">
							<view class="yuan">2</view>
							<view class="align-items-center">
								<view class="fs-30">找到个人中心点击</view>
								<view class="fs-30 fc-1778FD">分享码</view>
							</view>
						</view>
						<view class="bg-1 flex-justify-center align-items-center">
							<image class="img-12" src="@/static/member/3.png" mode=""></image>
							<image class="img-13" src="@/static/member/right.png" mode=""></image>
							<image class="img-12" src="@/static/member/4.png" mode=""></image>
						</view>
					</view>
					<view class="">
						<view class="align-items-center mb-13">
							<view class="yuan">3</view>
							<view class="align-items-center">
								<view class="fs-30">二维码对准扫描口,</view>
								<view class="fs-30 fc-1778FD">识别完成，显示会员IP</view>
							</view>
						</view>
						<view class="bg-1 flex-justify-center align-items-center">
							<image class="img-12" src="@/static/member/5.png" mode=""></image>
							<image class="img-13" src="@/static/member/right.png" mode=""></image>
							<image class="img-12" src="@/static/member/6.png" mode=""></image>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		projectDiscount
	} from '@/api/project.js';

	import keyboardListener from 'uniapp-keyboard-listener';
	import {
		GoodsInfo,
		OrderCreate,
		OrderPay
	} from '@/api/cashierApi.js'
	import tools from '@/common/js/tools';
	import Countdown from '../mod/countdown.vue'

	export default {
		components: {
			keyboardListener,
			Countdown
		},
		data() {
			return {
				isMemeber: false,//是否打开会员扫描
				discount: 0, //折扣
				member_id: '', //会员id
				invite_code: '', //推荐码

				totalNum: 0, //总数量
				totalPrice: 0, //总金额
				payType: '', //1微信 2支护宝

				goodsList: [], //商品列表

				outscan: false,//是否加载扫码组件
				keyArr: [],
				nvalue: '',
				auth_code: '', //付款码
				order_id: '',
				payFLag: true, //支付还是添加商品  true 添加商品 false 结算扫码

				isAJAX: false,
				headValue: '', //手动输入的值
				shop_id: '',
				
				phone:'',
				numList:[1,2,3,4,5,6,7,8,9],
			};
		},
		onLoad() {
			this.outscan = true
		},
		beforeDestroy() {
			this.outscan = false
		},
		deactivated() {
			this.outscan = false
		},

		onShow() {
			this.shop_id = uni.getStorageSync('shop_id')
		},

		methods: {
			monitorKeyboard(e) {
				if (e.key.length == 1) { // 字母和数字的长度都是1，所以只要字母和数字的按键，适配不同的设备
					this.keyArr.push(e.key)
				} else if (e.key == 'Enter') { // 监听到回车
					let newArr = [];
					this.nvalue = '';
					// 条码中可能会有大写字母和未定义的按键，所以要过滤出来
					newArr = this.keyArr.filter(item => item != 'Shift' && item != 'Enter' && item != 'Unidentified')
					if (this.isMemeber) {
						if (this.isAJAX) {
							return
						}
						this.isAJAX = true;
						let href = newArr.join("")

						let index = href.indexOf('membercode=') + 11
						this.invite_code = href.substring(index, index + 8)

						projectDiscount({
							invite_code: this.invite_code
						}).then((res) => {
							if (res.code == 1) {
								this.isAJAX = false;
								this.member_id = res.data.member_id;
								this.discount = res.data.discount * 1 / 10;
								this.isMemeber = false;
								this.$refs.inputMember.close();
							} else {
								this.isAJAX = false;
								tools.error(res.msg)
							}
						})
					} else {
						if (this.payFLag) {
							// 添加商品
							if (this.isAJAX) {
								return
							}
							this.isAJAX = true;
							this.nvalue = newArr.join("")
							this.getGoods();
						} else {
							// 支付扫码
							if (this.isAJAX) {
								return
							}
							this.isAJAX = true;
							this.auth_code = newArr.join("")
							OrderPay({
								order_id: this.order_id,
								pay_type: this.payType,
								auth_code: this.auth_code
							}).then((res) => {
								if (res.code == 1) {
									this.payFLag = true;
									this.isAJAX = false;

									uni.redirectTo({
										url: '/pages/index/success?money=' + this.totalPrice +
											"&discount=" + this.discount + '&invite_code=' + this
											.invite_code
									})
								} else {
									this.isAJAX = false;
									tools.error(res.msg)
								}
							})
						}
					}
					this.keyArr = [];
				}
			},

			// 获取商品
			getGoods() {
				GoodsInfo({
					goods_sn: this.nvalue
				}).then((res) => {
					if (res.code == 1) {
						this.isAJAX = false;
						if (this.goodsList.length == 0) {
							let obj = res.data;
							obj.num = 1;
							this.goodsList.push(obj)
							this.totalNum = 1;
							this.totalPrice = res.data.price;
						} else {
							let obj = res.data;
							let flag = true;
							this.goodsList.forEach((v, i) => {
								if (v.id == obj.id) {
									v.num += 1;
									this.totalNum += 1;
									this.totalPrice = (this.totalPrice * 1 + v.price * 1).toFixed(2);
									flag = false;
								}
							})
							if (flag) {
								obj.num = 1;
								this.goodsList.push(obj)
								this.totalNum += 1;
								this.totalPrice = (this.totalPrice * 1 + res.data.price * 1).toFixed(2);
							}
						}
						this.headValue = '';
					} else {
						this.isAJAX = false;
						this.headValue = '';
						tools.error(res.msg)
					}
				})
			},
			// 删除商品
			delGoods(i) {
				this.totalNum = this.totalNum - this.goodsList[i].num;
				this.totalPrice = (this.totalPrice * 1 - (this.goodsList[i].price * this.goodsList[i].num)).toFixed(2);
				this.goodsList.splice(i, 1)
			},
			// 减少
			reduce(i) {
				this.goodsList[i].num -= 1
				this.totalNum -= 1;
				this.totalPrice = (this.totalPrice * 1 - (this.goodsList[i].price * 1)).toFixed(2);
			},
			// 添加 
			add(i) {
				this.goodsList[i].num += 1
				this.totalNum += 1;
				this.totalPrice = (this.totalPrice * 1 + this.goodsList[i].price * 1).toFixed(2);
			},
			// 支付
			save() {
				if (this.goodsList.length > 0) {
					this.payFLag = false;
					this.$refs.popup.open('center')
				} else {
					this.payFLag = true;
					tools.error('请添加商品')
				}

			},
			// 选择支付类型
			selectTyep(type) {
				this.payType = type;
				if (this.isAJAX) {
					return
				}
				this.isAJAX = true;
				OrderCreate({
					goods: this.goodsList,
					discount: this.discount
				}).then((res) => {
					if (res.code == 1) {
						this.isAJAX = false;
						this.order_id = res.data.order_id;
						this.$refs.popup.close();
						this.$refs.countdown.timeFun();
						// 扫码弹窗
						this.$refs.popupCode.open('center')
					} else {
						tools.error(res.msg)
						this.isAJAX = false;
						this.payFLag = true;
						this.order_id = '';
						this.payType = '';
						this.$refs.popup.close();
					}
				})
			},
			// 取消支付
			closePay() {
				this.payFLag = true;
				this.order_id = '';
				this.payType = '';
				this.$refs.popup.close();
				this.$refs.popupCode.close();
			},
			// 手动输入
			headInput() {
				this.$refs.inputDialog.open();
			},
			// 手动输入获取商品
			dialogInputConfirm() {
				this.nvalue = this.headValue;
				this.getGoods();
			},

			// 选择会员登录方式
			openMenber() {
				this.$refs.memberType.open();	
			},
			closeMemberTypePop(){
				this.$refs.memberType.close();
			},
			
			// 扫码登录会员
			openPOP(){
				this.isMemeber = true;
				this.$refs.memberType.close();
				this.$refs.inputMember.open();
			},
			closePOP() {
				this.isMemeber = false;
				this.$refs.inputMember.close();
			},
			
			// 手机号登录会员
			openPhone(){
				this.$refs.memberType.close();
				this.$refs.inputPhone.open();
			},
			closePhone(){
				this.$refs.inputPhone.close();
			},
			closeALL(){
				this.phone = '';
			},
			inputPhoneNum(num){
				this.phone = this.phone + num + ''
			},
			delPhoneNum(){
				if(this.phone.length > 0){
					this.phone = this.phone.slice(0,-1)
				}
			},
			memberPhoneLogin(){
				if (this.isAJAX) {
					return
				}
				this.isAJAX = true;				
				projectDiscount({
					phone: this.phone
				}).then((res) => {
					this.isAJAX = false;
					if (res.code == 1) {
						this.phone = '';
						this.member_id = res.data.member_id;
						this.discount = res.data.discount * 1 / 10;
						this.$refs.inputPhone.close();
					} else {
						tools.error(res.msg)
					}
				})
			},
		},

	};
</script>


<style scoped lang="scss">
	.member-phone-input{
		width: 100%;
		height: 92rpx;
		background: #F4F4F4;
		border-radius: 25rpx;
		border: 2rpx solid #333333;
		line-height: 92rpx;
		box-sizing: border-box;
		padding: 0 100rpx 0 30rpx;
		position: relative;
		image{
			width: 40rpx;
			height: 40rpx;
			position: absolute;
			right: 20rpx;
			top: 25rpx;
		}
	}
	.phone-num-box{
		width: 32%;
		height: 100rpx;
		line-height: 100rpx;
		border: 1rpx solid #ccc;
		margin-bottom: 10rpx;
		border-radius: 20rpx;
	}
	
	.member-type-box-title{
		position: relative;
		image{
			position: absolute;
			top: 0;
			right: 0;
			width: 50rpx;
			height: 50rpx;
		}
	}
	.member-type-box{
		width: 600rpx;
		height: 300rpx;
		background-color: #fff;
		border-radius: 20rpx;
		box-sizing: border-box;
		padding: 24rpx;
		
		.member-type-box-icon{
			image{
				width: 100rpx;
				height: 100rpx;
				margin: 0 auto;
			}
		}
	}
	
	.member-pop-view {
		width: 100%;
		height: 100vh;
		background: #939394;
		
		.member-pop-phone-1{
			width: 100%;
		}
		.member-pop-phone-2{
			width: 100%;
			min-height: 600rpx;
			background-color: #fff;
			box-sizing: border-box;
			padding: 38rpx;
			border-radius: 20rpx 20rpx 0 0;
		}
		

		.member-pop-view-1 {
			width: 100%;
			height: 187rpx;
		}

		.member-pop-view-2 {
			background-color: #fff;
			box-sizing: border-box;
			padding: 38rpx;
			border-radius: 20rpx;

			.img-11 {
				width: 258rpx;
				height: 50rpx;
			}

			.img-close {
				width: 58rpx;
				height: 58rpx;
			}

			.yuan {
				width: 41rpx;
				height: 41rpx;
				border-radius: 50%;
				background: #1778FD;
				margin-right: 17rpx;
				text-align: center;
				line-height: 41rpx;
				font-size: 24rpx;
				font-weight: bold;
				color: #fff;
			}

			.bg-1 {
				width: 100%;
				height: 221rpx;
				background: #E8EFF9;
				border-radius: 25rpx;
			}

			.img-12 {
				width: 270rpx;
				;
				height: 210rpx;
			}

			.img-13 {
				width: 42rpx;
				;
				height: 42rpx;
			}
		}
	}

	.index-home {
		.no-img {
			width: 200rpx;
			height: 200rpx;
			margin: 30% auto 30rpx auto;
		}

		.box-1 {
			width: 100%;
			height: 150rpx;
			box-sizing: border-box;
			padding: 80rpx 0 0 24rpx;
			position: relative;

			.box-1-time {
				position: absolute;
				bottom: 20rpx;
				right: 20rpx;
			}

			image {
				width: 48rpx;
				height: 48rpx;
				margin-right: 10rpx;
			}
		}

		.list-box {
			background-color: #F2F3F5;
			box-sizing: border-box;
			padding: 17rpx 24rpx;

			.goods-box {
				width: 100%;
				height: 179rpx;
				background: #FFFFFF;
				border-radius: 17rpx;
				margin-bottom: 17rpx;
				box-sizing: border-box;
				padding: 25rpx;

				image {
					width: 129rpx;
					height: 129rpx;
					border-radius: 14rpx;
					margin-right: 16rpx;
				}

				.text-1 {
					width: 440rpx;
					font-size: 25rpx;
					margin-bottom: 40rpx;
				}

				.num-buttom {
					width: 50rpx;
					height: 50rpx;
					line-height: 50rpx;
					border-radius: 50%;
					background-color: #DAE9FF;
					color: #1778FD;
					font-weight: 600;
					text-align: center;
					font-size: 32rpx
				}

				.num-box {
					width: 110rpx;
					height: 50rpx;
					line-height: 50rpx;
					text-align: center;
					font-size: 33rpx;
					font-weight: 600;
				}
			}
		}

		.box-2-b {
			width: 100%;
			height: 83rpx;
			background: #E6E7E9;
			box-sizing: border-box;
			padding: 12rpx 23rpx;

			.box-2-shou {
				width: 177rpx;
				height: 58rpx;
				border-radius: 104rpx;
				background: #fff;
				margin-right: 20rpx;

				image {
					width: 25rpx;
					height: 25rpx;
					margin-right: 2rpx;
				}
			}
		}



		.box-2 {
			width: 100%;
			height: 150rpx;
			box-sizing: border-box;
			padding: 20rpx 23rpx;



			.to-save {
				margin-top: auto;
				width: 292rpx;
				height: 83rpx;
				line-height: 83rpx;
				background: linear-gradient(90deg, #4AB6FF 0%, #1778FD 100%);
				box-shadow: 0rpx 0rpx 4rpx 0rpx rgba(108, 168, 252, 0.64);
				border-radius: 104rpx;
			}
		}

	}

	.pop-view {
		width: 500rpx;
		min-height: 100rpx;
		background-color: #fff;
		border-radius: 20rpx;

		.pop-1 {
			box-sizing: border-box;
			height: 120rpx;
			width: 100%;
			text-align: center;
			line-height: 120rpx;
		}

		.pop-2 {
			box-sizing: border-box;
			padding: 0 50rpx;
		}

		.pop-view-1 {
			border-bottom: 1rpx solid #ccc;
		}
	}

	.code-view {
		width: 633rpx;
		height: 710rpx;
		background-image: url('@/static/img/code-bg.png');
		background-size: 100% 100%;
		box-sizing: border-box;
		padding: 62rpx 0 0 0;
		margin-bottom: 62rpx;

		image {
			width: 327rpx;
			height: 327rpx;
			margin: 50rpx auto 25rpx auto;
		}
	}

	.code-view-1 {
		text-align: center;
		margin: 0 auto;
		width: 223rpx;
		height: 57rpx;
		line-height: 57rpx;
		border-radius: 104rpx;
		border: 2rpx solid #fff;
		text-align: center;
		color: #fff;
		font-size: 32rpx;
	}
</style>