Skip to content

Commit f8375bb

Browse files
YunaiVYunaiV
committed
优化商品的 index 界面
1 parent 95da3fe commit f8375bb

File tree

4 files changed

+80
-126
lines changed

4 files changed

+80
-126
lines changed

‎src/utils/constants.js

Lines changed: 33 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -185,37 +185,54 @@ export const PayOrderRefundStatusEnum = {
185185
* 支付退款订单状态枚举
186186
*/
187187
export const PayRefundStatusEnum = {
188-
CREATE:{
189-
status:0,
188+
CREATE: {
189+
status: 0,
190190
name: '退款订单生成'
191191
},
192-
SUCCESS:{
193-
status:1,
192+
SUCCESS: {
193+
status: 1,
194194
name: '退款成功'
195195
},
196-
FAILURE:{
197-
status:2,
196+
FAILURE: {
197+
status: 2,
198198
name: '退款失败'
199199
},
200-
PROCESSING_NOTIFY:{
201-
status:3,
200+
PROCESSING_NOTIFY: {
201+
status: 3,
202202
name: '退款中，渠道通知结果'
203203
},
204-
PROCESSING_QUERY:{
205-
status:4,
204+
PROCESSING_QUERY: {
205+
status: 4,
206206
name: '退款中，系统查询结果'
207207
},
208-
UNKNOWN_RETRY:{
209-
status:5,
208+
UNKNOWN_RETRY: {
209+
status: 5,
210210
name: '状态未知，请重试'
211211
},
212-
UNKNOWN_QUERY:{
213-
status:6,
212+
UNKNOWN_QUERY: {
213+
status: 6,
214214
name: '状态未知，系统查询结果'
215215
},
216-
CLOSE:{
217-
status:99,
216+
CLOSE: {
217+
status: 99,
218218
name: '退款关闭'
219219
}
220220
}
221221

222+
/**
223+
* 商品 SPU 状态
224+
*/
225+
export const ProductSpuStatusEnum = {
226+
RECYCLE: {
227+
status: -1,
228+
name: '回收站'
229+
},
230+
DISABLE: {
231+
status: 0,
232+
name: '下架'
233+
},
234+
ENABLE: {
235+
status: 1,
236+
name: '上架'
237+
},
238+
}

‎src/utils/dict.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,9 @@ export const DICT_TYPE = {
5656
PAY_ORDER_REFUND_STATUS: 'pay_order_refund_status', // 商户支付订单退款状态
5757
PAY_REFUND_ORDER_STATUS: 'pay_refund_order_status', // 退款订单状态
5858
PAY_REFUND_ORDER_TYPE: 'pay_refund_order_type', // 退款订单类别
59+
60+
// ========== MALL - PRODUCT 模块 ==========
61+
PRODUCT_SPU_STATUS: 'product_spu_status', // 商品 SPU 状态
5962
}
6063

6164
/**
@@ -114,6 +117,3 @@ export function getDictDataLabel(dictType, value) {
114117
const dict = getDictData(dictType, value);
115118
return dict ? dict.label : '';
116119
}
117-
118-
export class getDictDataL {
119-
}

‎src/views/mall/product/spu/index.vue

Lines changed: 42 additions & 105 deletions
Original file line numberDiff line numberDiff line change
@@ -4,74 +4,48 @@
44
<el-form-item label="商品名称" prop="name">
55
<el-input v-model="queryParams.name" placeholder="请输入商品名称" clearable @keyup.enter.native="handleQuery"/>
66
</el-form-item>
7-
87
<el-form-item label="商品编码" prop="code">
98
<el-input v-model="queryParams.code" placeholder="请输入商品编码" clearable @keyup.enter.native="handleQuery"/>
109
</el-form-item>
11-
1210
<el-form-item label="商品分类" prop="categoryIds">
1311
<el-cascader v-model="queryParams.categoryIds" placeholder="请输入商品分类"
1412
:options="categoryList" :props="propName" clearable ref="category"/>
1513
</el-form-item>
16-
1714
<el-form-item label="商品品牌" prop="brandId">
1815
<el-select v-model="queryParams.brandId" placeholder="请输入商品品牌" clearable @keyup.enter.native="handleQuery">
1916
<el-option v-for="item in brandList" :key="item.id" :label="item.name" :value="item.id"/>
2017
</el-select>
2118
</el-form-item>
22-
19+
<!-- TODO 待实现：商品类型 -->
20+
<!-- TODO 待实现：商品标签 -->
21+
<!-- TODO 待实现：营销活动 -->
22+
<!-- TODO 前端优化：商品销量、商品价格，排的整齐一点 -->
2323
<el-form-item label="商品销量">
24-
<el-col
25-
:span="6"
26-
style="padding-left:0"
27-
>
24+
<el-col :span="7" style="padding-left:0">
2825
<el-form-item prop="salesCountMin">
29-
<el-input v-model="queryParams.salesCountMin" placeholder="最小值" clearable
30-
@keyup.enter.native="handleQuery"/>
26+
<el-input v-model="queryParams.salesCountMin" placeholder="最低销量" clearable @keyup.enter.native="handleQuery"/>
3127
</el-form-item>
3228
</el-col>
33-
<el-col
34-
:span="1"
35-
>
36-
-
37-
</el-col>
38-
<el-col
39-
:span="6"
40-
style="padding-left:0"
41-
>
29+
<el-col :span="1">-</el-col>
30+
<el-col :span="7" style="padding-left:0">
4231
<el-form-item prop="salesCountMax">
43-
<el-input v-model="queryParams.salesCountMax" placeholder="最大值" clearable
44-
@keyup.enter.native="handleQuery"/>
32+
<el-input v-model="queryParams.salesCountMax" placeholder="最高销量" clearable @keyup.enter.native="handleQuery"/>
4533
</el-form-item>
4634
</el-col>
4735
</el-form-item>
48-
4936
<el-form-item label="商品价格" prop="code">
50-
<el-col
51-
:span="6"
52-
style="padding-left:0"
53-
>
37+
<el-col :span="7" style="padding-left:0">
5438
<el-form-item prop="marketPriceMin">
55-
<el-input v-model="queryParams.marketPriceMin" placeholder="最小值" clearable
56-
@keyup.enter.native="handleQuery"/>
39+
<el-input v-model="queryParams.marketPriceMin" placeholder="最低价格" clearable @keyup.enter.native="handleQuery"/>
5740
</el-form-item>
5841
</el-col>
59-
<el-col
60-
:span="1"
61-
>
62-
-
63-
</el-col>
64-
<el-col
65-
:span="6"
66-
style="padding-left:0"
67-
>
42+
<el-col :span="1">-</el-col>
43+
<el-col :span="7" style="padding-left:0">
6844
<el-form-item prop="marketPriceMax">
69-
<el-input v-model="queryParams.marketPriceMax" placeholder="最大值" clearable
70-
@keyup.enter.native="handleQuery"/>
45+
<el-input v-model="queryParams.marketPriceMax" placeholder="最高价格" clearable @keyup.enter.native="handleQuery"/>
7146
</el-form-item>
7247
</el-col>
7348
</el-form-item>
74-
7549
<el-form-item>
7650
<el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
7751
<el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
@@ -82,8 +56,7 @@
8256
<el-row :gutter="10" class="mb8">
8357
<el-col :span="1.5">
8458
<el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
85-
v-hasPermi="['product:spu:create']">新增
86-
</el-button>
59+
v-hasPermi="['product:spu:create']">添加商品</el-button>
8760
</el-col>
8861
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"/>
8962
</el-row>
@@ -96,17 +69,13 @@
9669
<el-table-column label="商品信息" align="center" width="260">
9770
<template slot-scope="scope">
9871
<div class="product-info">
99-
<img
100-
v-if="scope.row.picUrls"
101-
:src="scope.row.picUrls[0]"
102-
alt="分类图片"
103-
class="img-height"
104-
/>
72+
<img v-if="scope.row.picUrls" :src="scope.row.picUrls[0]" alt="分类图片" class="img-height" />
10573
<div class="message">{{ scope.row.name }}</div>
10674
</div>
10775
</template>
76+
<!-- TODO 前端优化：可以有个 + 号，点击后，展示每个 sku -->
10877
</el-table-column>
109-
<el-table-column label="价格" align="center" prop="marketPrice" :formatter="unitConversion"/>
78+
<el-table-column label="价格" align="center" prop="marketPrice" :formatter="formatPrice"/>
11079
<el-table-column label="库存" align="center" prop="totalStock"/>
11180
<el-table-column label="销量" align="center" prop="salesCount"/>
11281
<el-table-column label="排序" align="center" prop="sort"/>
@@ -117,18 +86,15 @@
11786
</el-table-column>
11887
<el-table-column label="状态" align="center" prop="status">
11988
<template slot-scope="scope">
120-
<dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status"/>
89+
<dict-tag :type="DICT_TYPE.PRODUCT_SPU_STATUS" :value="scope.row.status"/>
12190
</template>
12291
</el-table-column>
123-
12492
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
12593
<template slot-scope="scope">
12694
<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
127-
v-hasPermi="['product:spu:update']">修改
128-
</el-button>
95+
v-hasPermi="['product:spu:update']">修改</el-button>
12996
<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
130-
v-hasPermi="['product:spu:delete']">删除
131-
</el-button>
97+
v-hasPermi="['product:spu:delete']">删除</el-button>
13298
</template>
13399
</el-table-column>
134100
</el-table>
@@ -141,17 +107,12 @@
141107
<el-table-column label="商品信息" align="center" width="260">
142108
<template slot-scope="scope">
143109
<div class="product-info">
144-
<img
145-
v-if="scope.row.picUrls"
146-
:src="scope.row.picUrls[0]"
147-
alt="分类图片"
148-
class="img-height"
149-
/>
110+
<img v-if="scope.row.picUrls" :src="scope.row.picUrls[0]" alt="分类图片" class="img-height"/>
150111
<div class="message">{{ scope.row.name }}</div>
151112
</div>
152113
</template>
153114
</el-table-column>
154-
<el-table-column label="价格" align="center" prop="marketPrice" :formatter="unitConversion"/>
115+
<el-table-column label="价格" align="center" prop="marketPrice" :formatter="formatPrice"/>
155116
<el-table-column label="库存" align="center" prop="totalStock"/>
156117
<el-table-column label="销量" align="center" prop="salesCount"/>
157118
<el-table-column label="排序" align="center" prop="sort"/>
@@ -162,18 +123,15 @@
162123
</el-table-column>
163124
<el-table-column label="状态" align="center" prop="status">
164125
<template slot-scope="scope">
165-
<dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status"/>
126+
<dict-tag :type="DICT_TYPE.PRODUCT_SPU_STATUS" :value="scope.row.status"/>
166127
</template>
167128
</el-table-column>
168-
169129
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
170130
<template slot-scope="scope">
171131
<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
172-
v-hasPermi="['product:spu:update']">修改
173-
</el-button>
132+
v-hasPermi="['product:spu:update']">修改</el-button>
174133
<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
175-
v-hasPermi="['product:spu:delete']">删除
176-
</el-button>
134+
v-hasPermi="['product:spu:delete']">删除</el-button>
177135
</template>
178136
</el-table-column>
179137
</el-table>
@@ -186,17 +144,12 @@
186144
<el-table-column label="商品信息" align="center" width="260">
187145
<template slot-scope="scope">
188146
<div class="product-info">
189-
<img
190-
v-if="scope.row.picUrls"
191-
:src="scope.row.picUrls[0]"
192-
alt="分类图片"
193-
class="img-height"
194-
/>
147+
<img v-if="scope.row.picUrls" :src="scope.row.picUrls[0]" alt="分类图片" class="img-height"/>
195148
<div class="message">{{ scope.row.name }}</div>
196149
</div>
197150
</template>
198151
</el-table-column>
199-
<el-table-column label="价格" align="center" prop="marketPrice" :formatter="unitConversion"/>
152+
<el-table-column label="价格" align="center" prop="marketPrice" :formatter="formatPrice"/>
200153
<el-table-column label="库存" align="center" prop="totalStock"/>
201154
<el-table-column label="销量" align="center" prop="salesCount"/>
202155
<el-table-column label="排序" align="center" prop="sort"/>
@@ -207,18 +160,15 @@
207160
</el-table-column>
208161
<el-table-column label="状态" align="center" prop="status">
209162
<template slot-scope="scope">
210-
<dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status"/>
163+
<dict-tag :type="DICT_TYPE.PRODUCT_SPU_STATUS" :value="scope.row.status"/>
211164
</template>
212165
</el-table-column>
213-
214166
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
215167
<template slot-scope="scope">
216168
<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
217-
v-hasPermi="['product:spu:update']">修改
218-
</el-button>
169+
v-hasPermi="['product:spu:update']">修改</el-button>
219170
<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
220-
v-hasPermi="['product:spu:delete']">删除
221-
</el-button>
171+
v-hasPermi="['product:spu:delete']">删除</el-button>
222172
</template>
223173
</el-table-column>
224174
</el-table>
@@ -231,17 +181,12 @@
231181
<el-table-column label="商品信息" align="center" width="260">
232182
<template slot-scope="scope">
233183
<div class="product-info">
234-
<img
235-
v-if="scope.row.picUrls"
236-
:src="scope.row.picUrls[0]"
237-
alt="分类图片"
238-
class="img-height"
239-
/>
184+
<img v-if="scope.row.picUrls" :src="scope.row.picUrls[0]" alt="分类图片" class="img-height"/>
240185
<div class="message">{{ scope.row.name }}</div>
241186
</div>
242187
</template>
243188
</el-table-column>
244-
<el-table-column label="价格" align="center" prop="marketPrice" :formatter="unitConversion"/>
189+
<el-table-column label="价格" align="center" prop="marketPrice" :formatter="formatPrice"/>
245190
<el-table-column label="库存" align="center" prop="totalStock"/>
246191
<el-table-column label="销量" align="center" prop="salesCount"/>
247192
<el-table-column label="排序" align="center" prop="sort"/>
@@ -252,27 +197,24 @@
252197
</el-table-column>
253198
<el-table-column label="状态" align="center" prop="status">
254199
<template slot-scope="scope">
255-
<dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status"/>
200+
<dict-tag :type="DICT_TYPE.PRODUCT_SPU_STATUS" :value="scope.row.status"/>
256201
</template>
257202
</el-table-column>
258-
259203
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
260204
<template slot-scope="scope">
261205
<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
262-
v-hasPermi="['product:spu:update']">修改
263-
</el-button>
206+
v-hasPermi="['product:spu:update']">修改</el-button>
264207
<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
265-
v-hasPermi="['product:spu:delete']">删除
266-
</el-button>
208+
v-hasPermi="['product:spu:delete']">删除</el-button>
267209
</template>
268210
</el-table-column>
269211
</el-table>
270212
</el-tab-pane>
271213
</el-tabs>
214+
272215
<!-- 分页组件 -->
273216
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
274217
@pagination="getList"/>
275-
276218
</div>
277219
</template>
278220

@@ -353,9 +295,6 @@ export default {
353295
this.addBeginAndEndTime(params, this.dateRangeCreateTime, "createTime");
354296
// 执行查询
355297
getSpuPage(params).then((response) => {
356-
response.data.list.forEach(element => {
357-
element.price = this.divide(element.minPrice, 100) + "~" + this.divide(element.maxPrice, 100)
358-
});
359298
this.list = response.data.list;
360299
this.total = response.data.total;
361300
this.loading = false;
@@ -390,18 +329,16 @@ export default {
390329
.confirm('是否确认删除商品spu编号为"' + id + '"的数据项?')
391330
.then(function () {
392331
return deleteSpu(id);
393-
})
394-
.then(() => {
332+
}).then(() => {
395333
this.getList();
396334
this.$modal.msgSuccess("删除成功");
397-
})
398-
.catch(() => {
335+
}).catch(() => {
399336
});
400337
},
401-
unitConversion(row, column, cellValue) {
402-
return this.divide(cellValue, 100);
338+
formatPrice(row, column, cellValue) {
339+
return '￥' + this.divide(cellValue, 100);
403340
},
404-
// 选中tab
341+
// 选中 tab
405342
handleClick(val) {
406343
if (val.name === "all") {
407344
this.queryParams.tabStatus = null;

0 commit comments

Comments
 (0)