我们发布啦

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>