yfs/components/buy-notice/buy-notice.vue

<template>
	<uni-popup ref="_buy_notice" type="center" :is-mask-click="false">
		<view class="_buy_notice">
			<!-- 头部标题区域 -->
			<view class="notice-header">
				<view class="placeholder"></view>
				<view class="title">平台消费规则</view>
				<image :src="$img('/static/img/close2.png')" @click="close" class="close-icon" lazy-load></image>
			</view>

			<!-- 内容区域 -->
			<scroll-view class="notice-content" scroll-y>
				<rich-text :nodes="ruleData.content"></rich-text>
			</scroll-view>
		</view>

		<!-- 确认按钮 -->
		<view class="confirm-button-wrapper">
			<view class="confirm-button" @click="confirm">
				<text>同意规则并继续支付</text>
			</view>
		</view>

		<!-- 不再提示选项 -->
		<view class="remember-option">
			<view class="checkbox" @click="isAgree = !isAgree">
				<image class="checkbox-icon" :src="isAgree ? $img1('common/check_act.png') : $img1('common/check.png')" lazy-load></image>
				<text class="checkbox-text">{{ checkboxText }}</text>
			</view>
		</view>
	</uni-popup>
</template>

<script>
export default {
	name: "BuyNotice",
	
	data() {
		return {
			isAgree: false,
			ruleData: {
				title: "",
				content: "",
			},
		};
	},
	
	computed: {
		/**
		 * 根据配置返回不同的复选框文本
		 */
		checkboxText() {
			return this.getPurchasePopup() 
				? "今日不再弹出消费规则" 
				: "不再弹出消费规则";
		}
	},

	methods: {
		/**
		 * 获取消费弹窗配置
		 * @returns {Boolean} 是否启用今日不再弹出配置
		 */
		getPurchasePopup() {
			try {
				const purchasePopup = this.$config.getAppSetting("purchase_popup");
				return purchasePopup !== null && purchasePopup === "1";
			} catch (error) {
				console.error("获取消费弹窗配置异常:", error);
				return false;
			}
		},
		
		/**
		 * 确认按钮点击处理
		 */
		confirm() {
			this.close();

			// 如果用户选择不再提示，则保存到本地存储
			if (this.isAgree) {
				this.saveAgreementState();
			}
			
			// 触发确认事件
			this.$emit("confirm");
		},
		
		/**
		 * 保存用户协议状态
		 */
		saveAgreementState() {
			if (this.getPurchasePopup()) {
				// 保存为当天不再显示
				uni.setStorageSync("_agree_buy_notice_time", new Date().toLocaleDateString());
				uni.setStorageSync("_agree_buy_notice", 2);
			} else {
				// 保存为永久不再显示
				uni.setStorageSync("_agree_buy_notice_time", "");
				uni.setStorageSync("_agree_buy_notice", 1);
			}
		},

		/**
		 * 关闭弹窗
		 */
		close() {
			this.$refs._buy_notice.close();
		},

		/**
		 * 打开弹窗并设置数据
		 * @param {Object} opt 弹窗数据
		 */
		open(opt) {
			this.ruleData = opt;
			this.$refs._buy_notice.open();
		},
		
		/**
		 * 检查是否需要显示弹窗
		 * @returns {Boolean} 是否显示弹窗
		 */
		getIsShow() {
			const agreeBuyNotice = uni.getStorageSync("_agree_buy_notice");
			
			// 如果没有保存协议状态，则显示
			if (!agreeBuyNotice) {
				return true;
			}
			
			// 判断是否配置了今天不再弹出
			if (this.getPurchasePopup()) {
				// 判断时间是否为今天
				const today = new Date().toLocaleDateString();
				const agreedTime = uni.getStorageSync("_agree_buy_notice_time");
				
				// 如果今天已经同意过，则不显示
				if (agreedTime === today) {
					return false;
				}
			} else if (agreeBuyNotice == 1) {
				// 如果永久不再显示，则不显示
				return false;
			}

			return true;
		},

		/**
		 * 获取规则内容并打开弹窗
		 * @param {Number} id 规则ID
		 * @param {String} title 规则标题
		 */
		async getRule(id, title = "") {
			try {
				const res = await this.$c.getRule(id, true);
				if (res && res.status === 1) {
					this.open({
						title: title || "平台消费规则",
						content: res.data,
					});
				} else {
					console.error("获取规则失败:", res);
				}
			} catch (error) {
				console.error("获取规则异常:", error);
			}
		},
	},
};
</script>

<style lang="scss">
._buy_notice {
	width: 650rpx;
	background: #ffffff;
	border-radius: 30rpx;

	// 头部样式
	.notice-header {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding: 42rpx 32rpx;

		.placeholder {
			width: 24rpx;
			height: 24rpx;
		}

		.title {
			font-size: 32rpx;
			font-weight: 500;
			color: #333333;
		}

		.close-icon {
			width: 24rpx;
			height: 24rpx;
		}
	}

	// 内容区域样式
	.notice-content {
		height: 828rpx;
		width: 570rpx;
		margin: 0 auto;
		padding-bottom: 60rpx;
		font-size: 30rpx;
		font-weight: 400;
		color: #333333;
		line-height: 1.6;
	}
}

// 确认按钮样式
.confirm-button-wrapper {
	display: flex;
	justify-content: center;
	width: 100%;
	margin-top: 28rpx;

	.confirm-button {
		background-color: #d8fd24;
		width: 434rpx;
		height: 76rpx;
		border-radius: 16rpx;
		font-size: 28rpx;
		font-weight: 500;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #333333;
	}
}

// 不再提示选项样式
.remember-option {
	display: flex;
	justify-content: center;
	width: 100%;
	margin-top: 28rpx;

	.checkbox {
		height: 40rpx;
		display: flex;
		flex-direction: row;
		align-items: center;

		.checkbox-icon {
			width: 30rpx;
			height: 30rpx;
		}

		.checkbox-text {
			color: #d3d3d3;
			font-size: 20rpx;
			margin-left: 12rpx;
		}
	}
}
</style>