|
|
@@ -0,0 +1,148 @@
|
|
|
+<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">
|
|
|
+ <el-upload
|
|
|
+ action="https://jsonplaceholder.typicode.com/posts/"
|
|
|
+ list-type="picture-card"
|
|
|
+ :on-preview="handlePictureCardPreview"
|
|
|
+ :on-remove="handleRemove"
|
|
|
+ >
|
|
|
+ <i class="el-icon-plus"></i>
|
|
|
+ </el-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">从图库选择</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"></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="配送方式">
|
|
|
+ <el-radio-group v-model="ruleForm.resource">
|
|
|
+ <el-radio label="按距离收费">
|
|
|
+ <span>按距离收费</span>
|
|
|
+ <i class="el-icon-question"></i>
|
|
|
+ </el-radio>
|
|
|
+ <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>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ name: 'goods-add',
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ ruleForm: {
|
|
|
+ name: '',
|
|
|
+ region: '',
|
|
|
+ date1: '',
|
|
|
+ date2: '',
|
|
|
+ delivery: false,
|
|
|
+ type: [],
|
|
|
+ resource: '',
|
|
|
+ desc: ''
|
|
|
+ },
|
|
|
+ rules: {
|
|
|
+ name: [
|
|
|
+ { required: true, message: '请输入活动名称', trigger: 'blur' },
|
|
|
+ { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ // 图片
|
|
|
+ dialogImageUrl: '',
|
|
|
+ dialogVisible: false
|
|
|
+ };
|
|
|
+ },
|
|
|
+ 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);
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.form-wrap {
|
|
|
+ // width: 60%;
|
|
|
+}
|
|
|
+.cl-editor-quill {
|
|
|
+ /deep/ .editor {
|
|
|
+ height: 300px;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
lalala