Просмотр исходного кода

feat: 发现页新增会员升级营销触点 — 商品详情页立省横幅+发现页推荐卡片

Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-openagent)

Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
Xiaogang Liao 3 месяцев назад
Родитель
Сommit
2f73d4146e

+ 72 - 2
cfc-frontend/pages/discover/index.vue

@@ -49,6 +49,20 @@
       </view>
     </view>
 
+    <!-- 家庭会员推荐卡片 -->
+    <view v-if="!isMember" class="member-card" @click="goUpgrade">
+      <view class="member-card-bg">
+        <text class="member-card-icon">👑</text>
+        <view class="member-card-texts">
+          <text class="member-card-title">开通家庭会员</text>
+          <text class="member-card-desc">享专属折扣 · 成长服务 · 规划指导</text>
+        </view>
+        <view class="member-card-action">
+          <text class="member-card-btn">立即开通</text>
+        </view>
+      </view>
+    </view>
+
     <!-- 知识中心 -->
     <view class="article-section">
       <view class="section-header">
@@ -111,7 +125,7 @@
 
 <script>
 import PageBanner from '../../components/PageBanner.vue'
-import { productList, getFeaturedArticles } from '@/utils/api.js'
+import { productList, getFeaturedArticles, getMyMembership } from '@/utils/api.js'
 import WuxingSandbox from '../../components/wuxing-sandbox.vue'
 export default {
   components: { PageBanner, WuxingSandbox },
@@ -136,7 +150,8 @@ export default {
         'linear-gradient(135deg, #F3E5F5, #CE93D8)',
         'linear-gradient(135deg, #FCE4EC, #F06292)'
       ],
-      coverIcons: ['🌱', '🏃', '🎯', '🌟', '📚']
+      coverIcons: ['🌱', '🏃', '🎯', '🌟', '📚'],
+      isMember: false
     }
   },
   onLoad(options) {
@@ -145,10 +160,22 @@ export default {
     }
   },
   onShow() {
+    this.checkMemberStatus()
     this.loadProducts()
     this.loadFeaturedArticles()
   },
   methods: {
+    checkMemberStatus() {
+      var that = this
+      getMyMembership().then(function(res) {
+        if (res.data && res.data.memberLevel) {
+          that.isMember = res.data.memberLevel !== 'FREE'
+        }
+      }).catch(function() {})
+    },
+    goUpgrade() {
+      uni.navigateTo({ url: '/pages/membership/upgrade' })
+    },
     loadProducts() {
       this.loading = true
       const params = { page: 1, size: 10 }
@@ -355,6 +382,49 @@ export default {
   border-radius: 10rpx;
 }
 
+/* ===== 家庭会员推荐卡片 ===== */
+.member-card {
+  margin: 20rpx 30rpx 0;
+}
+.member-card-bg {
+  display: flex;
+  align-items: center;
+  background: linear-gradient(135deg, #F97316, #FB923C);
+  border-radius: 20rpx;
+  padding: 24rpx 30rpx;
+}
+.member-card-icon {
+  font-size: 48rpx;
+  margin-right: 16rpx;
+}
+.member-card-texts {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+.member-card-title {
+  font-size: 30rpx;
+  font-weight: bold;
+  color: #fff;
+}
+.member-card-desc {
+  font-size: 22rpx;
+  color: rgba(255,255,255,0.85);
+  margin-top: 4rpx;
+}
+.member-card-action {
+  margin-left: 16rpx;
+}
+.member-card-btn {
+  display: inline-block;
+  padding: 8rpx 24rpx;
+  background: #fff;
+  color: #F97316;
+  font-size: 24rpx;
+  font-weight: bold;
+  border-radius: 30rpx;
+}
+
 /* ===== 推荐文章 ===== */
 .article-section {
   margin: 20rpx 30rpx 0;

+ 46 - 2
cfc-frontend/pages/discover/product-detail/product-detail.vue

@@ -17,6 +17,11 @@
           <text class="price">{{ formatPriceWithSymbol(displayPrice) }}</text>
           <text v-if="product.memberPrice" class="member-price">会员价 {{ formatPriceWithSymbol(product.memberPrice) }}</text>
         </view>
+        <!-- Member upgrade banner -->
+        <view v-if="showMemberBanner" class="member-banner" @click="goUpgrade">
+          <text class="member-banner-text">开通会员立省 <text class="member-banner-saving">{{ formatPriceWithSymbol(product.price - product.memberPrice) }}</text>,享会员专享价</text>
+          <text class="member-banner-arrow">›</text>
+        </view>
         <view v-if="effectivePpointText" class="ppoint-row">
           <text class="ppoint-label">可分配利润:</text>
           <text class="ppoint-value">{{ effectivePpointText }}</text>
@@ -87,7 +92,7 @@
 
 <script>
 import config from '@/config.js'
-import { productDetail } from '@/utils/api.js'
+import { productDetail, getMyMembership } from '@/utils/api.js'
 
 export default {
   data() {
@@ -98,10 +103,14 @@ export default {
       specGroups: [],
       specMap: {},
       selectedSpecs: {},
-      suppliers: []
+      suppliers: [],
+      isMember: false
     }
   },
   computed: {
+    showMemberBanner() {
+      return !this.isMember && this.product.memberPrice && this.product.memberPrice < this.product.price
+    },
     typeLabel() {
       var map = {
         activity: '活动',
@@ -145,6 +154,7 @@ export default {
     }
   },
   onLoad(options) {
+    this.checkMemberStatus()
     if (options.id) {
       this.loadDetail(options.id)
     }
@@ -153,6 +163,17 @@ export default {
     this.loadCartCount()
   },
   methods: {
+    checkMemberStatus() {
+      var that = this
+      getMyMembership().then(function(res) {
+        if (res.data && res.data.memberLevel) {
+          that.isMember = res.data.memberLevel !== 'FREE'
+        }
+      }).catch(function() {})
+    },
+    goUpgrade() {
+      uni.navigateTo({ url: '/pages/membership/upgrade' })
+    },
     loadDetail(id) {
       this.loading = true
       var that = this
@@ -338,6 +359,29 @@ export default {
   align-items: baseline;
   margin-bottom: 16rpx;
 }
+.member-banner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background: linear-gradient(135deg, #FFF7ED, #FFEDD5);
+  border: 2rpx solid #FED7AA;
+  border-radius: 12rpx;
+  padding: 16rpx 20rpx;
+  margin-bottom: 16rpx;
+}
+.member-banner-text {
+  font-size: 24rpx;
+  color: #C2410C;
+}
+.member-banner-saving {
+  font-size: 30rpx;
+  font-weight: bold;
+  color: #F97316;
+}
+.member-banner-arrow {
+  font-size: 32rpx;
+  color: #F97316;
+}
 .price {
   font-size: 40rpx;
   color: #F97316;