zh-h5-pay/pages/index.vue

<template>
	<view class="pay-view">
		<view class="pay-head" :style="{
			'height':headH*2+'rpx',
			'padding-top':headPTop*2+'rpx',
			'line-height':headH*2+'rpx',
		}">{{shop_name}}</view>

		<view class="pay-info">
			<view class="pay-info-input">
				<view class="info-text">消费总额</view>
				<view class="info-input">￥ {{totalNum}}</view>
				<view class="info-text">可询问工作人员应缴费用总额</view>
			</view>
			<view class="pay-info-sumit" @click="sumbit()">支付</view>
		</view>

		<view class="pay-num">
			<view class="pay-num-input" @click="setNum(item)" v-for="(item,i) in numList" :key="i">{{item}}</view>
			<view class="pay-num-input" @click="delNum()">
				<view class="pay-num-del">
					<view class="pay-num-del-wrap">x</view>
				</view>
			</view>
		</view>

		<view v-html="zfbUrl"></view>
	</view>
</template>

<script>
	import {
		payImgInfo,payPay
	} from '@/http/shop_order.js'

	import tools from "@/service/tools.js";

	import {
		getPhoneTopHeight,
		getNavHeight,
		isWx,
	} from "@/service/utils.js";

	export default {
		data() {
			return {
				shop_name: '',
				shop_id: '',
				order_id: '',

				headH: 0,
				headPTop: 0,
				numList: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '.', '0'],
				totalNum: '',
				isAJAX: false,
				zfbUrl: '',

				code_type: 1,
				shop_code: '',
			}
		},

		onLoad(data) {
			// #ifdef H5
			let isWeiXin = isWx();
			if (isWeiXin) {
				const href = window.location.href
				if (href.indexOf('?code=') > -1 || href.indexOf('&code=') > -1) {
					const urlArr = href.split('?')
					const rightUrlArr = urlArr[1].split('#/')
					const queryObj = {}
					rightUrlArr[0].split('&').map((item) => {
						const splitStr = item.split('=')
						return {
							key: splitStr[0],
							value: splitStr[1],
						}
					}).forEach((item) => {
						queryObj[item.key] = item.value
					})
					if (urlArr.length >= 3) {
						rightUrlArr[1] = "?" + urlArr[2]
					}
					let from = {
						code: queryObj.code,
						wx_type: 1,
					}
					// await getUserInfo(from).then(async (res) => {
					// 	if (res.code === 1) {
							// uni.setStorageSync('m_id')
							// uni.setStorageSync('token')
					// 	}
					// })
				} else {
					// 认证失败
					tools.wxLogin();
				}
				
			}
			
			if(isWeiXin){
				tools.wxInitialize(["chooseWXPay"]);
			}
			// #endif

			this.headH = getNavHeight();
			this.headPTop = getPhoneTopHeight();


			if (data.shop_code !== undefined) {
				this.shop_code = data.shop_code
				this.code_type = data.img_type
			} else {
				uni.reLaunch({
					url: `/pages/error?msg=` + '店铺信息错误，请重新扫码。'
				})
				return
			}
			
			payImgInfo({
				code: this.shop_code
			}).then((res) => {
				if (res.code === 1) {
					this.shop_id = res.data.id;
					this.shop_name = res.data.shop_name;
					uni.setStorageSync("shopName", this.shop_name)
				}
			})
		},
		methods: {
			setNum(item) {
				this.totalNum += item
			},
			delNum() {
				if (this.totalNum) {
					this.totalNum = this.totalNum.slice(0, this.totalNum.length - 1)
				} else {
					tools.error('请输入金额')
				}
			},
			sumbit() {

				if (!this.totalNum || this.totalNum * 1 <= 0) {
					return tools.error('请输入金额')
				}
				let reg = /^(([1-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/;
				if (!reg.test(this.totalNum)) {
					return tools.error('金额格式错误')
				}
				
				
				let pay_type //1：微信，2：支付宝
				let ua = navigator.userAgent.toLowerCase();
				if (ua.match(/MicroMessenger/i) == "micromessenger") {
					pay_type = 1
				} else {
					pay_type = 2
				}
				
				if (this.isAJAX) {
					return
				}
				this.isAJAX = true
				if (!this.code_type) {
					this.code_type = 1 //烟草码
				}
				payPay({
					code: this.shop_code,
					pay_money: this.totalNum,
					pay_code_source: this.code_type,
					pay_type: pay_type,
					m_id:uni.getStorageSync('m_id')?uni.getStorageSync('m_id'):0,
					token:uni.getStorageSync('token')?uni.getStorageSync('token'):''
				}).then((res) => {

					if (res.code === 1) {

						this.order_id = res.data.order_id
						
						if (res.data.is_bank == 0 && res.data.is_yee == 1) {
							if (pay_type === 1) {
								this.isAJAX = false
								if (res.data.wx_pay) {
									this.weiXinPayH5(res.data.wx_pay);
								} else {
									tools.error("支付生成失败");
								}
							} else {
								window.location.href = res.data.pay_data;
							}
						} else {
							window.location.href = res.data.pay_data;
						}

					} else {
						this.isAJAX = false
						tools.error(res.msg);
					}
				})
			},
			payOk(rs_sn) {
				// uni.redirectTo({
				// 	url: `/pages-order/pay-success/index?order_id=${this.order_id}&money=${this.totalNum}&rs_sn=${rs_sn}`,
				// });
			},
			async weiXinPayH5(wxPayData) {
				const res = await tools.weiXinPay(wxPayData);
				if (res) {
					this.payOk(wxPayData.rs_sn);
				}
			},
		},
	}
</script>

<style scoped lang="scss">
	.pay-view {
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;

		.pay-head {
			font-size: 40rpx;
			font-weight: 600;
			text-align: center;
			background-color: #fff;
		}

		.pay-info {
			flex: 1;
			overflow: auto;
			box-sizing: border-box;
			padding: 20rpx;

			.pay-info-sumit {
				margin-top: 30rpx;
				width: 100%;
				height: 90rpx;
				line-height: 90rpx;
				text-align: center;
				border-radius: 200rpx;
				background: linear-gradient(to right, #FE9387, #FB604E, #F83820);
				color: #fff;
				font-size: 32rpx;
			}

			.pay-info-input {
				width: 100%;
				height: 330rpx;
				background-color: #fff;
				box-sizing: border-box;
				padding: 20rpx;

				.info-text {
					font-size: 30rpx;
					color: #aaa;
				}

				.info-input {
					width: 100%;
					height: 100rpx;
					line-height: 100rpx;
					margin: 36rpx 0;
					padding-bottom: 20rpx;
					border-bottom: 1rpx solid #E4E4E4;
					font-size: 52rpx;
					font-weight: 600;
				}
			}
		}

		.pay-num {
			width: 100%;
			height: 600rpx;
			background: rgb(208, 211, 220);
			display: flex;
			justify-content: space-between;
			flex-flow: row wrap;
			box-sizing: border-box;
			padding: 30rpx;

			.pay-num-input {
				width: 215rpx;
				height: 110rpx;
				background-color: #fff;
				border-radius: 16rpx;
				text-align: center;
				line-height: 110rpx;
				font-size: 40rpx;
				font-weight: bold;
			}

			$height: 20rpx;

			.pay-num-del {
				margin-top: 38rpx;
				box-sizing: border-box;
				padding-left: 25rpx;
				line-height: 35rpx !important;
				font-weight: 400 !important;

				&-wrap {
					margin: 0 auto;
					width: 40rpx;
					height: $height * 2;
					background-color: #dedede;
					position: relative;

					&::after {
						content: '';
						position: absolute;
						left: -$height * 2;
						border: $height solid transparent;
						border-right: $height solid #dedede;
					}
				}
			}
		}
	}
</style>