渠道客诉

src/router/index.js

@@ -46,16 +46,6 @@ const router = new VueRouter({
           name: 'login',
           component: () => import('@/views/home/login.vue'),
         },
-        {
-          path: '/clew',
-          name: 'clew',
-          component: () => import('@/views/clew/index.vue'),
-        },
-        {
-          path: '/clewent',
-          name: 'clew',
-          component: () => import('@/views/clew/clewent.vue'),
-        },
         // {
         //     path: "/logincs",
         //     name: "logincs",
@@ -433,6 +423,29 @@ const router = new VueRouter({
         },
       ],
     },
+    {
+      path: '/clew',
+      component: layout,
+      redirect: '/clew',
+      children: [
+        {
+          path: '/clew',
+          name: 'clew',
+          component: () => import('@/views/clew/index.vue'),
+        },
+        {
+          path: '/clewent',
+          name: 'clewent',
+          component: () => import('@/views/clew/clewent.vue'),
+        },
+        {
+          path: '/complaintDetail',
+          name: 'complaintDetail',
+          meta: { title: '渠道投诉' },
+          component: () => import('@/views/clew/complaintDetail/index.vue'),
+        },
+      ],
+    },
   ],
 });
 export default router;

src/views/clew/complaintDetail/complaintLog.vue

@@ -0,0 +1,81 @@
+<template>
+  <div class="cardclewContent infoDetail">
+    <div class="complaintLog" v-for="(iten, index) in customerClueInfoComplaintList" :key="index">
+      <div class="info">
+        <div class="label">来电分类：</div>
+        <div class="value">
+          <!-- 一级分类 -->
+          <span v-if="iten.customerClassifyName">{{ iten.customerClassifyName }}-</span>
+          <!-- 二级分类 -->
+          <span v-if="iten.customerSubClassifyName">{{ iten.customerSubClassifyName }}-</span>
+          <!-- 三级分类 -->
+          <span v-if="iten.customerThreeClassifyName">{{ iten.customerThreeClassifyName }}</span>
+        </div>
+      </div>
+      <div class="info">
+        <div class="label">用户诉求：</div>
+        <div class="value">{{ iten.userDemand }}</div>
+      </div>
+      <div class="info">
+        <div class="label">反馈内容：</div>
+        <div class="value">{{ iten.feedbackContent }}</div>
+      </div>
+      <div class="info">
+        <div class="label">来点时间：</div>
+        <div class="value">{{ iten.createTime }}</div>
+      </div>
+      <div class="info">
+        <div class="label">来点次数：</div>
+        <div class="value">{{ iten.serialNumber }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getDictOption } from '@/api/index';
+export default {
+  name: 'infoDetail',
+  props: {
+    customerClueInfoComplaintList: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  data() {
+    return {};
+  },
+  activated() {},
+  methods: {},
+};
+</script>
+<style scoped lang="scss">
+.cardclewContent {
+  background: #fff;
+  box-sizing: border-box;
+  padding: 10px 16px;
+  margin: 6px 10px 10px;
+}
+.cardclewContent .info {
+  font-size: 14px;
+  color: #444;
+  line-height: 28px;
+  display: flex;
+  .value {
+    flex: 1;
+  }
+}
+.cardclewContent .title p {
+  padding: 0;
+  margin: 0;
+}
+.cardclewContent .title .textLeft {
+  display: inline-block;
+  padding-bottom: 10px;
+}
+.complaintLog {
+  border-bottom: 1px solid #ccc;
+  margin-bottom: 8px;
+  padding-bottom: 8px;
+}
+</style>

src/views/clew/complaintDetail/followUpHistory.vue

@@ -0,0 +1,249 @@
+<template>
+  <div
+    class="container linep containertext followUpHistory"
+    style="
+      background-color: #fff;
+      width: 94%;
+      margin: 0px auto;
+      border-radius: 6px;
+      font-size: 14px;
+    ">
+    <van-form ref="tabstoreVal">
+      <div v-for="(item, index) in customItemList" :key="index">
+        <div
+          class="formLabel z-cell z-cells z-celly"
+          v-if="item.answerType == 'sz' || item.answerType == 'rq'">
+          <van-cell>
+            <template #title
+              >{{ index + 1 }}.{{ item.customerClueName }}
+              <span
+                style="color: #444; font-size: 12px; margin: 0; padding: 10px 0; text-align: right"
+                >{{ item.remark }}</span
+              ></template
+            >
+          </van-cell>
+          <p class="mg0" style="word-break: break-all">{{ item.answerValue }}</p>
+        </div>
+        <div class="formLabel z-cell z-cells z-celly" v-if="item.answerType == 'zp'">
+          <van-cell>
+            <template #title>{{ index + 1 }}.{{ item.customerClueName }}</template>
+          </van-cell>
+          <delete-upload-imgv :imgs="item.fileInfoList"></delete-upload-imgv>
+        </div>
+        <div
+          class="formLabel z-cell z-cells z-celly"
+          v-if="item.answerType == 'wb' && viewTextShow">
+          <van-cell>
+            <template #title>{{ index + 1 }}.{{ item.customerClueName }}</template>
+          </van-cell>
+          <div class="selesetText">
+            <p class="mg0" style="word-break: break-all">{{ item.answerValue }}</p>
+          </div>
+          <!-- <p style="color: #444; font-size: 12px; margin: 0; padding: 10px 0; text-align: right">
+              {{ item.remark }}
+            </p> -->
+          <delete-upload-imgv :imgs="item.fileInfoList"></delete-upload-imgv>
+        </div>
+
+        <div class="formLabel z-cell z-cells z-celly" v-if="item.answerType == 'duox'">
+          <van-cell>
+            <template #title>{{ index + 1 }}.{{ item.customerClueName }}</template>
+          </van-cell>
+          <div class="selesetText">
+            <div class="mg0" v-for="(item1, index1) in item.customerClueOptionList" :key="index1">
+              <p style="color: #0057ba" v-if="item1.checked">
+                <i
+                  style="
+                    border: 1px solid #0057ba;
+                    margin-right: 10px;
+                    border-radius: 2px;
+                    padding: 2px;
+                  "
+                  class="van-icon van-icon-success"></i>
+                <span>{{ item1.customerClueOption }}</span>
+              </p>
+              <p v-if="!item1.checked">
+                <i
+                  style="
+                    border: 1px solid #ccc;
+                    margin-right: 10px;
+                    border-radius: 2px;
+                    color: #fff;
+                    padding: 2px;
+                  "
+                  class="van-icon van-icon-success"></i>
+                <span>{{ item1.customerClueOption }}</span>
+              </p>
+            </div>
+          </div>
+        </div>
+        <div class="formLabel z-cell z-cells z-celly" v-if="item.answerType == 'dx'">
+          <van-cell>
+            <template #title> {{ index + 1 }}.{{ item.customerClueName }} </template>
+          </van-cell>
+          <div class="selesetText">
+            <div class="mg0" v-for="(item2, index2) in item.customerClueOptionList" :key="index2">
+              <p style="color: #0057ba" v-if="item2.checked">
+                <i
+                  style="
+                    border: 1px solid #0057ba;
+                    border-radius: 40px;
+                    margin-right: 10px;
+                    padding: 2px;
+                  "
+                  class="van-icon van-icon-success"></i>
+                <span>{{ item2.customerClueOption }}</span>
+              </p>
+              <p v-if="!item2.checked">
+                <i
+                  style="
+                    border: 1px solid #ccc;
+                    border-radius: 40px;
+                    margin-right: 10px;
+                    color: #fff;
+                    padding: 2px;
+                  "
+                  class="van-icon van-icon-success"></i>
+                <span>{{ item2.customerClueOption }}</span>
+              </p>
+            </div>
+          </div>
+          <delete-upload-imgv :imgs="item.fileInfoList"></delete-upload-imgv>
+        </div>
+      </div>
+    </van-form>
+  </div>
+</template>
+<script>
+import deleteUploadImg from '@/components/deleteUploadImg2';
+import deleteUploadImgv from '@/components/deleteUploadImg';
+import { getCustomerClueAnswerById } from '@/api/clew';
+export default {
+  components: { deleteUploadImg, deleteUploadImgv },
+  props: {
+    historyId: {
+      type: [String, Number],
+      default: '',
+    },
+    showView: {
+      type: Boolean,
+      default: '',
+    },
+    customerClueItemList: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  data() {
+    return {
+      customItemList: [],
+      viewTextShow: false,
+    };
+  },
+  watch: {
+    showView: {
+      handler(val) {
+        if (val) this.getFollowUpHistory();
+      },
+      immediate: true,
+    },
+  },
+  methods: {
+    getFollowUpHistory(val) {
+      // this.toastLoading(0, '加载中...', true);
+      // getCustomerClueAnswerById({ userCustomerClueId: this.historyId }).then((res) => {
+      this.toastLoading().clear();
+      this.customItemList = this.customerClueItemList;
+      for (var pl = 0; pl < this.customItemList[1].customerClueOptionList.length; pl++) {
+        if (
+          this.customItemList[1].customerClueOptionList[pl].customerClueOption.indexOf('跟进中') !=
+          -1
+        ) {
+          if (this.customItemList[1].customerClueOptionList[pl].value == 'Y') {
+            this.viewTextShow = true;
+            if (
+              this.customItemList[1].customerClueOptionList[pl].customerClueOption.indexOf(
+                '跟进'
+              ) != -1
+            ) {
+              this.customItemList[2].customerClueName =
+                '具体合作意向反馈(拜访时间、合同方向、预估合作时间)';
+            }
+          }
+        } else {
+          if (this.customItemList[1].customerClueOptionList[pl].value == 'Y') {
+            this.viewTextShow = true;
+            if (
+              this.customItemList[1].customerClueOptionList[pl].customerClueOption.indexOf(
+                '意向'
+              ) != -1
+            ) {
+              this.customItemList[2].customerClueName = '没有意向原因';
+              this.customItemList[2].remark = '请输入';
+            }
+            if (
+              this.customItemList[1].customerClueOptionList[pl].customerClueOption.indexOf(
+                '开户'
+              ) != -1
+            ) {
+              this.customItemList[2].customerClueName = '开户经销商代码(例:0110067321)';
+              this.customItemList[2].remark = '请输入';
+            }
+            if (
+              this.customItemList[1].customerClueOptionList[pl].customerClueOption.indexOf(
+                '开店'
+              ) != -1
+            ) {
+              this.customItemList[2].customerClueName = '开户门店代码(例:0190129032)';
+              this.customItemList[2].remark = '请输入';
+            }
+            if (
+              this.customItemList[1].customerClueOptionList[pl].customerClueOption.indexOf(
+                '出货'
+              ) != -1
+            ) {
+              this.customItemList[2].customerClueName = '填写具体的产品和数量';
+            }
+          }
+        }
+      }
+      // });
+    },
+  },
+};
+</script>
+<style lang="scss">
+.followUpHistory {
+  .formLabel {
+    margin: 0 16px;
+    border-bottom: 1px solid #f1f1f1;
+  }
+  .formLabel .van-cell {
+    padding: 10px 0;
+    font-size: 14px;
+  }
+  .formLabel .van-cell::after {
+    border: 0;
+  }
+  .formLabeltext .van-field {
+    border: 1px solid #f1f1f1;
+    padding: 6px;
+    width: 100%;
+    border-radius: 4px;
+    overflow: hidden;
+  }
+  .formLabel .van-field__control {
+    padding: 0 10px;
+  }
+  .z-checkbox .van-radio {
+    padding: 6px 0;
+  }
+  .z-cell .van-cell__title {
+    font-size: 14px;
+  }
+  .formLabel .van-radio__label,
+  .formLabel .van-checkbox__label {
+    font-size: 14px;
+  }
+}
+</style>

src/views/clew/complaintDetail/index.vue

@@ -11,11 +11,15 @@
     <!-- 客诉详情 -->
     <infoDetail :infoData="infoData" v-if="infoData"> </infoDetail>
     <!-- 客诉记录 -->
+    <complaintLog
+      v-if="infoData.customerClueInfoComplaintList.length"
+      :customerClueInfoComplaintList="infoData.customerClueInfoComplaintList"></complaintLog>
+    <!-- 跟进记录 userCustomerClueList -->
     <!-- 跟进任务填写 -->
     <div class="assign" v-if="infoData && infoData.isClose != 1">
       <div class="followUp required">跟进结果</div>
       <div class="taskGather" v-if="taskGather && taskGather">
-        <radioGroup :clueOptionList="taskGather"></radioGroup>
+        <!-- <radioGroup :clueOptionList="taskGather"></radioGroup> -->
       </div>
       <div class="tc" style="padding: 0 16px">
         <van-button class="submitBtn" block type="info" color="#0057ba" @click="onSubmit">
@@ -29,16 +33,18 @@
 <script>
 import { getComplaintCustomerClueInfoById } from '@/api/complaintDetail';
 import infoDetail from './infoDetail.vue';
+import complaintLog from './complaintLog.vue';
 // import { selectCustomerClueInfoById, insertFollowCustomerClueAnswer } from '@/api/assignAwait';
 import { mapState } from 'vuex';
-import radioGroup from './radioGroup';
+// import radioGroup from './radioGroup';
 
 export default {
   name: 'assignPage',
   components: {
-    assignAwaitDetail,
-    radioGroup,
-    followUpHistory,
+    infoDetail,
+    complaintLog,
+    // radioGroup,
+    // followUpHistory,
   },
   computed: {
     ...mapState({

src/views/clew/complaintDetail/infoDetail.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="cardclewContent assignAwaitDetail">
+  <div class="cardclewContent infoDetail">
     <div class="info">姓名：{{ infoData.name }}</div>
     <div class="info">
       手机号：<a
@@ -14,9 +14,11 @@
     <div class="info">区/县：{{ infoData.countryName }}</div>
     <div class="info">
       分类：
-      <span>{{ filterClassify(infoData.customerClassify) }}</span>
+      <span v-if="customerClassify.length">{{ filterClassify(infoData.customerClassify) }}</span>
     </div>
-    <div class="info">详细地址：{{ infoData.countryName }}</div>
+    <div class="info">详细地址：{{ infoData.detailAddress }}</div>
+    <div class="info">商店授权号：{{ infoData.storeCode }}</div>
+    <div class="info">商店地址：{{ infoData.storeAddr }}</div>
     <slot></slot>
   </div>
 </template>
@@ -24,7 +26,7 @@
 <script>
 import { getDictOption } from '@/api/index';
 export default {
-  name: 'assignAwaitDetail',
+  name: 'infoDetail',
   props: {
     infoData: {
       type: Object,
@@ -40,17 +42,9 @@ export default {
       customerClassify: [],
     };
   },
-  watch: {
-    source: {
-      handler(val) {
-        if (val == 'JZfollowUp') {
-          this.getCustomerClassify();
-        }
-      },
-      immediate: true,
-    },
+  activated() {
+    this.getCustomerClassify();
   },
-  created() {},
   methods: {
     async getCustomerClassify() {
       let option = await getDictOption({}, 'customer_classify');

src/views/clew/index.vue

@@ -1,7 +1,16 @@
 <template>
-  <div class="bgcolor">
+  <div class="bgcolor clew">
     <div class="navBarTOP">
-      <van-nav-bar class="navBar" title="客资任务" left-arrow @click-left="onClickLeft" />
+      <van-nav-bar class="navBar" title="客资任务" left-arrow @click-left="onClickLeft">
+        <template #right>
+          <van-dropdown-menu>
+            <van-dropdown-item
+              v-model="cid"
+              :options="customerClueOption"
+              @change="dropdownChange" />
+          </van-dropdown-menu>
+        </template>
+      </van-nav-bar>
       <van-tabs v-model="isHandle" color="#0057ba" @change="tabChange">
         <van-tab title="未跟进" name="-1" :disabled="disabled"></van-tab>
         <van-tab title="跟进中" name="0" :disabled="disabled"></van-tab>
@@ -32,6 +41,7 @@
                 <span v-if="item.cid == 4">开设门店</span>
                 <span v-if="item.cid == 5">批量采购</span>
                 <span v-if="item.cid == 7">家装客资</span>
+                <span v-if="item.cid == 9">渠道客诉</span>
               </div>
               <div class="info">联系电话：{{ item.phone }}</div>
               <div class="info" v-if="item.createTime">首次接入时间：{{ item.createTime }}</div>
@@ -49,6 +59,7 @@
 
 <script>
 import { infolist } from '@/api/clew';
+import { getDictOption } from '@/api';
 export default {
   name: 'clew',
   data() {
@@ -58,9 +69,12 @@ export default {
       loading: false,
       list: [],
       finished: true,
+      cid: -1,
+      customerClueOption: [],
     };
   },
   activated() {
+    this.getCustomerClue();
     this.approveList();
   },
   watch: {
@@ -81,6 +95,18 @@ export default {
     next();
   },
   methods: {
+    async getCustomerClue() {
+      let option = await getDictOption({}, 'customer_clue');
+      let arr = [{ text: '全部', value: -1 }];
+      option.data.forEach((val) => {
+        arr.push({
+          text: val.dictLabel,
+          value: val.dictValue,
+        });
+      });
+      this.customerClueOption = arr;
+      console.log(this.customerClueOption);
+    },
     submit() {
       var taskIds = [];
       var instanceIds = [];
@@ -113,7 +139,13 @@ export default {
         });
     },
     approveFn(row) {
-      if (row.cid == 7) {
+      if (row.cid == 9) {
+        // 渠道客诉
+        this.$router.push({
+          path: '/complaintDetail',
+          query: { id: row.customerClueInfoId },
+        });
+      } else if (row.cid == 7) {
         // 家装客资跟进
         this.$router.push({
           path: '/JZfollowUp',
@@ -140,20 +172,25 @@ export default {
         message: '数据加载中...',
         forbidClick: true,
       });
-      infolist({ type: this.isHandle }).then((res) => {
+      infolist({ type: this.isHandle, cid: this.cid == -1 ? null : this.cid }).then((res) => {
         loading1.clear();
         this.disabled = false;
         this.loading = false;
         this.list = res.data;
       });
     },
+    dropdownChange(value) {
+      this.list = [];
+      this.pageNum = 1;
+      this.approveList();
+    },
     onClickLeft() {
       this.$router.push('/My/index');
     },
   },
 };
 </script>
-<style>
+<style lang="scss">
 .newCarList {
   margin: 14px;
   border-radius: 8px;
@@ -199,4 +236,24 @@ export default {
 .van-tab--active {
   color: #0057ba;
 }
+.clew {
+  .van-nav-bar {
+    z-index: 2;
+  }
+  .van-nav-bar__right {
+    height: 40px;
+    margin-top: 3px;
+    .van-dropdown-menu {
+      height: 100%;
+      border: 1px solid #f4f0f0;
+    }
+  }
+  .van-dropdown-menu__bar {
+    padding: 0 4px;
+    height: 100%;
+  }
+  .van-dropdown-menu__title::after {
+    right: 0 !important;
+  }
+}
 </style>