Browse Source

add 意见反馈;feat 其他优化;

Funny 3 years ago
parent
commit
398f9d5156

+ 0 - 1
src/api/http.js

@@ -129,6 +129,5 @@ export function uploadImg(url, data = {}) {
     },
     data: data
   };
-  sendObject.data = qs.parse(qs.stringify(data));
   return service(sendObject)
 }

+ 11 - 2
src/api/setting.js

@@ -1,4 +1,4 @@
-import { get, post, postJson,uploadImg } from './http.js';
+import { get, post, postJson, uploadImg } from './http.js';
 
 export const getSoundMsg = (params) => {
   return get('app/message/getSoundMsg', params)
@@ -60,7 +60,16 @@ export const getCustomerPhone = (params) => {
   return get('app/customerService/deliveryList', params)
 }
 
-//uploadImg
+//上传图片
 export const uploadFeedbackImg = (params) => {
   return uploadImg('app/common/upload', params)
+}
+
+// 提交反馈
+export const saveFeedback = (params) => {
+  return post('app/feedback/save', params)
+}
+// 反馈列表 app/feedback/list
+export const getFeedbackList = (params) => {
+  return get('app/feedback/list', params)
 }

+ 8 - 2
src/components/help/feedback.vue

@@ -4,9 +4,9 @@
       <el-col :span="24">
         <div class="tabList">
           <div class="tab_item" @click="changeTabs(i)" :class="{'tab_item_ac':tabNum==i?true:false}" v-for="(item,i) in tabList" :key="i">
-            <span class="item" v-if="!item.children">{{item.name}}</span>
+            <span class="item" :class="tabNum==i?'active-item':''" v-if="!item.children">{{item.name}}</span>
             <el-dropdown v-else @command="chooseCoupon">
-              <span class="el-dropdown-link item">
+              <span class="el-dropdown-link item" :class="tabNum==i?'active-item':''">
                 {{item.name}}<i class="el-icon-arrow-down el-icon--right"></i>
               </span>
               <el-dropdown-menu slot="dropdown">
@@ -46,6 +46,9 @@ export default {
   },
   created() {
     this.changeTabs(0);
+    this.$bus.$on("goFeedbackList", (index) => {
+      this.changeTabs(index);
+    });
   },
   methods: {
     chooseCoupon(e) {
@@ -99,6 +102,9 @@ export default {
           text-align: center;
           cursor: pointer;
         }
+        .active-item {
+          color: #fc7200;
+        }
         .tab_line {
           width: 58px;
           height: 6px;

+ 44 - 4
src/components/help/feedbackInfo.vue

@@ -13,10 +13,11 @@
     </div>
     <div class="cell">
       <div class="title">提交截图(最多3张)</div>
-      <el-upload action="" list-type="picture-card" :on-preview="handlePictureCardPreview" :http-request="submitUpload">
+      <el-upload action="" list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="removeImg" :http-request="submitUpload">
         <i class="el-icon-plus"></i>
       </el-upload>
     </div>
+    <el-button type="primary" :loading="loading" @click="submit">提交</el-button>
     <el-dialog :visible.sync="dialogVisible">
       <img width="100%" :src="dialogImageUrl" alt="">
     </el-dialog>
@@ -24,7 +25,7 @@
 </template>
 
 <script>
-import { uploadFeedbackImg } from "../../api/setting.js";
+import { uploadFeedbackImg, saveFeedback } from "../../api/setting.js";
 export default {
   name: "feedbackInfo",
   data() {
@@ -49,11 +50,15 @@ export default {
       ],
       params: {
         type: 1,
+        content: "",
+        pictures: [],
       },
+      pictures: [],
       baseUrl: process.env.VUE_APP_BASE_URL,
       dialogImageUrl: "",
       dialogVisible: false,
       fileList: [],
+      loading: false,
     };
   },
   // 监听属性 类似于data概念
@@ -62,9 +67,44 @@ export default {
   watch: {},
   // 方法集合
   methods: {
+    submit() {
+      if (!this.params.content.trim()) {
+        return this.$message.warning("请描述你的问题");
+      }
+      this.params.pictures = this.pictures.map((v) => v.url);
+      console.log(this.params);
+      this.loading = true;
+      saveFeedback(this.params).then((res) => {
+        this.loading = false;
+        if (res.code === 200) {
+          this.$message.success("反馈成功");
+          this.params = {
+            type: 1,
+            content: "",
+            pictures: [],
+          };
+          this.pictures = [];
+          this.$bus.$emit('goFeedbackList',1)
+        } else {
+          this.$message.error(res.msg);
+        }
+      });
+    },
+    removeImg(file) {
+      console.log(file, fileList);
+      this.pictures = this.pictures.filter((v) => {
+        return v.fileName !== file.name;
+      });
+    },
     submitUpload(params) {
-      console.log(arguments);
-      uploadFeedbackImg({ imageUrl: params.file, name: "file" }).then((res) => {
+      let file = new FormData();
+      file.append("file", params.file);
+      uploadFeedbackImg(file).then((res) => {
+        if (res.code === 200) {
+          this.pictures.push(res.data);
+        } else {
+          this.$message.error(res.msg);
+        }
         console.log(res);
       });
     },

+ 166 - 0
src/components/help/myFeedback.vue

@@ -0,0 +1,166 @@
+<template>
+  <div class="my-feedback">
+    <div class="cell" v-for="(v,i) in feedbackList" :key="i">
+      <div class="cell-top">
+        <div class="title">{{showType(v.type)}}</div>
+        <div class="time">{{v.createTime}}</div>
+        <div class="status" :class="v.status === 2 ? 'active-status' : ''">{{v.status === 1 ? '待回复' : '已回复'}}</div>
+      </div>
+      <div class="content">{{v.content}}</div>
+      <div class="img-list">
+        <!-- <img v-for="(pic,idx) in v.pictures" :key="idx" :src="pic" alt=""> -->
+        <el-image class="img" v-for="(pic,idx) in v.pictures" :key="idx" :src="pic" :preview-src-list="v.pictures">
+        </el-image>
+      </div>
+      <div v-if="v.status === 2" class="cell-top cell-bot">
+        <div class="title1">平台回复</div>
+        <div class="time">{{v.updateTime}}</div>
+      </div>
+      <div v-if="v.answer" class="content">{{v.answer}}</div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getFeedbackList } from "../../api/setting.js";
+export default {
+  name: "myFeedback",
+  data() {
+    return {
+      feedbackList: [],
+    };
+  },
+  // 监听属性 类似于data概念
+  computed: {},
+  // 监控data中的数据变化
+  watch: {},
+  // 方法集合
+  methods: {
+    showType(type) {
+      let name = "";
+      switch (type) {
+        case 1:
+          name = "账号问题";
+          break;
+        case 2:
+          name = "功能问题";
+          break;
+        case 3:
+          name = "优化建议";
+          break;
+        case 4:
+          name = "其他问题";
+          break;
+
+        default:
+          break;
+      }
+      return name;
+    },
+    getFeedbackList() {
+      getFeedbackList().then((res) => {
+        if (res.code === 200) {
+          this.feedbackList = res.data.data;
+        } else {
+          this.$message.error(res.msg);
+        }
+      });
+    },
+  },
+  // 生命周期 - 创建完成(可以访问当前this实例)
+  created() {
+    this.getFeedbackList();
+  },
+  // 生命周期 - 挂载完成(可以访问DOM元素)
+  mounted() {},
+  // 生命周期 - 创建之前
+  beforeCreate() {},
+  // 生命周期 - 挂载之前
+  beforeMount() {},
+  // 生命周期 - 更新之前
+  beforeUpdate() {},
+  // 生命周期 - 更新之后
+  updated() {},
+  // 生命周期 - 销毁之前
+  beforeDestroy() {},
+  // 生命周期 - 销毁完成
+  destroyed() {},
+  // 如果页面有keep-alive缓存功能,这个函数会触发
+  activated() {},
+};
+</script>
+
+<style lang="scss" scoped  type="text/css">
+.cell {
+  background: #f7f7f7;
+  margin-top: 20px;
+  padding: 20px;
+  border-radius: 8px;
+  .cell-top {
+    display: flex;
+    align-items: center;
+    .title {
+      position: relative;
+      font-size: 16px;
+      font-weight: bold;
+      line-height: 22px;
+      color: #333333;
+      padding-left: 10px;
+    }
+    .title::before {
+      width: 3px;
+      height: 16px;
+      background: rgba(252, 114, 0, 0.39);
+      border-radius: 2px;
+      content: "";
+      position: absolute;
+      top: 2px;
+      left: 0;
+    }
+    .time {
+      font-size: 14px;
+      font-weight: 400;
+      color: #999999;
+      margin: 0 5px;
+    }
+    .status {
+      font-size: 14px;
+      font-weight: 400;
+      color: #e70012;
+      border: 1px solid #e70012;
+      padding: 0 5px;
+      border-radius: 2px;
+    }
+    .active-status {
+      color: #007aff;
+      border-color: #007aff;
+    }
+  }
+  .cell-bot {
+    margin-top: 40px;
+    .title1 {
+      line-height: 22px;
+      font-size: 16px;
+      font-weight: bold;
+      color: #333333;
+    }
+  }
+  .content {
+    font-size: 14px;
+    font-weight: 400;
+    color: #333333;
+    line-height: 20px;
+    margin-top: 10px;
+  }
+  .img-list {
+    display: flex;
+    margin-top: 10px;
+    .img {
+      width: 120px;
+      height: 120px;
+      margin-right: 20px;
+      cursor: pointer;
+    }
+  }
+}
+</style>

+ 6 - 3
src/components/shopAccount.vue

@@ -4,9 +4,9 @@
       <el-col :span="15">
         <div class="tabList">
           <div class="tab_item" @click="changeTabs(i)" :class="{'tab_item_ac':tabNum==i?true:false}" v-for="(item,i) in tabList" :key="i">
-            <span class="item" v-if="!item.children">{{item.name}}</span>
+            <span class="item" :class="tabNum==i?'active-item':''" v-if="!item.children">{{item.name}}</span>
             <el-dropdown v-else @command="chooseCoupon">
-              <span class="el-dropdown-link item">
+              <span class="el-dropdown-link item" :class="tabNum==i?'active-item':''">
                 {{item.name}}<i class="el-icon-arrow-down el-icon--right"></i>
               </span>
               <el-dropdown-menu slot="dropdown">
@@ -48,7 +48,7 @@ export default {
     this.changeTabs(0);
   },
   methods: {
-    chooseCoupon(e){
+    chooseCoupon(e) {
       this.tabNum = 1;
       this.activeName = e;
     },
@@ -99,6 +99,9 @@ export default {
           text-align: center;
           cursor: pointer;
         }
+        .active-item {
+          color: #fc7200;
+        }
         .tab_line {
           width: 58px;
           height: 6px;

+ 5 - 2
src/components/waimai.vue

@@ -4,9 +4,9 @@
       <el-col :span="24">
         <div class="tabList">
           <div class="tab_item" @click="changeTabs(i)" :class="{'tab_item_ac':tabNum==i?true:false}" v-for="(item,i) in tabList" :key="i">
-            <span class="item" v-if="!item.children">{{item.name}}</span>
+            <span class="item" :class="tabNum==i?'active-item':''" v-if="!item.children">{{item.name}}</span>
             <el-dropdown v-else @command="chooseCoupon">
-              <span class="el-dropdown-link item">
+              <span class="el-dropdown-link item" :class="tabNum==i?'active-item':''">
                 {{item.name}}<i class="el-icon-arrow-down el-icon--right"></i>
               </span>
               <el-dropdown-menu slot="dropdown">
@@ -118,6 +118,9 @@ export default {
           text-align: center;
           cursor: pointer;
         }
+        .active-item {
+          color: #fc7200;
+        }
         .tab_line {
           width: 58px;
           height: 6px;

+ 1 - 0
src/main.js

@@ -17,6 +17,7 @@ Vue.config.productionTip = false
 Vue.prototype.$get = get;
 Vue.prototype.$post = post;
 Vue.prototype.$postJson = postJson;
+Vue.prototype.$bus = new Vue();
 
 AmapVue.config.key = '5ae8644771ef9abf9cfb3ea23b1df6ca';
 Vue.use(AmapVue);