Skip to content

Commit 5011ae7

Browse files
bailicangdubailicangdu
committed
add food page
1 parent 6fde13b commit 5011ae7

File tree

5 files changed

+263
-23
lines changed

5 files changed

+263
-23
lines changed

‎README.md‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -38,11 +38,11 @@ npm run dev
3838

3939
# 功能列表
4040

41-
- [ ] 登陆/注销
41+
- [x] 登陆/注销
42+
- [x] 添加商铺
43+
- [x] 添加商品
4244
- [ ] 权限验证
4345
- [ ] 总体数据展示
44-
- [ ] 添加商铺
45-
- [ ] 添加商品
4646
- [ ] 管理用户
4747
- [ ] 管理商铺
4848
- [ ] 地区管理
@@ -66,6 +66,9 @@ npm run dev
6666
## 添加商店
6767
![](http://cangdu.org/files/images/addshop.png)
6868

69+
## 添加食品
70+
![](http://cangdu.org/files/images/addfood.png)
71+
6972

7073
### License
7174

‎src/api/getData.js‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ const cityGuess = () => fetch('/v1/cities', {
1313
* 添加商铺
1414
*/
1515

16-
const addShop = data => fetch('/shopping/addShop', {...data}, 'POST');
16+
const addShop = data => fetch('/shopping/addShop', data, 'POST');
1717

1818
/**
1919
* 获取搜索地址
@@ -35,8 +35,13 @@ const getCategory = restaurant_id => fetch('/shopping/getcategory/' + restaurant
3535
* 添加食品种类
3636
*/
3737

38-
const addCategory = data => fetch('/shopping/addcategory', {...data}, 'POST');
38+
const addCategory = data => fetch('/shopping/addcategory', data, 'POST');
39+
/**
40+
* 添加食品
41+
*/
42+
43+
const addFood = data => fetch('/shopping/addfood', data, 'POST');
3944

4045

41-
export { cityGuess, addShop, searchplace, getCategory, addCategory }
46+
export { cityGuess, addShop, searchplace, getCategory, addCategory, addFood }
4247

‎src/page/addGoods.vue‎

Lines changed: 245 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,12 @@
22
<div>
33
<head-top></head-top>
44
<el-row style="margin-top: 20px;">
5-
<el-col :span="12" :offset="4">
6-
<el-form :model="categoryForm" :rules="categoryrules" ref="categoryForm" label-width="110px" class="category_form">
5+
<el-col :span="14" :offset="4">
6+
<header class="form_header">选择食品种类</header>
7+
<el-form :model="categoryForm" ref="categoryForm" label-width="110px" class="form">
78
<el-row class="category_select">
89
<el-form-item label="食品种类">
9-
<el-select v-model="categoryForm.categorySelect" :placeholder="categoryForm.categorySelect" style="width:100%;">
10+
<el-select v-model="categoryForm.categorySelect" :placeholder="selectValue.label" style="width:100%;">
1011
<el-option
1112
v-for="item in categoryForm.categoryList"
1213
:key="item.value"
@@ -34,32 +35,157 @@
3435
<i class="el-icon-caret-bottom edit_icon" v-else slot="icon"></i>
3536
<span>添加食品种类</span>
3637
</div>
37-
3838
</el-form>
39+
<header class="form_header">添加食品</header>
40+
<el-form :model="foodForm" :rules="foodrules" ref="foodForm" label-width="110px" class="form food_form">
41+
<el-form-item label="食品名称" prop="name">
42+
<el-input v-model="foodForm.name"></el-input>
43+
</el-form-item>
44+
<el-form-item label="食品活动" prop="activity">
45+
<el-input v-model="foodForm.activity"></el-input>
46+
</el-form-item>
47+
<el-form-item label="食品详情" prop="description">
48+
<el-input v-model="foodForm.description"></el-input>
49+
</el-form-item>
50+
<el-form-item label="上传店铺头像">
51+
<el-upload
52+
class="avatar-uploader"
53+
:action="baseUrl + '/shopping/addimg/food'"
54+
:show-file-list="false"
55+
:on-success="uploadImg"
56+
:before-upload="beforeImgUpload">
57+
<img v-if="foodForm.image_path" :src="baseUrl + foodForm.image_path" class="avatar">
58+
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
59+
</el-upload>
60+
</el-form-item>
61+
<el-form-item label="食品特点">
62+
<el-select v-model="foodForm.attributes" multiple placeholder="请选择">
63+
<el-option
64+
v-for="item in attributes"
65+
:key="item.value"
66+
:label="item.label"
67+
:value="item.value">
68+
</el-option>
69+
</el-select>
70+
</el-form-item>
71+
<el-form-item label="食品规格">
72+
<el-radio class="radio" v-model="foodSpecs" label="one">单规格</el-radio>
73+
<el-radio class="radio" v-model="foodSpecs" label="more">多规格</el-radio>
74+
</el-form-item>
75+
<el-row v-if="foodSpecs == 'one'">
76+
<el-form-item label="包装费">
77+
<el-input-number v-model="foodForm.specs[0].packing_fee" :min="0" :max="100"></el-input-number>
78+
</el-form-item>
79+
<el-form-item label="价格">
80+
<el-input-number v-model="foodForm.specs[0].price" :min="0" :max="10000"></el-input-number>
81+
</el-form-item>
82+
</el-row>
83+
<el-row v-else style="overflow: auto; text-align: center;">
84+
<el-button type="primary" @click="dialogFormVisible = true" style="margin-bottom: 10px;">添加规格</el-button>
85+
<el-table
86+
:data="foodForm.specs"
87+
style="margin-bottom: 20px;"
88+
:row-class-name="tableRowClassName">
89+
<el-table-column
90+
prop="specs"
91+
label="规格">
92+
</el-table-column>
93+
<el-table-column
94+
prop="packing_fee"
95+
label="包装费">
96+
</el-table-column>
97+
<el-table-column
98+
prop="price"
99+
label="价格">
100+
</el-table-column>
101+
<el-table-column label="操作" >
102+
<template scope="scope">
103+
<el-button
104+
size="small"
105+
type="danger"
106+
@click="handleDelete(scope.$index)">删除</el-button>
107+
</template>
108+
</el-table-column>
109+
</el-table>
110+
</el-row>
111+
<el-form-item>
112+
<el-button type="primary" @click="addFood('foodForm')">确认添加食品</el-button>
113+
</el-form-item>
114+
</el-form>
115+
<el-dialog title="添加规格" v-model="dialogFormVisible">
116+
<el-form :rules="specsFormrules" :model="specsForm">
117+
<el-form-item label="规格" label-width="100px" prop="specs">
118+
<el-input v-model="specsForm.specs" auto-complete="off"></el-input>
119+
</el-form-item>
120+
<el-form-item label="包装费" label-width="100px">
121+
<el-input-number v-model="specsForm.packing_fee" :min="0" :max="100"></el-input-number>
122+
</el-form-item>
123+
<el-form-item label="价格" label-width="100px">
124+
<el-input-number v-model="specsForm.price" :min="0" :max="10000"></el-input-number>
125+
</el-form-item>
126+
</el-form>
127+
<div slot="footer" class="dialog-footer">
128+
<el-button @click="dialogFormVisible = false">取 消</el-button>
129+
<el-button type="primary" @click="addspecs">确 定</el-button>
130+
</div>
131+
</el-dialog>
39132
</el-col>
40133
</el-row>
41134
</div>
42135
</template>
43136

44137
<script>
45138
import headTop from '@/components/headTop'
46-
import {getCategory, addCategory} from '@/api/getData'
139+
import {getCategory, addCategory, addFood} from '@/api/getData'
47140
import {baseUrl} from '@/config/env'
48141
export default {
49142
data(){
50143
return {
144+
baseUrl,
51145
restaurant_id: 3,
52146
categoryForm: {
53-
category: '',
54147
categoryList: [],
55148
categorySelect: '',
56149
name: '',
57150
description: '',
58151
},
59-
categoryrules: {
60-
152+
foodForm: {
153+
name: '',
154+
description: '',
155+
image_path: '',
156+
activity: '',
157+
attributes: [],
158+
specs: [{
159+
specs: '默认',
160+
packing_fee: 0,
161+
price: 20,
162+
}],
163+
},
164+
foodrules: {
165+
name: [
166+
{ required: true, message: '请输入食品名称', trigger: 'blur' },
167+
],
61168
},
169+
attributes: [{
170+
value: '新',
171+
label: '新品'
172+
}, {
173+
value: '招牌',
174+
label: '招牌'
175+
},],
62176
showAddCategory: false,
177+
foodSpecs: 'one',
178+
dialogFormVisible: false,
179+
specsForm: {
180+
specs: '',
181+
packing_fee: 0,
182+
price: 20,
183+
},
184+
specsFormrules: {
185+
specs: [
186+
{ required: true, message: '请输入规格', trigger: 'blur' },
187+
],
188+
}
63189
}
64190
},
65191
components: {
@@ -68,14 +194,18 @@
68194
mounted(){
69195
this.initData();
70196
},
197+
computed: {
198+
selectValue: function (){
199+
return this.categoryForm.categoryList[this.categoryForm.categorySelect]||{}
200+
}
201+
},
71202
methods: {
72203
async initData(){
73204
try{
74205
const result = await getCategory(this.restaurant_id);
75-
console.log(result)
76206
if (result.status == 1) {
77-
result.category_list.map(item => {
78-
item.value = item.name;
207+
result.category_list.map((item, index) => {
208+
item.value = index;
79209
item.label = item.name;
80210
})
81211
this.categoryForm.categoryList = result.category_list;
@@ -91,7 +221,6 @@
91221
},
92222
submitcategoryForm(categoryForm) {
93223
this.$refs[categoryForm].validate(async (valid) => {
94-
console.log(categoryForm)
95224
if (valid) {
96225
const params = {
97226
name: this.categoryForm.name,
@@ -123,19 +252,96 @@
123252
}
124253
});
125254
},
255+
uploadImg(res, file) {
256+
if (res.status == 1) {
257+
this.foodForm.image_path = res.image_path;
258+
}else{
259+
this.$message.error('上传图片失败！');
260+
}
261+
},
262+
beforeImgUpload(file) {
263+
const isRightType = (file.type === 'image/jpeg') || (file.type === 'image/png');
264+
const isLt2M = file.size / 1024 / 1024 < 2;
265+
266+
if (!isRightType) {
267+
this.$message.error('上传头像图片只能是 JPG 格式!');
268+
}
269+
if (!isLt2M) {
270+
this.$message.error('上传头像图片大小不能超过 2MB!');
271+
}
272+
return isRightType && isLt2M;
273+
},
274+
addspecs(){
275+
this.foodForm.specs.push({...this.specsForm});
276+
this.specsForm.specs = '';
277+
this.specsForm.packing_fee = 0;
278+
this.specsForm.price = 20;
279+
this.dialogFormVisible = false;
280+
},
281+
handleDelete(index){
282+
this.foodForm.specs.splice(index, 1);
283+
},
284+
tableRowClassName(row, index) {
285+
if (index === 1) {
286+
return 'info-row';
287+
} else if (index === 3) {
288+
return 'positive-row';
289+
}
290+
return '';
291+
},
292+
addFood(foodForm){
293+
this.$refs[foodForm].validate(async (valid) => {
294+
if (valid) {
295+
const params = {
296+
...this.foodForm,
297+
category_id: this.selectValue.id,
298+
restaurant_id: this.restaurant_id,
299+
}
300+
try{
301+
const result = await addFood(params);
302+
if (result.status == 1) {
303+
console.log(result)
304+
this.$message({
305+
type: 'success',
306+
message: '添加成功'
307+
});
308+
}
309+
}catch(err){
310+
console.log(err)
311+
}
312+
} else {
313+
this.$notify.error({
314+
title: '错误',
315+
message: '请检查输入是否正确',
316+
offset: 100
317+
});
318+
return false;
319+
}
320+
});
321+
}
126322
}
127323
}
128324
</script>
129325

130326
<style lang="less">
131327
@import '../style/mixin';
132-
.category_form{
328+
.form{
329+
min-width: 400px;
330+
margin-bottom: 30px;
133331
&:hover{
134332
box-shadow: 0 0 8px 0 rgba(232,237,250,.6), 0 2px 4px 0 rgba(232,237,250,.5);
135333
border-radius: 6px;
136334
transition: all 400ms;
137335
}
138336
}
337+
.food_form{
338+
border: 1px solid #eaeefb;
339+
padding: 10px 10px 0;
340+
}
341+
.form_header{
342+
text-align: center;
343+
margin-bottom: 10px;
344+
}
139345
.category_select{
140346
border: 1px solid #eaeefb;
141347
padding: 10px 30px 10px 10px;
@@ -180,4 +386,30 @@
180386
transition: all 400ms;
181387
}
182388
}
389+
.avatar-uploader .el-upload {
390+
border: 1px dashed #d9d9d9;
391+
border-radius: 6px;
392+
cursor: pointer;
393+
position: relative;
394+
overflow: hidden;
395+
}
396+
.avatar-uploader .el-upload:hover {
397+
border-color: #20a0ff;
398+
}
399+
.avatar-uploader-icon {
400+
font-size: 28px;
401+
color: #8c939d;
402+
width: 120px;
403+
height: 120px;
404+
line-height: 120px;
405+
text-align: center;
406+
}
407+
.avatar {
408+
width: 120px;
409+
height: 120px;
410+
display: block;
411+
}
412+
.cell{
413+
text-align: center;
414+
}
183415
</style>

0 commit comments

Comments
 (0)