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>
		
		
	 <!-- 3 -->
	  <view class="box-2">
		  <view class="">
		  	{{msgTest}}
		  </view>
		<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="flex-justify-space">
			<view class="">
				<view class="fs-30 fc-3">共{{totalNum}}件</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">{{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>
	</view>
</template>

<script>
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 {
	  totalNum:0,//总数量
	  totalPrice:0,//总金额
      payType:'',//1微信 2支护宝
	  
	  goodsList:[],//商品列表
	 
      outscan:false,
      keyArr:[],
      nvalue:'',
	  auth_code:'',//付款码
	  order_id:'',
	  payFLag:true,//支付还是添加商品  true 添加商品 false 结算扫码
	  
	  isAJAX:false,
	  
	  headValue:'',//手动输入的值
	  
	  msgTest:'',
	  
    };
  },
  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.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)=>{
				this.msgTest = res
				if(res.code == 1){
					this.payFLag = true;
					this.isAJAX = false;
					uni.redirectTo({
						url:'/pages/index/success?money=' + this.totalPrice
					})
				}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();
	},
  },
  
};
</script>


<style scoped lang="scss">
	.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{
			width: 100%;
			height: 220rpx;
			box-sizing: border-box;
			padding: 20rpx 16rpx;
			.box-2-shou{
				width: 177rpx;
				height: 58rpx;
				border-radius: 104rpx;
				border: 2rpx solid #CCCCCC;
				margin: 0 0 20rpx auto;
				image{
					width: 25rpx;
					height: 25rpx;
				}
			}
			
			.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>