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 class="box-2-shou flex-justify-center align-items-center" @click="openMenber()">
				<image src="@/static/img/txm.png" mode=""></image>
				<view 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="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:'',//折扣
	  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:'',//手动输入的值
	  
	  
    };
  },
  onLoad() {
    this.outscan=true 
  },
  beforeDestroy() {
    this.outscan=false
  },
  deactivated() {
    this.outscan=false
  },
  
  mounted() {
	  
  },
  
  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("")
			const urlArr = href.split('?')
			const rightUrlArr = urlArr[1].split('#/')
			const queryObj = {}
			rightUrlArr[0].split('&').map((item)=> {
				const splitStr = item.split('=')
				return{
					key:splitStr[0],
					value:splitStr[1]
				}
			}).forEach((item)=>{
				queryObj[item.key]= item.value
			})
			if(urlArr.length >= 3){
				rightUrlArr[1]="?"+ urlArr[2]
			}
			this.invite_code = queryObj.memberCode
			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;
					this.closePOP();
				}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}).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(){
		// let href = "http://test-wapadopted.jhcs888.com/#/pages/index/index?memberCode=53913013";
		// const urlArr = href.split('?')
		// const rightUrlArr = urlArr[1].split('#/')
		// const queryObj = {}
		// rightUrlArr[0].split('&').map((item)=> {
		// 	const splitStr = item.split('=')
		// 	return{
		// 		key:splitStr[0],
		// 		value:splitStr[1]
		// 	}
		// }).forEach((item)=>{
		// 	queryObj[item.key]= item.value
		// })
		// if(urlArr.length >= 3){
		// 	rightUrlArr[1]="?"+ urlArr[2]
		// }
		// this.invite_code = queryObj.memberCode
		// 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;
		// 	}else{
		// 		this.isAJAX = false;
		// 		tools.error(res.msg)
		// 	}
		// })
		
		this.isMemeber = true;
		this.$refs.inputMember.open();
	},
	closePOP(){
		this.isMemeber = false;
		this.$refs.inputMember.close();
	},
	lookBigImg(list, index) {
		uni.previewImage({
			urls: list,
			current: index,
		})
	},
  },
  
};
</script>


<style scoped lang="scss">
	.member-pop-view{
		width: 100%;
		height: 100vh;
		background: #939394;
		.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;
				}
			}
		}
		
		
		
		.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>