Skip to content

Commit 26719aa

Browse files
bailicangdubailicangdu
committed
新增添加商铺页面
1 parent beb5a1a commit 26719aa

File tree

3 files changed

+337
-4
lines changed

3 files changed

+337
-4
lines changed

‎favicon.ico‎

9.44 KB
Binary file not shown.

‎src/page/addShop.vue‎

Lines changed: 336 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,348 @@
11
<template>
2-
<div class="fillcontain">
3-
addShop
2+
<div>
3+
<head-top></head-top>
4+
<el-row style="margin-top: 20px;">
5+
<el-col :span="12" :offset="4">
6+
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="110px" class="demo-ruleForm">
7+
<el-form-item label="店铺名称" prop="name">
8+
<el-input v-model="ruleForm.name"></el-input>
9+
</el-form-item>
10+
<el-form-item label="详细地址" prop="address">
11+
<el-input v-model="ruleForm.address"></el-input>
12+
</el-form-item>
13+
<el-form-item label="联系电话" prop="phone">
14+
<el-input v-model.number="ruleForm.phone" maxLength="11"></el-input>
15+
</el-form-item>
16+
<el-form-item label="店铺简介" prop="description">
17+
<el-input v-model="ruleForm.description"></el-input>
18+
</el-form-item>
19+
<el-form-item label="店铺标语" prop="promotion_info">
20+
<el-input v-model="ruleForm.promotion_info"></el-input>
21+
</el-form-item>
22+
<el-form-item label="配送费" prop="float_delivery_fee">
23+
<el-input-number v-model="ruleForm.float_delivery_fee" :min="0" :max="20"></el-input-number>
24+
</el-form-item>
25+
<el-form-item label="起送价" prop="float_minimum_order_amount">
26+
<el-input-number v-model="ruleForm.float_minimum_order_amount" :min="0" :max="100"></el-input-number>
27+
</el-form-item>
28+
<el-form-item label="店铺特点" style="white-space: nowrap;">
29+
<span>品牌保证</span>
30+
<el-switch on-text="" off-text="" v-model="ruleForm.is_premium"></el-switch>
31+
<span>蜂鸟专送</span>
32+
<el-switch on-text="" off-text="" v-model="ruleForm.delivery_mode"></el-switch>
33+
<span>新开店铺</span>
34+
<el-switch on-text="" off-text="" v-model="ruleForm.new"></el-switch>
35+
</el-form-item>
36+
<el-form-item style="white-space: nowrap;">
37+
<span>外卖保</span>
38+
<el-switch on-text="" off-text="" v-model="ruleForm.bao"></el-switch>
39+
<span>准时达</span>
40+
<el-switch on-text="" off-text="" v-model="ruleForm.zhun"></el-switch>
41+
<span>开发票</span>
42+
<el-switch on-text="" off-text="" v-model="ruleForm.piao"></el-switch>
43+
</el-form-item>
44+
<el-form-item label="营业时间" style="white-space: nowrap;">
45+
<el-time-select
46+
placeholder="起始时间"
47+
v-model="ruleForm.startTime"
48+
:picker-options="{
49+
start: '05:30',
50+
step: '00:15',
51+
end: '23:30'
52+
}">
53+
</el-time-select>
54+
<el-time-select
55+
placeholder="结束时间"
56+
v-model="ruleForm.endTime"
57+
:picker-options="{
58+
start: '05:30',
59+
step: '00:15',
60+
end: '23:30',
61+
minTime: ruleForm.startTime
62+
}">
63+
</el-time-select>
64+
</el-form-item>
65+
<el-form-item label="上传店铺头像">
66+
<el-upload
67+
class="avatar-uploader"
68+
action="//jsonplaceholder.typicode.com/posts/"
69+
:show-file-list="false"
70+
:on-success="handleShopAvatarScucess"
71+
:before-upload="beforeAvatarUpload">
72+
<img v-if="ruleForm.image_path" :src="ruleForm.image_path" class="avatar">
73+
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
74+
</el-upload>
75+
</el-form-item>
76+
<el-form-item label="上传营业执照">
77+
<el-upload
78+
class="avatar-uploader"
79+
action="//jsonplaceholder.typicode.com/posts/"
80+
:show-file-list="false"
81+
:on-success="handleBusinessAvatarScucess"
82+
:before-upload="beforeAvatarUpload">
83+
<img v-if="ruleForm.business_license_image" :src="ruleForm.business_license_image" class="avatar">
84+
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
85+
</el-upload>
86+
</el-form-item>
87+
<el-form-item label="上传餐饮服务许可证">
88+
<el-upload
89+
class="avatar-uploader"
90+
action="//jsonplaceholder.typicode.com/posts/"
91+
:show-file-list="false"
92+
:on-success="handleServiceAvatarScucess"
93+
:before-upload="beforeAvatarUpload">
94+
<img v-if="ruleForm.catering_service_license_image" :src="ruleForm.catering_service_license_image" class="avatar">
95+
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
96+
</el-upload>
97+
</el-form-item>
98+
<el-form-item label="优惠活动">
99+
<el-select v-model="activityValue" @change="selectActivity" :placeholder="activityValue">
100+
<el-option
101+
v-for="item in options"
102+
:key="item.value"
103+
:label="item.label"
104+
:value="item.value">
105+
</el-option>
106+
</el-select>
107+
</el-form-item>
108+
<el-table
109+
:data="activities"
110+
style="min-width: 600px;margin-bottom: 20px;"
111+
align="cneter"
112+
:row-class-name="tableRowClassName">
113+
<el-table-column
114+
prop="icon_name"
115+
label="活动标题"
116+
align="cneter"
117+
width="120">
118+
</el-table-column>
119+
<el-table-column
120+
prop="name"
121+
label="活动名称"
122+
align="cneter"
123+
width="120">
124+
</el-table-column>
125+
<el-table-column
126+
prop="description"
127+
align="cneter"
128+
label="活动详情">
129+
</el-table-column>
130+
<el-table-column
131+
label="操作"
132+
width="120">
133+
<template scope="scope">
134+
<el-button
135+
size="small"
136+
type="danger"
137+
@click="handleDelete(scope.$index)">删除</el-button>
138+
</template>
139+
</el-table-column>
140+
</el-table>
141+
<el-form-item class="button_submit">
142+
<el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
143+
</el-form-item>
144+
</el-form>
145+
</el-col>
146+
</el-row>
4147
</div>
5148
</template>
6149

7150
<script>
151+
import headTop from '../components/headTop'
8152
export default {
9-
153+
data(){
154+
return {
155+
ruleForm: {
156+
name: '', //店铺名称
157+
address: '', //地址
158+
description: '', //介绍
159+
phone: '',
160+
promotion_info: '',
161+
float_delivery_fee: 0, //运费
162+
float_minimum_order_amount: 0, //起价
163+
is_premium: false,
164+
delivery_mode: false,
165+
new: false,
166+
bao: false,
167+
zhun: false,
168+
piao: false,
169+
startTime: '',
170+
endTime: '',
171+
image_path: '',
172+
business_license_image: '',
173+
catering_service_license_image: '',
174+
},
175+
rules: {
176+
name: [
177+
{ required: true, message: '请输入店铺名称', trigger: 'blur' },
178+
],
179+
address: [
180+
{ required: true, message: '请输入详细地址', trigger: 'blur' }
181+
],
182+
phone: [
183+
{ required: true, message: '请输入联系电话' },
184+
{ type: 'number', message: '电话号码必须是数字' }
185+
],
186+
},
187+
options: [{
188+
value: '满减优惠',
189+
label: '满减优惠'
190+
}, {
191+
value: '优惠大酬宾',
192+
label: '优惠大酬宾'
193+
}, {
194+
value: '新用户立减',
195+
label: '新用户立减'
196+
}, {
197+
value: '进店领券',
198+
label: '进店领券'
199+
}],
200+
activityValue: '满减优惠',
201+
activities: [{
202+
icon_name: '减',
203+
name: '满减优惠',
204+
description: '满30减5，满60减8',
205+
}]
206+
}
207+
},
208+
components: {
209+
headTop,
210+
},
211+
methods: {
212+
submitForm(formName) {
213+
this.$refs[formName].validate((valid) => {
214+
if (valid) {
215+
alert('submit!');
216+
} else {
217+
this.$notify.error({
218+
title: '错误',
219+
message: '请检查输入是否正确',
220+
offset: 100
221+
});
222+
return false;
223+
}
224+
});
225+
},
226+
handleShopAvatarScucess(res, file) {
227+
this.ruleForm.image_path = URL.createObjectURL(file.raw);
228+
},
229+
handleBusinessAvatarScucess(res, file) {
230+
this.ruleForm.business_license_image = URL.createObjectURL(file.raw);
231+
},
232+
handleServiceAvatarScucess(res, file) {
233+
this.ruleForm.catering_service_license_image = URL.createObjectURL(file.raw);
234+
},
235+
beforeAvatarUpload(file) {
236+
const isJPG = file.type === 'image/jpeg';
237+
const isLt2M = file.size / 1024 / 1024 < 2;
238+
239+
if (!isJPG) {
240+
this.$message.error('上传头像图片只能是 JPG 格式!');
241+
}
242+
if (!isLt2M) {
243+
this.$message.error('上传头像图片大小不能超过 2MB!');
244+
}
245+
return isJPG && isLt2M;
246+
},
247+
tableRowClassName(row, index) {
248+
if (index === 1) {
249+
return 'info-row';
250+
} else if (index === 3) {
251+
return 'positive-row';
252+
}
253+
return '';
254+
},
255+
selectActivity(){
256+
this.$prompt('请输入活动详情', '提示', {
257+
confirmButtonText: '确定',
258+
cancelButtonText: '取消',
259+
}).then(({ value }) => {
260+
if (value == null) {
261+
this.$message({
262+
type: 'info',
263+
message: '请输入活动详情'
264+
});
265+
return
266+
}
267+
let newObj = {};
268+
switch(this.activityValue){
269+
case '满减优惠':
270+
newObj= {
271+
icon_name: '减',
272+
name: '满减优惠',
273+
description: value,
274+
}
275+
break;
276+
case '优惠大酬宾':
277+
newObj= {
278+
icon_name: '特',
279+
name: '优惠大酬宾',
280+
description: value,
281+
}
282+
break;
283+
case '新用户立减':
284+
newObj= {
285+
icon_name: '减',
286+
name: '新用户立减',
287+
description: value,
288+
}
289+
break;
290+
case '进店领券':
291+
newObj= {
292+
icon_name: '领',
293+
name: '进店领券',
294+
description: value,
295+
}
296+
break;
297+
}
298+
this.activities.push(newObj);
299+
}).catch(() => {
300+
this.$message({
301+
type: 'info',
302+
message: '取消输入'
303+
});
304+
});
305+
},
306+
handleDelete(index){
307+
this.activities.splice(index, 1)
308+
}
309+
}
10310
}
11311
</script>
12312

13313
<style lang="less">
14314
@import '../style/mixin';
315+
.button_submit{
316+
text-align: center;
317+
}
318+
.avatar-uploader .el-upload {
319+
border: 1px dashed #d9d9d9;
320+
border-radius: 6px;
321+
cursor: pointer;
322+
position: relative;
323+
overflow: hidden;
324+
}
325+
.avatar-uploader .el-upload:hover {
326+
border-color: #20a0ff;
327+
}
328+
.avatar-uploader-icon {
329+
font-size: 28px;
330+
color: #8c939d;
331+
width: 120px;
332+
height: 120px;
333+
line-height: 120px;
334+
text-align: center;
335+
}
336+
.avatar {
337+
width: 120px;
338+
height: 120px;
339+
display: block;
340+
}
341+
.el-table .info-row {
342+
background: #c9e5f5;
343+
}
344+
345+
.el-table .positive-row {
346+
background: #e2f0e4;
347+
}
15348
</style>

‎src/page/manage.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@
3737
</el-submenu>
3838
</el-menu>
3939
</el-col>
40-
<el-col :span="20" style="min-height: 100%;">
40+
<el-col :span="20" style="height: 100%;overflow-y: auto;">
4141
<router-view></router-view>
4242
</el-col>
4343
</el-row>

0 commit comments

Comments
 (0)