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">
          <view class="name">{{ goods[selectedIndex].productName }}</view>
          <!-- 商品价格组件 -->
          <GoodsPrice :goods="goods[selectedIndex]" />
        </view>
      </view>
      
      <!-- 商品列表 -->
      <view class="selector-header">
        <text class="title">{{ t('order.goodsList') }}</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>

            <!-- 商品价格组件 -->
            <GoodsPrice :goods="item" />
          </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'
import GoodsPrice from '@/components/order/GoodsPrice.vue';

const { t } = useI18n()

interface Props {
  show: boolean
  goods: IGoods[]
}

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 selectGoods = (index: number) => {
  selectedIndex.value = index
  emit('select', props.goods[index])
}

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

/**
 * 关闭弹窗
 */
const handleClose = () => {
  visible.value = false
  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-info {
      padding-top: 20rpx;

      :deep(.price) {
        font-size: 36rpx;
      }
    }
  }
}

.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;
      }
    }
  }
}

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