✨ feat(【drp-spd-售后问题收集】): 售后问题收集移动端开发

babel.config.js

@@ -9,5 +9,6 @@ module.exports = {
       // This plugin can significantly increase the speed of hot updates, when you have a large number of pages.
       'plugins': ['dynamic-import-node']
     }
-  }
+  },
+
 }

package.json

@@ -63,6 +63,7 @@
     "screenfull": "5.0.2",
     "sortablejs": "1.10.2",
     "umy-ui": "^1.1.6",
+    "vant": "^2.12.48",
     "vue": "2.6.12",
     "vue-amap": "^0.5.10",
     "vue-count-to": "1.0.13",

src/main.js

@@ -13,6 +13,7 @@ import router from "./router";
 import directive from "./directive"; // directive
 import plugins from "./plugins"; // plugins
 import { download } from "@/utils/request";
+import 'vant/lib/index.css';
 
 // 时间格式化方法挂载
 import "@/views/marketing/utils/date";
@@ -73,6 +74,8 @@ import onlyNumber from '@/views/business/ehr/directive/el-input';
 // 引入和风天气图标
 import 'qweather-icons/font/qweather-icons.css'
 
+import { NavBar, Form, Field, Button } from "vant";
+
 // 全局方法挂载
 Vue.prototype.getDicts = getDicts;
 Vue.prototype.getConfigKey = getConfigKey;
@@ -114,6 +117,8 @@ Vue.use(VXETable)
 Vue.use(horizontalScroll);//底部横拉条
 DictData.install();
 
+Vue.use(NavBar).use(Field).use(Form).use(Button)
+
 // el-table无限滚动解决页面渲染卡死
 // Vue.directive("myscroll", {
 //   bind(el, bind, vnode) {

src/router/index.js

@@ -1,5 +1,7 @@
 import Vue from 'vue'
 import Router from 'vue-router'
+import { isMobile } from "@/utils/index";
+import { Notification } from 'element-ui';
 
 Vue.use(Router)
 
@@ -264,8 +266,30 @@ export const constantRoutes = [
       keepAlive: true // 需要缓存
     }
   },
+
+  // SPD售后问题收集
+  {
+    path: '/after-sales/index',
+    name: "afterSales",
+    component: () => import('@/views/business/as/after-sales/index'),
+    hidden: true,
+  },
+  {
+    path: '/after-sales/login',
+    name: "asLogin",
+    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'),
+    hidden: true,
+  },
 ]
 
+
+
 // 动态路由，基于用户权限动态去加载
 export const dynamicRoutes = [
   {
@@ -346,9 +370,35 @@ Router.prototype.push = function push(location) {
   return routerPush.call(this, location).catch(err => err)
 }
 
-export default new Router({
+
+
+const router = new Router({
   base: process.env.VUE_APP_CONTEXT_PATH,
   mode: 'history', // 去掉url中的#
   scrollBehavior: () => ({ y: 0 }),
   routes: constantRoutes
 })
+
+router.beforeEach((to, from, next) => {
+
+  let saleRouter = ["afterSales", "asLogin", "BindingInfo",]
+
+  let isFind = saleRouter.findIndex(item => item === to.name);
+  if (isFind !== -1) {
+    if (!isMobile()) {
+      console.log("非移动端");
+      Notification.info({
+
+        title: "请使用移动端打开",
+
+        position: 'top-right'
+
+      })
+      return false;
+    }
+    next();
+  }
+  next();
+})
+
+export default router;

src/utils/index.js

@@ -5,12 +5,12 @@ import { parseTime } from './ruoyi'
  */
 export function formatDate(cellValue) {
   if (cellValue == null || cellValue == "") return "";
-  var date = new Date(cellValue) 
+  var date = new Date(cellValue)
   var year = date.getFullYear()
   var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
-  var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate() 
-  var hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours() 
-  var minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes() 
+  var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
+  var hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
+  var minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
   var seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
   return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds
 }
@@ -218,7 +218,7 @@ export function getTime(type) {
 export function debounce(func, wait, immediate) {
   let timeout, args, context, timestamp, result
 
-  const later = function() {
+  const later = function () {
     // 据上一次触发时间间隔
     const last = +new Date() - timestamp
 
@@ -235,7 +235,7 @@ export function debounce(func, wait, immediate) {
     }
   }
 
-  return function(...args) {
+  return function (...args) {
     context = this
     timestamp = +new Date()
     const callNow = immediate && !timeout
@@ -330,7 +330,7 @@ export function makeMap(str, expectsLowerCase) {
     ? val => map[val.toLowerCase()]
     : val => map[val]
 }
- 
+
 export const exportDefault = 'export default '
 
 export const beautifierConf = {
@@ -387,4 +387,8 @@ export function camelCase(str) {
 export function isNumberStr(str) {
   return /^[+-]?(0|([1-9]\d*))(\.\d+)?$/g.test(str)
 }
- 
+
+// 移动端
+export function isMobile() {
+  return navigator && /mobile/.test(navigator.userAgent.toLowerCase());
+}

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

@@ -0,0 +1,15 @@
+<!-- 联系我们 -->
+<script>
+export default {
+  name: "contactUs",
+  data() {
+    return {};
+  },
+  methods: {},
+  created() {},
+};
+</script>
+
+<template>
+  <div>联系我们</div>
+</template>

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

@@ -0,0 +1,15 @@
+<!-- 问题反馈 -->
+<script>
+export default {
+  name: "Feedback",
+  data() {
+    return {};
+  },
+  methods: {},
+  created() {},
+};
+</script>
+
+<template>
+  <div>问题反馈</div>
+</template>

src/views/business/as/after-sales/index.vue

@@ -0,0 +1,47 @@
+<!-- SPD售后问题收集 -->
+<!-- 登录 -->
+<script>
+export default {
+  name: "afterSales",
+  components: {},
+  data() {
+    return {
+      title: "德荣售后平台",
+    };
+  },
+  methods: {
+    useBack() {},
+  },
+
+  created() {},
+};
+</script>
+
+<template>
+  <el-card
+    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-card>
+</template>
+
+<style scoped lang="scss">
+.el-card {
+  width: 100%;
+  height: 100vh;
+  background-color: #f7f7f7;
+}
+</style>

src/views/business/as/after-sales/progres/details.vue

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

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

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

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

@@ -0,0 +1,112 @@
+<!-- 绑定用户信息 -->
+<script>
+export default {
+  name: "BindingInfo",
+  data() {
+    return {
+      size: "small",
+      formData: {
+        name: "",
+        departments: "",
+      },
+      rules: {
+        name: [{ required: true, message: "请输入科室名称", trigger: "blur" }],
+        departments: [
+          { required: true, message: "请输入姓名", trigger: "blur" },
+        ],
+      },
+    };
+  },
+  methods: {
+    useBack() {
+      this.$router.push({ name: "asLogin" });
+    },
+    useConfirm() {},
+    useSubmit(prop) {
+      this.$refs[prop].validate(async (valid) => {
+        if (valid) {
+          try {
+            console.log(this.formData, "formData");
+            this.$router.push({ name: "afterSales" });
+          } catch (error) {}
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+  },
+  created() {},
+};
+</script>
+
+<template>
+  <el-card
+    shadow="never"
+    :body-style="{
+      height: '100%',
+      padding: 0,
+      display: 'flex',
+      'flex-direction': 'column',
+      'align-items': 'center',
+    }"
+  >
+    <van-nav-bar
+      left-text="返回"
+      right-text="保存"
+      left-arrow
+      @click-left="useBack"
+      @click-right="useSubmit('form')"
+      style="width: 100%"
+    />
+
+    <el-form
+      :model="formData"
+      :size="size"
+      :rules="rules"
+      ref="form"
+      label-width="80px"
+      label-position="top"
+    >
+      <h3 style="font-weight: 600">请输入您的信息</h3>
+      <p style="color: #c0c4cc; font-size: 14px">方便我们联系到您</p>
+      <el-form-item label="您的科室" prop="departments">
+        <el-input
+          v-model="formData.departments"
+          placeholder="请输入科室名称"
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="您的姓名" prop="name">
+        <el-input v-model="formData.name" placeholder="请输入姓名"></el-input>
+      </el-form-item>
+      <!-- <el-form-item>
+        <el-button
+          type="success"
+          style="width: 100%; margin-top: 20px"
+          @click="useSubmit('form')"
+          >保 存</el-button
+        >
+      </el-form-item> -->
+    </el-form>
+  </el-card>
+</template>
+
+<style scoped lang="scss">
+.el-card {
+  width: 100%;
+  height: 100vh;
+  padding: 0 0px 20px;
+}
+
+.el-form {
+  width: 100%;
+  padding: 0 30px;
+}
+::v-deep .el-input__inner {
+  border: none;
+  border-bottom: 1px solid #dcdfe6;
+}
+::v-deep .el-form-item__label {
+  padding: 0 !important;
+}
+</style>

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

@@ -0,0 +1,15 @@
+<!-- 用户信息 -->
+<script>
+export default {
+  name: "asUser",
+  data() {
+    return {};
+  },
+  methods: {},
+  created() {},
+};
+</script>
+
+<template>
+  <div>用户信息</div>
+</template>

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

@@ -0,0 +1,117 @@
+<!-- 登录 -->
+<script>
+export default {
+  name: "asLogin",
+  data() {
+    return {
+      title: "登 录",
+      size: "small",
+      fit: "contain",
+      imgUrl: require("../images/logo.jpg"),
+      formData: {
+        name: "测试项目",
+        phone: "",
+      },
+      rules: {
+        name: [{ required: true, message: "请输入项目名称", trigger: "blur" }],
+        phone: [
+          { required: true, message: "请输入手机号码", trigger: "blur" },
+          {
+            pattern: /^1[3-9]\d{9}$/,
+            message: "手机号格式错误",
+            trigger: "blur",
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    useBack() {},
+    useSubmit(prop) {
+      this.$refs[prop].validate(async (valid) => {
+        if (valid) {
+          try {
+            console.log(this.formData, "formData");
+            this.$router.push({ name: "BindingInfo" });
+          } catch (error) {}
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+  },
+  created() {},
+};
+</script>
+
+<template>
+  <el-card
+    shadow="never"
+    :body-style="{
+      height: '100%',
+      padding: 0,
+      display: 'flex',
+      'flex-direction': 'column',
+      'align-items': 'center',
+    }"
+  >
+    <van-nav-bar :title="title" @click-left="useBack" style="width: 100%" />
+    <el-image
+      style="width: 100%; height: 28vh"
+      :src="imgUrl"
+      :fit="fit"
+    ></el-image>
+
+    <el-form
+      :model="formData"
+      :size="size"
+      :rules="rules"
+      ref="form"
+      label-width="80px"
+      label-position="top"
+    >
+      <h3 style="font-weight: 600">欢迎登录</h3>
+      <el-form-item label="项目名称" prop="name">
+        <el-input
+          v-model="formData.name"
+          placeholder="请输入项目名称"
+          readonly
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="手机号码" prop="phone">
+        <el-input
+          v-model="formData.phone"
+          placeholder="请输入手机号"
+        ></el-input>
+      </el-form-item>
+      <el-form-item>
+        <el-button
+          type="success"
+          style="width: 100%; margin-top: 20px"
+          @click="useSubmit('form')"
+          >登 录</el-button
+        >
+      </el-form-item>
+    </el-form>
+  </el-card>
+</template>
+
+<style scoped lang="scss">
+.el-card {
+  width: 100%;
+  height: 100vh;
+  padding: 0 20px 20px;
+}
+.el-form {
+  width: 80%;
+}
+::v-deep .el-input__inner {
+  border: none;
+  border-bottom: 1px solid #dcdfe6;
+}
+::v-deep .el-form-item__label {
+  // line-height: 22px !important;
+  padding: 0 !important;
+}
+</style>