|
|
@@ -1,144 +1,144 @@
|
|
|
<template>
|
|
|
<view class="upgrade-page-wrapper">
|
|
|
- <scroll-view class="page" scroll-y>
|
|
|
- <!-- 当前会员状态卡片 -->
|
|
|
- <view class="status-card">
|
|
|
- <view class="status-badge" :class="isFree ? 'badge-free' : 'badge-family'">
|
|
|
- <text class="badge-icon">{{ isFree ? '○' : '●' }}</text>
|
|
|
- <text class="badge-text">{{ currentLevelName }}</text>
|
|
|
- </view>
|
|
|
- <view class="status-body" v-if="membership && membership.levelCode !== 'FREE'">
|
|
|
- <view class="expiry-row">
|
|
|
- <text class="expiry-label">到期时间</text>
|
|
|
- <text class="expiry-value">{{ formatDate(membership.endDate) }}</text>
|
|
|
+ <scroll-view class="page" scroll-y>
|
|
|
+ <!-- 当前会员状态卡片 -->
|
|
|
+ <view class="status-card">
|
|
|
+ <view class="status-badge" :class="isFree ? 'badge-free' : 'badge-family'">
|
|
|
+ <text class="badge-icon">{{ isFree ? '○' : '●' }}</text>
|
|
|
+ <text class="badge-text">{{ currentLevelName }}</text>
|
|
|
</view>
|
|
|
- <view class="days-remaining" v-if="membership.isActive">
|
|
|
- <text class="days-num">{{ membership.daysRemaining || 0 }}</text>
|
|
|
- <text class="days-unit">天剩余</text>
|
|
|
+ <view class="status-body" v-if="membership && membership.levelCode !== 'FREE'">
|
|
|
+ <view class="expiry-row">
|
|
|
+ <text class="expiry-label">到期时间</text>
|
|
|
+ <text class="expiry-value">{{ formatDate(membership.endDate) }}</text>
|
|
|
+ </view>
|
|
|
+ <view class="days-remaining" v-if="membership.isActive">
|
|
|
+ <text class="days-num">{{ membership.daysRemaining || 0 }}</text>
|
|
|
+ <text class="days-unit">天剩余</text>
|
|
|
+ </view>
|
|
|
+ <view class="expired-msg" v-else>
|
|
|
+ <text class="expired-text">会员已过期,续费恢复权益</text>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
- <view class="expired-msg" v-else>
|
|
|
- <text class="expired-text">会员已过期,续费恢复权益</text>
|
|
|
+ <view class="status-body" v-else>
|
|
|
+ <text class="free-hint">当前为免费版,开通家庭会员解锁全部特权</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
- <view class="status-body" v-else>
|
|
|
- <text class="free-hint">当前为免费版,开通家庭会员解锁全部特权</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
|
|
|
- <!-- 家庭会员开通卡片 -->
|
|
|
- <view class="upgrade-card" v-if="isFree">
|
|
|
- <view class="upgrade-header">
|
|
|
- <text class="upgrade-title">家庭会员</text>
|
|
|
- <text class="upgrade-subtitle">FAMILY</text>
|
|
|
- </view>
|
|
|
- <view class="upgrade-price">
|
|
|
- <text class="price-symbol">¥</text>
|
|
|
- <text class="price-amount">365</text>
|
|
|
- <text class="price-unit">/年</text>
|
|
|
- </view>
|
|
|
- <view class="feature-list">
|
|
|
- <view class="feature-item" v-for="(feature, idx) in features" :key="idx">
|
|
|
- <text class="feature-check">✓</text>
|
|
|
- <text class="feature-text">{{ feature }}</text>
|
|
|
+ <!-- 家庭会员开通卡片 -->
|
|
|
+ <view class="upgrade-card" v-if="isFree">
|
|
|
+ <view class="upgrade-header">
|
|
|
+ <text class="upgrade-title">家庭会员</text>
|
|
|
+ <text class="upgrade-subtitle">FAMILY</text>
|
|
|
</view>
|
|
|
+ <view class="upgrade-price">
|
|
|
+ <text class="price-symbol">¥</text>
|
|
|
+ <text class="price-amount">365</text>
|
|
|
+ <text class="price-unit">/年</text>
|
|
|
+ </view>
|
|
|
+ <view class="feature-list">
|
|
|
+ <view class="feature-item" v-for="(feature, idx) in features" :key="idx">
|
|
|
+ <text class="feature-check">✓</text>
|
|
|
+ <text class="feature-text">{{ feature }}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- Coupon section -->
|
|
|
+ <view class="coupon-row" @click="openCouponPicker">
|
|
|
+ <text class="coupon-row-label">优惠券</text>
|
|
|
+ <text v-if="selectedCoupon" class="coupon-row-discount">-{{ formatPriceWithSymbol(selectedCoupon.value) }} {{ selectedCoupon.name }}</text>
|
|
|
+ <text v-else class="coupon-row-placeholder">选择优惠券</text>
|
|
|
+ <text class="coupon-row-arrow">›</text>
|
|
|
+ </view>
|
|
|
+ <button class="btn-upgrade" @click="handleUpgrade">立即开通</button>
|
|
|
</view>
|
|
|
- <!-- Coupon section -->
|
|
|
- <view class="coupon-row" @click="openCouponPicker">
|
|
|
- <text class="coupon-row-label">优惠券</text>
|
|
|
- <text v-if="selectedCoupon" class="coupon-row-discount">-{{ formatPriceWithSymbol(selectedCoupon.value) }} {{ selectedCoupon.name }}</text>
|
|
|
- <text v-else class="coupon-row-placeholder">选择优惠券</text>
|
|
|
- <text class="coupon-row-arrow">›</text>
|
|
|
- </view>
|
|
|
- <button class="btn-upgrade" @click="handleUpgrade">立即开通</button>
|
|
|
- </view>
|
|
|
-
|
|
|
- <!-- 续费卡片 -->
|
|
|
- <view class="upgrade-card" v-else>
|
|
|
- <view class="upgrade-header">
|
|
|
- <text class="upgrade-title">续费会员</text>
|
|
|
- <text class="upgrade-subtitle">保持权益不中断</text>
|
|
|
- </view>
|
|
|
- <view class="upgrade-price">
|
|
|
- <text class="price-symbol">¥</text>
|
|
|
- <text class="price-amount">365</text>
|
|
|
- <text class="price-unit">/年</text>
|
|
|
- </view>
|
|
|
- <!-- Coupon section -->
|
|
|
- <view class="coupon-row" @click="openCouponPicker">
|
|
|
- <text class="coupon-row-label">优惠券</text>
|
|
|
- <text v-if="selectedCoupon" class="coupon-row-discount">-{{ formatPriceWithSymbol(selectedCoupon.value) }} {{ selectedCoupon.name }}</text>
|
|
|
- <text v-else class="coupon-row-placeholder">选择优惠券</text>
|
|
|
- <text class="coupon-row-arrow">›</text>
|
|
|
- </view>
|
|
|
- <button class="btn-upgrade btn-renew" @click="handleRenew">立即续费</button>
|
|
|
- </view>
|
|
|
|
|
|
- <!-- 权益对比表 -->
|
|
|
- <view class="compare-section">
|
|
|
- <text class="section-title">权益对比</text>
|
|
|
- <view class="compare-table">
|
|
|
- <view class="compare-row header-row">
|
|
|
- <text class="compare-cell cell-feature">权益项</text>
|
|
|
- <text class="compare-cell cell-free">免费</text>
|
|
|
- <text class="compare-cell cell-family active">家庭会员</text>
|
|
|
+ <!-- 续费卡片 -->
|
|
|
+ <view class="upgrade-card" v-else>
|
|
|
+ <view class="upgrade-header">
|
|
|
+ <text class="upgrade-title">续费会员</text>
|
|
|
+ <text class="upgrade-subtitle">保持权益不中断</text>
|
|
|
+ </view>
|
|
|
+ <view class="upgrade-price">
|
|
|
+ <text class="price-symbol">¥</text>
|
|
|
+ <text class="price-amount">365</text>
|
|
|
+ <text class="price-unit">/年</text>
|
|
|
</view>
|
|
|
- <view class="compare-row" v-for="(item, idx) in compareData" :key="idx">
|
|
|
- <text class="compare-cell cell-feature">{{ item.name }}</text>
|
|
|
- <text class="compare-cell cell-free">{{ item.free }}</text>
|
|
|
- <text class="compare-cell cell-family active">{{ item.family }}</text>
|
|
|
+ <!-- Coupon section -->
|
|
|
+ <view class="coupon-row" @click="openCouponPicker">
|
|
|
+ <text class="coupon-row-label">优惠券</text>
|
|
|
+ <text v-if="selectedCoupon" class="coupon-row-discount">-{{ formatPriceWithSymbol(selectedCoupon.value) }} {{ selectedCoupon.name }}</text>
|
|
|
+ <text v-else class="coupon-row-placeholder">选择优惠券</text>
|
|
|
+ <text class="coupon-row-arrow">›</text>
|
|
|
</view>
|
|
|
+ <button class="btn-upgrade btn-renew" @click="handleRenew">立即续费</button>
|
|
|
</view>
|
|
|
- </view>
|
|
|
|
|
|
- <!-- 升级记录 -->
|
|
|
- <view class="records-section" v-if="records.length > 0">
|
|
|
- <text class="section-title">升级记录</text>
|
|
|
- <view class="record-item" v-for="record in records" :key="record.id">
|
|
|
- <view class="record-left">
|
|
|
- <text class="record-level">{{ record.levelName }}</text>
|
|
|
- <text class="record-time">{{ formatDate(record.createdAt) }}</text>
|
|
|
+ <!-- 权益对比表 -->
|
|
|
+ <view class="compare-section">
|
|
|
+ <text class="section-title">权益对比</text>
|
|
|
+ <view class="compare-table">
|
|
|
+ <view class="compare-row header-row">
|
|
|
+ <text class="compare-cell cell-feature">权益项</text>
|
|
|
+ <text class="compare-cell cell-free">免费</text>
|
|
|
+ <text class="compare-cell cell-family active">家庭会员</text>
|
|
|
+ </view>
|
|
|
+ <view class="compare-row" v-for="(item, idx) in compareData" :key="idx">
|
|
|
+ <text class="compare-cell cell-feature">{{ item.name }}</text>
|
|
|
+ <text class="compare-cell cell-free">{{ item.free }}</text>
|
|
|
+ <text class="compare-cell cell-family active">{{ item.family }}</text>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
- <text class="record-amount">{{ formatPriceWithSymbol(record.amount) }}</text>
|
|
|
</view>
|
|
|
- </view>
|
|
|
- </scroll-view>
|
|
|
-
|
|
|
- <!-- Coupon Picker Bottom Sheet -->
|
|
|
- <view class="modal-mask" v-if="showCouponPicker" @click="showCouponPicker = false">
|
|
|
- <view class="coupon-picker" @click.stop>
|
|
|
- <view class="picker-header">
|
|
|
- <text class="picker-title">选择优惠券</text>
|
|
|
- <text class="picker-close" @click="showCouponPicker = false">关闭</text>
|
|
|
- </view>
|
|
|
- <scroll-view scroll-y class="picker-list">
|
|
|
- <view
|
|
|
- v-for="coupon in availableCoupons"
|
|
|
- :key="coupon.id"
|
|
|
- class="picker-item"
|
|
|
- :class="selectedCoupon && selectedCoupon.id === coupon.id ? 'picker-item-active' : ''"
|
|
|
- @click="selectCoupon(coupon)"
|
|
|
- >
|
|
|
- <view class="picker-item-left">
|
|
|
- <text class="picker-item-value">{{ formatPriceWithSymbol(coupon.value) }}</text>
|
|
|
+
|
|
|
+ <!-- 升级记录 -->
|
|
|
+ <view class="records-section" v-if="records.length > 0">
|
|
|
+ <text class="section-title">升级记录</text>
|
|
|
+ <view class="record-item" v-for="record in records" :key="record.id">
|
|
|
+ <view class="record-left">
|
|
|
+ <text class="record-level">{{ record.levelName }}</text>
|
|
|
+ <text class="record-time">{{ formatDate(record.createdAt) }}</text>
|
|
|
</view>
|
|
|
- <view class="picker-item-right">
|
|
|
- <text class="picker-item-name">{{ coupon.name }}</text>
|
|
|
- <text class="picker-item-condition">{{ getCouponCondition(coupon.minSpend) }}</text>
|
|
|
+ <text class="record-amount">{{ formatPriceWithSymbol(record.amount) }}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </scroll-view>
|
|
|
+
|
|
|
+ <!-- Coupon Picker Bottom Sheet -->
|
|
|
+ <view class="modal-mask" v-if="showCouponPicker" @click="showCouponPicker = false">
|
|
|
+ <view class="coupon-picker" @click.stop>
|
|
|
+ <view class="picker-header">
|
|
|
+ <text class="picker-title">选择优惠券</text>
|
|
|
+ <text class="picker-close" @click="showCouponPicker = false">关闭</text>
|
|
|
+ </view>
|
|
|
+ <scroll-view scroll-y class="picker-list">
|
|
|
+ <view
|
|
|
+ v-for="coupon in availableCoupons"
|
|
|
+ :key="coupon.id"
|
|
|
+ class="picker-item"
|
|
|
+ :class="selectedCoupon && selectedCoupon.id === coupon.id ? 'picker-item-active' : ''"
|
|
|
+ @click="selectCoupon(coupon)"
|
|
|
+ >
|
|
|
+ <view class="picker-item-left">
|
|
|
+ <text class="picker-item-value">{{ formatPriceWithSymbol(coupon.value) }}</text>
|
|
|
+ </view>
|
|
|
+ <view class="picker-item-right">
|
|
|
+ <text class="picker-item-name">{{ coupon.name }}</text>
|
|
|
+ <text class="picker-item-condition">{{ getCouponCondition(coupon.minSpend) }}</text>
|
|
|
+ </view>
|
|
|
+ <view class="picker-item-check" v-if="selectedCoupon && selectedCoupon.id === coupon.id">
|
|
|
+ <text>✓</text>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
- <view class="picker-item-check" v-if="selectedCoupon && selectedCoupon.id === coupon.id">
|
|
|
- <text>✓</text>
|
|
|
+ <view class="picker-empty" v-if="availableCoupons.length === 0">
|
|
|
+ <text>暂无可用优惠券</text>
|
|
|
</view>
|
|
|
+ </scroll-view>
|
|
|
+ <view class="picker-footer" v-if="selectedCoupon">
|
|
|
+ <button class="picker-btn-remove" @click="removeCoupon">不使用优惠券</button>
|
|
|
</view>
|
|
|
- <view class="picker-empty" v-if="availableCoupons.length === 0">
|
|
|
- <text>暂无可用优惠券</text>
|
|
|
- </view>
|
|
|
- </scroll-view>
|
|
|
- <view class="picker-footer" v-if="selectedCoupon">
|
|
|
- <button class="picker-btn-remove" @click="removeCoupon">不使用优惠券</button>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
- </view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|