|
|
@@ -0,0 +1,343 @@
|
|
|
+<template>
|
|
|
+ <view class="member-center">
|
|
|
+ <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>
|
|
|
+ </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="status-body" v-else>
|
|
|
+ <text class="free-hint">当前为免费版,开通会员解锁全部特权</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 会员权益亮点 -->
|
|
|
+ <view class="benefit-card">
|
|
|
+ <text class="benefit-card-title">{{ isFree ? '开通会员,即刻享有' : '您的会员权益' }}</text>
|
|
|
+ <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>
|
|
|
+ <!-- 主按钮:非会员开通 / 会员续费 -->
|
|
|
+ <button class="btn-main" :class="isFree ? 'btn-upgrade' : 'btn-renew'" @click="goUpgrade">
|
|
|
+ {{ isFree ? '立即开通会员' : '立即续费' }}
|
|
|
+ </button>
|
|
|
+ <view class="benefits-entry" @click="goBenefits">
|
|
|
+ <text class="benefits-entry-icon">👑</text>
|
|
|
+ <text class="benefits-entry-text">查看我的权益</text>
|
|
|
+ <text class="benefits-entry-arrow">›</text>
|
|
|
+ </view>
|
|
|
+ </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">家庭会员</text>
|
|
|
+ <text class="compare-cell cell-premium">高级会员</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">{{ item.family }}</text>
|
|
|
+ <text class="compare-cell cell-premium">{{ item.premium }}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </scroll-view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { getMyMembership } from '../../utils/api.js'
|
|
|
+import { parseDate } from '../../utils/format.js'
|
|
|
+
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ membership: null,
|
|
|
+ isFree: true,
|
|
|
+ currentLevelName: '免费用户',
|
|
|
+ features: ['折扣购物', '家庭管理', '推荐佣金', '专属活动', '任务特权', '成长报告'],
|
|
|
+ compareData: [
|
|
|
+ { name: '商品折扣', free: '普通价格', family: '9折', premium: '8折' },
|
|
|
+ { name: '家庭管理', free: '基础功能', family: '全部功能', premium: '全部功能+优先响应' },
|
|
|
+ { name: '管家服务', free: '—', family: '—', premium: '每周一次' },
|
|
|
+ { name: '推荐佣金', free: '不可参与', family: '最高15%', premium: '最高20%' },
|
|
|
+ { name: '专属活动', free: '部分参与', family: '全部参与', premium: '优先参与' },
|
|
|
+ { name: '成长报告', free: '月度', family: '每周+深度', premium: '每日+深度+专家解读' },
|
|
|
+ { name: '任务配额', free: '每日5个', family: '不限量', premium: '不限量+优先审核' }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onShow() {
|
|
|
+ this.loadData()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ loadData() {
|
|
|
+ var that = this
|
|
|
+ getMyMembership().then(function(res) {
|
|
|
+ var m = res.data || {}
|
|
|
+ that.membership = m
|
|
|
+ if (m.levelCode && m.levelCode !== 'FREE') {
|
|
|
+ that.isFree = false
|
|
|
+ that.currentLevelName = m.levelName || '家庭会员'
|
|
|
+ } else {
|
|
|
+ that.isFree = true
|
|
|
+ that.currentLevelName = '免费用户'
|
|
|
+ }
|
|
|
+ }).catch(function() {})
|
|
|
+ },
|
|
|
+ goUpgrade() {
|
|
|
+ uni.navigateTo({ url: '/pages/membership/upgrade' })
|
|
|
+ },
|
|
|
+ goBenefits() {
|
|
|
+ uni.navigateTo({ url: '/pages/membership/benefits' })
|
|
|
+ },
|
|
|
+ formatDate(date) {
|
|
|
+ if (!date) return ''
|
|
|
+ var d = parseDate(date)
|
|
|
+ if (!d) return ''
|
|
|
+ var month = d.getMonth() + 1
|
|
|
+ var day = d.getDate()
|
|
|
+ return d.getFullYear() + '-' + (month < 10 ? '0' + month : month) + '-' + (day < 10 ? '0' + day : day)
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.page {
|
|
|
+ min-height: 100vh;
|
|
|
+ background: #FFF7ED;
|
|
|
+ padding: 30rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+}
|
|
|
+
|
|
|
+/* ===== 状态卡片 ===== */
|
|
|
+.status-card {
|
|
|
+ background: linear-gradient(135deg, #F97316 0%, #EA580C 100%);
|
|
|
+ border-radius: 20rpx;
|
|
|
+ padding: 40rpx;
|
|
|
+ margin-bottom: 30rpx;
|
|
|
+}
|
|
|
+.status-badge {
|
|
|
+ display: inline-flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 10rpx 24rpx;
|
|
|
+ border-radius: 9999rpx;
|
|
|
+ font-size: 24rpx;
|
|
|
+}
|
|
|
+.badge-free {
|
|
|
+ background: rgba(255,255,255,0.2);
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
+.badge-family {
|
|
|
+ background: rgba(255,255,255,0.3);
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
+.badge-icon {
|
|
|
+ font-size: 20rpx;
|
|
|
+ margin-right: 8rpx;
|
|
|
+}
|
|
|
+.badge-text {
|
|
|
+ font-weight: 600;
|
|
|
+}
|
|
|
+.status-body {
|
|
|
+ margin-top: 24rpx;
|
|
|
+}
|
|
|
+.expiry-row {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+.expiry-label {
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: rgba(255,255,255,0.8);
|
|
|
+}
|
|
|
+.expiry-value {
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #fff;
|
|
|
+ font-weight: 500;
|
|
|
+}
|
|
|
+.days-remaining {
|
|
|
+ display: flex;
|
|
|
+ align-items: baseline;
|
|
|
+ justify-content: center;
|
|
|
+ margin-top: 20rpx;
|
|
|
+}
|
|
|
+.days-num {
|
|
|
+ font-size: 56rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #FEF3C7;
|
|
|
+}
|
|
|
+.days-unit {
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: rgba(255,255,255,0.7);
|
|
|
+ margin-left: 8rpx;
|
|
|
+}
|
|
|
+.expired-msg {
|
|
|
+ text-align: center;
|
|
|
+ margin-top: 16rpx;
|
|
|
+}
|
|
|
+.expired-text {
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #FEF3C7;
|
|
|
+}
|
|
|
+.free-hint {
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: rgba(255,255,255,0.85);
|
|
|
+ text-align: center;
|
|
|
+ display: block;
|
|
|
+}
|
|
|
+
|
|
|
+/* ===== 权益卡片 ===== */
|
|
|
+.benefit-card {
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ padding: 40rpx;
|
|
|
+ margin-bottom: 30rpx;
|
|
|
+ box-shadow: 0 4rpx 24rpx rgba(249, 115, 22, 0.08);
|
|
|
+}
|
|
|
+.benefit-card-title {
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #1E293B;
|
|
|
+ display: block;
|
|
|
+ text-align: center;
|
|
|
+ margin-bottom: 16rpx;
|
|
|
+}
|
|
|
+.feature-list {
|
|
|
+ margin: 16rpx 0 24rpx;
|
|
|
+}
|
|
|
+.feature-item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 12rpx 0;
|
|
|
+}
|
|
|
+.feature-check {
|
|
|
+ width: 36rpx;
|
|
|
+ height: 36rpx;
|
|
|
+ border-radius: 50%;
|
|
|
+ background: #F97316;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 22rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ margin-right: 16rpx;
|
|
|
+ flex-shrink: 0;
|
|
|
+}
|
|
|
+.feature-text {
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #334155;
|
|
|
+}
|
|
|
+.btn-main {
|
|
|
+ width: 100%;
|
|
|
+ border-radius: 44rpx;
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ padding: 24rpx 0;
|
|
|
+ border: none;
|
|
|
+ line-height: 1.4;
|
|
|
+}
|
|
|
+.btn-upgrade {
|
|
|
+ background: linear-gradient(135deg, #F97316, #FB923C);
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
+.btn-renew {
|
|
|
+ background: linear-gradient(135deg, #6366F1, #818CF8);
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
+.btn-main::after {
|
|
|
+ border: none;
|
|
|
+}
|
|
|
+.benefits-entry {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ margin-top: 24rpx;
|
|
|
+ padding: 20rpx;
|
|
|
+ background: #FFF7ED;
|
|
|
+ border-radius: 16rpx;
|
|
|
+}
|
|
|
+.benefits-entry-icon {
|
|
|
+ font-size: 32rpx;
|
|
|
+ margin-right: 8rpx;
|
|
|
+}
|
|
|
+.benefits-entry-text {
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #F97316;
|
|
|
+ font-weight: 500;
|
|
|
+}
|
|
|
+.benefits-entry-arrow {
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #F97316;
|
|
|
+ margin-left: 8rpx;
|
|
|
+}
|
|
|
+
|
|
|
+/* ===== 权益对比表 ===== */
|
|
|
+.compare-section {
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ padding: 30rpx;
|
|
|
+ box-shadow: 0 4rpx 24rpx rgba(249, 115, 22, 0.08);
|
|
|
+}
|
|
|
+.section-title {
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #1E293B;
|
|
|
+ display: block;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+}
|
|
|
+.compare-table {
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+.compare-row {
|
|
|
+ display: flex;
|
|
|
+ padding: 14rpx 0;
|
|
|
+ border-bottom: 1rpx solid #F1F5F9;
|
|
|
+}
|
|
|
+.compare-row:last-child {
|
|
|
+ border-bottom: none;
|
|
|
+}
|
|
|
+.header-row {
|
|
|
+ border-bottom: 2rpx solid #FED7AA;
|
|
|
+}
|
|
|
+.compare-cell {
|
|
|
+ flex: 1;
|
|
|
+ font-size: 22rpx;
|
|
|
+ color: #475569;
|
|
|
+ text-align: center;
|
|
|
+ word-break: break-all;
|
|
|
+}
|
|
|
+.cell-feature {
|
|
|
+ flex: 1.2;
|
|
|
+ text-align: left;
|
|
|
+ color: #334155;
|
|
|
+ font-weight: 500;
|
|
|
+}
|
|
|
+.header-row .compare-cell {
|
|
|
+ color: #F97316;
|
|
|
+ font-weight: bold;
|
|
|
+}
|
|
|
+</style>
|