taimed-international-app/components/order/GoodsSelector.vue

<template>
  <wd-popup 
    v-model="visible" 
    position="bottom"
    @close="handleClose"
  >
    <view class="goods-selector">
      <view v-if="selectedIndex !== -1" class="goods-info-mini">
        <image :src="goods[selectedIndex].productImages" mode="aspectFit" class="goods-cover" />
        <view class="info">
          <text class="name">{{ goods[selectedIndex].productName }}</text>
          <text v-if="selectedGoodsPrice" class="price">NZ$ {{ selectedGoodsPrice }}</text>
        </view>
      </view>
      
      <!-- 商品列表 -->
      <view class="selector-header">
        <text class="title">{{ isFudu ? t('order.selectFuduScheme') : t('order.selectPurchaseScheme') }}</text>
      </view>
      <view class="goods-list">
        <view
          v-for="(item, index) in goods"
          :key="item.productId"
          :class="['goods-item', selectedIndex === index ? 'selected' : '']"
          @click="selectGoods(index)"
        >
          <image :src="item.productImages" mode="aspectFit" class="goods-cover" />
          <view class="goods-info">
            <text class="goods-name">{{ item.productName }}</text>
            
            <!-- VIP优惠价 -->
            <view v-if="item.isVipPrice === 1 && item.vipPrice" class="price-info">
              <text class="vip-price">NZ$ {{ parseFloat(item.vipPrice).toFixed(2) }}</text>
              <text class="vip-label">VIP到手价</text>
              <text class="original-price">NZ$ {{ parseFloat(item.price).toFixed(2) }}</text>
            </view>
            
            <!-- 活动价 -->
            <view v-else-if="item.activityPrice && item.activityPrice > 0" class="price-info">
              <text class="activity-price">NZ$ {{ parseFloat(item.activityPrice).toFixed(2) }}</text>
              <text class="activity-label">活动价</text>
              <text class="original-price">NZ$ {{ parseFloat(item.price).toFixed(2) }}</text>
            </view>
            
            <!-- 普通价格 -->
            <view v-else class="price-info">
              <text class="normal-price">NZ$ {{ parseFloat(item.price).toFixed(2) }}</text>
            </view>
          </view>
        </view>
      </view>
      
      <!-- 操作按钮 -->
      <view class="selector-actions">
        <wd-button type="primary" block :disabled="selectedIndex === -1" @click="handleConfirm">立即购买</wd-button>
      </view>
    </view>
  </wd-popup>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import { useI18n } from 'vue-i18n'
import type { IGoods } from '@/types/order'

const { t } = useI18n()

interface Props {
  show: boolean
  goods: IGoods[]
  isFudu?: boolean  // 是否为复读
}

const props = defineProps<Props>()

const emit = defineEmits<{
  select: [goods: IGoods]
  confirm: [goods: IGoods]
  close: []
}>()

const visible = computed({
  get: () => props.show,
  set: (val: boolean) => {
    if (!val) emit('close')
  }
})

const selectedIndex = ref(-1)
// 选中商品的价格
const selectedGoodsPrice = computed(() => {
  if (selectedIndex.value === -1) return 0
  const selectedGoods = props.goods[selectedIndex.value]
  if (selectedGoods.isVipPrice === 1 && selectedGoods.vipPrice) {
    return parseFloat(selectedGoods.vipPrice).toFixed(2)
  } else if (selectedGoods.activityPrice && selectedGoods.activityPrice > 0) {
    return parseFloat(selectedGoods.activityPrice).toFixed(2)
  }
  return parseFloat(selectedGoods.price).toFixed(2)
})

/**
 * 选择商品
 */
const selectGoods = (index: number) => {
  selectedIndex.value = index
  emit('select', props.goods[index])
}

/**
 * 确认购买
 */
const handleConfirm = () => {
  if (selectedIndex.value === -1) {
    uni.showToast({
      title: '请选择购买方案',
      icon: 'none'
    })
    return
  }
  
  emit('confirm', props.goods[selectedIndex.value])
}

/**
 * 关闭选择器
 */
const handleClose = () => {
  emit('close')
}

// 监听显示状态，重置选择
watch(() => props.show, (newVal: boolean) => {
  if (newVal && props.goods.length > 0) {
    // 默认选中第一个
    selectedIndex.value = 0
    emit('select', props.goods[0])
  } else {
    selectedIndex.value = -1
  }
})
</script>

<style lang="scss" scoped>
.goods-selector {
  padding: 15px;
  background-color: #fff;
  max-height: 80vh;
  overflow-y: auto;
}

.selector-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  
  .title {
    font-size: 14px;
    font-weight: 500;
    color: #333;
  }
}

.goods-info-mini {
  display: flex;
  align-items: center;
  margin: 5px 0 10px;
  
  .goods-cover {
    max-width: 80px;
    max-height: 80px;
    border-radius: 10rpx;
    background-color: #f5f5f5;
  }
  
  .info {
    flex: 1;
    padding-left: 10px;
    
    .name {
      display: block;
      font-size: 30rpx;
      line-height: 38rpx;
      color: #333;
      max-height: 76rpx;
      overflow: hidden;
    }
    
    .price {
      display: block;
      padding-top: 20rpx;
      font-size: 36rpx;
      color: #ff4703;
      font-weight: bold;
    }
  }
}

.goods-list {
  margin-bottom: 15px;
  
  .goods-item {
    position: relative;
    padding: 5px 10px;
    margin-bottom: 10px;
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    
    &.selected {
      border-color: #258feb;
      background-color: #f0f8ff;
    }

    .goods-cover {
      max-width: 40px;
      max-height: 40px;
      border-radius: 6px;
      margin-right: 10px;
      background-color: #f5f5f5;
    }
    
    .goods-info {
      .goods-name {
        display: block;
        font-size: 14px;
        color: #333;
        line-height: 1.4;
      }
      
      .price-info {
        display: flex;
        align-items: baseline;
        gap: 10rpx;
        
        .vip-price,
        .activity-price,
        .normal-price {
          font-size: 16px;
          font-weight: bold;
          color: #e97512;
        }
        
        // .normal-price {}
        
        .vip-label {
          font-size: 12px;
          color: #fa2d12;
        }
        
        .activity-label {
          font-size: 12px;
          color: #613804;
        }
        
        .original-price {
          font-size: 12px;
          color: #8a8a8a;
          text-decoration: line-through;
        }
      }
    }
  }
}

.selector-actions {
  padding-top: 20rpx;
  border-top: 1px solid #f0f0f0;
}
</style>