94 lines
2.4 KiB
Markdown
94 lines
2.4 KiB
Markdown
# 实现店铺选择功能
|
|
|
|
## 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. 样式调整
|
|
- 为店铺选择添加适当的样式，确保在各种设备上显示正常 |