taimed-international-app/pages/order/goodsConfirm.vue

<template>
  <view>
    <!-- 自定义导航栏 -->
    <nav-bar :title="$t('order.confirmTitle')" />

    <!-- 确认订单组件 -->
    <Confirm :goodsList="goodsList" :userInfo="userInfo">
      <template #goodsList>
        <!-- 商品列表内容 -->
        <view
          v-for="(item, index) in goodsList"
          :key="index"
          class="goods-item"
        >
          <!-- VIP优惠标签 -->
          <wd-tag v-if="item.isVipPrice === 1 && item.vipPrice" type="danger" mark custom-class="vip-badge">{{ $t('order.vipLabel') }}</wd-tag>
          
          <!-- 商品图片 -->
          <view class="goods-image">
            <image
              :src="item.productImages || '/static/nobg.jpg'"
              mode="aspectFit"
            />
          </view>
          
          <!-- 商品信息 -->
          <view class="goods-info">
            <text class="goods-name">{{ item.productName }}</text>
            
            <!-- 价格信息 -->
            <view class="price-info">
              <!-- VIP优惠价 -->
              <!-- <view v-if="item.isVipPrice === 1 && item.vipPrice" class="price-row">
                <text class="vip-price">￥{{ item.vipPrice.toFixed(2) }}</text>
                <text class="vip-label">{{ $t('order.vipPriceLabel') }}</text>
                <text class="original-price">￥{{ item.price.toFixed(2) }}</text>
              </view> -->
              
              <!-- 活动价 -->
              <!-- <view v-else-if="item.activityPrice && item.activityPrice > 0" class="price-row">
                <text class="activity-price">￥{{ item.activityPrice.toFixed(2) }}</text>
                <text class="activity-label">{{ $t('order.activityLabel') }}</text>
                <text class="original-price">￥{{ item.price.toFixed(2) }}</text>
              </view> -->
              
              <!-- 普通价格 -->
              <view class="price-row">
                <text class="normal-price">{{ item.price.toFixed(2) }} 天医币</text>
              </view>
            </view>
            
            <!-- 数量 -->
            <!-- <view class="quantity-row">
              <text class="quantity-label">{{ $t('order.quantity') }}：</text>
              <view v-if="showNumber" class="quantity-control">
                <wd-number-box
                  v-model="item.productAmount"
                  :min="1"
                  @change="handleQuantityChange(item, $event)"
                />
              </view>
              <text v-else>X {{ item.productAmount }}</text>
            </view> -->
          </view>
        </view>
      </template>
    </Confirm>
  </view>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { orderApi } from '@/api/modules/order'
import Confirm from '@/components/order/Confirm.vue';
import type { IOrderGoods } from '@/types/order'

/**
 * 获取用户信息
 */
const userInfo = ref(null)
const getUserInfo = async () => {
  try {
    const res = await orderApi.getUserInfo()
    if (res.code === 0) {
      userInfo.value = res.result || {}
    }
  } catch (error) {
    console.error('获取用户信息失败:', error)
  }
}

/**
 * 获取商品列表
 */
const goodsIds = ref<string>('')
const goodsList = ref<IOrderGoods[]>([])
const getGoodsList = async () => {
  try {
    // 获取商品详情
    const res = await orderApi.getShopProductListByIds(goodsIds.value)
    
    if (res.code === 0 && res.shopProductList?.length > 0) {
      goodsList.value = res.shopProductList
    }
  } catch (error) {
    console.error('获取商品列表失败:', error)
  }
}

/**
 * 页面加载
 */
onLoad(async (options: any) => {
  if (options.goods) {
    try {
      // 获取用户信息
      await getUserInfo()

      // 根据商品ID获取商品详细信息
      goodsIds.value = options.goods || ''
      getGoodsList()
    } catch (error) {
      console.error('解析商品数据失败:', error)
      uni.showToast({
        title: '商品数据错误',
        icon: 'none'
      })
    }
  }
})
</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;
    }
    
    .price-info {
      .price-row {
        display: flex;
        align-items: baseline;
        gap: 10rpx;
        
        .vip-price,
        .activity-price {
          font-size: 32rpx;
          font-weight: bold;
          color: #e97512;
        }
        
        .normal-price {
          font-size: 32rpx;
          font-weight: bold;
          color: #333;
        }
        
        .vip-label {
          font-size: 22rpx;
          color: #fa2d12;
        }
        
        .activity-label {
          font-size: 22rpx;
          color: #613804;
        }
        
        .original-price {
          font-size: 24rpx;
          color: #999;
          text-decoration: line-through;
        }
      }
    }
    
    .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>