From eed6c2d980a66382f036829e37a858ad052e5db7 Mon Sep 17 00:00:00 2001
From: zpc <zpc1131@gamil.com>
Date: Sun, 23 Mar 2025 18:17:55 +0800
Subject: [PATCH] 1

---
 .../order-confirm-popup.vue                   | 451 ++++++++++++++++++
 pages/shouye/detail.vue                       | 233 +++------
 2 files changed, 510 insertions(+), 174 deletions(-)
 create mode 100644 components/order-confirm-popup/order-confirm-popup.vue

diff --git a/components/order-confirm-popup/order-confirm-popup.vue b/components/order-confirm-popup/order-confirm-popup.vue
new file mode 100644
index 0000000..f70a5b9
--- /dev/null
+++ b/components/order-confirm-popup/order-confirm-popup.vue
@@ -0,0 +1,451 @@
+<template>
+	<uni-popup ref="popup" type="bottom">
+		<view class="buy-pop relative">
+			<view class="buy-pop-hd">
+				<view class="" style="width: 60rpx"></view>
+				<text class="" style="font-size: 28rpx">确认订单</text>
+				<view class="close icon" @click="$emit('close')">
+					<image :src="$img('/static/img/close2.png')" style="width: 24rpx; height: 24rpx" lazy-load></image>
+				</view>
+			</view>
+
+			<view class="buy-card">
+				<view class="buy-info">
+					<view class="pic flex">
+						<image class="img100" :src="orderData.goods.imgurl_detail"></image>
+					</view>
+
+					<view class="info-r">
+						<view class="title hang1">
+							{{ orderData.goods.title }}
+						</view>
+
+						<view class="type">类型:明信片</view>
+
+						<template v-if="orderData.goods.is_shou_zhe == 1 && orderData.goods.shou_zhe_price * 1 > 0">
+							<view class="price-num">
+								<view class="price">
+									<template v-if="pageData.goods.type != 5">¥</template>
+									<text>{{ orderData.goods.shou_zhe_price }}</text>
+									<template v-if="pageData.goods.type == 5">积分</template>
+									(首抽5折)
+								</view>
+
+								<view class="num">×{{ 1 }}</view>
+							</view>
+
+							<view v-if="orderData.goods.prize_num > 1" class="price-num">
+								<view class="price">
+									<template v-if="pageData.goods.type != 5">¥</template>
+									<text>{{ orderData.goods.price }}</text>
+									<template v-if="pageData.goods.type == 5">积分</template>
+								</view>
+
+								<view class="num">
+									×{{ orderData.goods.prize_num * 1 - 1 }}
+								</view>
+							</view>
+						</template>
+
+						<view v-else class="price-num">
+							<view class="price">
+								<template v-if="pageData.goods.type != 5">¥</template>
+								<text>{{ orderData.goods.price }}</text>
+								<template v-if="pageData.goods.type == 5">积分</template>
+							</view>
+
+							<view class="num">×{{ orderData.goods.prize_num }}</view>
+						</view>
+					</view>
+				</view>
+			</view>
+
+			<template v-if="pageData.goods.type != 5">
+				<view class="card-row" @click="$emit('to-coupon')">
+					<view class="title">优惠券</view>
+
+					<view class="row-r">
+						{{ couponData && orderData.coupon_price > 0 ? `-${couponData.price}` : "未选择" }}
+
+						<view class="icon">
+							<image :src="$img1('common/right1.png')" lazy-load></image>
+						</view>
+					</view>
+				</view>
+			</template>
+
+			<view v-if="pageData.goods.type == 5" class="pay-type">
+				<view class="title">
+					使用积分抵扣
+					{{ orderData.use_score }} <text style="color: #676767; font-size: 16rpx;">
+						(剩余:{{ orderData.score }})</text>
+				</view>
+
+				<view class="icon">
+					<image v-if="true" :src="$img1('common/check_act.png')" lazy-load></image>
+					<image v-else :src="$img1('common/check.png')" lazy-load></image>
+				</view>
+			</view>
+			
+			<view v-if="pageData.goods.type == 6 && !getBtnXianShi()"> </view>
+
+			<template v-else>
+				<view class="pay-type" @click="changePayMethod('useIntegral')">
+					<view class="title flex align-center">
+						使用{{currencyName}}抵扣¥{{ orderData.use_integral_money }}
+						<text style="color: #676767; font-size: 16rpx; margin-left: 10rpx;">(剩余:{{orderData.integral}}个)</text>
+					</view>
+
+					<view class="icon">
+						<image v-if="useIntegral" :src="$img1('common/check_act.png')" lazy-load></image>
+						<image v-else :src="$img1('common/check.png')" lazy-load></image>
+					</view>
+				</view>
+
+				<view class="pay-type" @click="changePayMethod('useMoney')">
+					<view class="title flex align-center">
+						使用{{balanceName}}抵扣¥{{ orderData.use_money }}
+						<text style="color: #676767; font-size: 16rpx; margin-left: 10rpx;">
+							(剩余:{{ orderData.money }})</text>
+					</view>
+
+					<view class="icon">
+						<image v-if="useMoney" :src="$img1('common/check_act.png')" lazy-load></image>
+						<image v-else :src="$img1('common/check.png')" lazy-load></image>
+					</view>
+				</view>
+			</template>
+			
+			<view class="rule">
+				<scroll-view class="rule-inner" scroll-y>
+					<rich-text :nodes="sendRuleData"></rich-text>
+				</scroll-view>
+			</view>
+			
+			<view class="agree" @click="$emit('toggle-agree')">
+				<view class="icon">
+					<image v-if="isAgree" :src="$img1('common/check_act.png')" lazy-load></image>
+					<image v-else :src="$img1('common/check.png')" lazy-load></image>
+				</view>
+
+				我已满18岁,阅读并同意
+
+				<text @click.stop="$c.to({ url: '/pages/guize/guize?type=4' })">
+					《用户协议》
+				</text>
+
+				<text @click.stop="$c.to({ url: '/pages/guize/guize?type=5' })">
+					《隐私政策》
+				</text>
+			</view>
+
+			<view class="pay-btn" @click="$emit('confirm')">
+				<text>确认支付</text>
+				<text>{{
+					pageData.goods.type == 5 ? ` ${orderData.use_score}积分` : ` ¥${orderData.price}`
+				}}</text>
+			</view>
+		</view>
+	</uni-popup>
+</template>
+
+<script>
+export default {
+	name: "OrderConfirmPopup",
+	props: {
+		// 订单数据
+		orderData: {
+			type: Object,
+			required: true
+		},
+		// 页面数据
+		pageData: {
+			type: Object,
+			required: true
+		},
+		// 是否使用余额
+		useMoney: {
+			type: Boolean,
+			default: true
+		},
+		// 是否使用积分
+		useIntegral: {
+			type: Boolean,
+			default: true
+		},
+		// 优惠券数据
+		couponData: {
+			type: [Object, String],
+			default: () => null
+		},
+		// 是否同意协议
+		isAgree: {
+			type: Boolean,
+			default: true
+		},
+		// 规则数据
+		sendRuleData: {
+			type: String,
+			default: ''
+		},
+		// 购买数量
+		buyNum: {
+			type: Number,
+			default: 1
+		}
+	},
+	data() {
+		return {
+			currencyName: '',
+			balanceName: ''
+		}
+	},
+	created() {
+		// 获取货币名称和余额名称
+		this.currencyName = this.$config.getAppSetting('currency1_name') || '积分';
+		this.balanceName = this.$config.getAppSetting('balance_name') || '余额';
+	},
+	methods: {
+		/**
+		 * 打开弹窗
+		 */
+		open() {
+			this.$refs.popup.open();
+		},
+		
+		/**
+		 * 关闭弹窗
+		 */
+		close() {
+			this.$refs.popup.close();
+		},
+		
+		/**
+		 * 切换支付方式
+		 * @param {String} method 支付方式
+		 */
+		changePayMethod(method) {
+			this.$emit('change-pay', method);
+		},
+		
+		/**
+		 * 检查按钮是否显示
+		 */
+		getBtnXianShi() {
+			if (this.pageData == null || this.pageData["xuangou"] == null) {
+				return true;
+			}
+			let xuangou = this.pageData["xuangou"];
+			if (xuangou.quanju_xiangou == 0) {
+				return true;
+			}
+			return false;
+		}
+	}
+}
+</script>
+
+<style lang="scss">
+.buy-pop {
+	padding: 0 30rpx;
+	box-sizing: border-box;
+	background: #f7f7f7;
+	padding-bottom: 30rpx;
+	border-radius: 16rpx 16rpx 0rpx 0rpx;
+
+	&::after {
+		content: "";
+		position: absolute;
+		top: -62rpx;
+		left: 0;
+		width: 750rpx;
+		height: 62rpx;
+	}
+
+	.buy-pop-hd {
+		padding: 20rpx 0;
+		padding-left: 10rpx;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		font-size: 40rpx;
+		font-weight: 500;
+		color: #333333;
+
+		.close {
+			width: 60rpx;
+			height: 60rpx;
+		}
+	}
+
+	.card-row {
+		padding: 16rpx 0;
+		display: flex;
+		height: 82rpx;
+		justify-content: space-between;
+		align-items: center;
+		margin-top: 24rpx;
+		border-radius: 16rpx;
+		background-color: #fff;
+
+		.title {
+			font-size: 20rpx;
+			font-family: Source Han Sans CN;
+			font-weight: 400;
+			margin-left: 24rpx;
+			color: #333333;
+		}
+
+		.row-r {
+			display: flex;
+			align-items: center;
+			font-size: 24rpx;
+			font-family: Source Han Sans CN;
+			font-weight: 400;
+			color: #999999;
+
+			.icon {
+				width: 10rpx;
+				height: 17rpx;
+				color: #999999;
+				margin-left: 10rpx;
+				margin-right: 24rpx;
+			}
+		}
+	}
+
+	.buy-card {
+		border-radius: 20rpx;
+		padding: 30rpx 30rpx 10rpx;
+		background: #ffffff;
+
+		.buy-info {
+			display: flex;
+
+			.pic {
+				width: 190rpx;
+				height: 190rpx;
+				border-radius: 10rpx;
+			}
+
+			.info-r {
+				width: calc(100% - 190rpx);
+				box-sizing: border-box;
+				display: flex;
+				flex-flow: column nowrap;
+				justify-content: space-between;
+				padding: 10rpx 0 10rpx 30rpx;
+
+				.title {
+					font-size: 24rpx;
+					font-weight: 400;
+					color: #333333;
+				}
+
+				.type {
+					font-size: 20rpx;
+					font-weight: 400;
+					color: #999999;
+				}
+
+				.price-num {
+					display: flex;
+					justify-content: space-between;
+					align-items: center;
+
+					.price {
+						font-weight: 500;
+						font-size: 16rpx;
+						color: #333333;
+
+						text {
+							font-size: 28rpx;
+						}
+					}
+
+					.num {
+						font-size: 28rpx;
+						font-family: Source Han Sans CN;
+						font-weight: 400;
+						color: #999999;
+					}
+				}
+			}
+		}
+	}
+
+	.pay-type {
+		padding: 30rpx 24rpx;
+		border-radius: 20rpx;
+		margin-top: 20rpx;
+		display: flex;
+		align-items: center;
+		background: #ffffff;
+
+		.icon {
+			width: 32rpx;
+			height: 32rpx;
+		}
+
+		.title {
+			flex: 1;
+			font-size: 24rpx;
+			font-weight: 500;
+			color: #333333;
+		}
+	}
+
+	.rule {
+		padding: 20rpx;
+		border-radius: 20rpx;
+		box-sizing: border-box;
+		margin: 20rpx 0 0;
+		height: 160rpx;
+		background: #f9f8e1;
+		border-radius: 20rpx;
+
+		.rule-inner {
+			max-height: 120rpx;
+			font-size: 20rpx;
+			font-weight: 400;
+			color: #333333;
+		}
+	}
+
+	.agree {
+		display: flex;
+		margin-top: 30rpx;
+		font-size: 24rpx;
+		font-weight: 400;
+		color: #999999;
+		line-height: 32rpx;
+
+		.icon {
+			width: 32rpx;
+			height: 32rpx;
+			margin-right: 10rpx;
+		}
+	}
+
+	.pay-btn {
+		margin: 30rpx auto 0;
+		width: 686rpx;
+		height: 84rpx;
+		background: url($imgurl + "common/payBtn.png") no-repeat 0 0 / 100% 100%;
+		display: flex;
+		margin-bottom: 90rpx;
+		align-items: center;
+		justify-content: center;
+		font-weight: 500;
+		color: #cdef27;
+
+		>text:nth-child(1) {
+			font-size: 28rpx;
+		}
+
+		>text:nth-child(2) {
+			font-size: 36rpx;
+		}
+	}
+}
+</style> 
\ No newline at end of file
diff --git a/pages/shouye/detail.vue b/pages/shouye/detail.vue
index 0bfe526..e5a96e4 100644
--- a/pages/shouye/detail.vue
+++ b/pages/shouye/detail.vue
@@ -130,176 +130,23 @@
 			</view>
 		</view>
 
-		<uni-popup ref="buyPop" type="bottom">
-			<view v-if="orderData" class="buy-pop relative">
-				<view class="buy-pop-hd">
-					<view class="" style="width: 60rpx"></view>
-					<text class="" style="font-size: 28rpx">确认订单</text>
-					<view class="close icon" @click="close('buyPop')">
-						<image :src="$img('/static/img/close2.png')" style="width: 24rpx; height: 24rpx" lazy-load>
-						</image>
-					</view>
-				</view>
-
-				<view class="buy-card">
-					<view class="buy-info">
-						<view class="pic flex">
-							<image class="img100" :src="orderData.goods.imgurl_detail"></image>
-						</view>
-
-						<view class="info-r">
-							<view class="title hang1">
-								{{ orderData.goods.title }}
-							</view>
-
-							<view class="type">类型:明信片</view>
-
-							<template v-if="
-                orderData.goods.is_shou_zhe == 1 &&
-                orderData.goods.shou_zhe_price * 1 > 0
-              ">
-								<view class="price-num">
-									<view class="price">
-										<template v-if="pageData.goods.type != 5">¥</template>
-										<text>{{ orderData.goods.shou_zhe_price }}</text>
-										<template v-if="pageData.goods.type == 5">积分</template>
-										(首抽5折)
-									</view>
-
-									<view class="num">×{{ 1 }}</view>
-								</view>
-
-								<view v-if="orderData.goods.prize_num > 1" class="price-num">
-									<view class="price">
-										<template v-if="pageData.goods.type != 5">¥</template>
-										<text>{{ orderData.goods.price }}</text>
-										<template v-if="pageData.goods.type == 5">积分</template>
-									</view>
-
-									<view class="num">
-										×{{ orderData.goods.prize_num * 1 - 1 }}
-									</view>
-								</view>
-							</template>
-
-							<view v-else class="price-num">
-								<view class="price">
-									<template v-if="pageData.goods.type != 5">¥</template>
-									<text>{{ orderData.goods.price }}</text>
-									<template v-if="pageData.goods.type == 5">积分</template>
-								</view>
-
-								<view class="num">×{{ orderData.goods.prize_num }}</view>
-							</view>
-						</view>
-					</view>
-				</view>
-
-				<template v-if="pageData.goods.type != 5">
-					<view class="card-row" @click="toCoupon">
-						<view class="title">优惠券</view>
-
-						<view class="row-r">
-							{{
-                couponData && orderData.coupon_price > 0
-                  ? `-${couponData.price}`
-                  : "未选择"
-              }}
-
-							<view class="icon">
-								<image :src="$img1('common/right1.png')" lazy-load></image>
-							</view>
-						</view>
-					</view>
-
-				</template>
-
-				<!-- <view v-if="!(pageData.goods.type == 6 && !getBtnXianShi(0))" class="pay-title ziti">请选择抵扣方式</view> -->
-
-				<view v-if="pageData.goods.type == 5" class="pay-type">
-					<!-- <view class="icon">
-						<image :src="$img('/static/img/pay_type3.png')" lazy-load></image>
-					</view> -->
-					<view class="title">
-						使用积分抵扣
-						{{ orderData.use_score }} <text style="color: #676767; font-size: 16rpx;">
-							(剩余:{{ orderData.score }})</text>
-					</view>
-
-					<view class="icon">
-						<image v-if="true" :src="$img1('common/check_act.png')" lazy-load></image>
-
-						<image v-else :src="$img1('common/check.png')" lazy-load></image>
-					</view>
-				</view>
-				<view v-if="pageData.goods.type == 6 && !getBtnXianShi(0)"> </view>
-
-				<template v-else>
-					<view class="pay-type" @click="changePay('useIntegral')">
-						<view class="title flex align-center">
-							使用{{$config.getAppSetting('currency1_name')}}抵扣¥{{ orderData.use_integral_money }}
-							<text
-								style="color: #676767; font-size: 16rpx; margin-left: 10rpx;">(剩余:{{orderData.integral}}个)</text>
-						</view>
-
-						<view class="icon">
-							<image v-if="useIntegral" :src="$img1('common/check_act.png')" lazy-load></image>
-
-							<image v-else :src="$img1('common/check.png')" lazy-load></image>
-						</view>
-					</view>
-
-					<view class="pay-type" @click="changePay('useMoney')">
-						<!-- <view class="icon">
-							<image :src="$img('/static/img/pay_type2.png')" lazy-load></image>
-						</view> -->
-
-						<view class="title flex align-center">
-							使用{{$config.getAppSetting('balance_name')}}抵扣¥{{ orderData.use_money }}
-							<text style="color: #676767; font-size: 16rpx; margin-left: 10rpx;">
-								(剩余:{{ orderData.money }})</text>
-						</view>
-
-						<view class="icon">
-							<image v-if="useMoney" :src="$img1('common/check_act.png')" lazy-load></image>
-
-							<image v-else :src="$img1('common/check.png')" lazy-load></image>
-						</view>
-					</view>
-				</template>
-				<view class="rule">
-					<scroll-view class="rule-inner" scroll-y>
-						<div v-html="sendRuleData"></div>
-					</scroll-view>
-				</view>
-				<view class="agree" @click="isAgree = !isAgree">
-					<view class="icon">
-						<image v-if="isAgree" :src="$img1('common/check_act.png')" lazy-load></image>
-
-						<image v-else :src="$img1('common/check.png')" lazy-load></image>
-					</view>
-
-					我已满18岁,阅读并同意
-
-					<text @click.stop="$c.to({ url: '/pages/guize/guize?type=4' })">
-						《用户协议》
-					</text>
-
-					<text @click.stop="$c.to({ url: '/pages/guize/guize?type=5' })">
-						《隐私政策》
-					</text>
-				</view>
-
-				<view class="pay-btn" @click="$c.noDouble1(confirmSubmit, [1, buyNum], choujiangloading)">
-					<text>确认支付</text>
-					<text>{{
-            pageData.goods.type == 5
-              ? ` ${orderData.use_score}积分`
-              : ` ¥${orderData.price}`
-          }}</text>
-				</view>
-			</view>
-		</uni-popup>
+		<order-confirm-popup
+			ref="buyPop"
+			v-if="orderData" 
+			:order-data="orderData"
+			:page-data="pageData"
+			:use-money="useMoney"
+			:use-integral="useIntegral"
+			:coupon-data="couponData"
+			:is-agree="isAgree"
+			:send-rule-data="sendRuleData"
+			:buy-num="buyNum"
+			@close="close('buyPop')"
+			@change-pay="changePay"
+			@toggle-agree="isAgree = !isAgree"
+			@to-coupon="toCoupon"
+			@confirm="$c.noDouble1(confirmSubmit, [1, buyNum], choujiangloading)"
+		></order-confirm-popup>
 
 		<buy-notice ref="buyNotice"
 			@confirm="$c.noDouble(confirmSubmit, [1, buyNum, true], choujiangloading)"></buy-notice>
@@ -350,7 +197,12 @@
 </template>
 
 <script>
+	import OrderConfirmPopup from '@/components/order-confirm-popup/order-confirm-popup.vue'
+	
 	export default {
+		components: {
+			OrderConfirmPopup
+		},
 		data() {
 			return {
 				optData: "",
@@ -612,7 +464,14 @@
 
 								this.orderData = res.data;
 
-								this.open("buyPop");
+								// 使用this.$nextTick确保视图已更新，组件已挂载
+								this.$nextTick(() => {
+									if (this.$refs.buyPop) {
+										this.$refs.buyPop.open();
+									} else {
+										console.error('buyPop组件引用不存在');
+									}
+								});
 							}
 
 							if (type == 1) {
@@ -811,17 +670,43 @@
 				return false;
 			},
 			close(e) {
-				this.$refs[e].close();
+				console.log('关闭弹窗:', e, this.$refs[e]);
+				if (e === 'buyPop') {
+					if (this.$refs[e]) {
+						this.$refs[e].close();
+					} else {
+						console.error('找不到buyPop组件引用');
+					}
+				} else {
+					if (this.$refs[e]) {
+						this.$refs[e].close();
+					} else {
+						console.error('找不到组件引用:', e);
+					}
+				}
 
 				if (e == "resPop") {
-					if (this.prizeData["user_coupon"] != null) {
+					if (this.prizeData && this.prizeData["user_coupon"] != null) {
 						this.$refs["couponPop"].open(this.prizeData["user_coupon"]);
 					}
 				}
 			},
 
 			open(e) {
-				this.$refs[e].open();
+				console.log('打开弹窗:', e, this.$refs[e]);
+				if (e === 'buyPop') {
+					if (this.$refs[e]) {
+						this.$refs[e].open();
+					} else {
+						console.error('找不到buyPop组件引用');
+					}
+				} else {
+					if (this.$refs[e]) {
+						this.$refs[e].open();
+					} else {
+						console.error('找不到组件引用:', e);
+					}
+				}
 			},
 		},
 	};