我们发布啦

admin/src/views/store/index.vue

@@ -0,0 +1,274 @@
+<template>
+  <div class="divBox">
+    <el-card class="box-card">
+      <div slot="header" class="clearfix">
+        <el-tabs v-model="tableFrom.type" @tab-click="seachList">
+          <el-tab-pane :label="item.name +'('+item.count +')' " :name="item.type.toString()" v-for="(item,index) in headeNum" :key="index"/>
+        </el-tabs>
+        <div class="container">
+          <el-form inline size="small">
+            <el-form-item label="商品分类：">
+              <el-cascader v-model="tableFrom.cateId" :options="merCateList" :props="props" clearable class="selWidth mr20" @change="seachList" size="small"/>
+            </el-form-item>
+            <el-form-item label="商品搜索：">
+              <el-input v-model="tableFrom.keywords" placeholder="请输入商品名称，关键字，商品ID" class="selWidth" size="small">
+                <el-button slot="append" icon="el-icon-search" @click="seachList" size="small"/>
+              </el-input>
+            </el-form-item>
+          </el-form>
+        </div>
+        <router-link :to=" { path:'/store/list/creatProduct' } ">
+          <el-button size="small" type="primary" class="mr10">添加商品</el-button>
+        </router-link>
+        <el-button size="small" type="success" class="mr10" @click="onCopy">复制淘宝、天猫、拼多多、京东、苏宁</el-button>
+        <el-button size="small" @click="exports">导出</el-button>
+      </div>
+      <el-table
+        v-loading="listLoading"
+        :data="tableData.data"
+        style="width: 100%"
+        size="mini"
+        highlight-current-row
+      >
+        <el-table-column type="expand">
+          <template slot-scope="props">
+            <el-form label-position="left" inline class="demo-table-expand">
+              <el-form-item label="商品分类：">
+                <span v-for="(item, index) in props.row.cateValues.split(',')" :key="index" class="mr10">{{ item }}</span>
+              </el-form-item>
+              <el-form-item label="市场价：">
+                <span>{{ props.row.otPrice }}</span>
+              </el-form-item>
+              <el-form-item label="成本价：">
+                <span>{{ props.row.cost }}</span>
+              </el-form-item>
+              <el-form-item label="收藏：">
+                <span>{{ props.row.collectCount }}</span>
+              </el-form-item>
+              <el-form-item label="虚拟销量：">
+                <span>{{ props.row.ficti }}</span>
+              </el-form-item>
+            </el-form>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="id"
+          label="ID"
+          min-width="50"
+        />
+        <el-table-column label="商品图" min-width="80">
+          <template slot-scope="scope">
+            <div class="demo-image__preview">
+              <el-image
+                style="width: 36px; height: 36px"
+                :src="scope.row.image"
+                :preview-src-list="[scope.row.image]"
+              />
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="storeName"
+          label="商品名称"
+          min-width="200"
+        />
+        <el-table-column
+          prop="price"
+          label="商品售价"
+          min-width="90"
+        />
+        <el-table-column
+          prop="sales"
+          label="销量"
+          min-width="90"
+        />
+        <el-table-column
+          prop="stock"
+          label="库存"
+          min-width="90"
+        />
+        <el-table-column
+          prop="sort"
+          label="排序"
+          min-width="70"
+        />
+        <el-table-column
+          label="状态"
+          min-width="150"
+        >
+          <template slot-scope="scope">
+            <el-switch
+              v-model="scope.row.isShow"
+              :active-value="true"
+              :inactive-value="false"
+              active-text="上架"
+              inactive-text="下架"
+              @change="onchangeIsShow(scope.row)"
+            />
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="操作时间"
+          min-width="120"
+        >
+          <template slot-scope="scope">
+            <span>{{scope.row.addTime | formatDate}}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" min-width="120" fixed="right" align="center">
+          <template slot-scope="scope">
+            <router-link :to="{path: '/store/list/creatProduct/' + scope.row.id}">
+              <el-button type="text" size="small" class="mr10">编辑</el-button>
+            </router-link>
+            <el-button type="text" size="small" @click="handleDelete(scope.row.id, scope.$index)">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div class="block">
+        <el-pagination
+          :page-sizes="[20, 40, 60, 80]"
+          :page-size="tableFrom.limit"
+          :current-page="tableFrom.page"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="tableData.total"
+          @size-change="handleSizeChange"
+          @current-change="pageChange"
+        />
+      </div>
+    </el-card>
+
+    <el-dialog
+      title="复制淘宝、天猫、拼多多、京东、苏宁"
+      :visible.sync="dialogVisible"
+      width="1200px"
+      :before-close="handleClose">
+      <tao-bao v-if="dialogVisible"></tao-bao>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { productLstApi, productDeleteApi, categoryApi, putOnShellApi, offShellApi, productHeadersApi, productExportApi } from '@/api/store'
+import { getToken } from '@/utils/auth'
+import taoBao from './taoBao'
+export default {
+  name: 'ProductList',
+  components: { taoBao },
+  data() {
+    return {
+      props: {
+        children: 'child',
+        label: 'name',
+        value: 'id',
+        emitPath: false
+      },
+      // roterPre: roterPre,
+      headeNum: [],
+      listLoading: true,
+      tableData: {
+        data: [],
+        total: 0
+      },
+      tableFrom: {
+        page: 1,
+        limit: 20,
+        cateId: '',
+        keywords: '',
+        type: '1'
+      },
+      categoryList: [],
+      merCateList: [],
+      objectUrl: process.env.VUE_APP_BASE_API,
+      dialogVisible: false
+    }
+  },
+  mounted() {
+    this.goodHeade()
+    this.getList()
+    this.getCategorySelect()
+  },
+  methods: {
+    seachList() {
+      this.tableFrom.page = 1
+      this.getList()
+    },
+    handleClose() {
+      this.dialogVisible = false
+    },
+    // 复制
+    onCopy(){
+      this.dialogVisible = true
+    },
+    // 导出
+    exports () {
+      window.open(this.objectUrl + 'admin/export/excel/product?type=1&Authori-zation=' + getToken())
+    },
+    // 获取商品表单头数量
+    goodHeade () {
+      productHeadersApi().then(res => {
+        console.log(res)
+        this.headeNum = res
+      }).catch(res => {
+        this.$message.error(res.message);
+      })
+    },
+    // 商户分类；
+    getCategorySelect() {
+      categoryApi({ status: -1, type: 1 }).then(res => {
+        console.log(res)
+        this.merCateList = res
+      }).catch(res => {
+        this.$message.error(res.message)
+      })
+    },
+    // 列表
+    getList() {
+      this.listLoading = true
+      productLstApi(this.tableFrom).then(res => {
+        this.tableData.data = res.list
+        this.tableData.total = res.total
+        this.listLoading = false
+      }).catch(res => {
+        this.listLoading = false
+        this.$message.error(res.message)
+      })
+    },
+    pageChange(page) {
+      this.tableFrom.page = page
+      this.getList()
+    },
+    handleSizeChange(val) {
+      this.tableFrom.limit = val
+      this.getList()
+    },
+    // 删除
+    handleDelete(id, idx) {
+      this.$modalSure().then(() => {
+        productDeleteApi(id).then(() => {
+          this.$message.success('删除成功')
+          this.getList()
+        })
+      })
+    },
+    onchangeIsShow(row) {
+      row.isShow
+        ? putOnShellApi( row.id ).then(() => {
+          this.$message.success('上架成功')
+          this.getList()
+        }) : offShellApi(row.id).then(() => {
+          this.$message.success('下架成功')
+          this.getList()
+        })
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+  .selWidth{
+    width: 350px !important;
+  }
+  .seachTiele{
+    line-height: 30px;
+  }
+</style>

admin/src/views/store/sort/index.vue

@@ -0,0 +1,23 @@
+<template>
+  <div class="components-container">
+    <category-list :biztype="constants.categoryType[0]" />
+  </div>
+</template>
+
+<script>
+  import categoryList from '@/components/Category/list'
+  import * as constants from '@/utils/constants.js'
+  export default {
+    // name: "list",
+    components: { categoryList },
+    data() {
+      return {
+        constants
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>

admin/src/views/store/storeAttr/index.vue

@@ -0,0 +1,188 @@
+<template>
+  <div class="divBox">
+    <el-card class="box-card">
+      <div slot="header" class="clearfix">
+        <div class="container">
+          <el-form inline size="small">
+            <el-form-item label="规格搜索：">
+              <el-input v-model="tableFrom.keywords" placeholder="请输入商品规格" class="selWidth">
+                <el-button slot="append" icon="el-icon-search" @click="seachList" />
+              </el-input>
+            </el-form-item>
+          </el-form>
+        </div>
+        <div class="acea-row">
+          <el-button size="small" type="primary" @click="add">添加商品规格</el-button>
+          <el-button size="small" @click="handleDeleteAll">批量删除</el-button>
+        </div>
+      </div>
+      <el-table
+        v-loading="listLoading"
+        :data="tableData.data"
+        style="width: 100%"
+        size="mini"
+        highlight-current-row
+        @selection-change="handleSelectionChange"
+      >
+        <el-table-column
+          type="selection"
+          width="55"
+        />
+        <el-table-column
+          prop="id"
+          label="ID"
+          min-width="60"
+        />
+        <el-table-column
+          prop="ruleName"
+          label="规格名称"
+          min-width="150"
+        />
+        <el-table-column
+          label="商品规格"
+          min-width="150"
+        >
+          <template slot-scope="scope">
+            <span v-for="(item, index) in scope.row.ruleValue" :key="index" class="mr10" v-text="item.value" />
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="商品属性"
+          min-width="300"
+        >
+          <template slot-scope="scope">
+            <div v-for="(item, index) in scope.row.ruleValue" :key="index" v-text="item.detail.join(',')" />
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" min-width="120" align="center">
+          <template slot-scope="scope">
+            <el-button type="text" size="small" @click="onEdit(scope.row)" class="mr10">编辑</el-button>
+            <el-button type="text" size="small" @click="handleDelete(scope.row.id, scope.$index)">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div class="block">
+        <el-pagination
+          :page-sizes="[20, 40, 60, 80]"
+          :page-size="tableFrom.limit"
+          :current-page="tableFrom.page"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="tableData.total"
+          @size-change="handleSizeChange"
+          @current-change="pageChange"
+        />
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import { templateListApi, attrDeleteApi } from '@/api/store'
+export default {
+  name: 'StoreAttr',
+  data() {
+    return {
+      formDynamic: {
+        ruleName: '',
+        ruleValue: []
+      },
+      tableFrom: {
+        page: 1,
+        limit: 20,
+        keywords: ''
+      },
+      tableData: {
+        data: [],
+        loading: false,
+        total: 0
+      },
+      listLoading: true,
+      selectionList: []
+    }
+  },
+  mounted() {
+    this.getList()
+  },
+  methods: {
+    seachList() {
+      this.tableFrom.page = 1
+      this.getList()
+    },
+    handleSelectionChange(val) {
+      this.selectionList = val
+      const data = []
+      this.selectionList.map((item) => {
+        data.push(item.id)
+      })
+      this.ids = data.join(',')
+    },
+    add() {
+      const _this = this
+      this.$modalAttr(Object.assign({}, this.formDynamic), function() {
+        _this.getList()
+      })
+    },
+    // 列表
+    getList() {
+      this.listLoading = true
+      templateListApi(this.tableFrom).then(res => {
+        const list = res.list
+        this.tableData.data = list
+        this.tableData.total = res.total
+        for (var i = 0; i < list.length; i++) {
+          list[i].ruleValue = JSON.parse(list[i].ruleValue)
+        }
+        this.listLoading = false
+      }).catch(() => {
+        this.listLoading = false
+      })
+    },
+    pageChange(page) {
+      this.tableFrom.page = page
+      this.getList()
+    },
+    handleSizeChange(val) {
+      this.tableFrom.limit = val
+      this.getList()
+    },
+    // 删除
+    handleDelete(id, idx) {
+      this.$modalSure().then(() => {
+        attrDeleteApi( id ).then(() => {
+          this.$message.success('删除成功')
+          this.tableData.data.splice(idx, 1)
+        })
+      }).catch(() => {
+      })
+    },
+    handleDeleteAll(){
+      if(!this.selectionList.length) return this.$message.warning('请选择商品规格')
+      this.$modalSure().then(() => {
+        attrDeleteApi( this.ids ).then(() => {
+          this.$message.success('删除成功')
+          this.getList()
+        })
+      }).catch(() => {
+      })
+    },
+    onEdit(val) {
+      const _this = this
+      this.$modalAttr(JSON.parse(JSON.stringify(val)), function() {
+        _this.getList()
+      })
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+  .selWidth{
+    width: 350px !important;
+  }
+  .seachTiele{
+    line-height: 35px;
+  }
+  .fr{
+    float: right;
+  }
+</style>

admin/src/views/store/storeComment/creatComment.vue

@@ -0,0 +1,240 @@
+<template>
+  <el-form :model="formValidate" :rules="rules" ref="formValidate" label-width="100px" class="demo-formValidate"  v-loading="loading">
+    <el-form-item label="商品：" prop="productId">
+      <div class="upLoadPicBox" @click="changeGood">
+        <div v-if="formValidate.productId" class="pictrue"><img :src="image"></div>
+        <div v-else class="upLoad">
+          <i class="el-icon-camera cameraIconfont"/>
+        </div>
+      </div>
+    </el-form-item>
+    <el-form-item label="用户名称：" prop="nickname">
+      <el-input type="text" v-model="formValidate.nickname "></el-input>
+    </el-form-item>
+    <el-form-item label="评价文字：" prop="comment">
+      <el-input type="textarea" v-model="formValidate.comment "></el-input>
+    </el-form-item>
+    <el-form-item label="商品分数：" prop="productScore" class="productScore">
+      <el-rate v-model="formValidate.productScore"></el-rate>
+      <!--<el-input-number type="textarea" v-model="formValidate.productScore "></el-input-number>-->
+    </el-form-item>
+    <el-form-item label="服务分数：" prop="serviceScore" class="productScore">
+      <el-rate v-model="formValidate.serviceScore"></el-rate>
+      <!--<el-input-number type="textarea" v-model="formValidate.serviceScore "></el-input-number>-->
+    </el-form-item>
+    <el-form-item label="用户头像：" prop="avatar">
+      <div class="upLoadPicBox" @click="modalPicTap('1')">
+        <div v-if="formValidate.avatar" class="pictrue"><img :src="formValidate.avatar"></div>
+        <div v-else class="upLoad">
+          <i class="el-icon-camera cameraIconfont"/>
+        </div>
+      </div>
+    </el-form-item>
+    <el-form-item label="评价图片：">
+      <div class="acea-row">
+        <div
+          v-for="(item,index) in pics"
+          :key="index"
+          class="pictrue"
+          draggable="false"
+          @dragstart="handleDragStart($event, item)"
+          @dragover.prevent="handleDragOver($event, item)"
+          @dragenter="handleDragEnter($event, item)"
+          @dragend="handleDragEnd($event, item)"
+        >
+          <img :src="item">
+          <i class="el-icon-error btndel" @click="handleRemove(index)" />
+          <!--<Button shape="circle" icon="md-close" class="btndel" @click.native="handleRemove(index)" />-->
+        </div>
+        <div class="upLoadPicBox" @click="modalPicTap('2')">
+          <div class="upLoad">
+            <i class="el-icon-camera cameraIconfont" />
+          </div>
+        </div>
+      </div>
+    </el-form-item>
+    <el-form-item>
+      <el-button size="mini" type="primary" @click="submitForm('formValidate')">立即创建</el-button>
+      <el-button size="mini" @click="resetForm('formValidate')">取消</el-button>
+    </el-form-item>
+  </el-form>
+</template>
+
+<script>
+  import { replyCreatApi, replyEditApi, replyInfoApi } from '@/api/store'
+  const defaultObj= {
+    avatar: '',
+    comment: '',
+    nickname: '',
+    pics: '',
+    productId: '',
+    productScore: null,
+    serviceScore: null
+  }
+  export default {
+    name: "creatComment",
+    props:{
+      num: {
+        type: Number,
+        required: 0
+      },
+    },
+    data() {
+      var checkProductScore = (rule, value, callback) => {
+        if (!value) {
+          return callback(new Error('商品分数不能为空'));
+        }else{
+          callback();
+        }
+      };
+      var checkServiceScore = (rule, value, callback) => {
+        if (!value) {
+          return callback(new Error('服务分数不能为空'));
+        }else{
+          callback();
+        }
+      };
+      return {
+        loading: false,
+        pics: [],
+        image: '',
+        formValidate: Object.assign({}, defaultObj),
+        rules: {
+          avatar: [
+            {required: true, message: '请选择用户头像', trigger: 'change'},
+          ],
+          productId: [
+            {required: true, message: '请选择商品', trigger: 'change'},
+          ],
+          comment: [
+            {required: true, message: '请填写评价内容', trigger: 'blur'},
+          ],
+          nickname: [
+            {required: true, message: '请填写用户名称', trigger: 'blur'},
+          ],
+          pics: [
+            {required: true, message: '请选择评价图片', trigger: 'change'},
+          ],
+          productScore: [
+            {required: true, validator: checkProductScore, trigger: 'blur'},
+          ],
+          serviceScore: [
+            {required: true, validator: checkServiceScore,  trigger: 'change'},
+          ],
+        }
+      }
+    },
+    watch: {
+      num: {
+        handler: function(val) {
+          this.resetForm('formValidate')
+        },
+        deep: true
+      }
+    },
+    methods: {
+      changeGood(){
+        const _this = this
+        this.$modalGoodList(function(row) {
+          _this.image = row.image
+          _this.formValidate.productId = row.id
+        })
+      },
+      // 点击商品图
+      modalPicTap (tit) {
+        const _this = this
+        _this.$modalUpload(function(img) {
+          console.log(img)
+          tit==='1' ? _this.formValidate.avatar = img[0].sattDir : img.map((item) => {
+            _this.pics.push( item.sattDir)
+          })
+        },tit, 'store')
+      },
+      handleRemove (i) {
+        this.pics.splice(i, 1)
+      },
+      submitForm(formName) {
+        this.formValidate.pics = JSON.stringify(this.pics)
+        this.$refs[formName].validate((valid) => {
+          if (valid) {
+            replyCreatApi(this.formValidate).then(() => {
+              this.$message.success("新增成功")
+              this.$msgbox.close()
+              setTimeout(() => {
+                // this.clear();
+                this.$emit('getList');
+              }, 600);
+            })
+          } else {
+            console.log('error submit!!');
+            return false;
+          }
+        });
+      },
+      resetForm(formName) {
+        this.$refs[formName].resetFields()
+        this.$msgbox.close()
+        this.pics=[]
+        this.formValidate.pics=''
+      },
+      info(){
+        this.loading = true
+        replyInfoApi(this.formValidate).then(() => {
+          this.formValidate = res
+          this.loading = false
+        }).catch(() => {
+          this.loading = false
+        })
+      },
+      // 移动
+      handleDragStart (e, item) {
+        this.dragging = item;
+      },
+      handleDragEnd (e, item) {
+        this.dragging = null
+      },
+      handleDragOver (e) {
+        e.dataTransfer.dropEffect = 'move'
+      },
+      handleDragEnter (e, item) {
+        e.dataTransfer.effectAllowed = 'move'
+        if (item === this.dragging) {
+          return
+        }
+        const newItems = [...this.pics]
+        const src = newItems.indexOf(this.dragging)
+        const dst = newItems.indexOf(item)
+        newItems.splice(dst, 0, ...newItems.splice(src, 1))
+        this.pics = newItems;
+      }
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  .productScore{
+    /deep/.el-rate{
+      line-height: 2.4;
+    }
+  }
+  .pictrue{
+    width: 60px;
+    height: 60px;
+    border: 1px dotted rgba(0,0,0,0.1);
+    margin-right: 10px;
+    position: relative;
+    cursor: pointer;
+    img{
+      width: 100%;
+      height: 100%;
+    }
+  }
+  .btndel{
+    position: absolute;
+    z-index: 1;
+    width :20px !important;
+    height: 20px !important;
+    left: 46px;
+    top: -4px;
+  }
+</style>

admin/src/views/store/storeComment/index.vue

@@ -0,0 +1,318 @@
+<template>
+  <div class="divBox">
+    <el-card class="box-card">
+      <div slot="header" class="clearfix">
+        <div class="container">
+          <el-form :inline="true">
+            <el-form-item label="时间选择：" class="width100">
+              <el-radio-group v-model="tableFrom.dateLimit" type="button"  @change="selectChange(tableFrom.dateLimit)" class="mr20"  size="small">
+                <el-radio-button :label=item.val v-for="(item,i) in fromList.fromTxt" :key="i">{{item.text}}</el-radio-button>
+              </el-radio-group>
+              <el-date-picker @change="onchangeTime" v-model="timeVal" value-format="yyyy-MM-dd"  format="yyyy-MM-dd"  size="small" type="daterange" placement="bottom-end" placeholder="自定义时间" style="width: 220px;"></el-date-picker>
+            </el-form-item>
+            <el-form-item label="评价状态：" class="mr10">
+              <el-select v-model="tableFrom.isReply" placeholder="请选择评价状态" @change="seachList" size="small" class="selWidth" clearable>
+                <el-option label="已回复" value="1"></el-option>
+                <el-option label="未回复" value="0"></el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item label="商品搜索：" class="mr10">
+              <el-input v-model="tableFrom.productId" placeholder="请输入商品名称，关键字，产品编号" class="selWidth" size="small">
+                <el-button slot="append" icon="el-icon-search"  @click="seachList" size="small"/>
+              </el-input>
+            </el-form-item>
+            <el-form-item label="用户名称：">
+              <el-input v-model="tableFrom.nickname" placeholder="请输入用户名称" class="selWidth" size="small">
+                <el-button slot="append" icon="el-icon-search"  @click="seachList" size="small"/>
+              </el-input>
+            </el-form-item>
+          </el-form>
+        </div>
+        <el-button size="small" type="primary" @click="add">添加虚拟评论</el-button>
+      </div>
+      <el-table
+        v-loading="listLoading"
+        :data="tableData.data"
+        style="width: 100%"
+        size="mini"
+        class="table"
+      >
+        <el-table-column
+          prop="id"
+          label="ID"
+          width="50"
+        />
+        <el-table-column label="商品信息" min-width="300">
+          <template slot-scope="scope">
+            <div class="demo-image__preview acea-row row-middle" v-if="scope.row.storeProduct">
+              <el-image
+                style="width:30px;height: 30px;"
+                :src="scope.row.storeProduct.image"
+                :preview-src-list="[scope.row.storeProduct.image]"
+                class="mr10"
+              />
+              <div class="info">{{scope.row.storeProduct.storeName}}</div>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="nickname"
+          label="用户名称"
+          min-width="200"
+        />
+        <el-table-column
+          prop="serviceScore"
+          label="评分"
+          min-width="90"
+        />
+        <el-table-column
+          label="评价内容"
+          min-width="210"
+        >
+          <template slot-scope="scope">
+            <div class="mb5 content_font">{{scope.row.comment}}</div>
+            <div class="demo-image__preview">
+              <el-image
+                :src="item"
+                class='mr5'
+                :preview-src-list="[item]"
+                v-for="(item,index) in scope.row.pics" :key="index"
+              />
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="merchantReplyContent"
+          label="回复内容"
+          min-width="250"
+        />
+        <el-table-column
+          label="评价时间"
+          min-width="120"
+        >
+          <template slot-scope="scope">
+            <span> {{scope.row.createTime}}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" min-width="120" fixed="right" align="center">
+          <template slot-scope="scope">
+            <el-button type="text" size="small" @click="reply(scope.row.id)" class="mr10">回复</el-button>
+            <el-button type="text" size="small" @click="handleDelete(scope.row.id, scope.$index)">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div class="block">
+        <el-pagination
+          :page-sizes="[20, 40, 60, 80]"
+          :page-size="tableFrom.limit"
+          :current-page="tableFrom.page"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="tableData.total"
+          @size-change="handleSizeChange"
+          @current-change="pageChange"
+        />
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import creatComment from './creatComment.vue'
+import { categoryApi, replyListApi, replyDeleteApi, replyCommentApi } from '@/api/store'
+import { formatDates } from '@/utils/index';
+export default {
+  name: 'StoreComment',
+  filters: {
+    formatDate (time) {
+      if (time !== 0) {
+        const date = new Date(time * 1000);
+        return formatDates(date, 'yyyy-MM-dd hh:mm');
+      }
+    }
+  },
+  components: { creatComment },
+  data() {
+    return {
+      merCateList: [],
+      props: {
+        children: 'child',
+        label: 'name',
+        value: 'id',
+        emitPath: false
+      },
+      fromList: {
+        title: '选择时间',
+        custom: true,
+        fromTxt: [
+          { text: '全部', val: '' },
+          { text: '今天', val: 'today' },
+          { text: '昨天', val: 'yesterday' },
+          { text: '最近7天', val: 'lately7' },
+          { text: '最近30天', val: 'lately30' },
+          { text: '本月', val: 'month' },
+          { text: '本年', val: 'year' }
+        ]
+      },
+      tableData: {
+        data: [],
+        total: 0
+      },
+      listLoading: true,
+      tableFrom: {
+        page: 1,
+        limit: 20,
+        isReply: '',
+        dateLimit: '',
+        nickname: '',
+        productId:'',
+        isDel: false
+      },
+      timeVal: []
+    }
+  },
+  mounted() {
+    // this.getLstFilterApi()
+    this.getList()
+    this.getCategorySelect()
+  },
+  methods:{
+    seachList() {
+      this.tableFrom.page = 1
+      this.getList()
+    },
+    // 回复
+    reply(id) {
+      this.$prompt('回复内容', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        inputErrorMessage: '请输入回复内容',
+        inputType: 'textarea',
+        inputPlaceholder: '请输入回复内容',
+        inputValidator: (value) => {
+          if (!value) {
+            return '输入不能为空';
+          }
+        }
+      }).then(({value}) => {
+        replyCommentApi({
+          ids: id,
+          merchantReplyContent: value
+        }).then(res => {
+          this.$message({
+            type: 'success',
+            message: '回复成功'
+          });
+          this.getList();
+        })
+      }).catch(() => {
+          this.$message({
+            type: 'info',
+            message: '取消输入'
+          })
+        })
+    },
+    // 选择时间
+    selectChange (tab) {
+      this.timeVal = [];
+      this.tableFrom.page = 1
+      this.getList();
+    },
+    // 商户分类；
+    getCategorySelect() {
+      categoryApi({ status: -1, type: 1 }).then(res => {
+        this.merCateList = res
+      }).catch(res => {
+        this.$message.error(res.message)
+      })
+    },
+    add() {
+      const timer = new Date().getTime()
+      const _this = this
+      this.modalFrom(timer,null,function() {
+        _this.getList()
+      })
+    },
+    modalFrom(timer, callback){
+      const h = this.$createElement
+      this.$msgbox({
+        title: '虚拟评论',
+        customClass: 'creatformModel',
+        message: h('div', { class: 'common-form-upload' }, [
+          h('creatComment', {
+            props: {
+              num: timer
+            },
+            on: {
+              getList() {
+                callback()
+              }
+            }
+          })
+        ]),
+        showCancelButton: false,
+        showConfirmButton: false
+      }).then(() => {
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: '已取消'
+        })
+      })
+    },
+    // 具体日期
+    onchangeTime (e) {
+      this.timeVal = e;
+      this.tableFrom.dateLimit = e ? this.timeVal.join(',') : ''
+      this.tableFrom.page = 1
+      this.getList();
+    },
+    // 删除
+    handleDelete(id, idx) {
+      this.$modalSure().then(() => {
+        replyDeleteApi(id).then(() => {
+          this.$message.success('删除成功')
+          this.tableData.data.splice(idx, 1)
+        })
+      })
+    },
+    // 列表
+    getList() {
+      this.listLoading = true
+      replyListApi(this.tableFrom).then(res => {
+        this.tableData.data = res.list
+        this.tableData.total = res.total
+        this.listLoading = false
+      }).catch(() => {
+        this.listLoading = false
+      })
+    },
+    pageChange(page) {
+      this.tableFrom.page = page
+      this.getList()
+    },
+    handleSizeChange(val) {
+      this.tableFrom.limit = val
+      this.getList()
+    },
+  }
+}
+</script>
+
+<style scoped lang="scss">
+  .selWidth{
+    width: 350px !important;
+  }
+  .table{
+    .el-image{
+      width: auto !important;
+      height: 30px !important;
+    }
+    /deep/.el-image__inner, .el-image__placeholder, .el-image__error {
+      width: auto !important;
+    }
+  }
+  .info{
+    width:63%;
+  }
+
+</style>

admin/src/views/store/taoBao.vue

@@ -0,0 +1,593 @@
+<template>
+  <div class="Box">
+    <el-card>
+      <div>生成的商品默认是没有上架的，请手动上架商品！</div>
+    </el-card>
+    <el-form class="formValidate mt20" ref="formValidate" :model="formValidate" :rules="ruleInline" label-width="120px"
+             @submit.native.prevent v-loading="loading">
+      <el-form-item>
+        <el-radio-group v-model="form">
+          <el-radio :label="1">淘宝</el-radio>
+          <el-radio :label="2">京东</el-radio>
+          <el-radio :label="3">苏宁</el-radio>
+          <el-radio :label="4">拼多多</el-radio>
+          <el-radio :label="5">天猫</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-row :gutter="24">
+        <el-col :span="24">
+          <el-form-item label="链接地址：">
+            <el-input v-model="url" placeholder="请输入链接地址" class="selWidth" size="small">
+              <el-button slot="append" icon="el-icon-search" @click="add" size="small"/>
+            </el-input>
+          </el-form-item>
+        </el-col>
+        <el-col v-if="formValidate">
+          <el-col :span="24">
+            <el-form-item label="商品名称：" prop="storeName">
+              <el-input v-model="formValidate.storeName" placeholder="请输入商品名称"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item label="商品简介：">
+              <el-input v-model="formValidate.storeInfo" type="textarea" :rows="3" placeholder="请输入商品简介"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item label="商品分类：" prop="cateIds">
+              <el-cascader v-model="formValidate.cateIds" :options="merCateList" :props="props2" clearable
+                           class="selWidth" :show-all-levels="false"/>
+            </el-form-item>
+          </el-col>
+          <el-col v-bind="grid">
+            <el-form-item label="商品关键字：" prop="keyword">
+              <el-input v-model="formValidate.keyword" placeholder="请输入商品关键字"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col v-bind="grid">
+            <el-form-item label="单位：" prop="unitName">
+              <el-input v-model="formValidate.unitName" placeholder="请输入单位"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col v-bind="grid">
+            <el-form-item label="积分：">
+              <el-input-number v-model="formValidate.giveIntegral" placeholder="请输入排序" />
+            </el-form-item>
+          </el-col>
+          <el-col v-bind="grid">
+            <el-form-item label="虚拟销量：">
+              <el-input-number v-model="formValidate.ficti" placeholder="请输入排序" />
+            </el-form-item>
+          </el-col>
+          <el-col v-bind="grid">
+            <el-form-item label="运费模板：" prop="tempId">
+              <el-select v-model="formValidate.tempId" placeholder="请选择" class="selWidthd mr20">
+                <el-option
+                  v-for="item in shippingList"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.id"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item label="商品封面图：" prop="image">
+              <div class="upLoadPicBox" @click="modalPicTap('1')">
+                <div v-if="formValidate.image" class="pictrue"><img :src="formValidate.image"></div>
+                <div v-else class="upLoad">
+                  <i class="el-icon-camera cameraIconfont"/>
+                </div>
+              </div>
+            </el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item label="商品轮播图：">
+              <div class="acea-row">
+                <div
+                  v-for="(item,index) in formValidate.sliderImages"
+                  :key="index"
+                  class="lunBox mr5"
+                  draggable="false"
+                  @dragstart="handleDragStart($event, item)"
+                  @dragover.prevent="handleDragOver($event, item)"
+                  @dragenter="handleDragEnter($event, item)"
+                  @dragend="handleDragEnd($event, item)"
+                >
+                  <div class="pictrue"><img :src="item"></div>
+                  <el-button-group>
+                    <el-button size="mini" @click.native="checked(item,index)">主图</el-button>
+                    <el-button size="mini" @click.native="handleRemove(index)">移除</el-button>
+                  </el-button-group>
+                </div>
+              </div>
+            </el-form-item>
+          </el-col>
+          <el-col v-if="formValidate.specType" :span="24" class="noForm">
+            <el-form-item label="批量设置：" class="labeltop">
+              <el-table :data="oneFormBatch" border class="tabNumWidth" size="mini">
+                <el-table-column align="center" label="图片" min-width="80">
+                  <template slot-scope="scope">
+                    <div class="upLoadPicBox" @click="modalPicTap('1','pi')">
+                      <div v-if="scope.row.image" class="pictrue pictrueTab"><img :src="scope.row.image"></div>
+                      <div v-else class="upLoad pictrueTab">
+                        <i class="el-icon-camera cameraIconfont"/>
+                      </div>
+                    </div>
+                  </template>
+                </el-table-column>
+                <el-table-column v-for="(item,iii) in attrValue" :key="iii" :label="formThead[iii].title"
+                                 align="center" min-width="120">
+                  <template slot-scope="scope">
+                    <el-input v-model="scope.row[iii]" :type="formThead[iii].title==='商品编号'?'text':'number'" :min="0"
+                              class="priceBox"/>
+                  </template>
+                </el-table-column>
+                <el-table-column align="center" label="操作" min-width="80">
+                  <template>
+                    <el-button type="text" class="submission" @click="batchAdd">批量添加</el-button>
+                  </template>
+                </el-table-column>
+              </el-table>
+            </el-form-item>
+          </el-col>
+          <el-col :span="24" v-if="formValidate.specType">
+            <el-form-item label="商品规格：" props="spec_type" label-for="spec_type">
+              <el-table :data="ManyAttrValue" border class="tabNumWidth" size="mini">
+                <template v-if="manyTabDate">
+                  <el-table-column v-for="(item,iii) in manyTabDate" :key="iii" align="center"
+                                   :label="manyTabTit[iii].title" min-width="80">
+                    <template slot-scope="scope">
+                      <span class="priceBox" v-text="scope.row[iii]"/>
+                    </template>
+                  </el-table-column>
+                </template>
+                <el-table-column align="center" label="图片" min-width="80">
+                  <template slot-scope="scope">
+                    <div class="upLoadPicBox" @click="modalPicTap('1','duo',scope.$index)">
+                      <div v-if="scope.row.image" class="pictrue pictrueTab"><img :src="scope.row.image"></div>
+                      <div v-else class="upLoad pictrueTab">
+                        <i class="el-icon-camera cameraIconfont"/>
+                      </div>
+                    </div>
+                  </template>
+                </el-table-column>
+                <el-table-column v-for="(item,iii) in attrValue" :key="iii" :label="formThead[iii].title"
+                                 align="center" min-width="120">
+                  <template slot-scope="scope">
+                    <el-input v-model="scope.row[iii]" :type="formThead[iii].title==='商品编号'?'text':'number'"
+                              class="priceBox"/>
+                  </template>
+                </el-table-column>
+                <el-table-column align="center" label="操作" min-width="80">
+                  <template slot-scope="scope">
+                    <el-button type="text" class="submission" @click="delAttrTable(scope.$index)">删除</el-button>
+                  </template>
+                </el-table-column>
+              </el-table>
+            </el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item label="商品详情：">
+              <ueditor-from v-model="formValidate.content" :content="formValidate.content"/>
+            </el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item>
+              <el-button type="primary" :loading="modal_loading" class="submission"
+                         @click="handleSubmit('formValidate')">提交
+              </el-button>
+            </el-form-item>
+          </el-col>
+        </el-col>
+      </el-row>
+    </el-form>
+  </div>
+</template>
+
+<script>
+  import {crawlFromApi, treeListApi, crawlSaveApi, categoryApi, importProductApi, productCreateApi} from '@/api/store';
+  import { shippingTemplatesList } from '@/api/logistics'
+  const defaultObj = [{
+    image: '',
+    price: null,
+    cost: null,
+    ot_price: null,
+    stock: null,
+    barCode: '',
+    weight: null,
+    volume: null
+  }]
+  const objTitle = {
+    price: {
+      title: '售价'
+    },
+    cost: {
+      title: '成本价'
+    },
+    ot_price: {
+      title: '原价'
+    },
+    stock: {
+      title: '库存'
+    },
+    barCode: {
+      title: '商品编号'
+    },
+    weight: {
+      title: '重量（KG）'
+    },
+    volume: {
+      title: '体积(m³)'
+    }
+  }
+  export default {
+    name: 'taoBao',
+    data() {
+      return {
+        loading: false,
+        formThead: Object.assign({}, objTitle),
+        manyTabTit: {},
+        manyTabDate: {},
+        formValidate: null,
+        form: 1,
+        props2: {
+          children: 'child',
+          label: 'name',
+          value: 'id',
+          multiple: true,
+          emitPath: false
+        },
+        modal_loading: false,
+        ManyAttrValue: [Object.assign({}, defaultObj[0])], // 多规格
+        imgList: [],
+        tempData: {
+          page: 1,
+          limit: 9999
+        },
+        shippingList:[],
+        merCateList:[],
+        images: '',
+        url: '',
+        modalPic: false,
+        isChoice: '',
+        ruleInline: {
+          storeName: [
+            { required: true, message: '请输入商品名称', trigger: 'blur' }
+          ],
+          cateIds: [
+            { required: true, message: '请选择商品分类', trigger: 'change', type: 'array', min: '1' }
+          ],
+          unitName: [
+            { required: true, message: '请输入单位', trigger: 'blur' }
+          ],
+          tempId: [
+            {required: true, message: '请选择运费模板', trigger: 'change', type: 'number'}
+          ],
+          keyword: [
+            { required: true, message: '请输入商品关键字', trigger: 'blur' }
+          ]
+        },
+        grid: {
+          xl: 8,
+          lg: 8,
+          md: 12,
+          sm: 24,
+          xs: 24
+        }
+      }
+    },
+    created() {
+      this.goodsCategory();
+    },
+    computed: {
+      attrValue() {
+        const obj = Object.assign({}, defaultObj[0])
+        delete obj.image
+        return obj
+      },
+      oneFormBatch() {
+        const obj = [Object.assign({}, defaultObj[0])]
+        delete obj[0].barCode
+        return obj
+      }
+    },
+    watch: {
+      'formValidate.attr': {
+        handler: function(val) {
+          this.watCh(val)
+        },
+        immediate: false,
+        deep: true
+      }
+    },
+    mounted() {
+      this.productGetTemplate();
+    },
+    methods: {
+      // 批量添加
+      batchAdd() {
+        // if (!this.oneFormBatch[0].pic || !this.oneFormBatch[0].price || !this.oneFormBatch[0].cost || !this.oneFormBatch[0].ot_price ||
+        //     !this.oneFormBatch[0].stock || !this.oneFormBatch[0].bar_code) return this.$Message.warning('请填写完整的批量设置内容！');
+        for (const val of this.ManyAttrValue) {
+          this.$set(val, 'image', this.oneFormBatch[0].image)
+          this.$set(val, 'price', this.oneFormBatch[0].price)
+          this.$set(val, 'cost', this.oneFormBatch[0].cost)
+          this.$set(val, 'ot_price', this.oneFormBatch[0].ot_price)
+          this.$set(val, 'stock', this.oneFormBatch[0].stock)
+          this.$set(val, 'barCode', this.oneFormBatch[0].barCode)
+          this.$set(val, 'weight', this.oneFormBatch[0].weight)
+          this.$set(val, 'volume', this.oneFormBatch[0].volume)
+        }
+      },
+      watCh(val) {
+        const tmp = {}
+        const tmpTab = {}
+        this.formValidate.attr.forEach((o, i) => {
+          tmp['value' + i] = { title: o.attrName }
+          tmpTab['value' + i] = ''
+        })
+        this.ManyAttrValue = this.attrFormat(val)
+        this.manyTabTit = tmp
+        this.manyTabDate = tmpTab
+        this.formThead = Object.assign({}, this.formThead, tmp)
+      },
+      attrFormat(arr) {
+        let data = []
+        const res = []
+        return format(arr)
+        function format(arr) {
+          if (arr.length > 1) {
+            arr.forEach((v, i) => {
+              if (i === 0) data = arr[i]['attrValue']
+              const tmp = []
+              data.forEach(function(vv) {
+                arr[i + 1] && arr[i + 1]['attrValue'] && arr[i + 1]['attrValue'].forEach(g => {
+                  const rep2 = (i !== 0 ? '' : arr[i]['attrName'] + '_') + vv + '$&' + arr[i + 1]['attrName'] + '_' + g
+                  tmp.push(rep2)
+                  if (i === (arr.length - 2)) {
+                    const rep4 = {
+                      image: '',
+                      price: 0,
+                      cost: 0,
+                      ot_price: 0,
+                      stock: 0,
+                      barCode: '',
+                      weight: 0,
+                      volume: 0,
+                      brokerage: 0,
+                      brokerage_two: 0
+                    }
+                    rep2.split('$&').forEach((h, k) => {
+                      const rep3 = h.split('_')
+                      if (!rep4['attrValue']) rep4['attrValue'] = {}
+                      rep4['attrValue'][rep3[0]] = rep3.length > 1 ? rep3[1] : ''
+                    })
+                    Object.values(rep4.attrValue).forEach((v, i) => {
+                      rep4['value' + i] = v
+                    })
+                    res.push(rep4)
+                  }
+                })
+              })
+              data = tmp.length ? tmp : []
+            })
+          } else {
+            const dataArr = []
+            arr.forEach((v, k) => {
+              v['attrValue'].forEach((vv, kk) => {
+                dataArr[kk] = v['attrName'] + '_' + vv
+                res[kk] = {
+                  image: '',
+                  price: 0,
+                  cost: 0,
+                  ot_price: 0,
+                  stock: 0,
+                  barCode: '',
+                  weight: 0,
+                  volume: 0,
+                  brokerage: 0,
+                  brokerage_two: 0,
+                  attrValue: { [v['attrName']]: vv }
+                }
+                Object.values(res[kk].attrValue).forEach((v, i) => {
+                  res[kk]['value' + i] = v
+                })
+              })
+            })
+            data.push(dataArr.join('$&'))
+          }
+          return res
+        }
+      },
+      // 获取运费模板；
+      productGetTemplate() {
+        shippingTemplatesList(this.tempData).then(res => {
+          this.shippingList = res.list
+        })
+      },
+      // 删除图片
+      handleRemove(i) {
+        this.formValidate.sliderImages.splice(i, 1);
+      },
+      // 选择主图
+      checked(item, index) {
+        this.formValidate.image = item;
+      },
+      // 商品分类；
+      goodsCategory() {
+        categoryApi({ status: -1, type: 1 }).then(res => {
+          this.merCateList = res
+        })
+      },
+      // 生成表单
+      add() {
+        if (this.url) {
+          // var reg = /(http|ftp|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&:/~\+#]*[\w\-\@?^=%&/~\+#])?/;
+          // if (!reg.test(this.soure_link)) {
+          //   return this.$message.warning('请输入以http开头的地址！');
+          // }
+          this.loading = true;
+          importProductApi({ url: this.url, form: this.form}).then(res => {
+            let info = res
+            this.formValidate = {
+              image: info.image,
+              sliderImages: JSON.parse(info.sliderImage),
+              sliderImage: info.sliderImage,
+              storeName: info.storeName,
+              storeInfo: info.storeInfo,
+              keyword: info.keyword,
+              cateIds: info.cateId ? info.cateId.split(',') : [], // 商品分类id
+              cateId: info.cateId,// 商品分类id传值
+              unitName: info.unitName,
+              sort: 0,
+              isShow: 0,
+              isBenefit: 0,
+              isNew: 0,
+              isGood: 0,
+              isHot: 0,
+              isBest: 0,
+              tempId: info.tempId,
+              attrValue: info.attrValue,
+              attr: info.attr,
+              selectRule: info.selectRule,
+              isSub: false,
+              content: info.content,
+              specType: info.specType,
+              id: info.id,
+              giveIntegral: info.giveIntegral,
+              ficti: info.ficti
+            }
+            for (var i = 0; i < this.formValidate.attr.length; i++) {
+              this.formValidate.attr[i].attrValue = JSON.parse(info.attr[i].attrValues)
+            }
+            this.loading = false;
+          }).catch(() => {
+            this.loading = false;
+          })
+        } else {
+          this.$message.warning('请输入链接地址！');
+        }
+      },
+      // 提交
+      handleSubmit (name) {
+        this.formValidate.attr.length ? this.formValidate.attrValue=JSON.stringify(this.ManyAttrValue):this.formValidate.attrValue=[]
+        this.formValidate.cateId = this.formValidate.cateIds.join(',')
+        this.formValidate.sliderImage = JSON.stringify(this.formValidate.sliderImages)
+        if(!this.formValidate.specType){
+          this.formValidate.attr = []
+          this.formValidate.attrValue = ''
+        }
+        for (var i = 0; i < this.formValidate.attr.length; i++) {
+          this.formValidate.attr[i].attrValues = JSON.stringify(this.formValidate.attr[i].attrValue)
+        }
+        this.$refs[name].validate((valid) => {
+          if (valid) {
+            this.modal_loading = true
+            productCreateApi(this.formValidate).then(async res => {
+              this.$message.success('新增成功');
+              this.$parent.dialogVisible = false
+              this.modal_loading = false
+            }).catch(() => {
+              this.modal_loading = false
+            })
+          } else {
+            if(!this.formValidate.storeName || !this.formValidate.cateId  || !this.formValidate.keyword
+              || !this.formValidate.unitName || !this.formValidate.image){
+              this.$message.warning("请填写完整商品信息！");
+            }
+          }
+        })
+      },
+      // 点击商品图
+      modalPicTap (tit, num, i) {
+        const _this = this
+        this.$modalUpload(function(img) {
+          if(tit==='1'&& !num){
+            _this.formValidate.image = img[0].sattDir
+            _this.OneattrValue[0].image = img[0].sattDir
+          }
+          if(tit==='2'&& !num){
+            img.map((item) => {
+              _this.formValidate.sliderImages.push(item.sattDir)
+            });
+          }
+          if(tit==='1'&& num === 'dan' ){
+            _this.OneattrValue[0].image = img[0].sattDir
+          }
+          if(tit==='1'&& num === 'duo' ){
+            _this.ManyAttrValue[i].image = img[0].sattDir
+          }
+          if(tit==='1'&& num === 'pi' ){
+            _this.oneFormBatch[0].image = img[0].sattDir
+          }
+        },tit, 'store')
+      },
+      handleDragStart(e, item) {
+        this.dragging = item;
+      },
+      handleDragEnd(e, item) {
+        this.dragging = null
+      },
+      // 首先把div变成可以放置的元素，即重写dragenter/dragover
+      handleDragOver(e) {
+        // e.dataTransfer.dropEffect="move";//在dragenter中针对放置目标来设置!
+        e.dataTransfer.dropEffect = 'move'
+      },
+      handleDragEnter(e, item) {
+        // 为需要移动的元素设置dragstart事件
+        e.dataTransfer.effectAllowed = 'move'
+        if (item === this.dragging) {
+          return
+        }
+        const newItems = [...this.formValidate.slider_image]
+        const src = newItems.indexOf(this.dragging)
+        const dst = newItems.indexOf(item)
+        newItems.splice(dst, 0, ...newItems.splice(src, 1))
+        this.formValidate.slider_image = newItems
+      }
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+    .selWidth{
+      width: 100%;
+    }
+    .lunBox{
+      display: flex;
+      flex-direction: column;
+      border: 1px solid #0bb20c;
+    }
+    .pictrueBox{
+      display: inline-block;
+    }
+
+    .pictrue{
+      width:111px;
+      height:111px;
+      border:1px dotted rgba(0,0,0,0.1);
+      display: inline-block;
+      position: relative;
+      cursor: pointer;
+      img{
+        width: 100%;
+        height: 100%;
+      }
+    }
+    .pictrueTab{
+      width:40px !important;
+      height:40px !important;
+    }
+    .upLoad {
+        width: 86px;
+        height: 86px;
+        border: 1px dotted rgba(0, 0, 0, 0.1);
+        border-radius: 4px;
+        background: rgba(0, 0, 0, 0.02);
+        cursor: pointer;
+    }
+    .ft{
+      color: red;
+    }
+</style>