联系客服

src/api/userManagement/index.js

@@ -43,3 +43,14 @@ export function userAddressList(query) {
     data: query
   });
 }
+
+/**
+ * 联系客服-意见反馈-订单投诉列表
+ */
+export function feedbackInfoList(query) {
+  return fetch({
+    url: '/api/website/feedbackInfo/getAll',
+    method: 'get',
+    params: query
+  });
+}

src/router/index.js

@@ -180,4 +180,29 @@ export const asyncRouterMap = [{
     authority: 'aboutUs',
   }],
 
+},
+{
+  path: '/contactService',
+  component: Layout,
+  name: '联系我们',
+  icon: 'setting',
+  authority: 'contactService',
+  children: [{
+    path: 'contact',
+    component: _import('contactService/contact'),
+    name: '联系客服',
+    authority: 'contact'
+  },
+  {
+    path: 'feedback',
+    component: _import('contactService/feedback'),
+    name: '意见反馈',
+    authority: 'feedback'
+  },
+  {
+    path: 'complaint',
+    component: _import('contactService/complaint'),
+    name: '意见反馈',
+    authority: 'complaint'
+  }]
 }];

src/views/contactService/complaint.vue

+<template>
+  <div class="user-list">
+    <!-- 头部 -->
+    <div class="head">
+      <div>订单投诉</div>
+    </div>
+    <!-- 主体 -->
+    <div class="app-container calendar-list-container">
+      <!-- 数据列表 -->
+      <el-table :data="list" v-loading.body="listLoading" border fit highlight-current-row style="width: 100%">
+        <el-table-column align="center" label="用户ID" width="120">
+          <template slot-scope="scope">
+            {{scope.row.userId}}
+          </template>
+        </el-table-column>
+        <el-table-column align="center" label="姓名" prop="name"></el-table-column>
+        <el-table-column align="center" label="电话" prop="phone"></el-table-column>
+        <el-table-column align="center" label="订单编号" prop="orderNo"></el-table-column>
+        <el-table-column align="center" label="创建时间">
+          <template slot-scope="scope">
+            {{scope.row.crtTime}}
+          </template>
+        </el-table-column>
+        <el-table-column align="center" label="内容">
+          <template slot-scope="scope">
+            {{ scope.row.content}}
+          </template>
+        </el-table-column>
+        <!--        <el-table-column align="center" label="状态">-->
+        <!--          <template slot-scope="scope">-->
+        <!--            &lt;!&ndash; 根据状态获取对应中文 &ndash;&gt;-->
+        <!--            {{ getStatus(scope.row.status) }}-->
+        <!--          </template>-->
+        <!--        </el-table-column>-->
+      </el-table>
+      <div v-show="!listLoading" class="pagination-container">
+        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
+                       :current-page.sync="listQuery.page" :page-sizes="[10,20,30, 50]" :page-size="listQuery.limit"
+                       layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
+      </div>
+    </div>
+  </div>
+</template>
+<script type="javascript">
+  import { feedbackInfoList } from 'api/userManagement/index'
+  import {timestamp2Date} from '@/utils/dateUtils';
+  export default {
+    name: 'userManagement',
+    computed:{
+      getStatus(status) {
+        return (status) => {
+          let a = ""
+          switch(status) {
+            case 0: a = '启用'; break;
+            case 1: a = '禁用'; break;
+            default: a = '未知';break
+          }
+          return a
+        }
+      },
+    },
+    data() {
+      return {
+        times: [],
+        listLoading: false,
+        list: [], // 用户列表
+        total: 0, // 总条数
+        listQuery: {
+          page: 1,
+          limit: 20,
+          type: 3 //1、联系客服，2、意见反馈，3、订单反馈
+        },
+        invoiceDialogVisible: false, // 查看发票弹窗
+        addressDialogVisible: false // 查看地址弹窗
+      }
+    },
+    created() {
+      this.getList()
+    },
+    methods:{
+      /**
+       * 搜索
+       */
+      handleSearch(){
+        this.listQuery.page = 1
+        this.getList() // 获取用户列表
+      },
+      /**
+       * 查看发票-返回界面
+       */
+      invoiceEvent(){
+        this.invoiceDialogVisible = false
+      },
+      /**
+       * 查看地址-返回界面
+       */
+      addressEvent(){
+        this.addressDialogVisible = false
+      },
+      /**
+       * 启用、禁用
+       */
+      changeStatus(row){
+        this.$confirm("是否继续?", "提示", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning"
+        }).then(() => {
+          // 0、启用，1、禁用
+          updateStatus({id: row.userId, status: row.status == 1?0:1}).then((response) => {
+            if(response.status == 200){
+              this.$notify({
+                title: "成功",
+                message: "操作成功",
+                type: "success",
+                duration: 2000
+              });
+              this.getList()
+            } else {
+              this.$notify({
+                title: '失败',
+                message: response.message,
+                type: 'error',
+                duration: 2000
+              })
+            }
+          });
+        }).catch(()=>{})
+      },
+      /**
+       * 查看发票
+       */
+      handleInvoice(){
+        this.invoiceDialogVisible = true
+      },
+      /**
+       * 查看地址
+       */
+      handleAddress(){
+        this.addressDialogVisible = true
+      },
+      /**
+       * 清除搜索
+       */
+      handleCleanSearch(){
+        this.listQuery = {
+          page: 1,
+          limit: 20,
+          mobile: undefined, // 手机号
+          realName: undefined, // 真实姓名
+          userId: undefined, // 用户id
+          status: undefined, // 0：启用  1：禁用
+          registrationTimeBegin: undefined, // 开始时间
+          registrationTimeEnd: undefined // 结束时间
+        }
+        this.times = []
+        this.getList() // 获取用户列表
+      },
+      /**
+       * 获取用户列表
+       */
+      getList(){
+        this.listLoading = true
+        feedbackInfoList(this.listQuery).then(response => {
+          if(response.status == 200){
+            response.data.data.map(function(item){
+              item.crtTimeStr = timestamp2Date(item.createTime);
+            })
+            this.list = response.data.data;
+            this.total = response.data.totalCount;
+            this.listLoading = false;
+          } else {
+            this.listLoading = false
+            this.$notify({
+              title: '失败',
+              message: response.message,
+              type: 'error',
+              duration: 2000
+            })
+          }
+        })
+      },
+      handleSizeChange(val) {
+        this.listQuery.limit = val;
+        this.getList();
+      },
+      handleCurrentChange(val) {
+        this.listQuery.page = val;
+        this.getList();
+      }
+    }
+  }
+</script>
+<style lang="scss">
+  .user-list {
+    .head {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 8px 20px;
+      width: 100%;
+      border-bottom: 1px solid #e6e6e6;
+      height: 57px;
+    }
+  }
+</style>

src/views/contactService/contact.vue

+<template>
+  <div class="user-list">
+    <!-- 头部 -->
+    <div class="head">
+      <div>联系客服</div>
+    </div>
+    <!-- 主体 -->
+    <div class="app-container calendar-list-container">
+      <!-- 数据列表 -->
+      <el-table :data="list" v-loading.body="listLoading" border fit highlight-current-row style="width: 100%">
+        <el-table-column align="center" label="用户ID" width="120">
+          <template slot-scope="scope">
+            {{scope.row.userId}}
+          </template>
+        </el-table-column>
+        <el-table-column align="center" label="姓名" prop="name"></el-table-column>
+        <el-table-column align="center" label="电话" prop="phone"></el-table-column>
+        <el-table-column align="center" label="创建时间">
+          <template slot-scope="scope">
+            {{scope.row.crtTime}}
+          </template>
+        </el-table-column>
+        <el-table-column align="center" label="内容">
+          <template slot-scope="scope">
+            {{ scope.row.content}}
+          </template>
+        </el-table-column>
+<!--        <el-table-column align="center" label="状态">-->
+<!--          <template slot-scope="scope">-->
+<!--            &lt;!&ndash; 根据状态获取对应中文 &ndash;&gt;-->
+<!--            {{ getStatus(scope.row.status) }}-->
+<!--          </template>-->
+<!--        </el-table-column>-->
+      </el-table>
+      <div v-show="!listLoading" class="pagination-container">
+        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
+                       :current-page.sync="listQuery.page" :page-sizes="[10,20,30, 50]" :page-size="listQuery.limit"
+                       layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
+      </div>
+    </div>
+  </div>
+</template>
+<script type="javascript">
+  import { feedbackInfoList } from 'api/userManagement/index'
+  import {timestamp2Date} from '@/utils/dateUtils';
+  export default {
+    name: 'userManagement',
+    computed:{
+      getStatus(status) {
+        return (status) => {
+          let a = ""
+          switch(status) {
+            case 0: a = '启用'; break;
+            case 1: a = '禁用'; break;
+            default: a = '未知';break
+          }
+          return a
+        }
+      },
+    },
+    data() {
+      return {
+        times: [],
+        listLoading: false,
+        list: [], // 用户列表
+        total: 0, // 总条数
+        listQuery: {
+          page: 1,
+          limit: 20,
+          type: 1 //1、联系客服，2、意见反馈，3、订单反馈
+        },
+        invoiceDialogVisible: false, // 查看发票弹窗
+        addressDialogVisible: false // 查看地址弹窗
+      }
+    },
+    created() {
+      this.getList()
+    },
+    methods:{
+      /**
+       * 搜索
+       */
+      handleSearch(){
+        this.listQuery.page = 1
+        this.getList() // 获取用户列表
+      },
+      /**
+       * 查看发票-返回界面
+       */
+      invoiceEvent(){
+        this.invoiceDialogVisible = false
+      },
+      /**
+       * 查看地址-返回界面
+       */
+      addressEvent(){
+        this.addressDialogVisible = false
+      },
+      /**
+       * 启用、禁用
+       */
+      changeStatus(row){
+        this.$confirm("是否继续?", "提示", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning"
+        }).then(() => {
+          // 0、启用，1、禁用
+          updateStatus({id: row.userId, status: row.status == 1?0:1}).then((response) => {
+            if(response.status == 200){
+              this.$notify({
+                title: "成功",
+                message: "操作成功",
+                type: "success",
+                duration: 2000
+              });
+              this.getList()
+            } else {
+              this.$notify({
+                title: '失败',
+                message: response.message,
+                type: 'error',
+                duration: 2000
+              })
+            }
+          });
+        }).catch(()=>{})
+      },
+      /**
+       * 查看发票
+       */
+      handleInvoice(){
+        this.invoiceDialogVisible = true
+      },
+      /**
+       * 查看地址
+       */
+      handleAddress(){
+        this.addressDialogVisible = true
+      },
+      /**
+       * 清除搜索
+       */
+      handleCleanSearch(){
+        this.listQuery = {
+          page: 1,
+          limit: 20,
+          mobile: undefined, // 手机号
+          realName: undefined, // 真实姓名
+          userId: undefined, // 用户id
+          status: undefined, // 0：启用  1：禁用
+          registrationTimeBegin: undefined, // 开始时间
+          registrationTimeEnd: undefined // 结束时间
+        }
+        this.times = []
+        this.getList() // 获取用户列表
+      },
+      /**
+       * 获取用户列表
+       */
+      getList(){
+        this.listLoading = true
+        feedbackInfoList(this.listQuery).then(response => {
+          if(response.status == 200){
+            response.data.data.map(function(item){
+              item.crtTimeStr = timestamp2Date(item.createTime);
+            })
+            this.list = response.data.data;
+            this.total = response.data.totalCount;
+            this.listLoading = false;
+          } else {
+            this.listLoading = false
+            this.$notify({
+              title: '失败',
+              message: response.message,
+              type: 'error',
+              duration: 2000
+            })
+          }
+        })
+      },
+      handleSizeChange(val) {
+        this.listQuery.limit = val;
+        this.getList();
+      },
+      handleCurrentChange(val) {
+        this.listQuery.page = val;
+        this.getList();
+      }
+    }
+  }
+</script>
+<style lang="scss">
+  .user-list {
+    .head {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 8px 20px;
+      width: 100%;
+      border-bottom: 1px solid #e6e6e6;
+      height: 57px;
+    }
+  }
+</style>

src/views/contactService/feedback.vue

+<template>
+  <div class="user-list">
+    <!-- 头部 -->
+    <div class="head">
+      <div>意见反馈</div>
+    </div>
+    <!-- 主体 -->
+    <div class="app-container calendar-list-container">
+      <!-- 数据列表 -->
+      <el-table :data="list" v-loading.body="listLoading" border fit highlight-current-row style="width: 100%">
+        <el-table-column align="center" label="用户ID" width="120">
+          <template slot-scope="scope">
+            {{scope.row.userId}}
+          </template>
+        </el-table-column>
+        <el-table-column align="center" label="姓名" prop="name"></el-table-column>
+        <el-table-column align="center" label="电话" prop="phone"></el-table-column>
+        <el-table-column align="center" label="创建时间">
+          <template slot-scope="scope">
+            {{scope.row.crtTime}}
+          </template>
+        </el-table-column>
+        <el-table-column align="center" label="内容">
+          <template slot-scope="scope">
+            {{ scope.row.content}}
+          </template>
+        </el-table-column>
+        <!--        <el-table-column align="center" label="状态">-->
+        <!--          <template slot-scope="scope">-->
+        <!--            &lt;!&ndash; 根据状态获取对应中文 &ndash;&gt;-->
+        <!--            {{ getStatus(scope.row.status) }}-->
+        <!--          </template>-->
+        <!--        </el-table-column>-->
+      </el-table>
+      <div v-show="!listLoading" class="pagination-container">
+        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
+                       :current-page.sync="listQuery.page" :page-sizes="[10,20,30, 50]" :page-size="listQuery.limit"
+                       layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
+      </div>
+    </div>
+  </div>
+</template>
+<script type="javascript">
+  import { feedbackInfoList } from 'api/userManagement/index'
+  import {timestamp2Date} from '@/utils/dateUtils';
+  export default {
+    name: 'userManagement',
+    computed:{
+      getStatus(status) {
+        return (status) => {
+          let a = ""
+          switch(status) {
+            case 0: a = '启用'; break;
+            case 1: a = '禁用'; break;
+            default: a = '未知';break
+          }
+          return a
+        }
+      },
+    },
+    data() {
+      return {
+        times: [],
+        listLoading: false,
+        list: [], // 用户列表
+        total: 0, // 总条数
+        listQuery: {
+          page: 1,
+          limit: 20,
+          type: 2 //1、联系客服，2、意见反馈，3、订单反馈
+        },
+        invoiceDialogVisible: false, // 查看发票弹窗
+        addressDialogVisible: false // 查看地址弹窗
+      }
+    },
+    created() {
+      this.getList()
+    },
+    methods:{
+      /**
+       * 搜索
+       */
+      handleSearch(){
+        this.listQuery.page = 1
+        this.getList() // 获取用户列表
+      },
+      /**
+       * 查看发票-返回界面
+       */
+      invoiceEvent(){
+        this.invoiceDialogVisible = false
+      },
+      /**
+       * 查看地址-返回界面
+       */
+      addressEvent(){
+        this.addressDialogVisible = false
+      },
+      /**
+       * 启用、禁用
+       */
+      changeStatus(row){
+        this.$confirm("是否继续?", "提示", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning"
+        }).then(() => {
+          // 0、启用，1、禁用
+          updateStatus({id: row.userId, status: row.status == 1?0:1}).then((response) => {
+            if(response.status == 200){
+              this.$notify({
+                title: "成功",
+                message: "操作成功",
+                type: "success",
+                duration: 2000
+              });
+              this.getList()
+            } else {
+              this.$notify({
+                title: '失败',
+                message: response.message,
+                type: 'error',
+                duration: 2000
+              })
+            }
+          });
+        }).catch(()=>{})
+      },
+      /**
+       * 查看发票
+       */
+      handleInvoice(){
+        this.invoiceDialogVisible = true
+      },
+      /**
+       * 查看地址
+       */
+      handleAddress(){
+        this.addressDialogVisible = true
+      },
+      /**
+       * 清除搜索
+       */
+      handleCleanSearch(){
+        this.listQuery = {
+          page: 1,
+          limit: 20,
+          mobile: undefined, // 手机号
+          realName: undefined, // 真实姓名
+          userId: undefined, // 用户id
+          status: undefined, // 0：启用  1：禁用
+          registrationTimeBegin: undefined, // 开始时间
+          registrationTimeEnd: undefined // 结束时间
+        }
+        this.times = []
+        this.getList() // 获取用户列表
+      },
+      /**
+       * 获取用户列表
+       */
+      getList(){
+        this.listLoading = true
+        feedbackInfoList(this.listQuery).then(response => {
+          if(response.status == 200){
+            response.data.data.map(function(item){
+              item.crtTimeStr = timestamp2Date(item.createTime);
+            })
+            this.list = response.data.data;
+            this.total = response.data.totalCount;
+            this.listLoading = false;
+          } else {
+            this.listLoading = false
+            this.$notify({
+              title: '失败',
+              message: response.message,
+              type: 'error',
+              duration: 2000
+            })
+          }
+        })
+      },
+      handleSizeChange(val) {
+        this.listQuery.limit = val;
+        this.getList();
+      },
+      handleCurrentChange(val) {
+        this.listQuery.page = val;
+        this.getList();
+      }
+    }
+  }
+</script>
+<style lang="scss">
+  .user-list {
+    .head {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 8px 20px;
+      width: 100%;
+      border-bottom: 1px solid #e6e6e6;
+      height: 57px;
+    }
+  }
+</style>