会员评价

manager/src/views/goods/goods-review/index.vue

@@ -2,9 +2,10 @@
   <div>
     <Card>
       <Row>
-        <Form ref="searchForm" :model="searchForm" @keydown.enter.native="handleSearch" @submit.native.prevent inline :label-width="70" class="search-form">
+        <Form ref="searchForm" :model="searchForm" @keydown.enter.native="handleSearch" @submit.native.prevent inline
+          :label-width="70" class="search-form">
           <Form-item label="会员名称" prop="memberName">
-            <Input type="text" v-model="searchForm.memberName" placeholder="请输入会员名称" clearable style="width: 200px"/>
+            <Input type="text" v-model="searchForm.memberName" placeholder="请输入会员名称" clearable style="width: 200px" />
           </Form-item>
           <Button @click="handleSearch" type="primary" class="search-btn" icon="ios-search">搜索</Button>
         </Form>
@@ -13,7 +14,7 @@
         <!-- 页面展示 -->
         <template slot="shopDisableSlot" slot-scope="scope">
           <i-switch size="large" true-value="OPEN" false-value="CLOSE" v-model="scope.row.status"
-                    @on-change="changeSwitch(scope.row)">
+            @on-change="changeSwitch(scope.row)">
             <span slot="open">展示</span>
             <span slot="close">隐藏</span>
           </i-switch>
@@ -26,8 +27,8 @@
       </Table>
       <Row type="flex" justify="end" class="mt_10">
         <Page :current="searchForm.pageNumber" :total="total" :page-size="searchForm.pageSize" @on-change="changePage"
-              @on-page-size-change="changePageSize" :page-size-opts="[10, 20, 50]"
-              size="small" show-total show-elevator show-sizer></Page>
+          @on-page-size-change="changePageSize" :page-size-opts="[10, 20, 50]" size="small" show-total show-elevator
+          show-sizer></Page>
       </Row>
     </Card>
     <!-- 评价详情 -->
@@ -41,7 +42,7 @@
           <div class="show">
             <label>页面展示：</label>
             <i-switch size="large" true-value="OPEN" false-value="CLOSE" v-model="infoData.status"
-                      @on-change="changeSwitchView" style="margin-top: 3px">
+              @on-change="changeSwitchView" style="margin-top: 3px">
               <span slot="open">展示</span>
               <span slot="close">隐藏</span>
             </i-switch>
@@ -58,52 +59,85 @@
 
               <ListItem>
                 <ListItemMeta :avatar="infoData.memberProfile" :title="infoData.memberName"
-                  :description="infoData.content"/>
+                  :description="infoData.content" />
               </ListItem>
               <div class="score-content">
-                <span>物流评分：{{infoData.deliveryScore}}</span>
-                <span>服务评分：{{infoData.serviceScore}}</span>
-                <span>描述评分：{{infoData.descriptionScore}}</span>
+                <span>物流评分：{{ infoData.deliveryScore }}</span>
+                <span>服务评分：{{ infoData.serviceScore }}</span>
+                <span>描述评分：{{ infoData.descriptionScore }}</span>
               </div>
               <div class="" v-if="infoData.haveImage">
                 评价图
                 <div style="margin-left: 40px">
                   <template v-if="infoData.images && infoData.images.length">
                     <img style="width: 100px;height: 110px;margin-left: 2px"
-                       v-for="(img,index) in infoData.images.split(',')"  :src="img"
-                       alt="" :key="index"/>
+                      v-for="(img, index) in infoData.images.split(',')" :src="img" alt="" :key="index" />
                   </template>
 
                 </div>
               </div>
             </List>
           </div>
-          <div >
+          <div class="mt_10">
             <Form ref="form" :model="replyForm" :label-width="100">
               <FormItem prop="reply" label="平台回复">
-                <Input :disabled="infoData.reply" show-word-limit v-model="replyForm.reply" type="textarea"/>
+                <Input  :disabled="infoData.replyStatus" show-word-limit v-model="replyForm.reply" type="textarea" />
               </FormItem>
               <FormItem prop="reply" label="回复图片">
+                <vuedraggable :animation="200" :list="replyForm.replyImage">
+                  <div v-for="(item, __index) in replyForm.replyImage" :key="__index" class="demo-upload-list">
+                    <template>
+                      <img :src="item" />
+                      <div class="demo-upload-list-cover">
+                        <div>
+                          <Icon size="30" type="md-search" @click.native="handleViewGoodsPicture(item)"></Icon>
+                          <Icon size="30" type="md-trash" @click.native="handleRemoveGoodsPicture(item)"></Icon>
+                        </div>
+                      </div>
+                    </template>
+                  </div>
+                </vuedraggable>
+                <Button v-if="!infoData.replyStatus" @click="openPicModel">上传图片</Button>
               </FormItem>
             </Form>
           </div>
-          
+
         </div>
       </div>
+      <div slot="footer">
+        <Button @click="infoFlag = false">取消</Button>
+        <Button type="error" :loading="modalLoading" @click="reply">提交</Button>
+      </div>
+    </Modal>
+    <Modal v-model="picModelFlag" width="1200px" @on-ok="confirmUrls">
+      <ossManage ref="ossManage" :isComponent="true" :initialize="picModelFlag" @callback="callbackSelected"
+        @selected="(list) => { selectedImage = list }" />
+    </Modal>
+    <Modal v-model="goodsPictureVisible" title="View Image">
+      <img v-if="goodsPictureVisible" :src="previewGoodsPicture" style="width: 100%" />
     </Modal>
   </div>
 </template>
 
 <script>
 import * as API_Member from "@/api/member";
-
+import vuedraggable from "vuedraggable";
+import ossManage from "@/views/sys/oss-manage/ossManage";
+import { replyMemberComment } from '@/api/shops'
 export default {
   name: "goods-review", // 会员评价
+  components: {
+    vuedraggable,
+    ossManage
+  },
   data() {
     return {
-      replyForm:{
-        reply:'',
-        replyImage:[]
+      modalLoading:false,
+      picModelFlag: false,
+      previewGoodsPicture: "",
+      replyForm: {
+        reply: '',
+        replyImage: []
       },
       infoData: {}, // 商品信息
       infoFlag: false, // 评价展示
@@ -118,6 +152,8 @@ export default {
         startDate: "", // 起始时间
         endDate: "", // 终止时间
       },
+      goodsPictureVisible: false,
+      selectedImage: [],
       columns: [
         // 表头
         {
@@ -141,11 +177,11 @@ export default {
           width: 90,
           render: (h, params) => {
             if (params.row.grade == "GOOD") {
-              return h("Tag", {props: {color: "green",},}, "好评");
+              return h("Tag", { props: { color: "green", }, }, "好评");
             } else if (params.row.grade == "MODERATE") {
-              return h("Tag", {props: {color: "orange",},}, "中评");
+              return h("Tag", { props: { color: "orange", }, }, "中评");
             } else {
-              return h("Tag", {props: {color: "red",},}, "差评");
+              return h("Tag", { props: { color: "red", }, }, "差评");
             }
           }
         },
@@ -153,21 +189,21 @@ export default {
           title: "物流评分",
           key: "deliveryScore",
           render: (h, params) => {
-            return h('div',params.row.deliveryScore || 5 + '星')
+            return h('div', params.row.deliveryScore || 5 + '星')
           },
         },
         {
           title: "服务评分",
           key: "deliveryScore",
           render: (h, params) => {
-            return h('div',params.row.serviceScore || 5 + '星')
+            return h('div', params.row.serviceScore || 5 + '星')
           },
         },
         {
           title: "描述评分",
           key: "deliveryScore",
           render: (h, params) => {
-            return h('div',params.row.descriptionScore || 5 + '星')
+            return h('div', params.row.descriptionScore || 5 + '星')
           },
         },
         {
@@ -245,10 +281,57 @@ export default {
     };
   },
   methods: {
+    // 回复
+    async reply(){
+      try {
+        if(!this.replyForm.reply){
+          this.$Message.warning('请输入回复内容')
+          return
+        }
+        this.modalLoading = true
+        const params = JSON.parse(JSON.stringify(this.replyForm))
+        params.replyImage = params.replyImage.join(",")
+        params.id = this.infoData.id
+        const res = await replyMemberComment(this.infoData.id,params)
+        if(res.success){
+          this.modalLoading = false
+          this.$Message.success('回复成功')
+          this.infoFlag = false
+          this.init()
+        }
+      } catch (error) {
+        this.modalLoading = false
+      }
+    },
+    // 查看商品大图
+    handleViewGoodsPicture(url) {
+      this.previewGoodsPicture = url;
+      this.goodsPictureVisible = true;
+    },
+    // 移除商品图片
+    handleRemoveGoodsPicture(file) {
+      this.replyForm.replyImage =
+        this.replyForm.replyImage.filter((i) => i !== file);
+    },
+    // 图片选择后回调
+    callbackSelected(val) {
+
+      this.picModelFlag = false;
+
+      this.replyForm.replyImage.push(val.url);
+
+    },
+    openPicModel() {
+      this.$refs.ossManage.selectImage = true;
+      this.picModelFlag = true
+    },
+    confirmUrls() {
+
+    },
     // 切换查看switch
     changeSwitchView(val) {
       let status = val;
-      API_Member.updateMemberReview(this.infoData.id, {status}).then(
+      API_Member.updateMemberReview(this.infoData.id, { status }).then(
         (res) => {
           this.$Message.success("修改成功!");
           this.init();
@@ -263,7 +346,6 @@ export default {
     changePage(v) {
       this.searchForm.pageNumber = v;
       this.getDataList();
-      this.clearSelectAll();
     },
     // 分页 改变页数
     changePageSize(v) {
@@ -279,7 +361,7 @@ export default {
     //列表直接选择页面是否展示
     changeSwitch(v) {
       let status = v.status;
-      API_Member.updateMemberReview(v.id, {status: status}).then((res) => {
+      API_Member.updateMemberReview(v.id, { status: status }).then((res) => {
         this.init();
       });
     },
@@ -303,6 +385,8 @@ export default {
       API_Member.getMemberInfoReview(v.id).then((res) => {
         if (res.result) {
           this.infoData = res.result;
+          this.replyForm.reply = res.result.reply;
+          this.replyForm.replyImage = res.result.replyImage ? res.result.replyImage.split(",") : [];
         }
       });
     },
@@ -341,20 +425,24 @@ export default {
   width: 100%;
   height: 100%;
 }
+
 img {
   vertical-align: middle;
   border-style: none;
 }
+
 .product {
   width: 140px;
   height: 160px;
   border: 1px solid #d9d9d9;
   border-radius: 3px;
 }
-.show{
-  label{
+
+.show {
+  label {
     font-size: 14px;
   }
+
   margin-top: 15px;
 }
 
@@ -366,6 +454,7 @@ label {
   float: left;
   margin-right: 2px;
 }
+
 .border-b {
   border-bottom: 1px solid #e9e9e9;
   width: 500px;
@@ -373,11 +462,68 @@ label {
   position: relative;
   margin-top: 12px;
 }
-.div-height{
+
+.div-height {
   line-height: 25px;
 }
+
 .score-content {
   margin: 5px 0;
-  span{margin-right: 20px;}
+
+  span {
+    margin-right: 20px;
+  }
 }
+
+.demo-upload-list {
+  width: 150px;
+  height: 150px;
+  text-align: center;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  display: inline-block;
+  background: #fff;
+  position: relative;
+  margin-right: 4px;
+  vertical-align: bottom;
+}
+.demo-upload-list:hover .demo-upload-list-cover {
+  display: flex;
+}
+.demo-upload-list img {
+  width: 100%;
+  height: 100%;
+}
+.demo-upload-list-cover {
+  display: none;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+
+  right: 0;
+  background: rgba(0, 0, 0, 0.6);
+
+  justify-content: space-between;
+  align-items: center;
+  flex-direction: column;
+}
+
+.demo-upload-list:hover .demo-upload-list-cover {
+  display: flex;
+}
+
+.demo-upload-list-cover div {
+  margin-top: 50px;
+  width: 100%;
+
+  >i {
+    width: 50%;
+    margin-top: 8px;
+    color: #fff;
+    font-size: 20px;
+    cursor: pointer;
+  }
+}
+
 </style>