LocalLivingServicesUniapp/pages/topUp/agreement.vue

<template>
	<view class="page">
		<u-navbar title="储值管理" :autoBack="true" :placeholder="true"></u-navbar>

		<scroll-view scroll-y class="content" :style="{ height: scrollHeight }">
			<view class="card">
				<!-- 接口正文 -->
				<template v-if="contentText">
					<rich-text :nodes="contentText"></rich-text>
				</template>
				<!-- 无接口正文时展示默认规则 -->
				<template v-else>
					<view class="doc-title">{{ agreementTitle }}</view>
					<view class="section">
						<view class="h">一、协议主体</view>
						<view class="p">本协议由平台运营方（以下简称 “平台”）与入驻商户（以下简称 “商户”）共同订立。商户点击勾选 “我已阅读并同意《储值功能开通业务规则》、点击【申请开通】按钮，即代表商户已完整阅读、充分理解并自愿接受本协议全部条款，正式与平台达成有效合约。</view>
					</view>
					<view class="section">
						<view class="h">二、功能说明</view>
						<view class="p">储值功能，指平台为商户提供面向 C 端消费者的预付储值充值、余额消费核销、充值赠送权益配置、跨门店共享储值余额等相关技术服务；</view>
						<view class="p">商户可自主配置储值充值档位、自定义充值门槛、充值赠送余额、赠送优惠券、共享适用门店等营销规则；所有配置内容由商户独立承担对应的履约责任。</view>
					</view>
					<view class="section">
						<view class="h">三、商户权利与义务</view>
						<view class="p">商户承诺具备合法经营资质，拥有开展预付储值经营活动所需全部资质，符合当地市场监管部门关于单用途预付卡、预付费经营相关法律法规要求，独立承担因开展储值业务产生全部法律责任。</view>
						<view class="p">商户设置的充值金额、赠送余额、优惠券、使用期限、使用范围、退改规则等全部活动内容，应当清晰、真实、无虚假宣传，不得设置侵害消费者合法权益的条款。</view>
						<view class="p">储值本金履约责任：消费者充值资金对应的履约义务由商户自行承担。商户需保障消费者储值余额可按照约定正常到店消费核销；如出现闭店、停业、转让、经营异常等情形，商户负责妥善处理消费者储值余额退款、履约事宜，平台仅提供技术展示与核销工具，不承担商户履约担保责任。</view>
						<view class="p">商户配置【共享门店】功能时，确认知晓：储值本金支持跨已添加共享门店消费；充值赠送优惠券仅限原充值门店使用，无法跨店通用。商户应当提前向消费者清晰告知该规则。</view>
					</view>
					<view class="section">
						<view class="h">四、平台权利与义务</view>
						<view class="p">平台仅提供软件技术服务，搭建线上储值展示、充值、核销、订单记录查询系统，不代收、不截留商户储值资金，不介入商户与消费者之间的实体商品 / 服务履约关系。</view>
						<view class="p">平台有权对商户储值活动内容进行合规巡检；若商户存在违规宣传、侵害消费者权益、违反监管政策行为，平台有权限制、暂停、关闭商户储值功能。</view>
						<view class="p">平台负责保障系统正常运行，因系统维护、网络、不可抗力导致临时服务中断，将尽可能提前通知商户。</view>
					</view>
					<view class="section">
						<view class="h">五、资金、结算相关约定</view>
						<view class="p">商户自行负责储值资金收取与资金管理；平台仅提供交易流水记录，不对商户储值资金安全承担保管、赔付责任。</view>
						<view class="p">储值账户流水、充值记录、消费明细、赠送记录以平台系统后台记录作为双方对账有效凭证。</view>
					</view>
					<view class="section">
						<view class="h">六、功能启停规则</view>
						<view class="p">商户提交开通申请后，由平台进行审核；审核通过后方可启用储值功能；审核不通过，平台可无需说明理由驳回申请。</view>
						<view class="p">商户可在后台自主关闭储值功能；功能关闭后，新用户无法发起储值充值；已拥有储值余额的老用户仍然可以正常消费核销余额。</view>
						<view class="p">商户存在违规经营、大量客诉、违反法律法规情形，平台可单方面暂停或永久关闭储值功能，并保留追究商户相关责任的权利。</view>
					</view>
					<view class="section">
						<view class="h">七、风险告知（重点提示）</view>
						<view class="p warn">预付费储值业务受到市场监督管理部门严格监管，商户务必熟知并遵守本地预付费消费相关管理条例，违规经营将面临行政处罚。</view>
						<view class="p warn">若商户出现停业、倒闭、失联等情况，消费者储值余额无法正常消费产生的全部纠纷、赔偿责任由商户独立承担；消费者有权向监管部门投诉、提起诉讼。</view>
						<view class="p warn">商户不得利用储值功能开展非法集资、变相融资等违法活动，一经发现平台立即关停功能，并移交相关部门处理。</view>
					</view>
					<view class="section">
						<view class="h">八、其他约定</view>
						<view class="p">本协议自商户提交开通申请之日生效；若商户关闭储值功能，不影响功能存续期间已产生交易对应的责任条款持续有效。</view>
						<view class="p">平台有权根据业务及监管要求修订本协议，修订后将在商户端进行公示，商户持续使用储值功能即视为接受更新后的协议。</view>
						<view class="p">因本协议产生争议，双方优先友好协商；协商不成，提交平台主体所在地人民法院诉讼解决。</view>
					</view>
				</template>
			</view>
		</scroll-view>

		<view class="footer">
			<view class="agree" @click="agreed = !agreed">
				<view class="checkbox" :class="{ checked: agreed }">
					<view class="checkbox-false" v-if="!agreed">
						<!-- 111 -->
					</view>
					<!-- <u-icon v-if="!agreed" name="checkmark-circle" color="#368DFA" size="35"></u-icon> -->
					<u-icon v-if="agreed" name="checkmark-circle-fill" color="#368DFA" size="35"></u-icon>
				</view>
				<text>我已阅读并同意《{{ agreementTitle }}》</text>
			</view>
			<view class="btn" :class="{ disabled: !agreed || submitting }" @click="onApply">
				{{ submitting ? '提交中...' : '申请开通' }}
			</view>
		</view>
	</view>
</template>

<script>
	import prepaidApi, { getMerchantId } from '@/api/memberPrepaid.js'

	export default {
		data() {
			return {
				agreed: false,
				scrollHeight: '70vh',
				submitting: false,
				agreementVersion: '',
				agreementTitle: '储值功能开通业务规则',
				contentText: '',
				isReapply: false
			};
		},
		onLoad(options = {}) {
			this.isReapply = String(options.reapply || '') === '1';
			this.loadAgreement();
			this.checkStatus();
		},
		onReady() {
			const sys = uni.getSystemInfoSync();
			// 底部固定栏（协议勾选 + 申请按钮 + 安全区）预留高度，避免末尾条款被遮挡
			this.scrollHeight = `${sys.windowHeight - uni.upx2px(320) - (sys.statusBarHeight || 0) - 44}px`;
		},
		methods: {
			checkStatus() {
				const merchantId = getMerchantId();
				if (!merchantId) return;
				prepaidApi.getFeatureStatus(merchantId).then((res) => {
					if (res.data.code !== 200) return;
					const data = res.data.result || {};
					const auditStatus = Number(data.auditStatus);
					const reapplyStatus = Number(data.reapplyStatus);
					// 驳回后重新申请：允许停留在申请页，避免又跳回驳回页
					if (this.isReapply && auditStatus === 3) {
						if (reapplyStatus === 1) {
							uni.showToast({ title: '当前不可重新申请', icon: 'none' });
							uni.redirectTo({ url: '/pages/topUp/status' });
						}
						return;
					}
					if (auditStatus === 1 || auditStatus === 3) {
						uni.redirectTo({ url: '/pages/topUp/status' });
					} else if (auditStatus === 2) {
						uni.redirectTo({ url: '/pages/topUp/manage' });
					}
				});
			},
			loadAgreement() {
				prepaidApi.getCurrentAgreement().then((res) => {
					if (res.data.code !== 200 || !res.data.result) return;
					const data = res.data.result;
					this.agreementVersion = data.agreementVersion || '';
					this.agreementTitle = data.agreementTitle || '储值功能开通业务规则';
					const apiText = (data.contentText || '').trim();
					// 接口正文若缺少末条争议解决条款，回退本地完整协议，避免展示截断
					const requiredClause = '因本协议产生争议';
					this.contentText = apiText && apiText.includes(requiredClause) ? apiText : '';
				});
			},
			buildIdempotencyKey() {
				const merchantId = getMerchantId() || 'unknown';
				return `apply-${merchantId}-${Date.now()}-${Math.floor(Math.random() * 1000)}`;
			},
			onApply() {
				if (!this.agreed || this.submitting) {
					if (!this.agreed) {
						uni.showToast({ title: '请先阅读并同意协议', icon: 'none' });
					}
					return;
				}
				// if (!this.agreementVersion) {
				// 	uni.showToast({ title: '协议版本加载中，请稍后', icon: 'none' });
				// 	return;
				// }
				const merchantId = getMerchantId();
				if (!merchantId) {
					uni.showToast({ title: '未获取到门店信息', icon: 'none' });
					return;
				}
				this.submitting = true;
				prepaidApi
					.applyFeature(
						{
							agreementVersion: this.agreementVersion,
							agreed: true,
							idempotencyKey: this.buildIdempotencyKey()
						},
						merchantId
					)
					.then((res) => {
						if (res.data.code === 200) {
							uni.redirectTo({ url: '/pages/topUp/status' });
						} else {
							uni.showToast({ title: res.data.message || '申请失败', icon: 'none' });
						}
					})
					.catch(() => {
						uni.showToast({ title: '网络异常，请稍后重试', icon: 'none' });
					})
					.finally(() => {
						this.submitting = false;
					});
			}
		}
	};
</script>

<style scoped lang="scss">
	.page {
		// min-height: 100vh;
		background: #f7f7f7;
		display: flex;
		flex-direction: column;
	}

	.content {
		flex: 1;
		padding: 24rpx 24rpx 48rpx;
		box-sizing: border-box;
		padding-bottom: 220rpx;
	}

	.card {
		background: #fff;
		border-radius: 16rpx;
		padding: 32rpx 28rpx 40rpx;
		// margin-bottom: 24rpx;
	}

	.doc-title {
		text-align: center;
		font-size: 32rpx;
		font-weight: 600;
		color: #333;
		margin-bottom: 28rpx;
	}

	.section {
		margin-bottom: 28rpx;

		.h {
			font-size: 28rpx;
			font-weight: 600;
			color: #333;
			margin-bottom: 12rpx;
		}

		.p {
			font-size: 26rpx;
			color: #666;
			line-height: 1.7;
			text-align: justify;
			margin-bottom: 12rpx;
		}

		.warn {
			color: #e54d42;
		}
	}

	.footer {
		width: 100%;
		position: fixed;
		bottom: 0;
		background: #fff;
		padding: 20rpx 32rpx calc(20rpx + env(safe-area-inset-bottom));
		box-shadow: 0 -4rpx 16rpx rgba(0, 0, 0, 0.04);

		.agree {
			display: flex;
			align-items: center;
			font-size: 24rpx;
			color: #666;
			margin-bottom: 20rpx;

			.checkbox {
				width: 32rpx;
				height: 32rpx;
				// border: 2rpx solid #c8c9cc;
				// border-radius: 6rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-shrink: 0;

				// &.checked {
				// 	background: #2979ff;
				// 	border-color: #2979ff;
				// }
				.checkbox-false{
					width: 34rpx;
					height: 34rpx;
					border-radius: 50%;
					border: 1rpx solid #ccc;
				}
			}
			text{
				margin-left: 12rpx;
			}
		}

		.btn {
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
			background: linear-gradient( 90deg, #51A2FF 0%, #4EC2FF 100%);
			border-radius: 140rpx;
			color: #fff;
			font-size: 32rpx;
			// font-weight: 500;

			&.disabled {
				opacity: 0.45;
			}
		}
	}
</style>