动态标题设置，须知改为单页面

public/index.html

@@ -6,9 +6,7 @@
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width,initial-scale=1.0">
   <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-  <title>
+  <title>体检预约</title>
-    <%= htmlWebpackPlugin.options.title %>
-  </title>
   <style>
     * {
       padding: 0;

src/App.vue

@@ -3,6 +3,7 @@
     <router-view />
   </div>
 </template>
+<script>
 
 <style lang="scss">
 #app {

src/router/index.js

@@ -1,6 +1,7 @@
 import Vue from "vue";
 import VueRouter from "vue-router";
 import HomeView from "../views/HomeView.vue";
+import Guidance from "../views/Guidance.vue";
 
 Vue.use(VueRouter);
 
@@ -9,6 +10,17 @@ const routes = [
     path: "/",
     name: "home",
     component: HomeView,
+    meta: {
+      title: "选择医院",
+    }
+  },
+  {
+    path: "/guidance",
+    name: "guidance",
+    component: Guidance,
+    meta: {
+      title: "预约须知",
+    }
   },
   {
     path: "/about",
@@ -24,5 +36,8 @@ const routes = [
 const router = new VueRouter({
   routes,
 });
-
+router.beforeEach((to, from, next) => {
+  to.meta.title?document.title = to.meta.title:document.title ='体检预约'
+  next()
+})
 export default router;

src/store/index.js

@@ -4,9 +4,14 @@ import Vuex from "vuex";
 Vue.use(Vuex);
 
 export default new Vuex.Store({
-  state: {},
+  modules: {
-  getters: {},
+    state: {
-  mutations: {},
+      userInfo: sessionStorage.getItem('userInfo')  || null
-  actions: {},
+    }
-  modules: {},
+  },
+  mutations: {
+    setUserInfo(state,userInfo){
+      state.userInfo = userInfo;
+    }
+  },
 });

src/utils/aisdapp.js

@@ -112,6 +112,7 @@ export const getUserInfoByToken = (userToken) => {
             if (data.retcode == "000000") {
                 const userInfo = data.data
                 sessionStorage.setItem('userInfo',userInfo);
+                location.reload();
                 // const userObj = JSON.parse(userInfo);
                 // lightAppJssdk.notification.alert({
 				// 	title: "提示", //可传空

src/utils/index.js

@@ -0,0 +1,6 @@
+/**
+ * 判断是否为手机端
+*/
+export const isMobile = () => {
+    return navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i) ? true : false;
+}

src/views/Guidance.vue

@@ -0,0 +1,127 @@
+<template>
+  <div class="guidance">
+    <div class="guide_title">海慈医院体检预约须知</div>
+    <div class="guide_contant" ref="scrollView" id="scroll-view" @scroll="scroll">
+      <p>尊敬的驾驶员：</p>
+      <p> 海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知</p>
+      <p> 海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知</p>
+      <p> 海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知</p>
+      <p> 海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知</p>
+      <p> 海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知</p>
+      <p> 海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知</p>
+      <p> 海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知</p>
+      <p> 海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知</p>
+      <p> 海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知</p>
+    </div>
+    <div class="guide_btn">
+      <div class="guide_actBtn" @click="doCancel">取消</div>
+      <div class="guide_actBtn blue" @click="doRead">已阅读</div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      isFlag: false,//是否阅读到底部
+    }
+  },
+  mounted() {
+    console.log(this.$route.query);
+  },
+  methods: {
+    //取消
+    doCancel() {
+      this.$router.go(-1);
+    },
+    //已阅读
+    doRead() {
+      if (!this.isFlag) {
+        //未阅读完整
+        lightAppJssdk.notification.alert({
+          message: "须知未完全阅读，请滑动屏幕完成阅读",
+          title: "提示",//可传空
+          buttonName: "继续阅读",
+          success: function (data) {
+            //onSuccess将在点击button之后回调
+            /*回调*/
+          },
+          fail: function (data) { //错误返回
+          }
+        });
+      }
+      else {
+        //阅读完整
+        this.$router.push({ name: '', params: {} })
+      }
+    },
+    //监听阅读进度
+    scroll(e) {
+      if (this.isFlag) {
+        return;
+      }
+      const { scrollTop, clientHeight, scrollHeight } = e.target;
+      if (scrollTop + clientHeight === scrollHeight) {
+        this.isFlag = true;
+        console.log('阅读完成')
+      }
+    },
+  }
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="scss">
+.guidance {
+  height:100%;
+  background-color: #fff;
+
+  .guide_title {
+    color: #333333;
+    line-height: 0.5rem;
+    font-size: 0.36rem;
+    font-family: PingFang SC-Bold, PingFang SC;
+    font-weight: bold;
+    text-align: center;
+    margin: 0.72rem 0 0;
+  }
+
+  .guide_contant {
+    height: 6rem;
+    color: #333333;
+    font-size: 0.26rem;
+    font-family: PingFang SC-Regular, PingFang SC;
+    font-weight: 400;
+    overflow-y: auto;
+    margin: 0.93rem 0.4rem 0 0;
+    padding: 0 0.4rem;
+  }
+
+  .guide_btn {
+    margin: 0.86rem 0.4rem 0;
+
+    .guide_actBtn {
+      float:left;
+      display: inline-block;
+      width: 3rem;
+      color: #999999;
+      font-size: 0.3rem;
+      font-family: PingFang SC-Bold, PingFang SC;
+      font-weight: bold;
+      line-height: 0.98rem;
+      text-align: center;
+      background: #FFFFFF;
+      border-radius: 0.08rem;
+      border: 0.02rem solid #E1E1E1;
+
+      &.blue {
+        float:right;
+        color: #fff;
+        background: #1677FF;
+        border-color: #1677FF;
+      }
+    }
+  }
+}
+</style>

src/views/HomeView.vue

@@ -41,12 +41,13 @@
       <div @click="testAlert" class="act_btn">我的预约</div>
     </div>
     <!-- 阅读须知 -->
-    <GuidanceVue @doCancelGuide="doCancelGuide" v-if="guideShow"></GuidanceVue>
+    <!-- <GuidanceVue @doCancelGuide="doCancelGuide" v-if="guideShow"></GuidanceVue> -->
   </div>
 </template>
 <script>
 import GuidanceVue from '@/components/Guidance.vue';
 import { getUserInfo } from '@/utils/aisdapp';
+import { isMobile } from '@/utils';
 export default {
   name: "HomeView",
   components: {
@@ -59,6 +60,7 @@ export default {
     }
   },
   mounted() {
+    if (isMobile()) {
       let userInfo = sessionStorage.getItem('userInfo') ? JSON.parse(sessionStorage.getItem('userInfo')) : null;
       console.log(userInfo);
       if (userInfo == null) {
@@ -67,6 +69,9 @@ export default {
       else {
         this.userInfo = userInfo;
       }
+    } else {
+      return false // alert('PC端')
+    }
   },
   methods: {
     testAlert() {
@@ -88,7 +93,8 @@ export default {
     },
     //阅读须知
     doGuidance() {
-      this.guideShow = true;
+      // this.guideShow = true;
+      this.$router.push({name:'guidance',query:{deptId:1}})
     },
   }
 };
@@ -110,18 +116,22 @@ export default {
       text-align: center;
       padding: 0.12rem 0;
       margin-bottom: 0.3rem;
+
       &.active {
         background: #FFFFFF;
         border-color: #1677FF;
       }
+
       img {
         width: 0.6rem;
         height: 0.6rem;
         margin-right: 0.24rem;
       }
+
       .hospital_info {
         display: inline-block;
         text-align: left;
+
         .hospital_name {
           color: #333333;
           font-size: 0.34rem;
@@ -129,6 +139,7 @@ export default {
           font-weight: 400;
           line-height: 0.48rem;
         }
+
         .hospital_addr {
           color: #999999;
           line-height: 0.45rem;
@@ -147,6 +158,7 @@ export default {
     bottom: 0;
     padding: 0.24rem;
     background: #fff;
+
     .act_btn {
       color: #FFFFFF;
       font-size: 0.3rem;