agent-app/agentApp/pages/payment/payment.vue

<template>
	<view class="app-container" style="background-color: #ededed;">
		<view class="pam-content">
			<view class="pam-shop">
				<view class="pam-mess">
					<view class="picon">
						<img v-if="merchant.logo" :src="merchant.logo" style="width: 110rpx;height: 110rpx; border-radius: 50%;"
							alt="" srcset="" />
						<img v-else src="../../static/page/people.png" style="width: 110rpx;height: 110rpx;" alt="" srcset="" />
					</view>
					<view class="pam-address">
						<view class="pname">
							{{merchant.name}}
						</view>
						<view class="paddre">
							{{merchant.address || '未填写地址'}}
						</view>
					</view>
				</view>
				<view class="pam-local">
					<img src="../../static/page/location.png" style="width: 30rpx;height: 36rpx;" alt="" srcset="" />
				</view>

			</view>
			<view class="pam-main">
				<view class="pm-title">
					付款金额(元)
				</view>
				<view class="pm-write">
					<view class="font">
						￥
					</view>
					<view class="num">
						<input type="text" class="pr-num" disabled  v-model="amount" placeholder="请输入金额"
							placeholder-style="color: #cfcfcf;" />
					</view>
				</view>
				<view class="pfooter u-border-top">
					向商家询问支付金额
				</view>
			</view>
			<view class="pac-cont">
				<view class="pac-left">
					<view class="pcfont">
						支付金额给商户
					</view>
					<view class="pcline">

					</view>
					<view class="pc-aplay">
						微信支付
					</view>
				</view>
				<view class="pac-link" @click="showDetail">
					查看活动规则
				</view>
			</view>
			<u-overlay :show="showRule" :opacity="0.8" @click="showRule=false">
				<view class="warp">
					<image class="rect" :src="sysConfig.activity_rule_img" mode="aspectFit"></image>
				</view>
			</u-overlay>
			<!-- 			<u-keyboard confirmText="1" mode="number" :closeOnClickOverlay="true" @close="close" :show="show" @confirm="confirm" @cancel="cancel"></u-keyboard> -->
			<cu-keyboard ref="cukeyboard" @change="change" @confirm="confirm" @hide="hide" :safeHeight="safeHeight"></cu-keyboard>
		</view>
	</view>
</template>

<script>
	import {
		userGetMerchantInfo,
		userCreateOrder,
		publicSysConfig
	} from '../../common/api.js'

	export default {
		data() {
			return {
				show: false,
				amount: '',
				payment_code: '',
				merchant: {
					name: '加载中...',
					address: '',
					logo: ''
				},
				safeHeight:0,
				sysConfig: {},
				showRule: false
			}
		},
		onReady() {
			this.$refs.cukeyboard.open();
		},
		onLoad() {
			this.payment_code = uni.getStorageSync('payment_code')
			this.getMerchantInfo()
			let info = uni.getSystemInfoSync()
			// alert(info.safeArea.bottom)
			// alert(info.screenHeight)
			// alert(info.safeArea.height)
			
			if(info.screenHeight!=info.safeArea.bottom){
				this.safeHeight = 20;
			}
			
			this.getSysConfig();
		},
		methods: {
			getSysConfig() {
				publicSysConfig().then(data => this.sysConfig = data)
			},
			getMerchantInfo() {
				userGetMerchantInfo({
					payment_code: this.payment_code
				}).then(data => this.merchant = data);
			},
			playFoucus() {
				if (this.show) {
					return
				}
				this.show = true;
				this.$refs.cukeyboard.open();
			},
			confirm() {
				//this.show = false;
				if (!this.checkMoney(this.amount)) {
					//alert("请输入正确金额");
					uni.showModal({
						content: "请输入正确金额",
						showCancel: false,
						confirmText: "知道了"
					})
					return
				}

				userCreateOrder({
					payment_code: this.payment_code,
					amount: this.amount
				}).then(data => {
					const onBridgeReady = function() {
						WeixinJSBridge.invoke(
							'getBrandWCPayRequest', {
								appId: data.app_id, //公众号ID，由商户传入
								timeStamp: data.time_stamp, //时间戳，自1970年以来的秒数
								nonceStr: data.nonce_str, //随机串
								package: data.package,
								signType: data.sign_type, //微信签名方式：
								paySign: data.pay_sign //微信签名
							},
							function(res) {
								console.log(res)
								if (res.err_msg == "get_brand_wcpay_request:ok") {
									// 使用以上方式判断前端返回,微信团队郑重提示：
									//res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
								}
							}
						);
					}

					if (typeof WeixinJSBridge == "undefined") {
						if (document.addEventListener) {
							document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
						} else if (document.attachEvent) {
							document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
							document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
						}
					} else {
						onBridgeReady();
					}
				});
			},
			cancel() {
				this.show = false;
			},
			close() {
				this.show = false;
			},
			change(v) {
				console.log("change :", v)
				this.amount = v
			},
			hide() {

			},
			checkMoney(val) {
				// 找到充值金额
				var rechargeMoney = val;

				var reg = /(^[1-9](\d+)?(\.\d{1,2})?$)|(^0$)|(^\d\.\d{1,2}$)/;

				if (rechargeMoney == "") {
					return false;
				} else if (rechargeMoney.trim() == "") {
					return false;
				} else if (!reg.test(rechargeMoney)) {
					return false;
				} else if (rechargeMoney == 0) {
					return false;
				} else {
					return true;
				}
			},
			showDetail() {
				console.log("showDetail")
				this.showRule = true
			}

		}
	}
</script>

<style lang="scss">
	
	.uni-page-body {
		background: #ededed;
	}
	
	.warp {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100vh;
	}

	.rect {
		width: 90vw !important;
		height: 90vh !important;
	}

	.pam-content {
		padding-top: 50rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;

		.pam-shop {
			display: flex;
			justify-content: space-between;

			.pam-mess {
				display: flex;
				height: 110rpx;

				.picon {
					width: 110rpx;
					height: 110rpx;
				}

				.pam-address {
					margin-left: 20rpx;

					.pname {
						margin-top: 15rpx;
						color: #454545;
						font-size: 32rpx;
						line-height: 1.5;
						font-weight: bold;
					}

					.paddre {
						margin-top: 5rpx;
						color: #666;
						font-size: 24rpx;
						line-height: 1.5;
					}
				}
			}

			.pam-local {
				width: 30rpx;
				height: 36rpx;
				margin-top: 60rpx;
			}
		}

		.pam-main {
			margin-top: 97rpx;
			padding-top: 30rpx;
			height: 380rpx;
			background: #fff;
			box-sizing: border-box;

			.pm-title {
				padding-left: 40rpx;
				color: #454545;
				font-size: 30rpx;
				line-height: 1.5;
			}

			.pfooter {
				margin-top: 60rpx;
				padding-left: 40rpx;
				padding-top: 40rpx;
				color: #666;
				font-size: 24rpx;
				line-height: 1.5;
			}

			.u-border-bottom,
			.u-border-top {
				border-color: #eee !important;
			}

			.pm-write {
				display: flex;
				height: 60rpx;
				padding-left: 40rpx;
				margin-top: 70rpx;

				.font {
					height: 60rpx;
					line-height: 60rpx;
					font-size: 30rpx;
					color: #454545;
					font-weight: bold;
				}

				.num {
					margin-left: 20rpx;
					line-height: 60rpx;
					height: 60rpx;

					.pr-num {
						font-size: 68rpx;
						line-height: 70rpx;
						min-height: 70rpx;
						height: 70rpx;
						color: #454545;
					}
				}
			}
		}

		.pac-cont {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 30rpx;

			.pac-left {
				display: flex;

				.pcfont {
					font-size: 24rpx;
					color: #666;
					height: 30rpx;
					line-height: 30rpx;
				}

				.pcline {
					height: 28rpx;
					width: 2rpx;
					margin-left: 20rpx;
					background: #ccc;
				}

				.pc-aplay {
					padding-left: 40rpx;
					margin-left: 20rpx;
					font-size: 24rpx;
					height: 30rpx;
					line-height: 30rpx;
					color: #999;
					background: url(../../static/page/aplay.png) no-repeat left center;
					background-size: 30rpx 30rpx;
				}
			}

			.pac-link {
				color: #1783FF;
				font-size: 24rpx;
				height: 30rpx;
				line-height: 30rpx;
				cursor: pointer;
			}
		}

		.pac-list {
			display: flex;
			display: none;
			justify-content: space-between;
			position: absolute;
			width: 100%;
			left: 0;
			right: 0;
			bottom: 0;
			padding: 14rpx;
			height: 415rpx;
			background: #f7f7f7;
			box-sizing: border-box;

			.pl-left {
				width: 537rpx;
			}

			.p-num {
				display: flex;
				justify-content: center;
				align-items: center;
				height: 88rpx;
				margin: 0;
				border: none;
				border-radius: 5rpx;
				background: #fff;
				font-size: 18px;
				color: #454545;
				font-weight: bold;

				&:after {
					border: none;
				}
			}

			.pleft-num {
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;

				.p-num {
					width: 170rpx;

					&.p-mar {
						margin-top: 14rpx;
					}
				}
			}

			.pleft-btom {
				display: flex;
				justify-content: space-between;
				margin-top: 14rpx;

				.p-num {
					width: 170rpx;
				}

				.pu-zero {
					width: 354rpx;
					margin-right: 14rpx;
				}
			}

			.pl-right {
				width: 170rpx;

				.pr-del {
					background: #fff url(../../static/page/del.png) no-repeat center center;
					background-size: 48rpx 34rpx;
				}

				.pr-sure {
					flex: 1;
					height: 290rpx;
					margin-top: 14rpx;
					color: #caf2d8;
					background: #ace4c1;
				}
			}
		}
	}
</style>