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

<template>
  <wd-popup 
    v-model="visible" 
    position="bottom"
    :close-on-click-modal="true"
    @close="handleClose"
  >
    <view class="goods-selector">
      <view class="selector-header">
        <text class="title">{{ isFudu ? '选择复读方案' : '选择购买方案' }}</text>
        <wd-icon name="close" @click="handleClose" />
      </view>
      
      <!-- 商品列表 -->
      <view class="goods-list">
        <view
          v-for="(item, index) in goods"
          :key="item.productId"
          :class="['goods-item', selectedIndex === index ? 'selected' : '']"
          @click="selectGoods(index)"
        >
          <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">￥{{ item.vipPrice.toFixed(2) }}</text>
              <text class="vip-label">VIP到手价</text>
              <text class="original-price">￥{{ item.price.toFixed(2) }}</text>
            </view>
            
            <!-- 活动价 -->
            <view v-else-if="item.activityPrice && item.activityPrice > 0" class="price-info">
              <text class="activity-price">￥{{ item.activityPrice.toFixed(2) }}</text>
              <text class="activity-label">活动价</text>
              <text class="original-price">￥{{ item.price.toFixed(2) }}</text>
            </view>
            
            <!-- 普通价格 -->
            <view v-else class="price-info">
              <text class="normal-price">￥{{ item.price.toFixed(2) }}</text>
            </view>
          </view>
          
          <!-- 选中标记 -->
          <view v-if="selectedIndex === index" class="selected-mark">
            <wd-icon name="check" color="#fff" size="20px" />
          </view>
        </view>
      </view>
      
      <!-- 操作按钮 -->
      <view class="selector-actions">
        <wd-button 
          type="primary" 
          block
          @click="handleConfirm"
          :disabled="selectedIndex === -1"
        >
          立即购买
        </wd-button>
      </view>
    </view>
  </wd-popup>
</template>

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

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) => {
    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
  }
  
  emit('confirm', props.goods[selectedIndex.value])
}

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

// 监听显示状态，重置选择
watch(() => props.show, (newVal) => {
  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: 30rpx;
  background-color: #fff;
  max-height: 80vh;
  overflow-y: auto;
}

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

.goods-list {
  margin-bottom: 30rpx;
  
  .goods-item {
    position: relative;
    padding: 30rpx;
    margin-bottom: 20rpx;
    border: 2rpx solid #e5e5e5;
    border-radius: 12rpx;
    transition: all 0.3s;
    
    &.selected {
      border-color: #258feb;
      background-color: #f0f8ff;
    }
    
    .goods-info {
      .goods-name {
        display: block;
        font-size: 30rpx;
        color: #333;
        margin-bottom: 15rpx;
        line-height: 1.4;
      }
      
      .price-info {
        display: flex;
        align-items: baseline;
        gap: 10rpx;
        
        .vip-price,
        .activity-price {
          font-size: 36rpx;
          font-weight: bold;
          color: #e97512;
        }
        
        .normal-price {
          font-size: 36rpx;
          font-weight: bold;
          color: #333;
        }
        
        .vip-label {
          font-size: 24rpx;
          color: #fa2d12;
        }
        
        .activity-label {
          font-size: 24rpx;
          color: #613804;
        }
        
        .original-price {
          font-size: 24rpx;
          color: #8a8a8a;
          text-decoration: line-through;
        }
      }
    }
    
    .selected-mark {
      position: absolute;
      top: 0;
      right: 0;
      width: 50rpx;
      height: 50rpx;
      background-color: #258feb;
      border-radius: 0 12rpx 0 12rpx;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}

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