线上支付

common/config/config.js

@@ -2,7 +2,7 @@ let URL_CONFIG = ""
 if(process.env.NODE_ENV === 'development'){
     // 开发环境
 	// URL_CONFIG = 'http://192.168.1.22:8008'	 //裴裴联调地址
-	// URL_CONFIG = 'http://192.168.1.26:8008'	 //超超联调地址
+	// URL_CONFIG = 'https://spi.caimei365.com'	 //超超联调地址
     URL_CONFIG = 'https://spi-b.caimei365.com'//采美测试地址
 }else{
     // 生产环境

components/cu-custom.vue

@@ -1,7 +1,7 @@
 <template name="headerNavbar">
 	<!-- 自定义导航栏 -->
 	<view class='navbar-wrap' :style="{height:CustomBar+'px',paddingTop:StatusBar+'px'}"> 
-	  	<view class="navbar-text" :style="{lineHeight:(CustomBar - StatusBar)+'px;',fontSize:fontSizeSetting+'px;',paddingLeft:navbarData.textLeft ? capsule.height+'px' : ''}" :class="platformClass">
+	  	<view class="navbar-text" :style="{lineHeight:(CustomBar - StatusBar)+'px;',fontSize:fontSizeSetting+'px;',paddingLeft:navbarData.textLeft ? '' : capsule.height+'px'}" :class="platformClass">
 	    	{{navbarData.title ? navbarData.title : " "}}
 	  	</view>
 	  	<view class="navbar-icon" v-if="navbarData.showCapsule == 1 ? true : false" 

components/keyboard/keyboard.vue

@@ -1,266 +1,267 @@
-<template>
-  <view class="modal" :animation="animationData1" @touchmove.stop.prevent>
-    <view class=" content-wrap" :animation="animationData2">
-      <view class="content-header">
-        <view class="cancel-btn" @click="close">取消</view>
-        <view class="input-contant">{{ inputValue.join("") }}</view>
-        <view class="confirm-btn" @click="confirm">完成</view>
-      </view>
-      <view class="key-box">
-        <view
-          :class="{
-            'handel-btn': ['.', '删除', ''].includes(item),
-            'active-btn': activeKey === item,
-            'active-handel-btn':
-              activeKey === item && ['.', '删除'].includes(item),
-          }"
-          v-for="(item, index) in keyboardList"
-          :key="index"
-          @click="setValue(item)"
-          >{{ item }}</view
-        >
-      </view>
-    </view>
-  </view>
+<template>		
+	<view class='keyboard' @click.stop='_handleKeyPress'>
+	    <view class='key-row'>
+	        <view class='key-cell cell_b' data-num='7'>7</view>
+	        <view class='key-cell cell_b' data-num='8'>8</view>
+	        <view class='key-cell cell_b' data-num='9'>9</view>
+			<view class='key-cell cell_b' data-num='-1'></view>
+	    </view>
+	    <view class='key-row'>
+	        <view class='key-cell cell_b' data-num='4'>4</view>
+	        <view class='key-cell cell_b' data-num='5'>5</view>
+	        <view class='key-cell cell_b' data-num='6'>6</view>
+	        <view class='key-cell cell_b' data-num='-1'></view>
+	    </view>
+	    <view class='key-row'>
+	        <view class='key-cell cell_b' data-num='1'>1</view>
+	        <view class='key-cell cell_b' data-num='2'>2</view>
+	        <view class='key-cell cell_b' data-num='3'>3</view>
+	        <view class='key-cell cell_b' data-num='-1'></view>
+	    </view>
+		<view class="key-zero-and-point">
+		<view class="a cell_b zero"  data-num='0'>0</view>
+		<view class="a cell_b point"  data-num='.'>.</view>
+		 </view>
+		 
+		<view  @touchstart="touchstart" @touchend="touchend" data-num='D' class="key-confirm2">
+			<text data-num='D'>C</text>
+		</view>
+		
+	    <view class='key-confirm' :style="{'background':btnColor}" data-num='S'>
+			<view data-num='S' class="">
+				<view data-num='S' class="title">{{title}}</view>
+			</view>
+		</view>
+	</view>
 </template>
-<script>
-export default {
-  data() {
-    return {
-      animationData1: {},
-      animationData2: {},
-      activeKey: "",
-      inputValue: [],
-    };
-  },
-  props: {
-    visible: {
-      type: Boolean,
-      default: false,
-    },
-    //是否为带小数的数字键盘
-    decimals: {
-      type: Boolean,
-      default: true,
-    },
-    //小数点前整数的位数
-    maxLength: {
-      type: [Number, String],
-      default: 9,
-    },
-    //小数点后的位数
-    pointLength: {
-      type: [Number, String],
-      default: 2,
-    },
-    //最大的值
-    max: {
-      type: [Number, String],
-      default: 999999999,
-    },
-    //最小的值
-    min: {
-      type: [Number, String],
-      default: 0,
-    },
-  },
-  computed: {
-    keyboardList() {
-      return this.decimals
-        ? ["1", "2", "3", "4", "5", "6", "7", "8", "9", ".", "0", "删除"]
-        : ["1", "2", "3", "4", "5", "6", "7", "8", "9", "", "0", "删除"];
-    },
-  },
-  watch: {
-    visible(val) {
-      this.inputValue = [];
-      if (val) this.enterAnimate();
-      else this.leaveAnimate();
-    },
-  },
-  methods: {
-    setValue(data) {
-      this.activeKey = data;
-      let timer = setTimeout(() => {
-        this.activeKey = "-";
-        clearTimeout(timer);
-      }, 100);
-
-      if (
-        !data ||
-        (data !== "删除" &&
-          this.inputValue.includes(".") &&
-          this.inputValue.join("").split(".")[1].length === this.pointLength)
-      )
-        return false;
-
-      if (
-        this.inputValue.length === 1 &&
-        this.inputValue[0] === "0" &&
-        !["删除", "."].includes(data)
-      ) {
-        return (this.inputValue = [data]);
-      }
 
-      if (data !== "删除") {
-        if (this.inputValue.includes(".")) {
-          if (
-            this.inputValue.join("").split(".")[0].length === this.maxLength
-          ) {
-            return false;
-          }
-        } else if (this.inputValue.length === this.maxLength) {
-          return false;
-        }
-      }
+<script>
+	export default{
+		name:"keyBoard",
+		props:{
+			title:{
+				default:'确认',
+				type:String
+			},
+			btnColor:{
+				default:'green',
+			}
+		},
+		data(){
+			return {
+				money:'',
+				Cdel:'',
+				Time:''
+			}
+		},
+		
+		watch:{
+			money(val){
+				this.$emit('update:money',val);			
+			}
+		},
 
-      if (data === "删除") {
-        return this.inputValue.length && this.inputValue.pop();
-      }
-      if (data === ".") {
-        if (!this.inputValue.length || this.inputValue.includes("."))
-          return false;
-      }
-      this.inputValue.push(data);
-    },
-    close() {
-      this.$emit("update:visible", false);
-      this.$emit("close");
-    },
-    confirm() {
-      let result = Number(this.inputValue.join(""));
-      if (result < this.min) {
-        uni.showToast({
-          title: `最小值为${this.min}`,
-          duration: 1500,
-          icon: "none",
-        });
-        return;
-      } else if (result > this.max) {
-        uni.showToast({
-          title: `最大值为${this.max}`,
-          duration: 1500,
-          icon: "none",
-        });
-        return;
-      }
-      this.$emit("confirm", result);
-      this.close();
-    },
-    enterAnimate() {
-      this.animation1 = uni.createAnimation();
-      this.animation2 = uni.createAnimation();
-      this.animation1.backgroundColor("rgba(0,0,0,0.5)").step({
-        duration: 500,
-        timingFunction: "ease",
-      });
-      this.animation2.translateY(0).step({
-        timingFunction: "ease-out",
-        duration: 500,
-      });
-      this.animationData1 = this.animation1.export();
-      this.animationData2 = this.animation2.export();
-    },
-    leaveAnimate() {
-      this.animation1 = uni.createAnimation();
-      this.animation2 = uni.createAnimation();
-      this.animation1.backgroundColor("rgba(0,0,0,0)").step({
-        duration: 500,
-        timingFunction: "ease",
-      });
-      this.animation2.translateY(500).step({
-        timingFunction: "ease-out",
-        duration: 500,
-      });
-      this.animationData1 = this.animation1.export();
-      this.animationData2 = this.animation2.export();
-    },
-  },
-};
+		methods : {
+			touchstart(){
+				 this.Time=setInterval(()=>{
+						console.log(this.money);
+						if(this.money==''){
+							clearInterval();
+						}
+						this.money = this.money.substring(0,this.money.length - 1);
+					},200)
+			},
+			touchend(){
+				clearInterval(this.Time);
+			},
+			//处理按键
+			_handleKeyPress(e) {
+				let num = e.target.dataset.num;
+				//不同按键处理逻辑
+				// -1 代表无效按键，直接返回
+				if (num == -1) return false;
+				switch (String(num)) {
+					//小数点
+					case '.':
+						this._handleDecimalPoint();
+						break;
+					//删除键
+					case 'D':
+						this.$parent.payAmount = ''
+						this._handleDeleteKey();
+						break;
+					//清空键
+					case 'C':
+						this._handleClearKey();
+						break;
+					//确认键
+					case 'S':
+						this._handleConfirmKey();
+						break;
+					default:
+						this._handleNumberKey(num);
+						break;
+				}
+			},
+			//处理小数点函数
+			_handleDecimalPoint() {
+				//如果包含小数点，直接返回
+				if (this.money.indexOf('.') > -1) return false;
+				//如果小数点是第一位，补0
+				if (!this.money.length)
+					this.money = '0.';
+				//如果不是，添加一个小数点
+				else
+					this.money = this.money + '.';
+			},
+			//处理删除键
+			_handleDeleteKey() {
+				let S = this.money;
+				//如果没有输入，直接返回
+				if (!S.length) return false;
+				//否则删除最后一个
+				this.money = S.substring(0, S.length - 1);
+			},
+			
+			//处理清空键
+			_handleClearKey() {
+			
+				this.money = '';
+			},
+			
+			//处理数字
+			_handleNumberKey(num) {
+				if(this.money.length==10){
+					return
+				}
+				let S = this.money;
+				//如果有小数点且小数点位数不小于2
+				if ( S.indexOf('.') > -1 && S.substring(S.indexOf('.') + 1).length < 2)
+					this.money = S + num;
+				//没有小数点
+				if (!(S.indexOf('.') > -1)) {
+					//如果第一位是0，只能输入小数点
+					if (num == 0 && S.length == 0)
+						this.money = '0.';
+					else {
+						if (S.length && Number(S.charAt(0)) === 0) return;
+						this.money = S + num;
+					}
+				}
+			},
+			
+			//提交
+			_handleConfirmKey() {	
+				let S = this.money;
+				//未输入
+				if (!S.length||S==0){
+					 uni.showToast({
+								      title: '请输入正确的数值',
+								       icon:'none',
+								       duration: 1000
+								     });
+					return false;
+				}
+				//将 8. 这种转换成 8.00
+				if (S.indexOf('.') > -1 && S.indexOf('.') == (S.length - 1))
+					S = Number(S.substring(0, S.length - 1)).toFixed(2);
+				//保留两位
+				S = Number(S).toFixed(2);
+				this.$emit('confirmEvent',S);    //提交参数
+			}
+		}
+	}
 </script>
 
-<style lang="scss" scoped>
-.modal {
-  position: fixed;
-  bottom: 0;
-  width: 100%;
-  background: rgba(0, 0, 0, 0);
-  z-index: 9999;
-
-  .content-wrap {
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    background: #fff;
-    box-sizing: border-box;
-    transform: translateY(100%);
-
-    .content-header {
-      width: 100%;
-      height: 80upx;
-      background: rgba(255, 255, 255, 1);
-      float: right;
-
-      .input-contant {
-        text-align: center;
-        line-height: 80upx;
-        font-size: 40upx;
-      }
-
-      .cancel-btn {
-        padding-left: 30upx;
-        color: #147ff2;
-        line-height: 80upx;
-        position: absolute;
-        top: 0;
+<style lang="less" scoped>
+	.cell_b{
+		border-right: 1px solid #d5d5d6;
+		border-bottom: 1px solid #d5d5d6;
+	}
+		
+    .key-container {
+        width: 100%;
+        display: flex; 
+        flex-direction: column;
+    }
+ 
+    .keyboard {
+		flex: 1;
+        position: fixed;
+        bottom: 0;
         left: 0;
-      }
-
-      .confirm-btn {
-        padding-right: 30upx;
-        color: #147ff2;
-        line-height: 80upx;
-        position: absolute;
-        top: 0;
-        right: 0;
-      }
+        height: 600rpx;
+        width: 100%;
+		
+		background: #FFFFFF;
     }
-
-    .key-box {
-      margin-top: 60upx;
-      display: flex;
-      flex-flow: wrap;
-      width: 100%;
-
-      view {
-        width: 251upx;
-        height: 100upx;
-        border: 1upx solid rgb(235, 237, 240);
-        box-sizing: border-box;
+    .keyboard .key-row {
+        display: flex;
+        display: -webkit-flex;
+        position: relative;
+        height: 150rpx;
+        line-height: 150rpx;
+		
+		
+    }
+ 
+    .keyboard .key-cell {
+        flex: 1;
+        -webkit-box-flex: 1;
+		font-size: 60upx;
+		
+		display: flex;
+		justify-content: center;
+		align-items: center;
+    }
+  
+    .keyboard .key-confirm {
+        position: absolute;
         text-align: center;
-        line-height: 100upx;
-        font-size: 40upx;
-        font-weight: bold;
-        margin: 0 -1upx -1upx 0;
-
-        &:hover {
-          z-index: 1;
-          border: 1upx solid rgb(235, 237, 240);
-        }
-      }
-
-      .handel-btn {
-        background: rgb(235, 237, 240);
-        font-size: 30upx;
-      }
-      .active-btn {
-        background: rgb(235, 237, 240);
-      }
-      .active-handel-btn {
-        background: rgb(252, 252, 252);
-      }
+        height: 450rpx;
+        width: 25%;
+        line-height: 450rpx;
+		color: #FFFFFF;
+        z-index: 5;
+        right: 0;
+        bottom: 0;
+		
+		display:flex;
+		justify-content: center;
+		align-items: center;
     }
-  }
-}
+	
+	.keyboard .key-confirm2 {
+	    position: absolute;
+	    height: 150rpx;
+	    width: 25%;
+	    line-height: 150rpx;
+	    z-index: 9999;
+	    right: 0;
+		top: 0;
+		
+			
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+	.key-zero-and-point{
+		 display: flex;height: 150rpx;justify-content: center;align-items: center;width:75%;font-size: 60upx;
+		 .zero{
+			  display: flex;justify-content: center;align-items: center;width: 67.66%;font-size: 60upx;text-align: center;height: 100%;
+		 }
+		 .point{
+			  display: flex;justify-content: center;align-items: center;width: 33.33%;font-size: 60upx;text-align: center;height: 100%;
+		 }
+	}
+ .key-cell:active{
+	            color: white;  
+	            background: black;  //黑色
+	            opacity: 0.1;    //这里重要，就是通过这个透明度来设置
+	        }
+.a:active,.key-confirm2:active{
+				            color: white;
+				            background: black;  //黑色
+				            opacity: 0.1;    //这里重要，就是通过这个透明度来设置
+				        }
 </style>

pages/user/order/order-pay.vue

@@ -18,8 +18,8 @@
 						<view class="bot-title"><text>本次支付金额</text></view>
 						<view class="bot-input">
 							<text>￥</text>
-							<view class="input" @tap="openKeyBoard('idCard')">
-								<text class="text" v-if="passStr>0">{{passStr}}</text>
+							<view class="input" @click.stop="focusInput">
+								<text class="text" v-if="payAmount>=0">{{payAmount}}</text>
 								<text class="none" v-else>输入金额不能大于待付金额</text>
 							</view>
 			<!-- 				<input class="" 
@@ -72,22 +72,27 @@
 			</view>
 		</view>
 		<!-- 数字键盘 -->
-		<keyboard-package ref="idCard" type="number"  @onInput="onInput" @onDelete="onDelete" @onConfirm="onConfirm"/>
+		<keyboard v-if="showDigitKeyboard"  
+				  @confirmEvent="confirmEvent" 
+				  :money.sync="payAmount" 
+				  btn-color='linear-gradient(135deg,rgba(242,143,49,1) 0%,rgba(225,86,22,1) 100%)' 
+				  title="完成">
+		</keyboard>
 	</view>
 </template>
 
 <script>
 	import authorize from '@/common/config/authorize.js'
-	import keyboardPackage from "@/components/keyboard-package/keyboard-package.vue"
+	import keyboard from "@/components/keyboard/keyboard.vue"
 	import { PayOrderCheckoutCounter,WeChatMiniWxPay } from "@/api/order.js"
 	export default{
-		components:{
-			keyboardPackage
-		}, 
+		components: {
+			keyboard
+		},
 		data(){
 			return{
 				orderID:'',
-				payableAmount:0,
+				payableAmount:2222,
 				receiptAmount:0,
 				balanceAmount:0,
 				payAmount:0,
@@ -96,7 +101,7 @@
 					showCapsule:1, // 是否显示左上角图标  1表示显示  0表示不显示,
 					showSearch: 0,
 					title: '收银台',  // 导航栏 中间的标题
-					textLeft:true
+					textLeft:this.$store.state.isIphoneX
 				},
 				idCardList:[],
 				isIphoneX:this.$store.state.isIphoneX,
@@ -105,12 +110,11 @@
 				isShowTip:false,
 				buttonText:'去支付',
 				discernReceipt:[],
-				type:'number'
+				showDigitKeyboard:false
 			}
 		},
 		onLoad(option) {
-			this.initData(option)
-			
+			// this.initData(option)
 		},
 		computed:{
 			passStr(){
@@ -174,45 +178,28 @@
 						this.$util.msg(error.msg,2000)
 					})
 				})
-				
-			},
-			openKeyBoard(key) {
-				this.type=key;
-				this.$refs[key].open();
-			},
-			onInput(val){
-				switch(this.type){
-					case 'idCard':
-						this.idCardList.push(val);
-						break;
-				}
-			},
-			onDelete(){
-				switch (this.type){
-					case 'idCard':
-						this.idCardList.pop();
-						break;
-				}
 			},
-			onConfirm(){
-				uni.showToast({
-					title:'完成输入！',
-					duration:2000,
-					icon:'none'
-				})
+			focusInput(){
+				this.showDigitKeyboard = true
 			},
-			close(){
-				this.$refs[this.type].close();
+			confirmEvent(value){
+				//点击键盘完成的回调函数
+				console.log(value)
+				this.chechValue(value)
+				this.showDigitKeyboard = false
 			},
 			chechValue(value){
 				console.log(parseInt(value))
 				if(value == 0){
+					console.log('1111',value)
 					this.payAmount = 0
 					this.balanceAmount = this.payableAmount
 				}else if(parseInt(value)>this.payableAmount){
+					console.log('2222',value)
 					this.payAmount = this.payableAmount
 					this.balanceAmount = this.payableAmount - this.payAmount
 				}else{
+					console.log('33333',value)
 					this.payAmount = value
 					this.balanceAmount = this.payableAmount - this.payAmount
 				}