FarmingWx_sacanPay/pages/index/pay.vue

<template>
	<view class="login-main">
		<view style="width: 100%; height: 220px">
			<view class="login-main-content">
				<image class="img" :src="shopInfo?shopInfo.store_logo_url:''" mode=""></image>
				<h4 class="shopName">{{shopInfo?shopInfo.store_name:""}}</h4>
			</view>
		</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="margin-top: 20rpx; font-size: 26rpx">
					支付成功后，次日有奖励红包，农商直采小程序领取
					<!-- 	支付成功立返
				<span
						style="color: red">
						
						{{ requestConfig.pay }}元</span>红包，可进入农商网小程序查看
						 -->
				</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: {}

			};
		},
		onLoad(options) {
			this.shopId = options.shopId
			let info = localStorage.getItem('userInfo');
			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('userInfo');
					setTimeout(() => {
						uni.redirectTo({
							url: '/pages/index/index?shopId=' + this.shopId
						})
					}, 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}`, {
						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}`, {
					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 if (res.data.code == 403) {
					uni.$u.toast('登录已过期,请重新登录！');
					localStorage.removeItem('userInfo');
					setTimeout(() => {
						uni.redirectTo({
							url: '/pages/index/index'
						})
					}, 1000)

					return;
				} 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('userInfo', JSON.stringify(this.userInfo))
					if (this.userInfo.bindPhoneStatus == 0) {
						this.showPhone = true
					} else {
						this.showPhone = false
						this.getShopInfo()
					}

				} else {
					uni.$u.toast('获取微信登录信息失败！');
				}
			},
			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">
	.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(275deg, #01CF6C 0%, #07E278 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 {
		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(275deg, #01cf6c 0%, #07e278 100%);
			border-radius: 44rpx;
			color: #fff;
		}
	}

	.login-contont {
		width: 90%;
		height: 50%;

		.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 {
		background: url("../../static/images/payBack.png") no-repeat;
		background-size: 100% 100%;
		text-align: center;
		width: 100%;
		height: 120px;

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