新增添加商铺页面

src/page/addShop.vue

 <template>
-    <div class="fillcontain">
-        addShop
+    <div>
+        <head-top></head-top>
+        <el-row style="margin-top: 20px;">
+  			<el-col :span="12" :offset="4">
+		        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="110px" class="demo-ruleForm">
+					<el-form-item label="店铺名称" prop="name">
+						<el-input v-model="ruleForm.name"></el-input>
+					</el-form-item>
+					<el-form-item label="详细地址" prop="address">
+						<el-input v-model="ruleForm.address"></el-input>
+					</el-form-item>
+					<el-form-item label="联系电话" prop="phone">
+						<el-input v-model.number="ruleForm.phone" maxLength="11"></el-input>
+					</el-form-item>
+					<el-form-item label="店铺简介" prop="description">
+						<el-input v-model="ruleForm.description"></el-input>
+					</el-form-item>
+					<el-form-item label="店铺标语" prop="promotion_info">
+						<el-input v-model="ruleForm.promotion_info"></el-input>
+					</el-form-item>
+					<el-form-item label="配送费" prop="float_delivery_fee">
+						<el-input-number v-model="ruleForm.float_delivery_fee" :min="0" :max="20"></el-input-number>
+					</el-form-item>
+					<el-form-item label="起送价" prop="float_minimum_order_amount">
+						<el-input-number v-model="ruleForm.float_minimum_order_amount" :min="0" :max="100"></el-input-number>
+					</el-form-item>
+					<el-form-item label="店铺特点" style="white-space: nowrap;">
+						<span>品牌保证</span>
+						<el-switch on-text="" off-text="" v-model="ruleForm.is_premium"></el-switch>
+						<span>蜂鸟专送</span>
+						<el-switch on-text="" off-text="" v-model="ruleForm.delivery_mode"></el-switch>
+						<span>新开店铺</span>
+						<el-switch on-text="" off-text="" v-model="ruleForm.new"></el-switch>
+					</el-form-item>
+					<el-form-item style="white-space: nowrap;">
+						<span>外卖保</span>
+						<el-switch on-text="" off-text="" v-model="ruleForm.bao"></el-switch>
+						<span>准时达</span>
+						<el-switch on-text="" off-text="" v-model="ruleForm.zhun"></el-switch>
+						<span>开发票</span>
+						<el-switch on-text="" off-text="" v-model="ruleForm.piao"></el-switch>
+					</el-form-item>
+					<el-form-item label="营业时间" style="white-space: nowrap;">
+						<el-time-select
+							placeholder="起始时间"
+							v-model="ruleForm.startTime"
+							:picker-options="{
+							start: '05:30',
+							step: '00:15',
+							end: '23:30'
+							}">
+						</el-time-select>
+						<el-time-select
+							placeholder="结束时间"
+							v-model="ruleForm.endTime"
+							:picker-options="{
+							start: '05:30',
+							step: '00:15',
+							end: '23:30',
+							minTime: ruleForm.startTime
+							}">
+						</el-time-select>
+					</el-form-item>
+					<el-form-item label="上传店铺头像">
+						<el-upload
+						  class="avatar-uploader"
+						  action="//jsonplaceholder.typicode.com/posts/"
+						  :show-file-list="false"
+						  :on-success="handleShopAvatarScucess"
+						  :before-upload="beforeAvatarUpload">
+						  <img v-if="ruleForm.image_path" :src="ruleForm.image_path" class="avatar">
+						  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+						</el-upload>
+					</el-form-item>
+					<el-form-item label="上传营业执照">
+						<el-upload
+						  class="avatar-uploader"
+						  action="//jsonplaceholder.typicode.com/posts/"
+						  :show-file-list="false"
+						  :on-success="handleBusinessAvatarScucess"
+						  :before-upload="beforeAvatarUpload">
+						  <img v-if="ruleForm.business_license_image" :src="ruleForm.business_license_image" class="avatar">
+						  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+						</el-upload>
+					</el-form-item>
+					<el-form-item label="上传餐饮服务许可证">
+						<el-upload
+						  class="avatar-uploader"
+						  action="//jsonplaceholder.typicode.com/posts/"
+						  :show-file-list="false"
+						  :on-success="handleServiceAvatarScucess"
+						  :before-upload="beforeAvatarUpload">
+						  <img v-if="ruleForm.catering_service_license_image" :src="ruleForm.catering_service_license_image" class="avatar">
+						  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+						</el-upload>
+					</el-form-item>
+					<el-form-item label="优惠活动">
+						<el-select v-model="activityValue" @change="selectActivity" :placeholder="activityValue">
+						    <el-option
+						      	v-for="item in options"
+						      	:key="item.value"
+						      	:label="item.label"
+						      	:value="item.value">
+						    </el-option>
+						</el-select>
+					</el-form-item>
+					<el-table
+					    :data="activities"
+					    style="min-width: 600px;margin-bottom: 20px;"
+						align="cneter"
+					    :row-class-name="tableRowClassName">
+					    <el-table-column
+					      prop="icon_name"
+					      label="活动标题"
+					      align="cneter"
+					      width="120">
+					    </el-table-column>
+					    <el-table-column
+					      prop="name"
+					      label="活动名称"
+					      align="cneter"
+					      width="120">
+					    </el-table-column>
+					    <el-table-column
+					      prop="description"
+					      align="cneter"
+					      label="活动详情">
+					    </el-table-column>
+					    <el-table-column 
+					    	label="操作" 
+					    	width="120">
+					    <template scope="scope">
+					        <el-button
+					          size="small"
+					          type="danger"
+					          @click="handleDelete(scope.$index)">删除</el-button>
+					    </template>
+					    </el-table-column>
+					</el-table>
+					<el-form-item class="button_submit">
+						<el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
+					</el-form-item>
+				</el-form>
+  			</el-col>
+  		</el-row>
     </div>
 </template>
 
 <script>
+    import headTop from '../components/headTop'
     export default {
-    	
+    	data(){
+    		return {
+    			ruleForm: {
+					name: '', //店铺名称
+					address: '', //地址
+					description: '', //介绍
+					phone: '',
+					promotion_info: '',
+					float_delivery_fee: 0, //运费
+					float_minimum_order_amount: 0, //起价
+					is_premium: false,
+					delivery_mode: false,
+					new: false,
+					bao: false,
+					zhun: false,
+					piao: false,
+					startTime: '',
+       	 			endTime: '',
+       	 			image_path: '',
+       	 			business_license_image: '',
+       	 			catering_service_license_image: '',
+		        },
+		        rules: {
+					name: [
+						{ required: true, message: '请输入店铺名称', trigger: 'blur' },
+					],
+					address: [
+						{ required: true, message: '请输入详细地址', trigger: 'blur' }
+					],
+					phone: [
+						{ required: true, message: '请输入联系电话' },
+						{ type: 'number', message: '电话号码必须是数字' }
+					],
+				},
+				options: [{
+		          	value: '满减优惠',
+		          	label: '满减优惠'
+		        }, {
+		          	value: '优惠大酬宾',
+		          	label: '优惠大酬宾'
+		        }, {
+		          	value: '新用户立减',
+		          	label: '新用户立减'
+		        }, {
+		          	value: '进店领券',
+		          	label: '进店领券'
+		        }],
+       	 		activityValue: '满减优惠',
+				activities: [{
+		        	icon_name: '减',
+		        	name: '满减优惠',
+		        	description: '满30减5，满60减8',
+			    }]
+    		}
+    	},
+    	components: {
+    		headTop,
+    	},
+    	methods: {
+			submitForm(formName) {
+				this.$refs[formName].validate((valid) => {
+					if (valid) {
+						alert('submit!');
+					} else {
+						this.$notify.error({
+							title: '错误',
+							message: '请检查输入是否正确',
+							offset: 100
+						});
+						return false;
+					}
+				});
+			},
+			handleShopAvatarScucess(res, file) {
+				this.ruleForm.image_path = URL.createObjectURL(file.raw);
+			},
+			handleBusinessAvatarScucess(res, file) {
+				this.ruleForm.business_license_image = URL.createObjectURL(file.raw);
+			},
+			handleServiceAvatarScucess(res, file) {
+				this.ruleForm.catering_service_license_image = URL.createObjectURL(file.raw);
+			},
+			beforeAvatarUpload(file) {
+				const isJPG = file.type === 'image/jpeg';
+				const isLt2M = file.size / 1024 / 1024 < 2;
+
+				if (!isJPG) {
+					this.$message.error('上传头像图片只能是 JPG 格式!');
+				}
+				if (!isLt2M) {
+					this.$message.error('上传头像图片大小不能超过 2MB!');
+				}
+				return isJPG && isLt2M;
+			},
+			tableRowClassName(row, index) {
+		        if (index === 1) {
+		        	return 'info-row';
+		        } else if (index === 3) {
+		        	return 'positive-row';
+		        }
+		        return '';
+		    },
+		    selectActivity(){
+		    	this.$prompt('请输入活动详情', '提示', {
+		          	confirmButtonText: '确定',
+		          	cancelButtonText: '取消',
+		        }).then(({ value }) => {
+		        	if (value == null) {
+		        		this.$message({
+				            type: 'info',
+				            message: '请输入活动详情'
+				        }); 
+		        		return
+		        	}
+		          	let newObj = {};
+		          	switch(this.activityValue){
+		          		case '满减优惠':
+		          			newObj= {
+		          				icon_name: '减',
+					        	name: '满减优惠',
+					        	description: value,
+		          			}
+		          			break;
+		          		case '优惠大酬宾':
+		          			newObj= {
+		          				icon_name: '特',
+					        	name: '优惠大酬宾',
+					        	description: value,
+		          			}
+		          			break;
+		          		case '新用户立减':
+		          			newObj= {
+		          				icon_name: '减',
+					        	name: '新用户立减',
+					        	description: value,
+		          			}
+		          			break;
+		          		case '进店领券':
+		          			newObj= {
+		          				icon_name: '领',
+					        	name: '进店领券',
+					        	description: value,
+		          			}
+		          			break;			
+		          	}
+		          	this.activities.push(newObj);
+		        }).catch(() => {
+		          	this.$message({
+		            	type: 'info',
+		            	message: '取消输入'
+		          	});       
+		        });
+		    },
+		    handleDelete(index){
+		    	this.activities.splice(index, 1)
+		    }
+		}
     }
 </script>
 
 <style lang="less">
 	@import '../style/mixin';
+	.button_submit{
+		text-align: center;
+	}
+	.avatar-uploader .el-upload {
+	    border: 1px dashed #d9d9d9;
+	    border-radius: 6px;
+	    cursor: pointer;
+	    position: relative;
+	    overflow: hidden;
+	}
+	.avatar-uploader .el-upload:hover {
+	    border-color: #20a0ff;
+	}
+	.avatar-uploader-icon {
+	    font-size: 28px;
+	    color: #8c939d;
+	    width: 120px;
+	    height: 120px;
+	    line-height: 120px;
+	    text-align: center;
+	}
+	.avatar {
+	    width: 120px;
+	    height: 120px;
+	    display: block;
+	}
+	.el-table .info-row {
+	    background: #c9e5f5;
+	}
+
+	.el-table .positive-row {
+	    background: #e2f0e4;
+	}
 </style>

src/page/manage.vue

@@ -37,7 +37,7 @@
 					</el-submenu>
 				</el-menu>
 			</el-col>
-			<el-col :span="20" style="min-height: 100%;">
+			<el-col :span="20" style="height: 100%;overflow-y: auto;">
 				<router-view></router-view>
 			</el-col>
 		</el-row>