更新：增加课程和图书VIP购买及“我的”主页vip身份显示

2025-11-27 14:19:51 +08:00
parent 509f735493
commit 7062e675f6
20 changed files with 1117 additions and 66 deletions
--- a/pages/order/vipConfirm.vue
+++ b/pages/order/vipConfirm.vue
@@ -0,0 +1,152 @@
+<template>
+  <view>
+    <!-- 自定义导航栏 -->
+    <nav-bar :title="$t('order.confirmTitle')" />
+
+    <!-- 确认订单组件 -->
+    <Confirm :goodsList="goodsList" :userInfo="userInfo" :orderType="orderType" :allowPointPay="isLengthen" :backStep="orderType === 'abroadVip' ? 2 : 1">
+      <!-- 商品列表内容 -->
+      <template #goodsList>
+        <view class="goods-item" v-for="goods in goodsList" :key="goods.productId">
+          <!-- VIP优惠标签 -->
+          <wd-tag v-if="goods.isVipPrice === 1 && goods.vipPrice" type="danger" mark custom-class="vip-badge">{{ $t('order.vipLabel') }}</wd-tag>
+          
+          <!-- 商品图片 -->
+          <view class="goods-image">
+            <image
+              :src="goods.productImages || '/static/nobg.jpg'"
+              mode="aspectFit"
+            />
+          </view>
+          
+          <!-- 商品信息 -->
+          <view class="goods-info">
+            <text class="goods-name">{{ goods.productName }}</text>
+            <!-- 商品价格组件 -->
+            <GoodsPrice :goods="goods" />
+          </view>
+        </view>
+      </template>
+    </Confirm>
+  </view>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { onLoad, onUnload } from '@dcloudio/uni-app'
+import { orderApi } from '@/api/modules/order'
+import type { IOrderGoods } from '@/types/order'
+import Confirm from '@/components/order/Confirm.vue';
+import GoodsPrice from '@/components/order/GoodsPrice.vue';
+
+/**
+ * 获取用户信息
+ */
+const userInfo = ref({})
+const getUserInfo = async () => {
+  const res = await orderApi.getUserInfo()
+  userInfo.value = res.result || {}
+}
+
+// 商品列表
+const goodsList = ref<IOrderGoods[]>([])
+const isLengthen = ref<boolean>(false)
+const orderType = ref<string>('')
+
+/**
+ * 页面加载
+ */
+onLoad(async () => {
+  try {
+    // 获取商品列表
+    uni.$on('selectedGoods', (data: IOrderGoods) => {
+      console.log('监听到传入的商品数据:', data)
+      isLengthen.value = data.state !== null
+      orderType.value = data.orderType || ''
+      goodsList.value = [ data ]
+    })
+    // 获取用户信息
+    getUserInfo()
+  } catch (error) {
+    console.error('解析商品数据失败:', error)
+    uni.showToast({
+      title: '商品数据错误',
+      icon: 'none'
+    })
+  }
+})
+
+onUnload(() => {
+  uni.$off('selectedGoods')
+})
+</script>
+
+<style lang="scss" scoped>
+.goods-item {
+  position: relative;
+  display: flex;
+  padding-bottom: 20rpx;
+  border-bottom: 1px solid #f0f0f0;
+  
+  &:last-child {
+    border-bottom: none;
+    padding-bottom: 0;
+  }
+  
+  .vip-badge {
+    position: absolute;
+    top: 20rpx;
+    left: 0;
+    z-index: 1;
+  }
+  
+  .goods-image {
+    width: 140rpx;
+    height: 140rpx;
+    flex-shrink: 0;
+    margin-right: 20rpx;
+    background-color: #f5f5f5;
+    border-radius: 8rpx;
+    overflow: hidden;
+    
+    image {
+      width: 100%;
+      height: 100%;
+    }
+  }
+  
+  .goods-info {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    
+    .goods-name {
+      font-size: 28rpx;
+      color: #333;
+      line-height: 1.4;
+      margin-bottom: 10rpx;
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+    }
+    
+    .quantity-row {
+      display: flex;
+      align-items: center;
+      font-size: 24rpx;
+      color: #999;
+      
+      .quantity-label {
+        margin-right: 10rpx;
+      }
+      
+      .quantity-control {
+        display: flex;
+        align-items: center;
+      }
+    }
+  }
+}
+
+</style>