add 帮助中心-客服中心、意见反馈

src/api/http.js

@@ -118,3 +118,17 @@ export function postJson(url, data = {}) {
   sendObject.data = qs.parse(qs.stringify(data));
   return service(sendObject)
 }
+//上传图片
+export function uploadImg(url, data = {}) {
+  //默认配置
+  let sendObject = {
+    url: requestUrl + url,
+    method: "post",
+    headers: {
+      'Content-Type': 'multipart/form-data'
+    },
+    data: data
+  };
+  sendObject.data = qs.parse(qs.stringify(data));
+  return service(sendObject)
+}

src/api/setting.js

@@ -1,4 +1,4 @@
-import { get, post, postJson } from './http.js';
+import { get, post, postJson,uploadImg } from './http.js';
 
 export const getSoundMsg = (params) => {
   return get('app/message/getSoundMsg', params)
@@ -54,3 +54,13 @@ export const defaultAddress = (params) => {
 export const syncFoodImg = (params) => {
   return get('app/waimai/syncFoodImg', params)
 }
+
+// 客服电话
+export const getCustomerPhone = (params) => {
+  return get('app/customerService/deliveryList', params)
+}
+
+//uploadImg
+export const uploadFeedbackImg = (params) => {
+  return uploadImg('app/common/upload', params)
+}

src/components/customerService.vue

@@ -1,39 +0,0 @@
-<template>
-  <div>这是客服中心</div>
-</template>
-
-<script>
-export default {
-  name: "customerService",
-  data() {
-    return {};
-  },
-  // 监听属性 类似于data概念
-  computed: {},
-  // 监控data中的数据变化
-  watch: {},
-  // 方法集合
-  methods: {},
-  // 生命周期 - 创建完成（可以访问当前this实例）
-  created() {},
-  // 生命周期 - 挂载完成（可以访问DOM元素）
-  mounted() {},
-  // 生命周期 - 创建之前
-  beforeCreate() {},
-  // 生命周期 - 挂载之前
-  beforeMount() {},
-  // 生命周期 - 更新之前
-  beforeUpdate() {},
-  // 生命周期 - 更新之后
-  updated() {},
-  // 生命周期 - 销毁之前
-  beforeDestroy() {},
-  // 生命周期 - 销毁完成
-  destroyed() {},
-  // 如果页面有keep-alive缓存功能，这个函数会触发
-  activated() {},
-};
-</script>
-
-<style lang="scss" scoped  type="text/css">
-</style>

src/components/feedback.vue

@@ -1,39 +0,0 @@
-<template>
-  <div>这是意见反馈</div>
-</template>
-
-<script>
-export default {
-  name: "feedback",
-  data() {
-    return {};
-  },
-  // 监听属性 类似于data概念
-  computed: {},
-  // 监控data中的数据变化
-  watch: {},
-  // 方法集合
-  methods: {},
-  // 生命周期 - 创建完成（可以访问当前this实例）
-  created() {},
-  // 生命周期 - 挂载完成（可以访问DOM元素）
-  mounted() {},
-  // 生命周期 - 创建之前
-  beforeCreate() {},
-  // 生命周期 - 挂载之前
-  beforeMount() {},
-  // 生命周期 - 更新之前
-  beforeUpdate() {},
-  // 生命周期 - 更新之后
-  updated() {},
-  // 生命周期 - 销毁之前
-  beforeDestroy() {},
-  // 生命周期 - 销毁完成
-  destroyed() {},
-  // 如果页面有keep-alive缓存功能，这个函数会触发
-  activated() {},
-};
-</script>
-
-<style lang="scss" scoped  type="text/css">
-</style>

src/components/about.vue

@@ -3,10 +3,10 @@
     <div class="about-bg">
       <div class="name">猎豹AI</div>
       <div class="des">智能聚合运力平台</div>
-      <img class="download" src="../../static/image/download.png" alt="">
+      <img class="download" src="../../../static/image/download.png" alt="">
       <div class="scan">扫码下载APP</div>
       <div class="version">
-        <img class="pc" src="../../static/image/pc-icon.png" alt="">
+        <img class="pc" src="../../../static/image/pc-icon.png" alt="">
         <div class="versoin-num">猎豹AI聚合配送PC版版本V{{version}}</div>
       </div>
     </div>
@@ -14,7 +14,7 @@
 </template>
 
 <script>
-import config from "../../package.json";
+import config from "../../../package.json";
 export default {
   name: "about",
   data() {
@@ -45,7 +45,7 @@ export default {
     display: flex;
     flex-direction: column;
     align-items: center;
-    background: url("../../static/image/about-bg.png");
+    background: url("../../../static/image/about-bg.png");
     background-size: 100% 100%;
     width: 372px;
     height: 268px;

src/components/help/customerService.vue

@@ -0,0 +1,98 @@
+<template>
+  <div class="customer-service">
+    <div class="phone-list">
+      <div class="item" v-for="(v,i) in phoneList" :key="i">
+        <img class="img" :src="v.logo" alt="">
+        <div class="name">{{v.name}}</div>
+        <div class="shop-name">{{v.customerPhone}}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getCustomerPhone } from "../../api/setting.js";
+export default {
+  name: "customerService",
+  data() {
+    return {
+      phoneList: [],
+    };
+  },
+  // 监听属性 类似于data概念
+  computed: {},
+  // 监控data中的数据变化
+  watch: {},
+  // 方法集合
+  methods: {
+    getCustomerPhone() {
+      getCustomerPhone().then((res) => {
+        if (res.code === 200) {
+          this.phoneList = res.data;
+        } else {
+          this.$message.error(res.msg);
+        }
+      });
+    },
+  },
+  // 生命周期 - 创建完成（可以访问当前this实例）
+  created() {
+    this.getCustomerPhone();
+  },
+  // 生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {},
+  // 生命周期 - 创建之前
+  beforeCreate() {},
+  // 生命周期 - 挂载之前
+  beforeMount() {},
+  // 生命周期 - 更新之前
+  beforeUpdate() {},
+  // 生命周期 - 更新之后
+  updated() {},
+  // 生命周期 - 销毁之前
+  beforeDestroy() {},
+  // 生命周期 - 销毁完成
+  destroyed() {},
+  // 如果页面有keep-alive缓存功能，这个函数会触发
+  activated() {},
+};
+</script>
+
+<style lang="scss" scoped  type="text/css">
+.phone-list {
+  display: flex;
+  flex-wrap: wrap;
+  .item {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 280px;
+    height: 120px;
+    background: #ffffff;
+    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
+    border-radius: 8px;
+    margin: 10px 20px 0 0;
+    cursor: pointer;
+    .img {
+      width: 40px;
+      height: 40px;
+      border-radius: 50%;
+    }
+    .name {
+      font-size: 18px;
+      font-weight: 500;
+      line-height: 20px;
+      color: #333333;
+      margin: 10px 0;
+    }
+    .shop-name {
+      font-size: 14px;
+      font-weight: 400;
+      line-height: 20px;
+      color: #999999;
+    }
+  }
+}
+</style>

src/components/downloadCenter.vue

@@ -52,7 +52,7 @@
     </div>
     <div class="lb-list">
       <div class="lb-app">
-        <img class="img" src="../../static/image/xiangrikui.png" alt="">
+        <img class="img" src="../../../static/image/xiangrikui.png" alt="">
         <div class="name">向日葵</div>
         <div class="tips">远程桌面控制软件，便于更好的排查解决问题，提供更优质的服务</div>
         <div @click="download('https://sunlogin.oray.com/download')" class="download">下载</div>
@@ -62,28 +62,28 @@
 </template>
 
 <script>
-import {name ,version} from '../../package.json'
+import {name ,version} from '../../../package.json'
 export default {
   name: "downloadCenter",
   data() {
     return {
       lbApp: [
         {
-          img: require("../../static/image/download.png"),
+          img: require("../../../static/image/download.png"),
           name: "Android手机版",
           tips: "适合大部分安卓手机使用",
           download: false,
           src: "",
         },
         {
-          img: require("../../static/image/download.png"),
+          img: require("../../../static/image/download.png"),
           name: "Iphone手机版",
           tips: "应用市场搜索[AI聚合配送]",
           download: false,
           src: "",
         },
         {
-          img: require("../../static/image/juhe-icon.png"),
+          img: require("../../../static/image/juhe-icon.png"),
           name: "Windows",
           tips: "客户端、支持Windows系统",
           download: true,

src/components/help/feedback.vue

@@ -0,0 +1,129 @@
+<template>
+  <div class="shopInfo">
+    <el-row class="order_tab">
+      <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>
+            <el-dropdown v-else @command="chooseCoupon">
+              <span class="el-dropdown-link item">
+                {{item.name}}<i class="el-icon-arrow-down el-icon--right"></i>
+              </span>
+              <el-dropdown-menu slot="dropdown">
+                <el-dropdown-item :command="v.command" v-for="(v,index) in item.children" :key="index">{{v.name}}</el-dropdown-item>
+              </el-dropdown-menu>
+            </el-dropdown>
+            <div class="tab_line"></div>
+          </div>
+        </div>
+      </el-col>
+    </el-row>
+    <el-row class="content">
+      <component v-if="renderComponent" :is="activeName"></component>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import feedbackInfo from "./feedbackInfo.vue";
+import myFeedback from "./myFeedback.vue";
+export default {
+  name: "feedback",
+  components: {
+    feedbackInfo,
+    myFeedback,
+  },
+  data() {
+    return {
+      activeName: "feedbackInfo",
+      tabList: [
+        { name: "意见反馈", index: 0, activeName: "feedbackInfo" },
+        { name: "我的反馈", index: 1, activeName: "myFeedback" },
+      ],
+      tabNum: 0,
+      renderComponent: true,
+    };
+  },
+  created() {
+    this.changeTabs(0);
+  },
+  methods: {
+    chooseCoupon(e) {
+      this.tabNum = 2;
+      this.activeName = e;
+    },
+    forceRerender() {
+      // 从 DOM 中删除 my-component 组件
+      this.renderComponent = false;
+      this.$nextTick(() => {
+        // 在 DOM 中添加 my-component 组件
+        this.renderComponent = true;
+      });
+    },
+    changeTabs(i) {
+      if (i === this.tabNum) {
+        this.forceRerender();
+        return;
+      }
+      this.tabNum = i;
+      this.activeName = this.tabList[i].activeName;
+    },
+  },
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="scss">
+.shopInfo {
+  .order_tab {
+    width: 100%;
+    height: 74px;
+    background: #fff;
+
+    .tabList {
+      width: 100%;
+      height: 74px;
+      padding-top: 20px;
+      padding-left: 36px;
+      box-sizing: border-box;
+      display: flex;
+
+      .tab_item {
+        min-width: 58px;
+        margin-right: 56px;
+        .item {
+          font-size: 16px;
+          font-weight: 500;
+          color: #b1b1b1;
+          position: relative;
+          text-align: center;
+          cursor: pointer;
+        }
+        .tab_line {
+          width: 58px;
+          height: 6px;
+          background: #fff;
+          border-radius: 3px;
+          margin: 15px auto 0;
+        }
+      }
+
+      .tab_item_ac {
+        color: #fc7200;
+
+        .tab_line {
+          background: #fc7200;
+        }
+      }
+    }
+  }
+
+  .content {
+    width: 100%;
+    margin-top: 10px;
+    box-sizing: border-box;
+    background: #ffffff;
+    padding: 0 20px;
+  }
+}
+</style>

src/components/help/feedbackInfo.vue

@@ -0,0 +1,150 @@
+<template>
+  <div class="feedback-info">
+    <div class="cell">
+      <div class="title">选择反馈类型</div>
+      <div class="type-list">
+        <div :class="params.type === v.type ? 'type active': 'type'" v-for="v in typeList" :key="v.type" @click="params.type = v.type">{{v.name}}</div>
+      </div>
+    </div>
+    <div class="cell">
+      <div class="title">问题描述</div>
+      <el-input class="descripe" clearable type="textarea" maxlength="200" show-word-limit placeholder="请详细描述您的问题，我们会尽快解决" v-model="params.content">
+      </el-input>
+    </div>
+    <div class="cell">
+      <div class="title">提交截图（最多3张）</div>
+      <el-upload action="" list-type="picture-card" :on-preview="handlePictureCardPreview" :http-request="submitUpload">
+        <i class="el-icon-plus"></i>
+      </el-upload>
+    </div>
+    <el-dialog :visible.sync="dialogVisible">
+      <img width="100%" :src="dialogImageUrl" alt="">
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { uploadFeedbackImg } from "../../api/setting.js";
+export default {
+  name: "feedbackInfo",
+  data() {
+    return {
+      typeList: [
+        {
+          name: "账号问题",
+          type: 1,
+        },
+        {
+          name: "功能问题",
+          type: 2,
+        },
+        {
+          name: "优化建议",
+          type: 3,
+        },
+        {
+          name: "其他问题",
+          type: 4,
+        },
+      ],
+      params: {
+        type: 1,
+      },
+      baseUrl: process.env.VUE_APP_BASE_URL,
+      dialogImageUrl: "",
+      dialogVisible: false,
+      fileList: [],
+    };
+  },
+  // 监听属性 类似于data概念
+  computed: {},
+  // 监控data中的数据变化
+  watch: {},
+  // 方法集合
+  methods: {
+    submitUpload(params) {
+      console.log(arguments);
+      uploadFeedbackImg({ imageUrl: params.file, name: "file" }).then((res) => {
+        console.log(res);
+      });
+    },
+    handlePictureCardPreview(file) {
+      this.dialogImageUrl = file.url;
+      this.dialogVisible = true;
+    },
+  },
+  // 生命周期 - 创建完成（可以访问当前this实例）
+  created() {},
+  // 生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {},
+  // 生命周期 - 创建之前
+  beforeCreate() {},
+  // 生命周期 - 挂载之前
+  beforeMount() {},
+  // 生命周期 - 更新之前
+  beforeUpdate() {},
+  // 生命周期 - 更新之后
+  updated() {},
+  // 生命周期 - 销毁之前
+  beforeDestroy() {},
+  // 生命周期 - 销毁完成
+  destroyed() {},
+  // 如果页面有keep-alive缓存功能，这个函数会触发
+  activated() {},
+};
+</script>
+
+<style lang="scss" scoped  type="text/css">
+.cell {
+  margin: 40px 0;
+  .title {
+    position: relative;
+    font-size: 16px;
+    font-weight: bold;
+    line-height: 22px;
+    color: #333333;
+    padding-left: 10px;
+    margin: 24px 0 13px;
+  }
+  .title::before {
+    width: 3px;
+    height: 16px;
+    background: rgba(252, 114, 0, 0.39);
+    border-radius: 2px;
+    content: "";
+    position: absolute;
+    top: 2px;
+    left: 0;
+  }
+  .type-list {
+    display: flex;
+    .type {
+      width: 90px;
+      height: 36px;
+      line-height: 36px;
+      text-align: center;
+      border-radius: 2px 2px 2px 2px;
+      border: 1px solid #e6e6e6;
+      font-size: 14px;
+      font-weight: 500;
+      color: #333333;
+      margin-right: 24px;
+    }
+    .active {
+      border-color: #fc7200;
+      color: #fc7200;
+    }
+  }
+  .descripe {
+    width: 800px;
+    height: 200px;
+    border-radius: 8px 8px 8px 8px;
+    background: #f5f5f5;
+    /deep/ .el-textarea__inner {
+      border: none !important;
+      background: #f5f5f5 !important;
+      height: 200px !important;
+    }
+  }
+}
+</style>

src/components/help.vue

@@ -26,7 +26,7 @@
 </template>
 
 <script>
-import { helpList, helpDetail } from "../api/help.js";
+import { helpList, helpDetail } from "../../api/help.js";
 export default {
   name: "commonProblem",
   data() {

src/components/shopCompoents/shopList.vue

@@ -1,39 +1,6 @@
 <template>
   <div class="shopList" v-loading="loading" element-loading-text="数据加载中">
-    <!-- <div class="header" v-if="shopList.length">
-      <div class="left">
-        <div class="line">
-          <div class="b_line"></div>
-          <div class="triangle"></div>
-        </div>
-        <div class="label">门店管理</div>
-      </div>
-      <div class="right">
-        <el-button class="btn" v-if="$store.state.userInfo.memberType === 2" @click.stop="addShop(1)">新增门店</el-button>
-      </div>
-    </div>
-    <el-table v-if="shopList.length" :data="shopList" stripe header-row-class-name="table_h" style="width: 100%; margin-top: 10px">
-      <el-table-column prop="code" label="门店编号" width="170"></el-table-column>
-      <el-table-column prop="name" label="门店名称" width="172" align="center"></el-table-column>
-      <el-table-column prop="address" label="门店地址" width="321" align="center"></el-table-column>
-      <el-table-column prop="contactName" label="联系人" width="164" align="center"></el-table-column>
-      <el-table-column prop="mobile" label="联系电话" width="176" align="center"></el-table-column>
-      <el-table-column label="已获运力" align="center" width="450">
-        <template slot-scope="scope">
-          <div class="imgs">
-            <img class="img" :src="item.logo" v-for="(item, i) in scope.row.deliveries" :key="i" alt="">
-          </div>
-        </template>
-      </el-table-column>
-      <el-table-column fixed="right" label="操作" width="100" align="center">
-        <template slot-scope="scope">
-          <el-button class="btn" size="mini" @click.stop="addShop(2, scope.row)">修改</el-button> -->
-    <!-- <el-button type="danger" size="mini" @click.stop="deleteItem(scope.row)">删除</el-button> -->
-    <!-- </template>
-      </el-table-column>
-    </el-table>
-    <el-empty v-if="!shopList.length && !loading" description="暂无门店数据！"></el-empty> -->
-    <div class="shop-list">
+   <div class="shop-list">
       <div class="item" v-for="(v,i) in shopList" :key=i>
         <div class="shop-top">
           <div class="code">门店编号：{{v.code}}</div>

src/components/waimai.vue

@@ -140,9 +140,7 @@ export default {
   .content {
     width: 100%;
     margin-top: 10px;
-    // padding: 20px;
     box-sizing: border-box;
-    // background: #f5f5f5;
   }
 }
 </style>

src/router/index.js

@@ -114,31 +114,31 @@ const router = new Router({
           path: '/help/commonProblem',
           name: 'commonProblem',
           title: '常见问题',
-          component: () => import('../components/help.vue')
+          component: () => import('../components/help/help.vue')
         },
         {
           path: '/help/customerService',
           name: 'customerService',
-          title: '常见问题',
-          component: () => import('../components/customerService.vue')
+          title: '客服中心',
+          component: () => import('../components/help/customerService.vue')
         },
         {
           path: '/help/download',
           name: 'download',
           title: '下载中心',
-          component: () => import('../components/downloadCenter.vue')
+          component: () => import('../components/help/downloadCenter.vue')
         },
         {
           path: '/help/feedback',
           name: 'feedback',
           title: '意见反馈',
-          component: () => import('../components/feedback.vue')
+          component: () => import('../components/help/feedback.vue')
         },
         {
           path: '/help/about',
           name: 'about',
           title: '关于我们',
-          component: () => import('../components/about.vue')
+          component: () => import('../components/help/about.vue')
         },
       ]
     },