update

admin-code/src/components/module/operate.vue

@@ -0,0 +1,95 @@
+<template>
+	<el-popover
+		class="operate-module"
+		popper-class="liu-popover"
+		placement="bottom-end"
+		width="200"
+		trigger="hover"
+	>
+		<div class="operate-wrap">
+			<div
+				class="operate-list"
+				v-for="(item, index) in btnData"
+				:key="index"
+				@click="item.click()"
+			>
+				<i class="iconfont" :class="[item.icon]"></i>
+				<div class="btn-text">{{ item.text }}</div>
+			</div>
+		</div>
+		<el-button
+			type="text"
+			icon="el-icon-s-operation"
+			slot="reference"
+			class="operate-btn"
+		></el-button>
+	</el-popover>
+</template>
+
+<script>
+export default {
+	name: 'operate-module',
+	data() {
+		return {};
+	},
+	props: {
+		// 按钮列表
+		btnData: {
+			type: Array,
+			default: () => []
+		}
+	},
+	methods: {}
+};
+</script>
+
+<style lang="scss">
+.liu-popover {
+	background: rgba(0, 0, 0, 0.8);
+	border-color: #000;
+	.popper__arrow::after {
+		border-bottom-color: rgba(0, 0, 0, 0.8) !important;
+	}
+
+	.operate-wrap {
+		// background: rgba(0, 0, 0, 0.8);
+		box-shadow: 0px 3px 6px 0px rgba(29, 29, 29, 0.7);
+		border-radius: 10px;
+		// width: max-content;
+		height: 50px;
+		@include disFlex(center, space-around);
+		.operate-list {
+			width: 30%;
+			height: 50px;
+			line-height: 50px;
+			flex-shrink: 0;
+			// padding: 0 24px;
+			text-align: center;
+			color: #fff;
+			cursor: pointer;
+			.iconfont {
+				font-size: 36px;
+			}
+			.btn-text {
+				transform: scale(0.8);
+				margin-top: 2px;
+			}
+			&:hover {
+				color: $mainColor;
+				.iconfont {
+					color: $mainColor;
+				}
+			}
+		}
+	}
+}
+.operate-module {
+	.operate-btn {
+		color: #fff;
+		font-size: 24px;
+		&:hover {
+			color: $mainColor;
+		}
+	}
+}
+</style>

admin-code/src/mock/userInfo.js

@@ -251,6 +251,50 @@ let menu = {
 			viewPath: 'views/goods/goods-add.vue',
 			keepAlive: 1
 		},
+		{
+			id: '404',
+			parentId: '4',
+			name: '分类管理',
+			type: 1,
+			icon: 'icon-user',
+			orderNum: 1,
+			router: '/goods/category',
+			viewPath: 'views/goods/category.vue',
+			keepAlive: 1
+		},
+		{
+			id: '405',
+			parentId: '4',
+			name: '运费设置',
+			type: 1,
+			icon: 'icon-user',
+			orderNum: 1,
+			router: '/goods/freight',
+			viewPath: 'views/goods/freight-set.vue',
+			keepAlive: 1
+		},
+		{
+			id: '406',
+			parentId: '4',
+			name: '节日自动涨价',
+			type: 1,
+			icon: 'icon-user',
+			orderNum: 1,
+			router: '/goods/auto-price',
+			viewPath: 'views/goods/auto-price.vue',
+			keepAlive: 1
+		},
+		{
+			id: '406',
+			parentId: '4',
+			name: '商品通用简介',
+			type: 1,
+			icon: 'icon-user',
+			orderNum: 1,
+			router: '/goods/summary',
+			viewPath: 'views/goods/summary.vue',
+			keepAlive: 1
+		},
 		// 邀请有礼
 		{
 			id: '5',
@@ -524,7 +568,7 @@ let menu = {
 		},
 		{
 			id: '28',
-			parentId: '10',
+			parentId: '11',
 			name: '系统监控',
 			type: 0,
 			icon: 'icon-monitor',

admin-code/src/pages/layout/slider/index.vue

@@ -113,7 +113,7 @@ export default {
 		}
 	}
 	.sub-list {
-		width: calc(100% - 126px);
+		width: calc(100% - 130px);
 		background-color: #fff;
 		.list {
 			height: 40px;

admin-code/src/views/goods/auto-price.vue

@@ -0,0 +1,88 @@
+<template>
+	<div class="app-content auto-price-wrap">
+		<el-form
+			:model="ruleForm"
+			:rules="rules"
+			ref="ruleForm"
+			label-width="100px"
+			class="demo-ruleForm"
+		>
+			<el-form-item label="开启自动涨价" prop="name">
+				<el-switch v-model="ruleForm.delivery"></el-switch>
+			</el-form-item>
+			<el-form-item label="要涨价节日" prop="name">
+				<el-checkbox
+					v-model="ruleForm.status"
+					label="七夕节"
+					border
+					v-for="(item, index) in 4"
+					:key="index"
+					size="small"
+				></el-checkbox>
+			</el-form-item>
+			<el-form-item label="涨价方式" prop="resource">
+				<el-radio-group v-model="ruleForm.resource">
+					<el-radio label="按百分比"></el-radio>
+					<el-radio label="按金额"></el-radio>
+				</el-radio-group>
+			</el-form-item>
+			<template v-if="true">
+				<el-form-item label="比例" prop="resource">
+					<el-input v-model="ruleForm.name" placeholder="涨价10%，请输入10"></el-input>
+				</el-form-item>
+			</template>
+			<template v-else>
+				<el-form-item label="金额" prop="resource">
+					<el-input v-model="ruleForm.name" placeholder="涨价80元请输入80"></el-input>
+				</el-form-item>
+			</template>
+			<el-form-item>
+				<div class="app-color-3">
+					提示：在节日的前一天和当天，商城设置自动涨价的商品将会全部统一涨价。过后自动恢复原价。
+				</div>
+			</el-form-item>
+			<el-form-item>
+				<el-button @click="resetForm('ruleForm')">重置</el-button>
+				<el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
+			</el-form-item>
+		</el-form>
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'auto-price',
+	data() {
+		return {
+			ruleForm: {},
+			rules: {}
+		};
+	},
+	methods: {
+		submitForm(formName) {
+			this.$refs[formName].validate(valid => {
+				if (valid) {
+					alert('submit!');
+				} else {
+					console.log('error submit!!');
+					return false;
+				}
+			});
+		},
+		resetForm(formName) {
+			this.$refs[formName].resetFields();
+		}
+	}
+};
+</script>
+<style lang="scss">
+.auto-price-wrap {
+	.el-checkbox.is-bordered.el-checkbox--small {
+		margin-left: 0;
+		margin-right: 10px;
+		&:nth-child(4n + 4) {
+			margin-right: 0;
+		}
+	}
+}
+</style>

admin-code/src/views/goods/freight-set.vue

@@ -0,0 +1,57 @@
+<template>
+	<div class="app-content setting-freight-wrap">
+		<el-form
+			:model="ruleForm"
+			:rules="rules"
+			ref="ruleForm"
+			label-width="10px"
+			class="demo-ruleForm"
+		>
+			<el-form-item>
+				<div class="flex-center">
+					<el-input v-model="ruleForm.name" style="width: 150px"></el-input>
+					<div class="prompt-text">公里内免运费，超过 5 公里每增加1公里，运费增加</div>
+					<el-input v-model="ruleForm.name" style="width: 150px"></el-input>
+				</div>
+			</el-form-item>
+			<el-form-item>
+				<el-button @click="resetForm('ruleForm')">重置</el-button>
+				<el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
+			</el-form-item>
+		</el-form>
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'setting-freight',
+	data() {
+		return {
+			ruleForm: {},
+			rules: {}
+		};
+	},
+	methods: {
+		submitForm(formName) {
+			this.$refs[formName].validate(valid => {
+				if (valid) {
+					alert('submit!');
+				} else {
+					console.log('error submit!!');
+					return false;
+				}
+			});
+		},
+		resetForm(formName) {
+			this.$refs[formName].resetFields();
+		}
+	}
+};
+</script>
+<style lang="scss">
+.setting-freight-wrap {
+	.prompt-text {
+		margin: 0 10px;
+	}
+}
+</style>

admin-code/src/views/goods/img-store.vue

@@ -28,35 +28,99 @@
 				</div>
 				<!--  -->
 				<div class="operate-btn-wrap">
-					<el-popover
-						placement="top-start"
-						title="标题"
-						width="200"
-						trigger="hover"
-						content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。"
-					>
-						<el-button
-							type="text"
-							icon="el-icon-s-operation"
-							slot="reference"
-							class="operate-btn"
-						></el-button>
-						<!-- <el-button slot="reference">hover 激活</el-button> -->
-					</el-popover>
+					<operate-module :btnData="btnData" />
 				</div>
 			</div>
 		</div>
+		<!-- nodule -->
+		<el-dialog title="图片上传成功！" :visible.sync="addImageModal" width="600px">
+			<div class="add-image-modal-content">
+				<el-form :model="addForm" :rules="rules" ref="addForm" label-width="120px">
+					<el-form-item label="选择分类(可多选)">
+						<el-checkbox
+							v-model="addForm.status"
+							label="花束/花盒"
+							border
+							v-for="(item, index) in 4"
+							:key="index"
+							size="small"
+						></el-checkbox>
+					</el-form-item>
+					<el-form-item label="售价">
+						<el-input
+							v-model="addForm.styleName"
+							placeholder="填价格，图片可当商品卖(选填)"
+						>
+							<i slot="suffix" class="iconfont iconqian"></i
+						></el-input>
+					</el-form-item>
+					<el-form-item label="名称">
+						<el-input v-model="addForm.price" placeholder="选填"></el-input>
+					</el-form-item>
+				</el-form>
+			</div>
+			<div slot="footer" class="dialog-footer">
+				<el-button size="small" @click="addImageModal = false">取 消</el-button>
+				<el-button type="primary" size="small" @click="addImageModal = false"
+					>确 定</el-button
+				>
+			</div>
+		</el-dialog>
 	</div>
 </template>
 
 <script>
+import operateModule from '@/components/module/operate';
 export default {
+	name: 'img-store',
+	components: {
+		operateModule
+	},
 	data() {
 		return {
 			form: {
 				user: '',
 				region: ''
-			}
+			},
+			btnData: [
+				{
+					text: '编辑',
+					icon: 'iconbianji',
+					click: () => {
+						this.$util.pageTo({
+							url: '/pages/ad/add',
+							query: {
+								type: this.tabIndex,
+								id: this.operateData.id
+							}
+						});
+					}
+				},
+				{
+					text: '下架',
+					icon: 'iconxiajia',
+					click: () => {
+						off({ id: this.operateData.id }).then(res => {
+							this.operateCloseFn();
+							this.list.data[this.operateData.index].status = 0;
+							this.$msg('下架成功!');
+						});
+					}
+				},
+				{
+					text: '删除',
+					icon: 'iconshanchu1',
+					click: () => {
+						this.delModal = true;
+					}
+				}
+			],
+			// 图片上传成功
+			addImageModal: true,
+			addForm: {
+				status: false
+			},
+			rules: {}
 		};
 	},
 	methods: {
@@ -89,13 +153,16 @@ export default {
 			position: absolute;
 			top: 0;
 			right: 10px;
-			.operate-btn {
-				color: #fff;
-				font-size: 24px;
-				&:hover {
-					color: $mainColor;
-				}
-			}
+		}
+	}
+}
+// mode
+.add-image-modal-content {
+	.el-checkbox.is-bordered.el-checkbox--small {
+		margin-left: 0;
+		margin-right: 10px;
+		&:nth-child(4n + 4) {
+			margin-right: 0;
 		}
 	}
 }

admin-code/src/views/goods/summary.vue

@@ -0,0 +1,62 @@
+<template>
+	<div class="app-content summary-wrap">
+		<el-form
+			:model="ruleForm"
+			:rules="rules"
+			ref="ruleForm"
+			label-width="100px"
+			class="demo-ruleForm"
+		>
+			<el-form-item label="商品通用简介" prop="resource">
+				<cl-editor-quill v-model="ruleForm.desc" @load="editor"></cl-editor-quill>
+			</el-form-item>
+			<el-form-item>
+				<div class="app-color-3">说明：商品介绍的后半部分，将会显示上面的内容。</div>
+			</el-form-item>
+			<el-form-item>
+				<el-button @click="resetForm('ruleForm')">重置</el-button>
+				<el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
+			</el-form-item>
+		</el-form>
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'goods-summary',
+	data() {
+		return {
+			ruleForm: {},
+			rules: {}
+		};
+	},
+	methods: {
+		editor() {},
+		submitForm(formName) {
+			this.$refs[formName].validate(valid => {
+				if (valid) {
+					alert('submit!');
+				} else {
+					console.log('error submit!!');
+					return false;
+				}
+			});
+		},
+		resetForm(formName) {
+			this.$refs[formName].resetFields();
+		}
+	}
+};
+</script>
+<style lang="scss">
+.summary-wrap {
+	.prompt-text {
+		margin: 0 10px;
+	}
+	.cl-editor-quill {
+		/deep/ .editor {
+			height: 300px;
+		}
+	}
+}
+</style>