LocalLivingServicesUniapp/pages/topUp/settings.vue

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

		<!-- 是否接受共享 -->
		<view class="card switch-card">
			<text class="label">是否接受其他门店共享储值</text>
			<u-switch v-model="form.acceptShare" activeColor="#1C7CF9"></u-switch>
		</view>

		<!-- 自定义最低金额 -->
		<view class="card min-card">
			<view class="min-head">
				<text class="label">自定义充值最低金额</text>
				<text class="min-tip">默认为固定档位中的最低金额</text>
			</view>
			<view class="min-input-wrap">
				<text class="currency">¥</text>
				<input
					class="min-input"
					type="number"
					v-model="form.minAmount"
					:placeholder="String(lowestTierAmount || '')"
					placeholder-class="placeholder"
					@input="onMinAmountInput"
				/>
			</view>
		</view>

		<!-- 固定充值 -->
		<view class="section-head">
			<view class="section-title-row">
				<view class="section-bar"></view>
				<text class="section-title">固定充值</text>
			</view>
			<text class="section-tip">*可点击加号添加固定充值档位</text>
		</view>

		<view class="tier-list">
			<view class="tier-card" v-for="(item, index) in form.tiers" :key="item.id || index">
				<view class="tier-top">
					<text class="tier-name">档位{{ index + 1 }}</text>
					<view class="tier-ops">
						<view class="op" @click.stop="openTierEdit(index)">
							<u-icon name="edit-pen" color="#1C7CF9" size="35"></u-icon>
						</view>
						<view class="op" @click.stop="removeTier(index)">
							<u-icon name="trash" color="#1C7CF9" size="35"></u-icon>
						</view>
					</view>
				</view>
				<view class="tier-body" @click="openTierEdit(index)">
					<view class="tier-line">
						<text class="k">充值金额</text>
						<text class="v">{{ item.amount }}</text>
					</view>
					<view class="tier-line">
						<text class="k">赠送金额</text>
						<text class="v">{{ item.giftAmount || 0 }}</text>
					</view>
					<view class="tier-line">
						<text class="k">优惠券</text>
						<text class="v">{{ getCouponCount(item) }}张</text>
					</view>
				</view>
			</view>

			<view class="empty" v-if="!form.tiers.length && !loading">暂无固定充值档位，请点击加号添加</view>
		</view>

		<!-- 添加档位 -->
		<image class="fab" src="/static/topUp/add.png" mode="aspectFit" @click="openTierAdd"></image>

		<!-- 底部保存 -->
		<view class="footer">
			<view class="save-btn" :class="{ disabled: saving }" @click="onSave">
				{{ saving ? '保存中...' : '保存' }}
			</view>
		</view>

		<!-- 固定充值编辑弹层 -->
		<u-popup v-model="tierVisible" mode="right" width="100%" :mask-close-able="false">
			<view class="sub-page tier-page">
				<view class="sub-nav">
					<view class="sub-nav-back" @click="closeTier">
						<u-icon name="arrow-left" color="#333" size="36"></u-icon>
					</view>
					<text class="sub-nav-title">储值设置</text>
				</view>

				<view class="form-card">
					<view class="form-title">{{ tierFormTitle }}</view>
					<view class="form-row">
						<text class="form-label">充值金额</text>
						<input
							class="form-input"
							type="number"
							v-model="tierForm.amount"
							placeholder="请输入正整数"
							placeholder-class="form-placeholder"
							@input="onTierAmountInput('amount', $event)"
						/>
					</view>
					<view class="form-row">
						<text class="form-label">赠送金额</text>
						<input
							class="form-input"
							type="number"
							v-model="tierForm.giftAmount"
							placeholder="选填，默认0"
							placeholder-class="form-placeholder"
							@input="onTierAmountInput('giftAmount', $event)"
						/>
					</view>
					<view class="form-row link-row" @click="openCouponSelect">
						<text class="form-label">赠送优惠券</text>
						<view class="link-right">
							<text class="link-text" :class="{ active: couponSelectedCount > 0 }">
								{{ couponSelectedCount > 0 ? `已选 ${couponSelectedCount} 张` : '去选择' }}
							</text>
							<u-icon name="arrow-right" color="#c0c4cc" size="14"></u-icon>
						</view>
					</view>
				</view>

				<view class="footer tier-footer">
					<view class="save-btn" :class="{ disabled: !canSubmitTier }" @click="submitTier">
						{{ tierEditIndex === -1 ? '确认添加' : '确认修改' }}
					</view>
				</view>
			</view>
		</u-popup>

		<!-- 优惠券选择弹层 -->
		<u-popup v-model="couponVisible" mode="right" width="100%" :mask-close-able="false">
			<view class="sub-page coupon-page">
				<view class="sub-nav">
					<view class="sub-nav-back" @click="closeCouponSelect">
						<u-icon name="arrow-left" color="#333" size="36"></u-icon>
					</view>
					<text class="sub-nav-title">优惠券</text>
				</view>

				<view class="tabs">
					<view
						class="tab"
						v-for="(tab, idx) in couponTabs"
						:key="idx"
						:class="{ active: couponTab === idx }"
						@click="switchCouponTab(idx)"
					>
						<text class="tab-text">{{ tab }}</text>
						<image
							v-if="couponTab === idx"
							class="tab-indicator"
							src="/static/topUp/tabs.png"
							mode="aspectFit"
						></image>
					</view>
				</view>

				<scroll-view scroll-y class="coupon-scroll">
					<view
						class="coupon-item"
						v-for="item in currentCouponList"
						:key="item.id"
						@click="toggleCoupon(item)"
					>
						<view class="radio" :class="{ checked: isCouponChecked(item.id) }">
							<u-icon v-if="isCouponChecked(item.id)" name="checkmark" color="#fff" size="12"></u-icon>
						</view>
						<view class="coupon-ticket">
							<image
								class="ticket-bg"
								src="/static/topUp/bg-coupon-border.png"
								mode="scaleToFill"
							></image>
							<view class="ticket-left">
								<text class="ticket-value" :class="{ multi: couponTab === 1 }">{{ item.display }}</text>
							</view>
							<view class="ticket-right">
								<text class="cname">{{ item.name }}</text>
								<text class="ccond" v-if="item.condition">{{ item.condition }}</text>
								<view class="ticket-bottom">
									<text class="cvalid">{{ item.validText }}</text>
									<view class="stepper" @click.stop>
										<view
											class="step-btn minus"
											:class="{ active: getCouponQty(item.id) > 0 }"
											@click="changeCouponQty(item.id, -1)"
										>
											<text class="step-icon">−</text>
										</view>
										<text class="step-num">{{ getCouponQty(item.id) }}</text>
										<view class="step-btn plus" @click="changeCouponQty(item.id, 1)">
											<text class="step-icon">+</text>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="empty" v-if="!currentCouponList.length && !couponLoading">暂无优惠券</view>
					<view class="empty" v-if="couponLoading">加载中...</view>
				</scroll-view>

				<view class="footer coupon-footer">
					<view class="save-btn" @click="confirmCouponSelect">
						{{ tempCouponCount > 0 ? `确定选择（已选 ${tempCouponCount} 张）` : '确定选择' }}
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import prepaidApi from '@/api/memberPrepaid.js'

	function createId() {
		return `t_${Date.now()}_${Math.floor(Math.random() * 1000)}`;
	}

	/** 默认固定档位：档位1金额100、档位2金额200，赠送与优惠券均为0 */
	function createDefaultTiers() {
		return [
			{ id: createId(), amount: 100, giftAmount: 0, coupons: [] },
			{ id: createId(), amount: 200, giftAmount: 0, coupons: [] }
		];
	}

	function formatValidText(beginTime, endTime) {
		if (!beginTime && !endTime) return '长期有效';
		const begin = beginTime ? String(beginTime).slice(0, 10) : '';
		const end = endTime ? String(endTime).slice(0, 10) : '';
		if (begin && end) return `${begin} 至 ${end}`;
		return begin || end || '长期有效';
	}

	function isPlainAmount(val) {
		return /^[\d.]+$/.test(String(val || '').trim());
	}

	function pickAmount(val) {
		const matched = String(val || '').match(/[\d.]+/);
		return matched ? matched[0] : '';
	}

	/** 折扣券 / 满减券左侧面额与使用条件文案（接口多为纯数字，需补「元」「折」） */
	function formatCouponTexts(item) {
		const isDiscount = String(item.couponType) === '2';
		const info = String(item.contentInfo || '').trim();
		const cond = String(item.contentConditions || '').trim();
		const infoNum = isPlainAmount(info) ? info : pickAmount(info);
		const condNum = isPlainAmount(cond) ? cond : pickAmount(cond);
		const noThreshold = !condNum || condNum === '0';

		if (isDiscount) {
			const display = infoNum ? `${infoNum}折` : info || '折扣';
			const condition = noThreshold
				? '不限制条件使用'
				: `满${condNum}元可使用`;
			return { display, condition };
		}

		// 满减：左侧「满X元 / 减Y元」
		let display = '';
		if (infoNum && condNum) {
			display = `满${condNum}元\n减${infoNum}元`;
		} else if (infoNum) {
			display = `${infoNum}元`;
		} else if (info) {
			display = info
				.replace(/满\s*([\d.]+)\s*元?/g, '满$1元')
				.replace(/减\s*([\d.]+)\s*元?/g, '减$1元');
		} else {
			display = '优惠';
		}
		const condition = noThreshold
			? '不限制条件使用'
			: `满${condNum}元可抵扣`;
		return { display, condition };
	}

	export default {
		data() {
			return {
				loading: false,
				saving: false,
				configVersion: null,
				form: {
					acceptShare: true,
					minAmount: '100',
					tiers: createDefaultTiers()
				},
				tierVisible: false,
				tierEditIndex: -1,
				tierForm: {
					amount: '',
					giftAmount: '',
					coupons: []
				},
				couponVisible: false,
				couponTab: 0,
				couponTabs: ['折扣券', '满减券'],
				tempCoupons: [],
				discountCoupons: [],
				reduceCoupons: [],
				couponLoading: false
			};
		},
		computed: {
			hasGiftConfig() {
				return (this.form.tiers || []).some((tier) => {
					const gift = Number(tier.giftAmount) || 0;
					const couponQty = (tier.coupons || []).reduce((sum, c) => sum + (Number(c.qty) || 0), 0);
					return gift > 0 || couponQty > 0;
				});
			},
			/** 固定档位中的最低充值金额，用作自定义最低金额默认值 */
			lowestTierAmount() {
				const amounts = (this.form.tiers || [])
					.map((t) => Number(t.amount))
					.filter((n) => !Number.isNaN(n) && n > 0);
				if (!amounts.length) return 0;
				return Math.min(...amounts);
			},
			canSubmitTier() {
				const amount = String(this.tierForm.amount || '').trim();
				return !!amount && /^\d+$/.test(amount) && Number(amount) > 0;
			},
			tierFormTitle() {
				if (this.tierEditIndex === -1) {
					return `档位${(this.form.tiers || []).length + 1}`;
				}
				return `档位${this.tierEditIndex + 1}`;
			},
			couponSelectedCount() {
				return (this.tierForm.coupons || []).reduce((sum, c) => sum + (Number(c.qty) || 0), 0);
			},
			tempCouponCount() {
				return (this.tempCoupons || []).reduce((sum, c) => sum + (Number(c.qty) || 0), 0);
			},
			currentCouponList() {
				return this.couponTab === 0 ? this.discountCoupons : this.reduceCoupons;
			}
		},
		onLoad() {
			this.loadSettings();
		},
		methods: {
			onMinAmountInput(e) {
				const val = String((e && e.detail && e.detail.value) || this.form.minAmount || '')
					.replace(/[^\d]/g, '');
				this.$nextTick(() => {
					this.form.minAmount = val;
				});
			},
			onTierAmountInput(field, e) {
				const val = String((e && e.detail && e.detail.value) || this.tierForm[field] || '')
					.replace(/[^\d]/g, '');
				this.$nextTick(() => {
					this.$set(this.tierForm, field, val);
				});
			},
			loadSettings() {
				this.loading = true;
				prepaidApi
					.getRechargeConfig()
					.then((res) => {
						if (res.data.code !== 200 || !res.data.result) {
							uni.showToast({ title: res.data.message || '加载失败', icon: 'none' });
							return;
						}
						const data = res.data.result;
						this.configVersion = data.version;
						const tiers = Array.isArray(data.tiers) ? data.tiers : [];
						const mappedTiers = tiers.length
							? tiers.map((tier) => ({
									id: tier.tierId || createId(),
									amount: Number(tier.rechargeAmount) || 0,
									giftAmount: Number(tier.giftAmount) || 0,
									coupons: (tier.coupons || []).map((c) => ({
										id: c.couponId,
										name: c.couponName || '',
										type: String(c.couponType) === '2' ? 'discount' : 'reduce',
										qty: Number(c.quantity) || 1
									}))
								}))
							: createDefaultTiers();
						const lowest = mappedTiers
							.map((t) => Number(t.amount))
							.filter((n) => n > 0);
						const defaultMin = lowest.length ? Math.min(...lowest) : 100;
						this.form = {
							acceptShare: data.acceptSharedPrepaid !== false,
							minAmount:
								data.customMinAmount != null && data.customMinAmount !== ''
									? String(Math.floor(Number(data.customMinAmount)) || '')
									: String(defaultMin),
							tiers: mappedTiers
						};
					})
					.catch(() => {
						uni.showToast({ title: '网络异常，请稍后重试', icon: 'none' });
					})
					.finally(() => {
						this.loading = false;
					});
			},
			getCouponCount(item) {
				return (item.coupons || []).reduce((sum, c) => sum + (Number(c.qty) || 0), 0);
			},
			openTierAdd() {
				this.tierEditIndex = -1;
				this.tierForm = { amount: '', giftAmount: '', coupons: [] };
				this.tierVisible = true;
			},
			openTierEdit(index) {
				const item = this.form.tiers[index];
				this.tierEditIndex = index;
				this.tierForm = {
					amount: item.amount != null ? String(Math.floor(Number(item.amount)) || '') : '',
					giftAmount:
						item.giftAmount != null ? String(Math.floor(Number(item.giftAmount)) || 0) : '',
					coupons: JSON.parse(JSON.stringify(item.coupons || []))
				};
				this.tierVisible = true;
			},
			closeTier() {
				this.tierVisible = false;
			},
			removeTier(index) {
				if ((this.form.tiers || []).length <= 2) {
					uni.showToast({ title: '至少保留2个固定充值档位', icon: 'none' });
					return;
				}
				uni.showModal({
					title: '提示',
					content: '确认删除该充值档位吗？',
					confirmColor: '#fa3534',
					success: (res) => {
						if (res.confirm) {
							this.form.tiers.splice(index, 1);
						}
					}
				});
			},
			submitTier() {
				if (!this.canSubmitTier) return;
				const amountStr = String(this.tierForm.amount || '').trim();
				if (!/^\d+$/.test(amountStr) || Number(amountStr) <= 0) {
					uni.showToast({ title: '充值金额须为正整数', icon: 'none' });
					return;
				}
				const amount = Number(amountStr);
				const giftRaw = String(this.tierForm.giftAmount || '').trim();
				if (giftRaw !== '' && !/^\d+$/.test(giftRaw)) {
					uni.showToast({ title: '赠送金额须为非负整数', icon: 'none' });
					return;
				}
				const giftAmount = giftRaw === '' ? 0 : Number(giftRaw);
				const payload = {
					id: this.tierEditIndex === -1 ? createId() : this.form.tiers[this.tierEditIndex].id,
					amount,
					giftAmount,
					coupons: JSON.parse(JSON.stringify(this.tierForm.coupons || []))
				};
				if (this.tierEditIndex === -1) {
					this.form.tiers.push(payload);
				} else {
					this.$set(this.form.tiers, this.tierEditIndex, payload);
				}
				this.tierVisible = false;
			},
			mapCouponItem(item) {
				const { display, condition } = formatCouponTexts(item);
				return {
					id: item.couponId,
					name: item.couponName || '',
					display,
					condition,
					validText: formatValidText(item.beginTime, item.endTime),
					remainingQuantity: Number(item.remainingQuantity) || 0
				};
			},
			switchCouponTab(idx) {
				this.couponTab = idx;
				this.loadCoupons();
			},
			openCouponSelect() {
				this.tempCoupons = JSON.parse(JSON.stringify(this.tierForm.coupons || []));
				this.couponTab = 0;
				this.couponVisible = true;
				this.loadCoupons();
			},
			closeCouponSelect() {
				this.couponVisible = false;
			},
			loadCoupons() {
				this.couponLoading = true;
				// couponType: 1满减 2折扣；tabs: 0折扣 1满减
				const couponType = this.couponTab === 0 ? '2' : '1';
				prepaidApi
					.getCouponPage({ couponType, pageNo: 1, pageSize: 100 })
					.then((res) => {
						if (res.data.code !== 200) {
							uni.showToast({ title: res.data.message || '优惠券加载失败', icon: 'none' });
							return;
						}
						const page = res.data.result || {};
						const records = Array.isArray(page.records) ? page.records : [];
						const list = records.map((item) => this.mapCouponItem(item));
						if (this.couponTab === 0) {
							this.discountCoupons = list;
						} else {
							this.reduceCoupons = list;
						}
					})
					.catch(() => {
						uni.showToast({ title: '网络异常，请稍后重试', icon: 'none' });
					})
					.finally(() => {
						this.couponLoading = false;
					});
			},
			isCouponChecked(id) {
				return this.tempCoupons.some((c) => c.id === id && Number(c.qty) > 0);
			},
			getCouponQty(id) {
				const found = this.tempCoupons.find((c) => c.id === id);
				return found ? Number(found.qty) || 0 : 0;
			},
			findCouponMeta(id) {
				return (
					this.discountCoupons.find((c) => c.id === id) ||
					this.reduceCoupons.find((c) => c.id === id) ||
					null
				);
			},
			toggleCoupon(item) {
				const idx = this.tempCoupons.findIndex((c) => c.id === item.id);
				if (idx >= 0 && Number(this.tempCoupons[idx].qty) > 0) {
					this.tempCoupons.splice(idx, 1);
					return;
				}
				if (idx >= 0) {
					this.$set(this.tempCoupons[idx], 'qty', 1);
				} else {
					this.tempCoupons.push({
						id: item.id,
						name: item.name,
						type: this.couponTab === 0 ? 'discount' : 'reduce',
						qty: 1
					});
				}
			},
			changeCouponQty(id, delta) {
				const idx = this.tempCoupons.findIndex((c) => c.id === id);
				const meta = this.findCouponMeta(id);
				if (idx < 0) {
					if (delta > 0 && meta) {
						this.tempCoupons.push({
							id,
							name: meta.name,
							type: this.couponTab === 0 ? 'discount' : 'reduce',
							qty: 1
						});
					}
					return;
				}
				const next = Math.max(0, (Number(this.tempCoupons[idx].qty) || 0) + delta);
				if (next === 0) {
					this.tempCoupons.splice(idx, 1);
				} else {
					this.$set(this.tempCoupons[idx], 'qty', next);
				}
			},
			confirmCouponSelect() {
				this.tierForm.coupons = this.tempCoupons
					.filter((c) => Number(c.qty) > 0)
					.map((c) => ({ ...c, qty: Number(c.qty) }));
				this.couponVisible = false;
			},
			onSave() {
				if (this.saving) return;
				if (this.form.tiers.length < 2) {
					uni.showToast({ title: '至少配置2个固定充值档位', icon: 'none' });
					return;
				}
				const amounts = this.form.tiers.map((t) => Number(t.amount) || 0);
				for (let i = 0; i < amounts.length; i++) {
					if (!Number.isInteger(amounts[i]) || amounts[i] <= 0) {
						uni.showToast({ title: '档位充值金额须为正整数', icon: 'none' });
						return;
					}
				}
				for (let i = 1; i < amounts.length; i++) {
					if (amounts[i] <= amounts[i - 1]) {
						uni.showToast({ title: '档位充值金额须严格递增', icon: 'none' });
						return;
					}
				}
				// 有赠送余额/优惠券时接口要求关闭自定义充值
				const customAmountEnabled = !this.hasGiftConfig;
				const minRaw = String(this.form.minAmount || '').trim();
				const lowest = this.lowestTierAmount;
				let customMinAmount = lowest || 0;
				if (minRaw !== '') {
					if (!/^\d+$/.test(minRaw) || Number(minRaw) <= 0) {
						uni.showToast({ title: '自定义最低金额须为正整数', icon: 'none' });
						return;
					}
					customMinAmount = Number(minRaw);
					if (lowest && customMinAmount < lowest) {
						uni.showToast({
							title: `自定义最低金额不能低于最低档位（${lowest}）`,
							icon: 'none'
						});
						return;
					}
				} else if (!lowest) {
					uni.showToast({ title: '请配置固定充值档位', icon: 'none' });
					return;
				}
				const payload = {
					acceptSharedPrepaid: !!this.form.acceptShare,
					customAmountEnabled,
					customMinAmount,
					tiers: this.form.tiers.map((tier) => ({
						rechargeAmount: Number(tier.amount),
						giftAmount: Number(tier.giftAmount) || 0,
						coupons: (tier.coupons || [])
							.filter((c) => Number(c.qty) > 0)
							.map((c) => ({
								couponId: c.id,
								quantity: Number(c.qty)
							}))
					}))
				};
				if (this.configVersion != null) {
					payload.version = this.configVersion;
				}
				this.saving = true;
				prepaidApi
					.saveRechargeConfig(payload)
					.then((res) => {
						if (res.data.code === 200) {
							uni.showToast({ title: '保存成功', icon: 'none' });
							setTimeout(() => {
								uni.navigateBack();
							}, 500);
						} else {
							uni.showToast({ title: res.data.message || '保存失败', icon: 'none' });
						}
					})
					.catch(() => {
						uni.showToast({ title: '网络异常，请稍后重试', icon: 'none' });
					})
					.finally(() => {
						this.saving = false;
					});
			}
		}
	};
</script>

<style scoped lang="scss">
	.page {
		min-height: 100vh;
		background: #f5f5f5;
		padding: 24rpx;
		padding-bottom: calc(160rpx + env(safe-area-inset-bottom));
		box-sizing: border-box;
	}

	.card {
		background: #fff;
		border-radius: 16rpx;
		margin-bottom: 24rpx;
	}

	.switch-card {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 28rpx 28rpx;

		.label {
			font-size: 28rpx;
			color: #333;
			flex: 1;
			padding-right: 24rpx;
		}
	}

	.min-card {
		padding: 28rpx 28rpx 32rpx;

		.min-head {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 28rpx;

			.label {
				font-size: 28rpx;
				color: #333;
			}

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

		.min-input-wrap {
			display: flex;
			align-items: baseline;
			padding-bottom: 16rpx;
			border-bottom: 1px solid #e8e8e8;

			.currency {
				font-size: 40rpx;
				color: #999;
				margin-right: 8rpx;
				line-height: 1;
			}

			.min-input {
				flex: 1;
				font-size: 40rpx;
				color: #333;
				line-height: 1.2;
			}
		}
	}

	.placeholder {
		color: #bbb;
		font-size: 40rpx;
	}

	.section-head {
		margin: 8rpx 0 20rpx;
		padding: 0 4rpx;

		.section-title-row {
			display: flex;
			align-items: center;
			margin-bottom: 10rpx;
		}

		.section-bar {
			width: 8rpx;
			height: 28rpx;
			border-radius: 4rpx;
			background: #1c7cf9;
			margin-right: 12rpx;
			flex-shrink: 0;
		}

		.section-title {
			font-size: 30rpx;
			font-weight: 600;
			color: #333;
		}

		.section-tip {
			font-size: 22rpx;
			color: #999;
			padding-left: 20rpx;
		}
	}

	.tier-list {
		padding-bottom: 40rpx;
	}

	.tier-card {
		background: #fff;
		border-radius: 16rpx;
		padding: 28rpx;
		margin-bottom: 20rpx;

		.tier-top {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 8rpx;

			.tier-name {
				font-size: 30rpx;
				font-weight: 600;
				color: #333;
			}

			.tier-ops {
				display: flex;
				align-items: center;
				gap: 28rpx;

				.op {
					padding: 4rpx;
				}
			}
		}

		.tier-line {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 18rpx 0;
			border-bottom: 1px solid #f2f2f2;
			font-size: 26rpx;

			&:last-child {
				border-bottom: none;
				padding-bottom: 0;
			}

			.k {
				color: #999;
			}

			.v {
				color: #333;
			}
		}
	}

	.empty {
		padding: 80rpx 0;
		text-align: center;
		color: #ccc;
		font-size: 26rpx;
	}

	.fab {
		position: fixed;
		right: 40rpx;
		bottom: calc(170rpx + env(safe-area-inset-bottom));
		width: 60rpx;
		height: 60rpx;
		z-index: 20;
	}

	.footer {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		padding: 20rpx 40rpx calc(20rpx + env(safe-area-inset-bottom));
		background: transparent;
		z-index: 30;

		.save-btn {
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
			border-radius: 44rpx;
			background: #1c7cf9;
			color: #fff;
			font-size: 32rpx;
			font-weight: 500;

			&.disabled {
				background: #c0c4cc;
			}
		}

		&.sub-footer {
			position: relative;
			z-index: 1;
			flex-shrink: 0;
			background: #fff;
			box-shadow: 0 -4rpx 16rpx rgba(0, 0, 0, 0.04);

			.save-btn {
				border-radius: 12rpx;
				background: #2979ff;
			}
		}

		&.tier-footer,
		&.coupon-footer {
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			padding: 20rpx 40rpx calc(20rpx + env(safe-area-inset-bottom));
			background: transparent;
			box-shadow: none;

			.save-btn {
				border-radius: 44rpx;
				background: linear-gradient(90deg, #4da3ff 0%, #1c7cf9 100%);

				&.disabled {
					background: linear-gradient(90deg, rgba(77, 163, 255, 0.35) 0%, rgba(28, 124, 249, 0.35) 100%);
					color: rgba(255, 255, 255, 0.9);
				}
			}
		}
	}

	.sub-nav {
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		height: 88rpx;
		padding-top: var(--status-bar-height);
		background: #fff;
		border-bottom: 1px solid #f0f0f0;
		box-sizing: content-box;

		.sub-nav-back {
			position: absolute;
			left: 24rpx;
			bottom: 0;
			height: 88rpx;
			display: flex;
			align-items: center;
			padding: 0 12rpx;
		}

		.sub-nav-title {
			font-size: 32rpx;
			color: #333;
			font-weight: 500;
			line-height: 88rpx;
		}
	}

	.sub-page {
		width: 100vw;
		height: 100vh;
		background: #f5f5f5;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		padding-bottom: calc(140rpx + env(safe-area-inset-bottom));
	}

	.tier-page {
		.form-card {
			margin-top: 24rpx;
		}
	}

	.form-card {
		margin: 24rpx;
		background: #fff;
		border-radius: 16rpx;
		overflow: hidden;
		flex-shrink: 0;

		.form-title {
			padding: 28rpx 28rpx 8rpx;
			font-size: 30rpx;
			font-weight: 600;
			color: #333;
		}

		.form-row {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 28rpx;
			border-bottom: 1px solid #f2f2f2;

			&:last-child {
				border-bottom: none;
			}
		}

		.form-label {
			font-size: 28rpx;
			color: #333;
			width: 200rpx;
			flex-shrink: 0;
		}

		.form-input {
			flex: 1;
			text-align: right;
			font-size: 28rpx;
			color: #333;
		}

		.form-placeholder {
			color: #c0c4cc;
			font-size: 28rpx;
		}

		.link-row {
			.link-right {
				display: flex;
				align-items: center;
				gap: 8rpx;
			}

			.link-text {
				font-size: 28rpx;
				color: #c0c4cc;

				&.active {
					color: #333;
				}
			}
		}
	}

	.coupon-page {
		$coupon-orange: #ff5f3e;
		$ticket-left-w: 28%;

		.tabs {
			display: flex;
			background: #fff;
			border-bottom: 1px solid #f0f0f0;
			flex-shrink: 0;
			padding-bottom: 4rpx;

			.tab {
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: center;
				height: 88rpx;
				position: relative;

				.tab-text {
					font-size: 28rpx;
					color: #999;
					line-height: 1.2;
				}

				.tab-indicator {
					position: absolute;
					left: 50%;
					bottom: 10rpx;
					transform: translateX(-50%);
					width: 48rpx;
					height: 12rpx;
				}

				&.active {
					.tab-text {
						color: #1c7cf9;
						font-weight: 600;
					}
				}
			}
		}

		.coupon-scroll {
			flex: 1;
			height: 0;
			padding: 24rpx;
			box-sizing: border-box;
		}

		.coupon-item {
			display: flex;
			align-items: center;
			background: #fff;
			border-radius: 16rpx;
			padding: 24rpx 20rpx;
			margin-bottom: 20rpx;
			gap: 18rpx;
		}

		.radio {
			width: 34rpx;
			height: 34rpx;
			border-radius: 50%;
			border: 2rpx solid #c8c8c8;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-shrink: 0;
			box-sizing: border-box;

			&.checked {
				background: #1c7cf9;
				border-color: #1c7cf9;
			}
		}

		.coupon-ticket {
			position: relative;
			flex: 1;
			min-width: 0;
			display: flex;
			align-items: stretch;
			min-height: 180rpx;
			box-sizing: border-box;
		}

		.ticket-bg {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			z-index: 0;
			pointer-events: none;
		}

		.ticket-left {
			position: relative;
			z-index: 1;
			width: $ticket-left-w;
			flex-shrink: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 24rpx 16rpx 24rpx 20rpx;
			box-sizing: border-box;
		}

		.ticket-value {
			font-size: 44rpx;
			font-weight: 700;
			color: $coupon-orange;
			text-align: center;
			line-height: 1.2;
			word-break: break-all;

			&.multi {
				font-size: 26rpx;
				line-height: 1.45;
				white-space: pre-line;
			}
		}

		.ticket-right {
			position: relative;
			z-index: 1;
			flex: 1;
			min-width: 0;
			padding: 22rpx 24rpx 18rpx 28rpx;
			display: flex;
			flex-direction: column;
			box-sizing: border-box;
		}

		.cname {
			font-size: 28rpx;
			font-weight: 600;
			color: #333;
			margin-bottom: 8rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			line-height: 1.3;
		}

		.ccond {
			font-size: 24rpx;
			color: $coupon-orange;
			line-height: 1.4;
			margin-bottom: 8rpx;
		}

		.ticket-bottom {
			margin-top: auto;
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 12rpx;
		}

		.cvalid {
			flex: 1;
			min-width: 0;
			font-size: 22rpx;
			color: #999;
			line-height: 1.4;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		.stepper {
			display: flex;
			align-items: center;
			flex-shrink: 0;
			gap: 12rpx;

			.step-btn {
				width: 36rpx;
				height: 36rpx;
				border-radius: 6rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				box-sizing: border-box;

				.step-icon {
					font-size: 26rpx;
					line-height: 1;
					color: #fff;
					font-weight: 500;
				}

				&.minus {
					background: #d0d0d0;

					&.active {
						background: $coupon-orange;
					}
				}

				&.plus {
					background: $coupon-orange;
				}
			}

			.step-num {
				min-width: 28rpx;
				text-align: center;
				font-size: 28rpx;
				color: #333;
				line-height: 36rpx;
			}
		}
	}
</style>