会员评价

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

@@ -2,7 +2,8 @@
   <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" />
           </Form-item>
@@ -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]"
+          @on-page-size-change="changePageSize" :page-size-opts="[10, 20, 50]" size="small" show-total show-elevator
-              size="small" show-total show-elevator show-sizer></Page>
+          show-sizer></Page>
       </Row>
     </Card>
     <!-- 评价详情 -->
@@ -70,37 +71,70 @@
                 <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"
+                      v-for="(img, index) in infoData.images.split(',')" :src="img" alt="" :key="index" />
-                       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 {
+      modalLoading:false,
+      picModelFlag: false,
+      previewGoodsPicture: "",
       replyForm: {
         reply: '',
         replyImage: []
@@ -118,6 +152,8 @@ export default {
         startDate: "", // 起始时间
         endDate: "", // 终止时间
       },
+      goodsPictureVisible: false,
+      selectedImage: [],
       columns: [
         // 表头
         {
@@ -245,6 +281,53 @@ 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;
@@ -263,7 +346,6 @@ export default {
     changePage(v) {
       this.searchForm.pageNumber = v;
       this.getDataList();
-      this.clearSelectAll();
     },
     // 分页 改变页数
     changePageSize(v) {
@@ -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 {
     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 {
   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>