add code of pay

.gitignore

@@ -16,6 +16,7 @@
 /serialport/.cxx/ndkBuild
 /.idea
 /uniapp_project_code/checkoutPad_uni_app/unpackage
+uniapp_project_code/.hbuilderx/launch.json
 
 /app/src/main/assets/apps/__UNI__3B4D40B/
 uniplugin_padprinter/build/

uniapp_project_code/.hbuilderx/launch.json

@@ -4,10 +4,16 @@
     "version" : "0.0",
     "configurations" : [
         {
-            "app-plus" : {
+        	"app-plus" : 
+        	{
         		"launchtype" : "local"
         	},
-            "default" : {
+        	"default" : 
+        	{
+        		"launchtype" : "local"
+        	},
+        	"mp-weixin" : 
+        	{
         		"launchtype" : "local"
         	},
         	"type" : "uniCloud"

uniapp_project_code/src/components/index/keyboard/view_keyboard.vue

@@ -1,7 +1,7 @@
 <template>
 	<view class="i-keyboard">
-		<view class="num-btn" v-for="i in 11"
-			:class="[getNumBtnClass(i),{'active-value':(activeValue == i) }]" @click="clickKeyboard(i)">
+		<view class="num-btn" v-for="i in 11" :class="[getNumBtnClass(i),{'active-value':(activeValue == i) }]"
+			@click="clickKeyboard(i)">
 			<text class="txt" v-if="(i<11)">{{getNumClick(i)}}</text>
 			<image class="img" v-else src="/static/index/del_btn.png" mode="widthFix" />
 		</view>
@@ -68,7 +68,6 @@
 </script>
 
 <style lang="scss" scoped>
-
 	.i-keyboard {
 		// width: 232.69rpx;
 		// height: 317.53rpx;
@@ -124,5 +123,4 @@
 			}
 		}
 	}
-	
 </style>

uniapp_project_code/src/components/index/list_item.nvue

@@ -48,8 +48,10 @@
     height: 125rpx;
     @include fls(space-between);
     flex-direction: row;
-    // background: #F5F7F8;
-    background: #FFFFFF;
+    background: #F5F7F8;
+    // background: #FFFFFF;
+    // background: lightgray;
+    background: #eaeaea;//真机上颜色不明显,需要加深
 
     .buy-item-left {
         @include fls(center);

uniapp_project_code/src/components/index/view_header.nvue

@@ -1,8 +1,8 @@
 <template>
-    <view class="header-box">
+	<view class="header-box" :style="[{ background: props.backgroundCustom }, getBorderStyle]">
 		<view class="video-tip">
 			<image class="v-image" src="/static/index/camera_icon.png" mode="widthFix" />
-            <text class="v-text">您已进入视频覆盖区</text>
+			<text class="v-text">您已进入视频覆盖区{{ props.backgroundCustom }}</text>
 		</view>
 		<view class="cancel-button" @click="handle_closeStandby">
 			<text class="v-text"> 取消交易</text>
@@ -12,7 +12,26 @@
 
 <script setup>
 //触发自定义事件
+import { defineEmits, defineProps, computed } from 'vue'
 const emits = defineEmits(['closeStandby'])
+const props = defineProps({
+	backgroundCustom: {
+		type: String,
+		default: "#F5F7F8"
+	},
+	needBorder: {
+		type: Boolean,
+		default: true
+	}
+})
+
+const getBorderStyle = computed(() => {
+	if (props.needBorder) {
+		return "border-bottom: 1rpx solid #F5F7F8;"
+	} else {
+		return "border-bottom:none;"
+	}
+})
 
 const handle_closeStandby = () => {
 	emits("closeStandby", "false")
@@ -22,22 +41,22 @@
 <style lang="scss" scoped>
 .header-box {
 	z-index: 5;
-    padding: 11.11rpx 17.36rpx;
+	padding: 11.11rpx 0;
 	height: 79.17rpx;
 	width: 750rpx;
 	@include ctf(space-between);
 	flex-direction: row;
-    background: #F5F7F8;
 	border-bottom: 1rpx solid #F5F7F8;
-}
 
 	.video-tip {
 		@include ctf(flex-start);
 		flex-direction: row;
+		margin-left:  17.36rpx;
 		.v-image {
 			width: 70.03rpx;
 			height: 54.17rpx;
 		}
+
 		.v-text {
 			margin-left: 16rpx;
 			font-weight: 400;
@@ -52,11 +71,13 @@
 		height: 51.39rpx;
 		border: 0.69rpx solid #999999;
 		border-radius: 6.94rpx;
+		margin-right:  17.36rpx;
 		.v-text {
-		 @include flcw(33.33upx, 46.53upx, #fff, 500);
+			// @include flcw(33.33upx, 46.53upx, #fff, 500);
 			font-weight: 500;
 			font-size: 16.67rpx;
 			color: #999999;
 		}
 	}
+}
 </style>

uniapp_project_code/src/components/pay/paying.vue

@@ -0,0 +1,169 @@
+<template>
+	<view class="paying-box">
+
+		<text class="p-text">支付金额</text>
+
+		<text class="p-total">￥{{props.payTotal||"0.00"}}</text>
+		
+		<view class="p-zhichi">
+			<view class="p-line"></view>
+			<text class="p-words">支持以下付款方式</text>
+			<view class="p-line"></view>
+		</view>
+
+		<view class="p-icons">
+			<image class="p-image-pay-icon" src="/static/pay/wx-icon.png" mode="widthFix" />
+			<image class="p-image-pay-icon" src="/static/pay/zfb-icon.png" mode="widthFix" />
+		</view>
+
+		<image class="p-image-pay-picture" src="/static/pay/pay-picture.png" mode="widthFix" />
+
+		<text class="p-tips">请将付款码对准右下方扫码口</text>
+
+		<view class="p-btn" @click="handle_clickCard">
+			<image class="pb-image" src="/static/pay/pay-vip-icon.png" mode="aspectFit" />
+			<text class="pb-text">储值卡支付</text>
+		</view>
+
+
+		<view class="p-user">
+			<text class="p-txt">猫星人（18316553589）</text>
+		</view>
+	</view>
+
+</template>
+
+<script setup>
+	//触发自定义事件
+	const emits = defineEmits(['clickVipCard'])
+	const props = defineProps({
+		payTotal: {
+			type: Number,
+			default: 0
+		},
+	})
+
+	const handle_clickCard = () => {
+		console.log("handle_clickCard")
+		emits("clickVipCard", "false")
+	}
+</script>
+
+<style lang="scss" scoped>
+	.paying-box {
+		width: 750rpx;
+		// height: 500rpx;
+		@include ctf(center);
+		flex-direction: column;
+
+		.p-text {
+			margin-top: 161rpx;
+			font-weight: 600;
+			font-size: 22.22rpx;
+			color: #1A1A1A;
+
+		}
+	
+	.p-total {
+			margin-top: 30.67rpx;
+			font-weight: 600;
+			font-size: 55.56rpx;
+			color: #1A1A1A;
+		}
+		
+		.p-zhichi{
+			margin-top: 132.67rpx;
+			@include ctf(center);
+			flex-direction: row;
+			.p-line{
+				margin: 0 37.5rpx;
+				width: 200rpx;
+				height: 2rpx;
+				background: #E8E8E8;
+			}
+			.p-words {
+				font-weight: 700;
+				font-size: 22.22rpx;
+				color: #1A1A1A;
+				display: block;
+			}
+		}
+
+
+		.p-icons {
+			margin-top: 19.67rpx;
+			@include ctf(center);
+			flex-direction: row;
+
+			// width: 750rpx;
+			.p-image-pay-icon {
+				width: 41.67rpx;
+				height: 41.67rpx;
+				margin: 0 9rpx;
+			}
+		}
+
+		.p-image-pay-picture {
+			margin-top: 68rpx;
+			width: 138.89rpx;
+			height: 290.97rpx;
+		}
+
+		.p-tips {
+			margin-top: 50rpx;
+			font-weight: 800;
+			font-size: 22.22rpx;
+			color: #1A1A1A;
+		}
+
+		.p-btn {
+			margin-top: 107rpx;
+			@include ctf(center);
+			flex-direction: row;
+			width: 240.97rpx;
+			height: 81.94rpx;
+			background: #009874;
+			box-shadow: 0 0.69rpx 20.83rpx 0 #00987430;
+			border-radius: 13.89rpx;
+
+			.pb-image {
+				width: 41.9rpx;
+				height: 31.25rpx;
+			}
+
+			.pb-text {
+				margin-left: 17rpx;
+				font-weight: 800;
+				font-size: 22.22rpx;
+				color: #FFFFFF;
+			}
+		}
+
+		.p-user {
+			margin-top: 92rpx;
+			margin-left: 67rpx;
+			margin-bottom: 92rpx;
+			width: 750rpx;
+			.p-txt {
+				font-weight: 400;
+				font-size: 22.22rpx;
+				color: #999999;
+			}
+		}
+	}
+
+	.cancel-button {
+		@include ctf(center);
+		width: 131.94rpx;
+		height: 51.39rpx;
+		border: 0.69rpx solid #999999;
+		border-radius: 6.94rpx;
+
+		.v-text {
+			@include flcw(33.33upx, 46.53upx, #fff, 500);
+			font-weight: 500;
+			font-size: 16.67rpx;
+			color: #999999;
+		}
+	}
+</style>

uniapp_project_code/src/components/pay/success.vue

@@ -0,0 +1,220 @@
+<template>
+	<view class="success-box">
+		<view class="s-bg"></view>
+
+		<view class="s-header">
+			<view class="video-tip">
+				<image class="v-image" src="/static/index/camera_icon.png" mode="widthFix" />
+				<text class="v-text">您已进入视频覆盖区</text>
+			</view>
+			<!-- <view class="cancel-button" @click="handle_closey">
+				<text class="v-text"> 取消交易</text>
+			</view> -->
+		</view>
+
+		<view class="s-content">
+			<view class="sc-title">
+				<view class="sc-success">
+					<image class="sc-check-icon" src="/static/pay/check-icon.png" mode="acepectFit" />
+					<view>支付成功</view>
+				</view>
+				<view class="sc-total">￥68.60</view>
+			</view>
+			<text class="sc-num">共 <text>15</text> 件商品</text>
+			<text class="sc-tip-1">请领取小票，期待下次光临！</text>
+
+			<image class="sc-print-img" src="/static/pay/print-img.png" mode="acepectFit" />
+
+			<view class="sc-tip-2">
+				获得<text>30积分</text>，已放入您的账户，
+			</view>
+			<view class="sc-tip-3">请在【小程序会员中心】里查看</view>
+
+			<view class="sc-btn" @click="handle_clickToIndex">
+				<text class="scb-txt-1" >返回首页</text><text class="scb-txt-2">2s</text>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script setup>
+//触发自定义事件
+const emits = defineEmits(['clickToIndex'])
+const props = defineProps({
+	paySuccessInfo: {
+		type: Object,
+		default: "{}"
+	},
+})
+
+const handle_clickToIndex = () => {
+	emits("clickToIndex", "")
+}
+</script>
+
+<style lang="scss" scoped>
+.success-box {
+	@include ctf(flex-start);
+	flex-direction: column;
+
+	.s-bg {
+		width: 750rpx;
+		height: 772rpx;
+		background-image: linear-gradient(180deg, #00C9AC 0%, #009874 100%);
+		// background-image: linear-gradient(to bottom, #00C9AC, #009874); //nvue
+		position: fixed;
+		top: 0;
+		z-index: -1;
+		border-bottom-left-radius: 60rpx;
+		border-bottom-right-radius: 60rpx;
+	}
+
+	.s-header {
+		z-index: 5;
+		padding: 11.11rpx 17.36rpx;
+		height: 79.17rpx;
+		width: 750rpx;
+		margin-top: 20rpx;
+		@include ctf(flex-start);
+		flex-direction: row;
+		// border-bottom: 1rpx solid #F5F7F8;
+
+		.video-tip {
+			@include ctf(flex-start);
+			flex-direction: row;
+
+			.v-image {
+				width: 70.03rpx;
+				height: 54.17rpx;
+			}
+
+			.v-text {
+				margin-left: 16rpx;
+				font-weight: 400;
+				font-size: 22rpx;
+				color: #fff;
+			}
+		}
+	}
+
+	.s-content {
+		z-index: 5;
+		width: 680.56rpx;
+		height: 940.28rpx;
+		background: #FFFFFF;
+		border-radius: 27.78rpx;
+		@include ctf(flex-start);
+		flex-direction: column;
+
+		.sc-title {
+			margin-top: 52.44rpx;
+			width: 600rpx;
+			@include ctf(space-between);
+			flex-direction: row;
+
+			.sc-success {
+				@include ctf(center);
+				flex-direction: row;
+
+				.sc-check-icon{
+					width: 69.44rpx;
+					height: 68.08rpx;
+				}
+
+				>view {
+					margin-left: 18.75rpx;
+					font-weight: 600;
+					font-size: 41.67rpx;
+					color: #009874;
+				}
+			}
+
+			.sc-total {
+				font-weight: 600;
+				font-size: 55.56rpx;
+				color: #1A1A1A;
+			}
+		}
+
+		.sc-num {
+			align-self: flex-end;
+			margin-right: 34.44rpx;
+			font-weight: 400;
+			font-size: 22.22rpx;
+			color: #999999;
+		}
+
+		.sc-tip-1 {
+			margin-top: 104.78rpx;
+			font-weight: 700;
+			font-size: 33.33rpx;
+			color: #1A1A1A;
+		}
+
+		.sc-print-img {
+			margin-top: 65rpx;
+			width: 193.06rpx;
+			height: 137.5rpx;
+		}
+
+		.sc-tip-2 {
+			margin-top: 27.78rpx;
+			font-weight: 400;
+			font-size: 22.22rpx;
+			color: #999999;
+
+			>text {
+				color: #ff873d;
+			}
+		}
+
+		.sc-tip-3 {
+			margin-top: 10.89rpx;
+			font-weight: 400;
+			font-size: 22.22rpx;
+			color: #999999;
+		}
+
+		.sc-btn {
+			margin-top: 127rpx;
+			width: 393.75rpx;
+			height: 104.17rpx;
+			border: 1.39rpx solid #009874;
+			border-radius: 6.94rpx;
+			@include ctf(center);
+			flex-direction: row;
+
+			.scb-txt-1 {
+				font-weight: 500;
+				font-size: 33.33rpx;
+				color: #009874;
+			}
+
+			.scb-txt-2 {
+				margin-left: 17.89rpx;
+				font-weight: 600;
+				font-size: 33.33rpx;
+				color: #333333;
+			}
+		}
+	}
+}
+
+
+
+
+.cancel-button {
+	@include ctf(center);
+	width: 131.94rpx;
+	height: 51.39rpx;
+	border: 0.69rpx solid #999999;
+	border-radius: 6.94rpx;
+
+	.v-text {
+		@include flcw(33.33upx, 46.53upx, #fff, 500);
+		font-weight: 500;
+		font-size: 16.67rpx;
+		color: #999999;
+	}
+}
+</style>

uniapp_project_code/src/pages.json

@@ -1,6 +1,12 @@
 {
 	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
 		{
+			"path": "pages/pay/index",
+			"style": {
+				"navigationStyle": "custom"
+			}
+		},
+		{
 			"path": "pages/index/index",
 			"style": {
 				"navigationStyle": "custom"

uniapp_project_code/src/pages/index/index.nvue

@@ -75,10 +75,11 @@
 		},
 		async onLoad(res) {
 			console.log("onload:",res)
-			this.screenHeight = await util.getPageHeight()
-			console.log(`the index page onLoad----` + this.screenHeight)
+
 		},
 		async onReady() {
+			this.screenHeight = await util.getPageHeight()
+			console.log(`the index page onReady----` + this.screenHeight)
 			this.setFooterHeight()
 		},
 		methods: {

uniapp_project_code/src/pages/pay/index.vue

@@ -0,0 +1,90 @@
+<template>
+	<view class="pay-page">
+		<view v-if="!paySuccess">
+			<view-header class="mheader" :backgroundCustom="('none')" :needBorder="('false')" @closeStandby="handle_closeStandby"></view-header>
+			<paying v-if="true" @clickVipCard="handle_clickVipCard"></paying>
+		</view>
+		<pay-success v-else></pay-success>
+		
+		<!-- 手机尾号后4位数验证 -->
+		<input-box-end-phone v-if="showEndPhoneBox"  :maskHeight="screenHeight" :maxInput="4"
+		@showIt="handle_closeEndPhoneBox" @clickCommit="handle_clickCommit_qr"></input-box-end-phone>
+	</view>
+</template>
+
+<script>
+	import util from "@/utils/util.js"
+
+	import viewHeader from '@/components/index/view_header.nvue';//头部
+	import inputQrBox from '@/components/index/keyboard/input_box_QR.vue'; //条形码
+	import inputBoxEndPhone from '@/components/index/keyboard/input_box_end_phone.vue';//手机号尾号
+	import paying from '@/components/pay/paying.vue';//支付中
+	import paySuccess from '@/components/pay/success.vue';//支付成功
+
+	export default {
+		components: {
+			'view-header': viewHeader,
+			'input-box-end-phone': inputBoxEndPhone,
+			'paying': paying,
+			'pay-success': paySuccess,
+		},
+		watch:{
+			showPageStandby(ov,nv){
+				if(nv){
+					// #ifdef APP-NVUE
+					setTimeout(async()=>{
+						dom = weex.requireModule("dom");
+						let size = await util.getNvueRefSize(this,dom,"mfooter");
+						this.footerHeight = size.height.toFixed(2)
+					},200)
+					// #endif
+				}
+			}
+		},
+		data() {
+			return {
+				showPageStandby: false,
+				showEndPhoneBox:false,
+				screenHeight: '',
+				footerHeight: '',
+				paySuccess:false,
+			}
+		},
+		async onLoad(res) {
+			console.log("pay onload:",res)
+		},
+		async onReady() {
+			await this.setPageHeight()
+		},
+		methods: {
+
+			handle_clickVipCard() {
+				util.showNone("储值卡支付未接入")
+				this.handle_clickVIP()
+				// util.routeTo(`/pages/pay/success`, 'nT');
+			},
+
+			handle_closeEndPhoneBox(val) {
+				console.log("handle_closeEndPhoneBox", val)
+				this.showEndPhoneBox = !this.showEndPhoneBox
+			},
+
+			handle_clickVIP() {
+				util.showNone("会员登录")
+				this.showEndPhoneBox = !this.showEndPhoneBox
+			},
+			async setPageHeight(){
+				this.screenHeight = await util.getPageHeight()
+			},
+			
+		}
+	}
+</script>
+
+
+<style lang="scss" scoped>
+	.pay-page {
+		width: 750rpx;
+
+	}
+</style>