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.shopLogoUrl
					? shopInfo.shopLogoUrl
					: '/static/images/error.jpeg'
					" mode=""></image>
				<h4 class="shopName">
					{{ shopInfo ? shopInfo.shopName : "" }}
				</h4>
			</view>

			<view class="login-contont">
				<view class="uInput">
					<u-input placeholder="请输入金额" border="bottom" :fontSize="40" type="digit" v-model="price"
						:customStyle="inpustyle">
						<span slot="prefix" style="font-size: 30px">￥</span>
					</u-input>
				</view>
				<view style="padding: 20rpx" v-if="voucherRadio">
					<text style="font-size: 25rpx;">抵扣代金券后，实付金额</text><text
						style="color: orange;font-size: 40rpx;margin-left: 10rpx;"> {{ payment }}</text>

				</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="代金券折扣" :border="false" isLink @click="voucher">
									<template slot="value">
										<text style="color: orange;">{{ CellText }}</text>
									</template>
								</u-cell>
							</u-cell-group>
						</view>

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


		<u-popup :show="showPopup" mode="bottom" :round="20">
			<view class="coupon-popup">
				<view class="popup-header">
					<text class="title">店铺代金券</text>
					<u-icon name="close" size="22" @click="showPopup = false" />
				</view>

				<view class="coupon-list">
					<u-radio-group v-model="voucherRadio" placement="column" @change="groupChange" iconSize="30"
						size="40">
						<view class="coupon-item" :class="item.status === 0 ? 'disabled' : 'active'"
							v-for="(item, index) in couponList" :key="index" @click="selectCoupon(index)">
							<view class="left">
								<view class="tag" :class="item.voucherType === 1 ? 'independent' : 'chain'">
									{{ item.voucherType === 1 ? '独立券' : item.voucherType === 2 ? '连锁券' : '联合券' }}
								</view>
								<view class="price">
									<text class="yen">¥</text>
									<text class="num">{{ item.amount }}</text>
									<text class="tip">{{ item.voucherRule == 1 ? '无门槛' : '满' + item.minOrderAmount + '减'
										+
										item.discountAmount }}</text>
								</view>
								<view class="info">
									<text>{{ item.createTime }}</text>
									<!-- <text>{{ item.scope }}</text> -->
								</view>
							</view>
							<view class="right">
								<u-radio :name="item.id" iconSize="30" />
							</view>
						</view>
					</u-radio-group>
				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
import api from "@/api/index.js";
import { requestConfig } from "@/app.config.js";
export default {
	data() {
		return {
			showPopup: false,
			requestConfig: requestConfig,
			code: "",
			appid: "",
			value: "",
			userInfo: {},
			inpustyle: {
				fontWeight: "bold",
				fontSize: "40px",
			},
			price: null,
			shopId: "",
			storeId: "",
			shopInfo: {},
			localUserInfo: {},
			voucherRadio: null,
			couponList: [
				// 	{
				// 	"amount": 2,
				// 	"applyAllProducts": 1,
				// 	"applyProductIds": [],
				// 	"bizType": 14,
				// 	"claimTime": "2026-04-11 09:56:51",
				// 	"createTime": "2026-04-11 09:56:51",
				// 	"discountAmount": null,
				// 	"endTime": "2026-04-30 10:33:38",
				// 	"id": "2042783907267350530",
				// 	"isApply": 0,
				// 	"minOrderAmount": null,
				// 	"orderNo": "",
				// 	"productIds": [],
				// 	"ruleDisplay": "无门槛",
				// 	"startTime": "2026-04-10 10:33:26",
				// 	"status": 1,
				// 	"storeCount": 1,
				// 	"storeId": "2018881434293329922",
				// 	"storeList": [
				// 		{
				// 			"isCreator": 1,
				// 			"storeId": "2018881434293329922",
				// 			"storeName": "医药one店",
				// 			"voucherId": "2042068417733718017"
				// 		}
				// 	],
				// 	"storeName": "",
				// 	"unApplyReason": "",
				// 	"updateTime": "2026-04-11 09:56:47",
				// 	"useTime": null,
				// 	"userId": "1965353825816576001",
				// 	"voucherId": "2042068417733718017",
				// 	"voucherName": "2元代金券",
				// 	"voucherRule": 1,
				// 	"voucherType": 3,
				// 	"voucherTypeDesc": "联合券"
				// },
				// {
				// 	"amount": 2,
				// 	"applyAllProducts": 1,
				// 	"applyProductIds": [],
				// 	"bizType": 14,
				// 	"claimTime": "2026-04-11 09:56:50",
				// 	"createTime": "2026-04-11 09:56:50",
				// 	"discountAmount": null,
				// 	"endTime": "2026-04-16 21:21:31",
				// 	"id": "2042783902674587650",
				// 	"isApply": 0,
				// 	"minOrderAmount": null,
				// 	"orderNo": "",
				// 	"productIds": [],
				// 	"ruleDisplay": "无门槛",
				// 	"startTime": "2026-04-07 15:14:37",
				// 	"status": 1,
				// 	"storeCount": 1,
				// 	"storeId": "2018881434293329922",
				// 	"storeList": [
				// 		{
				// 			"isCreator": 1,
				// 			"storeId": "2018881434293329922",
				// 			"storeName": "医药one店",
				// 			"voucherId": "2042139544933875713"
				// 		}
				// 	],
				// 	"storeName": "",
				// 	"unApplyReason": "",
				// 	"updateTime": "2026-04-11 09:56:46",
				// 	"useTime": null,
				// 	"userId": "1965353825816576001",
				// 	"voucherId": "2042139544933875713",
				// 	"voucherName": "联合券",
				// 	"voucherRule": 1,
				// 	"voucherType": 3,
				// 	"voucherTypeDesc": "联合券"
				// }
			],
			CellText: "暂无代金券",
			payment: ""
		};
	},
	onLoad(options) {
		this.shopId = options.shopId;
		this.storeId = options.storeId;
		localStorage.setItem("shopId", this.shopId);
		localStorage.setItem("storeId", this.storeId);
		let info = localStorage.getItem("weChatUserInfo");
		this.localUserInfo = JSON.parse(info);
		if (this.localUserInfo) {
			this.getShopInfo();
			this.getVoucher();
		} else {
			this.getInfo();

		}
	},
	methods: {
		groupChange(e) {
			this.showPopup = false;
			let targetObj = this.couponList.find(item => item.id === e)
			if (targetObj.voucherRule === 1) {
				this.CellText = `- ￥${targetObj.amount}`
			} else {
				this.CellText = `满${targetObj.minOrderAmount}减${targetObj.discountAmount}`
			}
			this.payment = this.price - targetObj.amount
			console.log(this.price - targetObj.amount);

		},
		getVoucher() {
			api
				.availableList({
					storeId: this.storeId,
				})
				.then((res) => {
					if (res.code == 200) {
						if (res.data.length > 0) {
							this.couponList = res.data.filter(item => item.applyAllProducts !== 0)
							this.CellText = '可使用' + this.couponList.length + '个'
						} else {
							this.CellText = '暂无代金券'
						}
					} else {
						uni.$u.toast(res.msg);
					}
				});
		},
		voucher() {
			if (!this.price) {
				uni.$u.toast("请输入支付金额！");
				return
			}
			if (this.couponList.length == 0) {
				uni.$u.toast("暂无代金券");
				return;
			} else {
				this.showPopup = true;
			}

		},
		getInfo() {
			let code = this.GetQueryString("code");
			localStorage.removeItem("token");
			localStorage.removeItem("weChatUserInfo");
			api
				.weChatH5Login({
					code: code,
				})
				.then((res) => {
					if (res.code == 200) {
						this.userInfo = res.data;
						localStorage.setItem("token", this.userInfo.access_token);
						localStorage.setItem(
							"weChatUserInfo",
							JSON.stringify(this.userInfo),
						);
						this.getShopInfo();
						this.getVoucher();
					} else {
						uni.$u.toast("获取微信登录信息失败,请重新登录！");
					}
				});
		},
		async getShopInfo() {
			api
				.getStoreInfoByScan({
					shopId: this.shopId,
				})
				.then((res) => {
					if (res.code == 200) {
						this.shopInfo = res.data;
					} else {
						uni.$u.toast(res.msg);
					}
				});
		},
		async Pay() {
			uni.showLoading({
				title: "支付中",
			});
			console.log(this.price);

			if (!this.price) {
				uni.$u.toast("请输入支付金额！");
				return
			}
			api
				.payOrder({
					shopType: this.shopInfo.shopType,
					shopUserId: this.shopInfo.shopUserId,
					shopId: this.shopInfo.shopId,
					payAmount: Number(this.payment) || Number(this.price),
					payWay: 6,
					// userId: this.localUserInfo.userId
				})
				.then((res) => {
					if (res.code == 200) {
						WeixinJSBridge.invoke(
							"getBrandWCPayRequest",
							{
								// 公众号名称，由商户传入
								appId: res.data.appId,
								// 时间戳，自1970年以来的秒数
								timeStamp: res.data.timeStamp,
								// 随机串
								nonceStr: res.data.nonceStr,
								package: res.data.package,
								// 微信签名方式：
								signType: res.data.signType,
								// 微信签名
								paySign: res.data.paySign,
							},
							function (res) {
								if (res.err_msg == "get_brand_wcpay_request:ok") {
									uni.hideLoading();
									uni.navigateTo({
										url: `/pages/index/paySuccess`,
									});
								} else {
									uni.hideLoading();
									uni.$u.toast("支付失败！");
								}
							},
						);
					} else {
						uni.$u.toast(res.msg);
					}
				}).catch((err) => {
					uni.hideLoading();
					let msg = err.msg || "";
					let errStr = msg.match(/[\u4e00-\u9fa5\/]+/)?.[0] || "支付失败";
					uni.$u.toast(errStr);
				});
		},

		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">
.coupon-popup {
	padding: 30rpx;
	height: 1000rpx;
	box-sizing: border-box;
}

.popup-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 32rpx;
	font-weight: bold;
	margin-bottom: 30rpx;
}

.coupon-list {
	height: calc(100% - 100rpx);
	overflow-y: auto;
}

.coupon-item {
	background: #fff;
	border-radius: 16rpx;
	padding: 24rpx;
	margin-bottom: 20rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border: 2rpx solid #eee;
}

.coupon-item.active {
	// border-color: #ff4d4f;
	background: #fffbf4;
}

.coupon-item.disabled {
	opacity: 0.5;
}

.left {
	flex: 1;
}

.tag {
	font-size: 22rpx;
	color: #fff;
	padding: 4rpx 12rpx;
	border-radius: 6rpx;
	margin-bottom: 12rpx;
}

.independent {
	width: 70rpx;
	background: #5c8dff;
}

.chain {
	width: 70rpx;
	background: #ff7d00;
}

.price {
	display: flex;
	align-items: baseline;
	margin-bottom: 12rpx;
}

.yen {
	font-size: 28rpx;
	color: #ff4d4f;
}

.num {
	font-size: 44rpx;
	font-weight: bold;
	color: #ff4d4f;
	margin: 0 10rpx;
}

.tip {
	font-size: 24rpx;
	color: #999;
}

.info {
	font-size: 24rpx;
	color: #999;
	line-height: 1.6;
}

.right {
	padding-left: 20rpx;
}

::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>