front-end/admin-code/src/views/goods/goods-add.vue

<template>
	<div class="app-content">
		<div class="form-wrap">
			<el-form ref="form" :model="ruleForm" :rules="rules" label-width="120px">
				<el-form-item label="名称" prop="name">
					<el-input v-model="ruleForm.name"></el-input>
				</el-form-item>
				<el-form-item label="已售" prop="name">
					<el-input v-model="ruleForm.name"></el-input>
				</el-form-item>
				<el-form-item label="库存" prop="name">
					<el-input v-model="ruleForm.name"></el-input>
				</el-form-item>
				<el-form-item label="分类">
					<el-checkbox-group v-model="ruleForm.type">
						<el-checkbox label="M" name="type"></el-checkbox>
						<el-checkbox label="X" name="type"></el-checkbox>
						<el-checkbox label="XL" name="type"></el-checkbox>
						<el-checkbox label="2XL" name="type"></el-checkbox>
						<el-checkbox label="3XL" name="type"></el-checkbox>
						<el-checkbox label="4XL" name="type"></el-checkbox>
					</el-checkbox-group>
				</el-form-item>
				<el-form-item label="款式">
					<el-checkbox-group v-model="ruleForm.type">
						<el-checkbox label="多款式" name="type"></el-checkbox>
					</el-checkbox-group>
				</el-form-item>
				<el-form-item label="图片">
					<div class="list-wrap">
						<cl-upload v-model="ruleForm.goodsImg"></cl-upload>
						<div>
							<el-button type="primary" size="small">商品主图</el-button>
							<el-button type="warning" size="small">删除</el-button>
						</div>
					</div>
					<div>
						<el-button type="primary" size="small" @click="imgStoreModal = true"
							>从图库选择</el-button
						>
					</div>
					<el-dialog :visible.sync="dialogVisible">
						<img width="100%" :src="dialogImageUrl" alt />
					</el-dialog>
				</el-form-item>
				<el-form-item label="活动形式">
					<cl-editor-quill v-model="ruleForm.desc" @load="editor"></cl-editor-quill>
					<!-- <el-input type="textarea" v-model="ruleForm.desc"></el-input> -->
				</el-form-item>
				<el-form-item label="节假日自动涨价">
					<el-checkbox-group v-model="ruleForm.type">
						<el-checkbox label="需要" name="type">
							<span>需要</span>
						</el-checkbox>
						<el-popover
							placement="top"
							width="100"
							trigger="hover"
							v-model="autoPricePopover"
						>
							<p>特定节日商品会自动进行涨价 无需手动调价</p>
							<div style="text-align: right; margin: 0">
								<el-button
									size="mini"
									type="primary"
									@click="autoPricePopover = false"
									>涨价设置</el-button
								>
							</div>
							<el-button
								type="text"
								icon="el-icon-question"
								slot="reference"
							></el-button>
							<!-- <el-button slot="reference">删除</el-button> -->
						</el-popover>
					</el-checkbox-group>
				</el-form-item>
				<el-form-item label="配送方式">
					<el-checkbox-group v-model="ruleForm.type">
						<el-checkbox label="到店自提" name="type"></el-checkbox>
					</el-checkbox-group>
				</el-form-item>
				<el-form-item label="配送方式">
					<el-radio-group v-model="ruleForm.resource">
						<el-radio label="按距离收费">
							<span>按距离收费</span>
						</el-radio>
						<el-popover
							placement="top"
							width="100"
							trigger="hover"
							v-model="chargePopover"
						>
							<p>5公里内免运费，超过5公里每增加1公里运费增加2元</p>
							<div style="text-align: right; margin: 0">
								<el-button size="mini" type="primary" @click="chargePopover = false"
									>修改</el-button
								>
							</div>
							<el-button
								type="text"
								icon="el-icon-question"
								slot="reference"
								class="question-btn"
							></el-button>
							<!-- <el-button slot="reference">删除</el-button> -->
						</el-popover>
						<el-radio label="免运费"></el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="submitForm('ruleForm')">上架出售</el-button>
					<el-button @click="resetForm('ruleForm')">加入仓库</el-button>
				</el-form-item>
			</el-form>
		</div>
		<!-- 从图库选择 -->
		<el-dialog title="从图库选择" :visible.sync="imgStoreModal" width="60%">
			<div class="store-modal-content">
				<div class="select-wrap flex-center-between">
					<div>全部图片</div>
					<el-select v-model="imgStoreVal" size="small" placeholder="请选择">
						<el-option
							v-for="item in imgStoreOpt"
							:key="item.value"
							:label="item.label"
							:value="item.value"
						>
						</el-option>
					</el-select>
				</div>
				<div class="img-store-wrap">
					<el-checkbox-group v-model="imgStoreArr" class="list-store">
						<div
							class="list-checkbox"
							v-for="(item, index) in 10"
							:label="index"
							:key="index"
						>
							<el-checkbox>
								<div class="list-img">
									<img
										src="https://pic.qqtn.com/up/2019-11/2019110209212070747.jpg"
										alt="图库图片"
									/>
								</div>
							</el-checkbox>
						</div>
					</el-checkbox-group>
				</div>
				<el-pagination
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:current-page.sync="currentPage"
					:page-size="100"
					layout="total, prev, pager, next"
					:total="1000"
				>
				</el-pagination>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button size="small" @click="imgStoreModal = false">取 消</el-button>
				<el-button type="primary" size="small" @click="imgStoreModal = false"
					>确 定</el-button
				>
			</div>
		</el-dialog>
		<!-- 选择款式 -->
		<el-dialog title="选择款式" :visible.sync="styleStoreModal" width="800px">
			<div class="style-modal-content">
				<el-form :inline="true" :model="styleForm" class="demo-form-inline">
					<div class="flex-center-between" v-for="(item, index) in 4" :key="index">
						<el-form-item label="款式名称">
							<el-input
								v-model="styleForm.styleName"
								placeholder="款式名称"
							></el-input>
						</el-form-item>
						<el-form-item label="价格">
							<el-input v-model="styleForm.price" placeholder="价格"></el-input>
						</el-form-item>
						<el-form-item label="图片" class="flex-center">
							<cl-upload v-model="styleForm.goodsImg"></cl-upload>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" size="small" @click="styleSubmit"
								>删除</el-button
							>
						</el-form-item>
					</div>
				</el-form>
				<el-button type="primary" size="small" @click="styleFormAddFn">新增</el-button>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button size="small" @click="styleStoreModal = false">取 消</el-button>
				<el-button type="primary" size="small" @click="styleStoreModal = false"
					>确 定</el-button
				>
			</div>
		</el-dialog>
	</div>
</template>

<script>
export default {
	name: 'goods-add',
	data() {
		return {
			ruleForm: {
				name: '',
				region: '',
				date1: '',
				date2: '',
				delivery: false,
				type: [],
				resource: '',
				desc: '',
				goodsImg: ''
			},
			rules: {
				name: [
					{ required: true, message: '请输入活动名称', trigger: 'blur' },
					{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
				]
			},
			// 图片
			dialogImageUrl: '',
			dialogVisible: false,
			// 需要自动涨价
			autoPricePopover: false,
			// 距离收费
			chargePopover: false,
			// 从图库中选择
			imgStoreModal: true,
			imgStoreVal: '',
			imgStoreOpt: [],
			imgStoreArr: [],
			currentPage: 1,
			// 款式选择
			styleStoreModal: false,
			styleForm: {
				styleName: '',
				price: '',
				img: ''
			}
		};
	},
	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();
		},
		// 图片上传
		handleRemove(file, fileList) {
			console.log(file, fileList);
		},
		handlePictureCardPreview(file) {
			this.dialogImageUrl = file.url;
			this.dialogVisible = true;
		},
		// 编辑器
		editor(ref) {
			console.log(ref);
		},
		handleSizeChange(val) {
			console.log(`每页 ${val} 条`);
		},
		handleCurrentChange(val) {
			console.log(`当前页: ${val}`);
		},
		// 款式选择弹窗
		styleSubmit() {},
		styleFormAddFn() {}
	}
};
</script>

<style lang="scss" scoped>
.form-wrap {
	// width: 60%;
	.question-btn {
		position: relative;
		right: 28px;
	}
}
.cl-editor-quill {
	/deep/ .editor {
		height: 300px;
	}
}
// 图库选择
.store-modal-content {
	.select-wrap {
		margin-bottom: 20px;
	}
	.img-store-wrap {
		.list-store {
			@include disFlex(center, flex-start);
			flex-wrap: wrap;
			.list-checkbox {
				position: relative;
				margin-bottom: 10px;
				/deep/.el-checkbox__input {
					position: absolute;
					top: 10px;
					right: 10px;
				}
			}
			.list-img {
				width: 100px;
				height: 100px;
			}
		}
	}
}
// 风格选择
.style-modal-content {
	/deep/.upload-wrap {
		width: 60px !important;
		height: 60px !important;
	}
}
</style>