paymentCode/pages/index/pay.vue

<template>
	<view class="login-main">
		<view style="width: 100%">
			<view style="width: 100%;height: 270rpx;">
				<image class="img" src="../../static/images/payBack.png" style="width: 100%;height: 100%;"></image>
			</view>
		</view>
		<view class="main">
			<view class="login-main-content">
				<image class="img" :src="shopInfo.store_logo_url
					? shopInfo.store_logo_url
					: '/static/images/error.jpeg'
					" mode=""></image>
				<h4 class="shopName">
					陕西天枢云 {{ shopInfo ? shopInfo.store_name : "" }}
				</h4>
			</view>

			<view class="login-contont">
				<view class="uInput">
					<u-input placeholder="请输入金额" border="bottom" :fontSize="40" type="digit"
						@change="validateInput($event, 1)" v-model="price" :customStyle="inpustyle">
						<span slot="prefix" style="font-size: 30px">￥</span>
					</u-input>
				</view>
				<view class="login-contont-button">
					<button class="btn" @click="Pay">立即支付</button>
					<view style="padding: 0px 30rpx;">
						<view style="margin-top: 66rpx;background: #FFF7F6;">
							<u-cell-group :border="false">
								<u-cell title="代金券折扣" value="可使用4个" :border="false"></u-cell>
							</u-cell-group>
						</view>

						<view style="margin-top: 20rpx; font-size: 26rpx">
							支付成功后，次日将有随机奖励红包以及店铺代金券，可抵现金花，AI天枢云小程序领取
						</view>
					</view>

				</view>
			</view>
		</view>
		<u-popup :zIndex="200" :overlayStyle="{ zIndex: 200 }" :show="showPhone" @close="close" @open="open"
			:safeAreaInsetTop="true" round="20">
			<view class="popup">
				<view class="header">
					<h4>绑定手机号</h4>
					<p class="tip">注意：首次登录，需绑定手机号才可成功领取农商网红包</p>
				</view>
				<view class="main">
					<view style="height: 70rpx">
						<u--input placeholder="请输入手机号" type="number" border="surround" v-model="phone"
							style="background: #f4f4f4; height: 100%" />
					</view>
					<view style="margin-top: 20px; height: 70rpx">
						<u--input placeholder="验证码" border="surround" v-model="yzm"
							style="background: #f4f4f4; height: 100%">
							<template slot="suffix">
								<u-code ref="uCode" @change="codeChange" seconds="60" changeText="X秒重新获取"></u-code>
								<!-- <u-button @tap="getCode" :text="tips" type="success" size="mini"></u-button> -->
								<text class="yzm" @tap="getCode">{{
									tips ? tips : "发送验证码"
								}}</text>
							</template>
						</u--input>
					</view>
				</view>
				<view class="footer">
					<u-button type="primary" class="btn" text="确定" @click="submitOk"></u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import { requestConfig } from "@/app.config.js";
import axios from "axios";
export default {
	data() {
		return {
			showPhone: false,
			requestConfig: requestConfig,
			code: "",
			appid: "",
			value: "",
			userInfo: {},
			inpustyle: {
				fontWeight: "bold",
				fontSize: "40px",
			},
			phone: "",
			yzm: "",
			tips: null,
			price: null,
			shopId: "",
			shopInfo: {},
			localUserInfo: {},
			uid: "",
		};
	},
	onLoad(options) {
		this.shopId = options.shopId
		this.uid = options.uid || ''
		let info = localStorage.getItem('weChatUserInfo');
		this.localUserInfo = JSON.parse(info)
		if (this.localUserInfo) {
			this.vidTokenExist()
		} else {
			this.getShopInfo();
			this.getInfo();
		}
	},
	methods: {
		async vidTokenExist() {
			let res = await axios.get(
				`${requestConfig.BaseUrl}user/app/v1/user/vidTokenExist`,
				{
					headers: {
						token: `${this.localUserInfo.token}`,
					},
				},
			);
			if (res.data.code == 200) {
				this.userInfo = this.localUserInfo;
				this.getShopInfo();
			} else {
				uni.$u.toast("登录已过期,请重新登录！");
				localStorage.removeItem("weChatUserInfo");
				setTimeout(() => {
					uni.redirectTo({
						url:
							"/pages/index/index?shopId=" + this.shopId + "&uid=" + this.uid,
					});
				}, 1000);
			}
		},

		validateInput(e, num) {
			const inputTypeNum = /[^\d]/g; //数字
			switch (num) {
				case 1:
					//要写nextTick 不然无效
					this.$nextTick(() => {
						this.listData.integral = e.replace(inputTypeNum, "");
					});
					break;
			}
		},

		async getShopInfo() {
			let res = await axios.get(
				`${requestConfig.BaseUrl}user/app/v1/store/getStoreInfoByScan?shopId=${this.shopId}${this.uid ? "&uid=" + this.uid : ""}`,
				{
					headers: {
						token: `${this.userInfo.token}`,
					},
				},
			);
			if (res.data.code == 200) {
				this.shopInfo = res.data.data;
			} else {
				uni.$u.toast(res.data.msg);
			}
		},

		async submitOk() {
			if (this.phone == "") {
				uni.$u.toast("请输入手机号");
			} else if (this.yzm == "") {
				uni.$u.toast("请输入验证码");
			}
			const res = await axios.post(
				`${requestConfig.BaseUrl}user/app/v1/user/bindPhone?mpOpenid=${this.userInfo.mpOpenid}&phone=${this.phone}&code=${this.yzm}&unionid=${this.userInfo.unionid}`,
			);
			if (res.data.code == 200) {
				uni.$u.toast("绑定手机号成功");
				this.userInfo = res.data.data;
				this.showPhone = false;
				this.getShopInfo();
			} else {
				uni.$u.toast("绑定手机号失败！");
			}
		},
		codeChange(text) {
			this.tips = text;
		},
		async getCode() {
			if (this.$refs.uCode.canGetCode) {
				const res = await axios.post(
					`${requestConfig.BaseUrl}third/app/v1/third/getSMSCode?phone=${this.phone}`,
				);
				uni.showLoading({
					title: "正在获取验证码",
				});
				setTimeout(() => {
					uni.hideLoading();
					uni.$u.toast("验证码已发送");
					this.$refs.uCode.start();
				}, 2000);
			} else {
				uni.$u.toast("倒计时结束后再发送");
			}
		},
		async Pay() {
			uni.showLoading({
				title: "支付中",
			});
			// uni.hideLoading();
			// window.open(`${requestConfig.redirectOpen}pages/index/paySuccess`)

			if (!this.price) {
				uni.$u.toast("请输入支付金额！");
			}
			let res = await axios.get(
				`${requestConfig.BaseUrl}order/app/v1/buyer/order/createOfflineOrder
					?shopId=${this.shopId}&price=${this.price}${this.uid ? "&uid=" + this.uid : ""}`,
				{
					headers: {
						token: `${this.userInfo.token}`,
					},
				},
			);
			if (res.data.code == 200) {
				//post请求
				let data = {
					orderId: res.data.data, //订单id
					orderType: 11, //订单类型  -1--其他 2-司机保证金 3-商品交易  4-线下交易
					payKinds: 0, //支付类型  0-微信  1-支付宝
					payMeth: 6, //5-微信小程序支付  6-微信H5支付 7-支付宝app支付
				};
				const pay = await axios.post(
					`${requestConfig.BaseUrl}order/app/v1/buyer/order/offlineOrderPay
						`,
					data,
					{
						headers: {
							Token: `${this.userInfo.token}`,
						},
					},
				);
				if (pay.data.code == 200) {
					let res = JSON.parse(pay.data.data.result);
					console.log(res);
					WeixinJSBridge.invoke(
						"getBrandWCPayRequest",
						{
							// 公众号名称，由商户传入
							appId: res.appId,
							// 时间戳，自1970年以来的秒数
							timeStamp: res.timeStamp,
							// 随机串
							nonceStr: res.nonceStr,
							package: res.package,
							// 微信签名方式：
							signType: res.signType,
							// 微信签名
							paySign: res.paySign,
						},
						function (res) {
							if (res.err_msg == "get_brand_wcpay_request:ok") {
								// 使用以上方式判断前端返回,
								// 微信团队郑重提示：
								uni.hideLoading();
								window.location.href = requestConfig.redirectOpen;
								// res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
							} else {
								uni.hideLoading();
								uni.$u.toast("支付失败！");
							}
						},
					);
				} else {
					uni.hideLoading();
					uni.$u.toast("支付失败！");
				}
			} else {
				uni.$u.toast("线下订单创建失败！");
			}
		},
		async getInfo() {
			let code = this.GetQueryString("code");
			const res = await axios.post(
				`${requestConfig.BaseUrl}user/app/v1/user/weChatH5Login?code=${code}`,
			);
			if (res.data.code == 200) {
				this.userInfo = res.data.data;
				localStorage.setItem("weChatUserInfo", JSON.stringify(this.userInfo));
				if (this.userInfo.bindPhoneStatus == 0) {
					this.showPhone = true;
				} else {
					this.showPhone = false;
					this.getShopInfo();
				}
			} else {
				uni.$u.toast("获取微信登录信息失败,请重新登录！");
				// localStorage.removeItem('weChatUserInfo');
				// setTimeout(() => {
				// 	uni.redirectTo({
				// 		url: '/pages/index/index?shopId=' + this.shopId + '&uid=' + this.uid
				// 	})
				// }, 1000)
			}
		},
		GetQueryString(name) {
			var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
			var r = window.location.search.substr(1).match(reg);
			if (r != null) return unescape(r[2]);
			return null;
		},
	},
};
</script>

<style lang="scss">
::v-deep .u-cell__title {
	flex: none !important;
}

.main {
	width: 100%;
	background: white;
	height: calc(100% - 280rpx);
	border-radius: 40rpx;
}

.shopName {
	font-weight: bold;
	font-size: 36rpx;
	color: #333333;
}

/* 修改加载提示框的遮罩层 z-index */
.uni-loading__mask {
	z-index: 10076;
}

/* 修改加载提示框本身的 z-index */
.uni-loading {
	z-index: 10076;
}

.yzm {
	font-weight: 500;
	font-size: 28rpx;
	color: #00d36d;
}

.popup {
	height: 300px;
	padding: 20px;

	.footer {
		margin-top: 150rpx;

		.btn {
			width: 100%;
			background: linear-gradient(152deg, #6F9DFD 0%, #1B71F2 100%);
			border-radius: 46rpx;
			border: none;
		}
	}

	.main {
		margin-top: 20rpx;
	}

	.header {
		margin-bottom: 20rpx;
		text-align: center;

		.tip {
			margin-top: 20rpx;
			font-weight: 500;
			font-size: 26rpx;
			color: #ff8b2f;
		}
	}
}

.u-radio-group--row {
	justify-content: center;
}

.radioText {
	font-weight: 500;
	font-size: 24rpx;
	color: #999999;
	line-height: 34rpx;
	text-align: left;
	font-style: normal;
}

.login-main {

	background: url("../../static/images/payBack.png");
	background-size: 100% 100%;
	width: 100%;
	display: flex;
	flex-direction: column;
	/* justify-content: space-between; */
	align-items: center;
	height: 100vh;
}

.login-contont-button {
	text-align: center;

	.btn {
		margin-top: 20px;
		width: 95%;
		height: 90rpx;
		background: linear-gradient(152deg, #6F9DFD 0%, #1B71F2 100%);
		border-radius: 44rpx;
		color: #fff;
	}
}

.login-contont {
	width: 100%;
	height: 600rpx;
	margin-top: 100rpx;

	.uInput {
		padding: 10px 0px;
		border-bottom: 0.5px solid #97979740;
	}

	.login-contont-info {
		text-align: center;

		.text {
			margin-top: 10px;
			font-weight: 500;
			font-size: 28rpx;
			color: #999999;
			line-height: 40rpx;
			font-style: normal;
		}
	}
}

.radio {
	text-align: center;
	margin-top: 10px;
}

.login-main-content {
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 9px 26px;

	.img {
		// margin-top: 70px;
		margin-right: 20rpx;
		width: 44rpx;
		height: 44rpx;
		border-radius: 50%;
	}
}
</style>