Ver código fonte

✨ feat(【drp-SPD售后问题收集】): 首页、问题反馈、修改信息

002390 1 ano atrás
pai
commit
fc2505c4c1

+ 30 - 22
public/index.html

@@ -1,15 +1,18 @@
 <!DOCTYPE html>
 <html>
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-    <meta name="renderer" content="webkit">
-    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <!-- <title><%= webpackConfig.name %></title> -->
-    <title>德荣资源平台</title>
-    <!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]-->
-	  <style>
+
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+  <meta name="renderer" content="webkit">
+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
+  <!-- 唤起拨号 -->
+  <meta name="format-detection" content="telephone=yes" />
+  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+  <!-- <title><%= webpackConfig.name %></title> -->
+  <title>德荣资源平台</title>
+  <!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]-->
+  <style>
     html,
     body,
     #app {
@@ -17,6 +20,7 @@
       margin: 0px;
       padding: 0px;
     }
+
     .chromeframe {
       margin: 0.2em 0;
       background: #ccc;
@@ -93,6 +97,7 @@
         -ms-transform: rotate(0deg);
         transform: rotate(0deg);
       }
+
       100% {
         -webkit-transform: rotate(360deg);
         -ms-transform: rotate(360deg);
@@ -106,6 +111,7 @@
         -ms-transform: rotate(0deg);
         transform: rotate(0deg);
       }
+
       100% {
         -webkit-transform: rotate(360deg);
         -ms-transform: rotate(360deg);
@@ -195,15 +201,17 @@
       opacity: 0.5;
     }
   </style>
-  </head>
-  <body>
-    <div id="app">
-	    <div id="loader-wrapper">
-		    <div id="loader"></div>
-		    <div class="loader-section section-left"></div>
-		    <div class="loader-section section-right"></div>
-		    <div class="load_title">正在加载系统资源,请耐心等待</div>
-        </div>
-	</div>
-  </body>
-</html>
+</head>
+
+<body>
+  <div id="app">
+    <div id="loader-wrapper">
+      <div id="loader"></div>
+      <div class="loader-section section-left"></div>
+      <div class="loader-section section-right"></div>
+      <div class="load_title">正在加载系统资源,请耐心等待</div>
+    </div>
+  </div>
+</body>
+
+</html>

+ 3 - 2
src/main.js

@@ -74,7 +74,7 @@ import onlyNumber from '@/views/business/ehr/directive/el-input';
 // 引入和风天气图标
 import 'qweather-icons/font/qweather-icons.css'
 
-import { NavBar, Form, Field, Button } from "vant";
+import { NavBar, Form, Field, Button, ActionSheet, Cell, Sticky, Uploader } from "vant";
 
 // 全局方法挂载
 Vue.prototype.getDicts = getDicts;
@@ -117,7 +117,8 @@ Vue.use(VXETable)
 Vue.use(horizontalScroll);//底部横拉条
 DictData.install();
 
-Vue.use(NavBar).use(Field).use(Form).use(Button)
+Vue.use(NavBar).use(Field).use(Form).use(Button).use(ActionSheet)
+  .use(Cell).use(Sticky).use(Uploader)
 
 // el-table无限滚动解决页面渲染卡死
 // Vue.directive("myscroll", {

+ 19 - 4
src/router/index.js

@@ -295,10 +295,25 @@ export const constantRoutes = [
     component: () => import('@/views/business/as/after-sales/user/login'),
     hidden: true,
   },
+  // 问题反馈
   {
-    path: '/after-sales/bindingInfo',
-    name: "BindingInfo",
-    component: () => import('@/views/business/as/after-sales/user/bindingInfo'),
+    path: '/after-sales/feedback',
+    name: "Feedback",
+    component: () => import('@/views/business/as/after-sales/feedback/index'),
+    hidden: true,
+  },
+  // 进度查询
+  {
+    path: '/after-sales/progress',
+    name: "Progress",
+    component: () => import('@/views/business/as/after-sales/progress/index'),
+    hidden: true,
+  },
+  // 修改资料
+  {
+    path: '/after-sales/updateInfo',
+    name: "UpdateInfo",
+    component: () => import('@/views/business/as/after-sales/user/index'),
     hidden: true,
   },
 ]
@@ -396,7 +411,7 @@ const router = new Router({
 
 router.beforeEach((to, from, next) => {
 
-  let saleRouter = ["afterSales", "asLogin", "BindingInfo",]
+  let saleRouter = ["afterSales", "asLogin", "Feedback", "Progress", "UpdateInfo"]
 
   let isFind = saleRouter.findIndex(item => item === to.name);
   if (isFind !== -1) {

+ 38 - 0
src/views/business/as/after-sales/columns.js

@@ -0,0 +1,38 @@
+const Columns = [
+  {
+    key: "BasicSevice",
+    icon: require("./images/service.png"),
+    title: "基础服务",
+    items: [
+      {
+        key: "Feedback",
+        title: "问题反馈",
+        icon: require("./images/problem.png"),
+      },
+      {
+        key: "Progress",
+        title: "进度查询",
+        icon: require("./images/progres.png"),
+      }
+    ]
+  },
+  {
+    key: "PersonalInfo",
+    icon: require("./images/user.png"),
+    title: "个人信息",
+    items: [
+      {
+        key: "UpdateInfo",
+        title: "修改资料",
+        icon: require("./images/edit.png"),
+      },
+    ]
+  },
+  {
+    key: "ContactUs",
+    icon: require("./images/contact.png"),
+    title: "联系我们",
+  },
+]
+
+export default Columns

+ 68 - 0
src/views/business/as/after-sales/components/basic-card/index.vue

@@ -0,0 +1,68 @@
+<!-- 基础卡片 -->
+
+<script>
+export default {
+  name: "BasicCard",
+  props: {
+    columns: {
+      type: Object,
+      default: () => {},
+    },
+  },
+  data() {
+    return {};
+  },
+  methods: {
+    useSeiver(prop) {
+      this.$router.push({ name: `${prop.key}` });
+    },
+  },
+  created() {},
+};
+</script>
+
+<template>
+  <el-card
+    class="box-card"
+    shadow="never"
+    style="background-color: #fff; margin-bottom: 12px"
+  >
+    <div style="margin-bottom: 16px">
+      <p style="display: flex; align-items: center; margin: 0">
+        <el-image
+          style="width: 20px; height: 20px; border-radius: 10px"
+          :src="columns.icon"
+          fit="contain"
+          lazy
+        ></el-image>
+        <span style="padding: 0 10px; font-weight: 600">{{
+          columns.title
+        }}</span>
+      </p>
+    </div>
+    <slot :name="columns.key" :columns="columns">
+      <el-row>
+        <template v-for="(op, index) in columns.items">
+          <el-col
+            :span="12"
+            :key="index"
+            style="display: flex; flex-direction: column; align-items: center"
+          >
+            <el-image
+              style="width: 45px; height: 45px; border-radius: 25px"
+              :src="op.icon"
+              fit="contain"
+              @click="useSeiver(op)"
+              lazy
+            ></el-image>
+            <p style="margin-bottom: 0" @click="useSeiver(op)">
+              {{ op.title }}
+            </p>
+          </el-col>
+        </template>
+      </el-row>
+    </slot>
+  </el-card>
+</template>
+
+<style scoped lang="scss"></style>

+ 32 - 0
src/views/business/as/after-sales/components/image-upload/index.vue

@@ -0,0 +1,32 @@
+<!-- 图片上传 -->
+<script>
+export default {
+  name: "ImageUpload",
+  props: {
+    value: [String, Object, Array],
+  },
+  data() {
+    return {
+      fileList: [],
+    };
+  },
+  methods: {
+    afterRead(file) {
+      console.log(file, "file");
+    },
+    useDelete() {},
+  },
+  created() {},
+};
+</script>
+
+<template>
+  <div class="upload-image">
+    <van-uploader
+      v-model="fileList"
+      multiple
+      :after-read="afterRead"
+      @delete="useDelete"
+    />
+  </div>
+</template>

+ 42 - 3
src/views/business/as/after-sales/contact-us/index.vue

@@ -3,13 +3,52 @@
 export default {
   name: "contactUs",
   data() {
-    return {};
+    return {
+      show: false,
+      actions: [
+        { name: "拨号", key: "call" },
+        { name: "复制", key: "copy" },
+      ],
+    };
+  },
+  methods: {
+    onSelect({ key, name }) {
+      this.show = false;
+      if (key === "call") {
+        // window.location.href = "tel:18973094426";
+        return;
+      }
+      if (key === "copy") {
+        return;
+      }
+    },
+    onCancel() {},
   },
-  methods: {},
   created() {},
 };
 </script>
 
 <template>
-  <div>联系我们</div>
+  <div>
+    <van-cell
+      is-link
+      title="热线电话40080000"
+      value="8:00-22:00"
+      @click="show = true"
+    />
+    <van-action-sheet
+      v-model="show"
+      :actions="actions"
+      cancel-text="取消"
+      close-on-click-action
+      @cancel="onCancel"
+      @select="onSelect"
+    />
+  </div>
 </template>
+
+<style scope lang="scss">
+.van-cell {
+  background-color: #f5f5f5;
+}
+</style>

+ 48 - 0
src/views/business/as/after-sales/feedback/columns.js

@@ -0,0 +1,48 @@
+export default function useColumns() {
+  const userColumns = [
+    {
+      item: { key: "questioner", title: "用户姓名", },
+      attr: {
+        is: "el-input",
+      }
+    },
+    {
+      item: { key: "roomInformation", title: "用户科室", },
+      attr: {
+        is: "el-input",
+      }
+    },
+    {
+      item: { key: "questionerWay", title: "联系方式", },
+      attr: {
+        is: "el-input",
+      }
+    },
+
+  ];
+
+  const problemColumns = [
+    {
+      item: { key: "problemType", title: "问题类型", },
+      attr: {
+        is: "el-select",
+      }
+    },
+    {
+      item: { key: "problemDescription", title: "问题描述", },
+      attr: {
+        is: "el-input",
+        rows: 5,
+        type: "textarea",
+        placeholder: "请输入内容",
+      }
+    },
+    // {
+    //   item: { key: "", title: "问题图片", },
+    //   attr: {
+    //     is: "el-input",
+    //   }
+    // },
+  ];
+  return { userColumns, problemColumns };
+}

+ 111 - 3
src/views/business/as/after-sales/feedback/index.vue

@@ -1,15 +1,123 @@
 <!-- 问题反馈 -->
 <script>
+import useColumns from "./columns";
 export default {
   name: "Feedback",
+  components: {
+    ImageUpload: () => import("../components/image-upload/index.vue"),
+  },
   data() {
-    return {};
+    const { userColumns, problemColumns } = useColumns();
+
+    const problemInfo = this.$init.params([...userColumns, ...problemColumns]);
+    return {
+      params: {
+        problemInfo: {
+          ...problemInfo,
+          projectSource: "测试项目",
+        },
+        files: [],
+      },
+      userColumns,
+      size: "mini",
+      loading: false,
+      problemColumns,
+      title: "问题反馈",
+    };
+  },
+  methods: {
+    useBack() {
+      this.$router.go(-1);
+    },
   },
-  methods: {},
   created() {},
 };
 </script>
 
 <template>
-  <div>问题反馈</div>
+  <div class="Feedback" v-loading="loading">
+    <van-sticky style="width: 100%">
+      <van-nav-bar
+        :title="title"
+        left-text="返回"
+        left-arrow
+        @click-left="useBack"
+        style="width: 100%"
+      />
+    </van-sticky>
+
+    <div style="width: 100%; padding: 16px">
+      <el-form
+        ref="userInfo"
+        :model="params.problemInfo"
+        label-width="auto"
+        :size="size"
+      >
+        <!-- 基本信息 -->
+        <el-row>
+          <el-form-item label="项目名称">
+            <span>{{ params.problemInfo.projectSource }}</span>
+          </el-form-item>
+          <el-form-item
+            v-for="({ item, attr }, index) in userColumns"
+            :label="item.title"
+          >
+            <component
+              :is="attr.is"
+              v-bind="attr"
+              v-model="params.problemInfo[item.key]"
+            ></component>
+          </el-form-item>
+        </el-row>
+
+        <!-- 问题信息 -->
+        <el-row>
+          <el-form-item
+            v-for="({ item, attr }, index) in problemColumns"
+            :label="item.title"
+          >
+            <component
+              :is="attr.is"
+              v-bind="attr"
+              v-model="params.problemInfo[item.key]"
+              style="width: 100%"
+            ></component>
+          </el-form-item>
+          <el-form-item label="问题图片">
+            <image-upload v-model="params.files" :size="size"></image-upload>
+          </el-form-item>
+        </el-row>
+      </el-form>
+    </div>
+
+    <el-button type="primary" round class="stickyBtn" :size="size"
+      >提 交</el-button
+    >
+  </div>
 </template>
+
+<style lang="scss" scoped>
+.Feedback {
+  width: 100%;
+  height: 100vh;
+  overflow-y: auto;
+  overflow-x: hidden;
+  background-color: #f7f7f7;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  position: relative;
+}
+.el-row {
+  width: 100%;
+  padding: 16px;
+  box-sizing: border-box;
+  background-color: #fff;
+  margin-bottom: 12px;
+}
+.stickyBtn {
+  width: 45%;
+  position: absolute;
+  bottom: 5vh;
+}
+</style>

+ 25 - 10
src/views/business/as/after-sales/index.vue

@@ -1,12 +1,19 @@
 <!-- SPD售后问题收集 -->
-<!-- 登录 -->
+<!-- 首页 -->
 <script>
+import Columns from "./columns";
 export default {
   name: "afterSales",
-  components: {},
+  components: {
+    ContactUs: () => import("./contact-us/index.vue"),
+    BasicCard: () => import("./components/basic-card/index.vue"),
+  },
   data() {
     return {
+      Columns,
       title: "德荣售后平台",
+      fit: "contain",
+      imgUrl: require("./images/sale-background.jpg"),
     };
   },
   methods: {
@@ -28,20 +35,28 @@ export default {
       'align-items': 'center',
     }"
   >
-    <van-nav-bar
-      :title="title"
-      left-text="返回"
-      left-arrow
-      @click-left="useBack"
-      style="width: 100%"
-    />
+    <van-sticky style="width: 100%">
+      <van-nav-bar :title="title" style="width: 100%" />
+      <!-- left-text="返回"
+        left-arrow
+        @click-left="useBack" -->
+    </van-sticky>
+
+    <el-image style="width: 100%" :src="imgUrl" :fit="fit" lazy></el-image>
+
+    <template v-for="(col, index) in Columns">
+      <basic-card :columns="col" :key="index">
+        <template slot="ContactUs" slot-scope="scope">
+          <contact-us></contact-us>
+        </template>
+      </basic-card>
+    </template>
   </el-card>
 </template>
 
 <style scoped lang="scss">
 .el-card {
   width: 100%;
-  height: 100vh;
   background-color: #f7f7f7;
 }
 </style>

+ 0 - 15
src/views/business/as/after-sales/progres/index.vue

@@ -1,15 +0,0 @@
-<!-- 进度查询-列表 -->
-<script>
-export default {
-  name: "Progres",
-  data() {
-    return {};
-  },
-  methods: {},
-  created() {},
-};
-</script>
-
-<template>
-  <div>进度查询-列表</div>
-</template>

+ 0 - 0
src/views/business/as/after-sales/progres/details.vue → src/views/business/as/after-sales/progress/details.vue


+ 62 - 0
src/views/business/as/after-sales/progress/index.vue

@@ -0,0 +1,62 @@
+<!-- 进度查询-列表 -->
+<script>
+export default {
+  name: "Progress",
+  data() {
+    return {
+      loading: false,
+      title: "进度查询",
+    };
+  },
+  methods: {
+    useBack() {
+      this.$router.go(-1);
+    },
+  },
+  created() {},
+};
+</script>
+
+<template>
+  <el-card
+    v-loading="loading"
+    shadow="never"
+    :body-style="{
+      height: '100%',
+      padding: 0,
+      display: 'flex',
+      'flex-direction': 'column',
+      'align-items': 'center',
+    }"
+  >
+    <van-nav-bar
+      :title="title"
+      left-text="返回"
+      left-arrow
+      @click-left="useBack"
+      style="width: 100%"
+    />
+
+    <el-row>
+      <el-col :span="24"> </el-col>
+    </el-row>
+  </el-card>
+</template>
+
+<style scoped lang="scss">
+.el-card {
+  width: 100%;
+  height: 100vh;
+  overflow-y: auto;
+  overflow-x: hidden;
+  background-color: #f7f7f7;
+}
+.el-row {
+  width: 100%;
+  padding: 16px;
+  box-sizing: border-box;
+  .el-col {
+    margin-bottom: 16px;
+  }
+}
+</style>

+ 45 - 29
src/views/business/as/after-sales/user/bindingInfo.vue

@@ -2,12 +2,19 @@
 <script>
 export default {
   name: "BindingInfo",
+  props: {
+    value: {
+      type: Object,
+    },
+  },
   data() {
     return {
-      size: "small",
+      width: "100%",
+      loading: false,
+      visible: false,
       formData: {
-        name: "",
-        departments: "",
+        name: "cs",
+        departments: "cs",
       },
       rules: {
         name: [{ required: true, message: "请输入科室名称", trigger: "blur" }],
@@ -18,15 +25,17 @@ export default {
     };
   },
   methods: {
-    useBack() {
-      this.$router.push({ name: "asLogin" });
+    setVisible(prop) {
+      this.visible = prop;
     },
+    beforeOpen() {},
     useConfirm() {},
     useSubmit(prop) {
       this.$refs[prop].validate(async (valid) => {
         if (valid) {
           try {
             console.log(this.formData, "formData");
+            console.log(this.$props.value, "value");
             this.$router.push({ name: "afterSales" });
           } catch (error) {}
         } else {
@@ -35,34 +44,42 @@ export default {
         }
       });
     },
+    hide() {
+      this.visible = false;
+    },
   },
   created() {},
 };
 </script>
 
 <template>
-  <el-card
-    shadow="never"
-    :body-style="{
-      height: '100%',
-      padding: 0,
-      display: 'flex',
-      'flex-direction': 'column',
-      'align-items': 'center',
-    }"
+  <el-drawer
+    v-bind="$attrs"
+    v-on="$listeners"
+    :size="width"
+    :visible.sync="visible"
+    destroy-on-close
+    :show-close="false"
+    @close="hide"
+    @open="beforeOpen"
+    v-loading="loading"
   >
-    <van-nav-bar
-      left-text="返回"
-      right-text="保存"
-      left-arrow
-      @click-left="useBack"
-      @click-right="useSubmit('form')"
-      style="width: 100%"
-    />
-
+    <div
+      slot="title"
+      style="display: flex; justify-content: space-between; align-items: center"
+    >
+      <van-nav-bar
+        left-text="返回"
+        right-text="保存"
+        left-arrow
+        @click-left="hide"
+        @click-right="useSubmit('form')"
+        style="width: 100%"
+      />
+    </div>
     <el-form
       :model="formData"
-      :size="size"
+      :size="$attrs.size"
       :rules="rules"
       ref="form"
       label-width="80px"
@@ -88,14 +105,13 @@ export default {
         >
       </el-form-item> -->
     </el-form>
-  </el-card>
+  </el-drawer>
 </template>
 
 <style scoped lang="scss">
-.el-card {
-  width: 100%;
-  height: 100vh;
-  padding: 0 0px 20px;
+::v-deep .el-drawer__header {
+  padding: 0 !important;
+  margin: 0 !important;
 }
 
 .el-form {

+ 23 - 0
src/views/business/as/after-sales/user/columns.js

@@ -0,0 +1,23 @@
+export default function useColumns() {
+  const Columns = [
+    {
+      item: { key: "userName", title: "您的姓名", },
+      attr: {
+        is: "el-input",
+      }
+    },
+    {
+      item: { key: "userRoom", title: "您的科室", },
+      attr: {
+        is: "el-input",
+      }
+    },
+    {
+      item: { key: "userPhone", title: "登录手机", },
+      attr: {
+        is: "el-input",
+      }
+    },
+  ]
+  return { Columns }
+}

+ 75 - 3
src/views/business/as/after-sales/user/index.vue

@@ -1,15 +1,87 @@
 <!-- 用户信息 -->
 <script>
+import useColumns from "./columns";
 export default {
   name: "asUser",
   data() {
-    return {};
+    const { Columns } = useColumns();
+    const params = this.$init.params(Columns);
+    return {
+      Columns,
+      size: "mini",
+      loading: false,
+      title: "进度查询",
+      params,
+    };
+  },
+  methods: {
+    useBack() {
+      this.$router.go(-1);
+    },
   },
-  methods: {},
   created() {},
 };
 </script>
 
 <template>
-  <div>用户信息</div>
+  <el-card
+    v-loading="loading"
+    shadow="never"
+    :body-style="{
+      height: '100%',
+      padding: 0,
+      display: 'flex',
+      'flex-direction': 'column',
+      'align-items': 'center',
+    }"
+  >
+    <van-nav-bar
+      :title="title"
+      left-text="返回"
+      left-arrow
+      @click-left="useBack"
+      style="width: 100%"
+    />
+
+    <div style="width: 100%; padding: 16px">
+      <el-form ref="userInfo" :model="params" label-width="auto" :size="size">
+        <el-form-item
+          v-for="({ item, attr }, index) in Columns"
+          :label="item.title"
+        >
+          <component
+            :is="attr.is"
+            v-bind="attr"
+            v-model="params[item.key]"
+          ></component>
+        </el-form-item>
+      </el-form>
+    </div>
+
+    <el-button type="primary" round class="stickyBtn" :size="size"
+      >提 交</el-button
+    >
+  </el-card>
 </template>
+
+<style scoped lang="scss">
+.el-card {
+  width: 100%;
+  height: 100vh;
+  overflow-y: auto;
+  overflow-x: hidden;
+  background-color: #f7f7f7;
+  position: relative;
+}
+.el-form {
+  width: 100%;
+  padding: 16px;
+  box-sizing: border-box;
+  background-color: #fff;
+}
+.stickyBtn {
+  width: 45%;
+  position: absolute;
+  bottom: 10vh;
+}
+</style>

+ 13 - 2
src/views/business/as/after-sales/user/login.vue

@@ -2,6 +2,9 @@
 <script>
 export default {
   name: "asLogin",
+  components: {
+    BindingInfo: () => import("./bindingInfo.vue"),
+  },
   data() {
     return {
       title: "登 录",
@@ -10,7 +13,7 @@ export default {
       imgUrl: require("../images/logo.jpg"),
       formData: {
         name: "测试项目",
-        phone: "",
+        phone: "13520547701",
       },
       rules: {
         name: [{ required: true, message: "请输入项目名称", trigger: "blur" }],
@@ -32,7 +35,9 @@ export default {
         if (valid) {
           try {
             console.log(this.formData, "formData");
-            this.$router.push({ name: "BindingInfo" });
+            let { setVisible } = this.$refs.BindingInfo;
+            setVisible(true);
+            // this.$router.push({ name: "BindingInfo" });
           } catch (error) {}
         } else {
           console.log("error submit!!");
@@ -94,6 +99,12 @@ export default {
         >
       </el-form-item>
     </el-form>
+
+    <binding-info
+      v-model="formData"
+      ref="BindingInfo"
+      :size="size"
+    ></binding-info>
   </el-card>
 </template>