# 实现店铺选择功能

## 1. 需求分析
- 在 PurchaseModal 组件中添加店铺选择下拉列表
- 店铺数据通过 `getShopList()` 方法获取
- 店铺选择是非必选的
- 如果选择了店铺，提交订单时需要添加 `shop_id` 字段

## 2. 实现步骤

### 2.1 添加状态和方法
- 在 `script setup` 中添加 `shopList` 状态存储店铺列表
- 添加 `selectedShop` 状态存储选中的店铺
- 添加 `loadingShops` 状态控制加载状态
- 导入 `PurchaseModal` 类并创建实例
- 添加 `getShopList` 方法获取店铺数据

### 2.2 修改模板
- 在配置区域添加店铺选择下拉列表
- 显示加载状态和空状态
- 使用 Element Plus 的 `el-select` 组件实现下拉选择

### 2.3 修改提交逻辑
- 在 `goShopify` 方法中，当 `selectedShop` 存在时，添加 `shop_id` 字段到 params

## 3. 代码实现

### 3.1 导入和状态定义
```javascript
import { PurchaseModal as PurchaseModalClass } from './index.js'
const purchaseModal = new PurchaseModalClass()

const shopList = ref([])
const selectedShop = ref(null)
const loadingShops = ref(false)
```

### 3.2 获取店铺列表方法
```javascript
const fetchShopList = async () => {
  loadingShops.value = true
  try {
    const res = await purchaseModal.getShopList()
    if (res.code === 0) {
      shopList.value = res.data || []
    }
  } catch (error) {
    console.error('获取店铺列表失败:', error)
    shopList.value = []
  } finally {
    loadingShops.value = false
  }
}
```

### 3.3 添加模板代码
```vue
<div class="config-item shop-select">
  <div class="label">{{ $t('checkout.shop') }}</div>
  <el-select 
    v-model="selectedShop" 
    :placeholder="$t('checkout.chooseShop')" 
    filterable
    :loading="loadingShops"
    class="shop-select-input"
  >
    <el-option 
      v-for="shop in shopList" 
      :key="shop.id" 
      :label="shop.shopName" 
      :value="shop" 
    />
  </el-select>
</div>
```

### 3.4 修改提交逻辑
```javascript
let params = {
  quantity: qty.value,
  project_id: props.modelData.projectId,
  project_details: project_details,
  order_info: order_info,
}
if (selectedShop.value) {
  params.shop_id = selectedShop.value.id
}
```

## 4. 国际化支持
- 需要在国际化文件中添加 `checkout.shop` 和 `checkout.chooseShop` 键

## 5. 样式调整
- 为店铺选择添加适当的样式，确保在各种设备上显示正常