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

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>
-    <%= htmlWebpackPlugin.options.title %>
-  </title>
+  <title>体检预约</title>
   <style>
     * {
       padding: 0;

src/App.vue

@@ -3,11 +3,12 @@
     <router-view />
   </div>
 </template>
+<script>
 
 <style lang="scss">
 #app {
-  width:100%;
-  height:100%;
+  width: 100%;
+  height: 100%;
   font-family: Avenir, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;

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: {},
-  getters: {},
-  mutations: {},
-  actions: {},
-  modules: {},
+  modules: {
+    state: {
+      userInfo: sessionStorage.getItem('userInfo')  || null
+    }
+  },
+  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

@@ -2,35 +2,35 @@
   <div class="home">
     <div class="act_shoose">
       <div @click="doGuidance" class="act_btn active">
-        <img/>
+        <img />
         <div class="hospital_info">
           <div class="hospital_name">海慈医院</div>
           <div class="hospital_addr">青岛市市南区栖霞路18号</div>
         </div>
       </div>
       <div @click="doGuidance" class="act_btn">
-        <img/>
+        <img />
         <div class="hospital_info">
           <div class="hospital_name">即墨人民医院</div>
           <div class="hospital_addr">青岛市市南区栖霞路18号</div>
         </div>
       </div>
       <div @click="doGuidance" class="act_btn">
-        <img/>
+        <img />
         <div class="hospital_info">
           <div class="hospital_name">平度人民医院</div>
           <div class="hospital_addr">青岛市市南区栖霞路18号</div>
         </div>
       </div>
       <div @click="doGuidance" class="act_btn">
-        <img/>
+        <img />
         <div class="hospital_info">
           <div class="hospital_name">胶州医院</div>
           <div class="hospital_addr">青岛市市南区栖霞路18号</div>
         </div>
       </div>
       <div @click="doGuidance" class="act_btn">
-        <img/>
+        <img />
         <div class="hospital_info">
           <div class="hospital_name">莱西市立医院</div>
           <div class="hospital_addr">青岛市市南区栖霞路18号</div>
@@ -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,13 +60,17 @@ export default {
     }
   },
   mounted() {
-    let userInfo = sessionStorage.getItem('userInfo') ? JSON.parse(sessionStorage.getItem('userInfo')) : null;
-    console.log(userInfo);
-    if (userInfo == null) {
-      getUserInfo();
-    }
-    else {
-      this.userInfo = userInfo;
+    if (isMobile()) {
+      let userInfo = sessionStorage.getItem('userInfo') ? JSON.parse(sessionStorage.getItem('userInfo')) : null;
+      console.log(userInfo);
+      if (userInfo == null) {
+        getUserInfo();
+      }
+      else {
+        this.userInfo = userInfo;
+      }
+    } else {
+      return false // alert('PC端')
     }
   },
   methods: {
@@ -88,7 +93,8 @@ export default {
     },
     //阅读须知
     doGuidance() {
-      this.guideShow = true;
+      // this.guideShow = true;
+      this.$router.push({name:'guidance',query:{deptId:1}})
     },
   }
 };
@@ -96,7 +102,7 @@ export default {
 <style scoped lang="scss">
 .home {
   .act_shoose {
-    height:9rem;
+    height: 9rem;
     margin: 1.4rem 0 0;
     padding: 0 0.24rem;
     overflow-y: auto;
@@ -110,26 +116,31 @@ export default {
       text-align: center;
       padding: 0.12rem 0;
       margin-bottom: 0.3rem;
-      &.active{
+
+      &.active {
         background: #FFFFFF;
-        border-color:#1677FF;
+        border-color: #1677FF;
       }
-      img{
-          width:0.6rem;
-          height:0.6rem;
-          margin-right:0.24rem;
-        }
-      .hospital_info{
+
+      img {
+        width: 0.6rem;
+        height: 0.6rem;
+        margin-right: 0.24rem;
+      }
+
+      .hospital_info {
         display: inline-block;
         text-align: left;
-        .hospital_name{
+
+        .hospital_name {
           color: #333333;
           font-size: 0.34rem;
           font-family: PingFang SC-Regular, PingFang SC;
           font-weight: 400;
           line-height: 0.48rem;
         }
-        .hospital_addr{
+
+        .hospital_addr {
           color: #999999;
           line-height: 0.45rem;
           font-size: 0.22rem;
@@ -141,18 +152,19 @@ export default {
   }
 
   .act_box {
-    position:absolute;
-    left:0;
-    right:0;
-    bottom:0;
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
     padding: 0.24rem;
     background: #fff;
-    .act_btn{
+
+    .act_btn {
       color: #FFFFFF;
       font-size: 0.3rem;
       font-family: PingFang SC-Bold, PingFang SC;
       font-weight: bold;
-      line-height:0.96rem;
+      line-height: 0.96rem;
       text-align: center;
       background: #1677FF;
       border-radius: 0.08rem;