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

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

    <!-- 确认订单组件 -->
    <Confirm :goodsList="goodsList" :userInfo="userInfo" :orderType="orderType">
      <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>
            <!-- 商品价格组件 -->
            <GoodsPrice :goods="item" />
            
            <!-- 数量 -->
            <!-- <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 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 goodsIds = ref<string>('')
const goodsList = ref<IOrderGoods[]>([])
const getGoodsList = async () => {
  // 获取商品详情
  const res = await orderApi.getShopProductListByIds(goodsIds.value)
  
  if (res.shopProductList?.length > 0) {
    goodsList.value = res.shopProductList
  }
}

// 复读
const isRelearn = ref<boolean>(false)

// 订单类型
const orderType = computed(() => {
  return isRelearn.value ? 'relearn' : 'order'
})

/**
 * 页面加载
 */
onLoad(async (options: any) => {
  try {
    if (options.isRelearn == 1) {
      uni.$on('selectedGoods', async (data: IOrderGoods) => {
        // 获取用户信息
        await getUserInfo()

        // 处理商品数据
        console.log('监听到传入的商品数据:', data)
        goodsList.value = [ data ]
      })
    } else if (options.goods) {
      // 获取用户信息
      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;
    }
    
    .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>