扫码付款

pages.json

@@ -181,6 +181,8 @@
             "path" : "pages/checkstand/pay-qrcode",
             "style" :                                                                                    
             {
+				"navigationBarTextStyle": "white",
+				"navigationBarBackgroundColor": "#FE9644",
                 "navigationBarTitleText": "收款码",
                 "enablePullDownRefresh": false
             }

pages/checkstand/pay-qrcode.vue

@@ -122,11 +122,10 @@
 
 	.code-container{
 		background-color: #FFFFFF;
-		border-radius: 25rpx;
-		width: 90%;
+		border-radius: 16rpx;
 		// min-height: 900rpx;
-		min-height: 850rpx;
-		margin: 20rpx  5%;
+		min-height: 800rpx;
+		margin: 60rpx  20rpx;
 		.title{
 			border-radius: 25rpx 25rpx 0 0;
 			height: 100rpx;
@@ -140,7 +139,7 @@
 		
 		.footer{
 			width: 90%;
-			height: 200rpx;
+			height: 120rpx;
 			margin-left: 5%;
 			border-top: 1rpx dashed #dddddd;
 		}

pages/index/index.vue

@@ -109,6 +109,37 @@
 			</view>
 		</view>
 		
+		
+		<!-- 支付键盘 -->
+		<u-keyboard
+			default=""
+			ref="uKeyboard" 
+			mode="number" 
+			:mask="true" 
+			:mask-close-able="false"
+			:dot-enabled="true" 
+			v-model="show"
+			:confirm-btn="true"
+			:safe-area-inset-bottom="true"
+			:tooltip="false"
+			@change="onChange"
+			@backspace="onBackspace">
+			<view>
+				<view class="u-text-center u-padding-20 money">
+					<view v-if="money=='0'" class="" style="position: absolute;left: 80rpx;bottom: 20rpx;">
+						<text style="color: #909399;font-size: 24rpx;">请输入付款金额</text>
+					</view>
+					<text>{{money}}</text>
+					<text class="u-font-20 u-padding-left-10">元</text>
+					<view class="u-padding-10 close" data-flag="false" @tap="close">
+						<u-icon name="close" color="#333333" size="28"></u-icon>
+					</view>
+				</view>
+				
+				<u-button @click="inputConfirm" plain :ripple="true" ripple-bg-color="rgba(25, 190, 107,.4)">确认</u-button>
+			</view>
+		</u-keyboard>
+		
 		<u-select @confirm="shopConfirm" v-model="shopShow" value-name="id" label-name="name" :list="shopList"></u-select>
 	</view>
 </template>
@@ -117,6 +148,8 @@
 	export default {
 		data() {
 			return {
+				show:false,
+				money:"0",
 				scanNotify:{scan: false,scanMessage:'扫描错误，请稍后重试！' },
 				
 				//下拉选择商铺
@@ -243,27 +276,73 @@
 			},
 			operate(index){
 				if (index==0) {
-					this.scanCode()
+					this.show=true
 				}else if (index==1) {
 					this.$jump('/pages/checkstand/pay-qrcode')
+				}else if (index==2) {
+					this.$jump('/pages/card/card')
 				}
-				
 			},
 			//扫描二维码
+			onChange(val){
+				if (this.money=='0' && val!='.') {
+					this.money=val
+					return
+				}
+				console.log(typeof this.money);
+				console.log(typeof val);
+				this.money += val.toString()
+			},
+			onBackspace(e){
+				if(this.money.length>0 &&this.money!='0'){
+					this.money = this.money.substring(0,this.money.length-1);
+				}else{
+					this.money='0'
+				}
+			},
+			inputConfirm(){
+				if (this.$isEmpty(this.money)) {
+					this.$u.toast('请输入收款金额')
+					return
+				}
+				if (!this.$verify.isMoney(this.money)) {
+					this.$u.toast('请输入正确的收款金额')
+					return
+				}
+				this.show=false
+				this.scanCode()
+			},
+			close(){
+				this.money='0'
+				this.show=false
+			},
 			scanCode(){
 				const _this = this;
 				uni.scanCode({
 				    success: function (res) {
-						console.log(res,1236456);
-						_this.jump('/pages/checkstand/index?shopId='+res.result)
+						_this.payBefore(res.result)
 				    },
 					fail: (res) => {
 						if(res.errMsg!='scanCode:fail cancel'){
-							this.scanNotify = {scan: true,scanMessage: res.errMsg};
+							_this.scanNotify = {scan: true,scanMessage: res.errMsg};
 						}
 					}
 				});
 			},
+			async payBefore(secret){
+				let expireTime=this.$dateTime.getExpireTime(5)
+				let params={
+					shopId:this.vuex_shopId,
+					money:this.money,
+					billsTitle:'用户支付',
+					expireTime,
+					appId:this.$global.wxParams.clientAppId,
+					secret,
+					type:2
+				}
+				let resp=await this.$api.shop.payBefore(params)
+				console.log(resp);
+			}
 		}
 	}
 </script>
@@ -419,4 +498,18 @@
 		padding:8rpx 10rpx 8rpx 35rpx;
 		background-image: linear-gradient(to right,#FFD67B,#F99200);
 	}
+	
+	.money{
+		font-size: 80rpx;
+		color: $u-type-warning;
+		position: relative;
+		
+		.close{
+			position: absolute;
+			top: 20rpx;
+			right: 20rpx;
+			line-height: 28rpx;
+			font-size: 28rpx;
+		}
+	}
 </style>

utils/dateTime.js

@@ -34,4 +34,12 @@ dateTime.createDate = (value)=>{
   return new Date(date)
 } 
 
+dateTime.getExpireTime=(value)=>{
+	let now=new Date()
+	let min=now.getMinutes()
+	now.setMinutes(min + value)
+	let expireTime=dateTime.format(now)
+	return expireTime
+}
+
 export default dateTime

utils/global.js

@@ -5,6 +5,7 @@ let global = {
 	TRANSFORM_PARAMS:'95963',
 	
 	wxParams: {
+		clientAppId:'wx9ad53e8c83ae1a51',//用户端appid
 		APPID: 'wx2db9c41e85d5a4fc', //appid
 	},
 }

utils/verify.js

@@ -6,6 +6,12 @@ let verify = {}
 verify.isEmail=value=>{
 	return /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/.test(value);
 }
+
+verify.isMoney=value=>{
+	return /^(([1-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/.test(value)
+}
+
+
 /**
  * 验证手机格式
  */