联系客服

src/router/index.ts

@@ -107,6 +107,16 @@ const routes: RouteConfig[] = [
     meta: { requiresAuth: true },
   },
   {
+    path: '/contect',
+    name: 'Contect',
+    // route level code-splitting
+    // this generates a separate chunk (about.[hash].js) for this route
+    // which is lazy-loaded when the route is visited.
+    component: () => import(/* webpackChunkName: "about" */ '@/views/userCenter/Contect.vue'),
+    props: (route) => ({ templList: route.query.templList }),
+    meta: { requiresAuth: true },
+  },
+  {
     path: '/rechargeRecord',
     name: 'RechargeRecord',
     // route level code-splitting

src/views/userCenter/Contect.vue

+<template>
+  <div class="contect flex-center">
+    <!-- <i class="iconfont iconzuo" @click="$router.back()"></i> -->
+    <common-svg name="shanchu5" @click.native="$router.back()" class="iconzuo"></common-svg>
+    <div class="box">
+      <h1>添加客服微信</h1>
+      <img src="@/assets/lxkf.png" alt>
+      <h3>扫一扫咨询客服</h3>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+import { Component, Prop, Vue } from 'vue-property-decorator';
+import { Cell, Form, Field, CellGroup, Button, Image, RadioGroup, Radio } from 'vant';
+import { State, Getter, Action, Mutation } from 'vuex-class';
+import { Route } from 'vue-router';
+import H5Cropper from 'vue-cropper-h5';
+@Component({
+  components: {
+    [Form.name]: Form,
+    [Field.name]: Field,
+    [Button.name]: Button,
+    [Image.name]: Image,
+    [Cell.name]: Cell,
+    [RadioGroup.name]: RadioGroup,
+    [Radio.name]: Radio,
+    H5Cropper,
+  },
+})
+export default class Contect extends Vue {
+
+}
+</script>
+<style lang="scss" scoped>
+.contect {
+  position: relative;
+  height: 100vh;
+  background: #3c3f6a;
+  
+  .iconzuo {
+    color: #fff;
+    font-size: 16px;
+    position: absolute;
+    left: 20px;
+    top: 20px;
+  }
+  .box {
+    width: 335px;
+    height: 400px;
+    background: rgba(255, 255, 255, 1);
+    border-radius: 10px;
+    text-align: center;
+    h1 {
+      margin-top: 40px;
+      font-size: 24px;
+      font-weight: 700;
+    }
+    img {
+      margin: 24px 0 15px;
+      width: 210px;
+      height: 210px;
+    }
+    h3 {
+      font-size: 18px;
+      font-weight: 600;
+    }
+  } 
+}
+.flex-center {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+</style>
+

src/views/userCenter/Recharge.vue

@@ -38,7 +38,7 @@
     <div @click="recharge" class="btn">充值</div>
     <section class="btn-group">
       <router-link tag="span" :to="{name:'RechargeRecord'}">充值记录</router-link>
-      <router-link to="" tag="span" style="margin-left:10px;">联系客服</router-link>
+      <router-link to="/contect" tag="span" style="margin-left:10px;">联系客服</router-link>
     </section>
     <section class="explain">
       <p class="title">年费说明</p>