From 101a864339df4a8a5b4a9607f9b5cb31c03bdd64 Mon Sep 17 00:00:00 2001
From: xuechunyuan <17853500702@163.com>
Date: Wed, 8 Feb 2023 16:21:56 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8A=A8=E6=80=81=E6=A0=87=E9=A2=98=E8=AE=BE?=
 =?UTF-8?q?=E7=BD=AE=EF=BC=8C=E9=A1=BB=E7=9F=A5=E6=94=B9=E4=B8=BA=E5=8D=95?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/index.html      |   4 +-
 src/App.vue            |   5 +-
 src/router/index.js    |  17 +++++-
 src/store/index.js     |  15 +++--
 src/utils/aisdapp.js   |   1 +
 src/utils/index.js     |   6 ++
 src/views/Guidance.vue | 127 +++++++++++++++++++++++++++++++++++++++++
 src/views/HomeView.vue |  74 ++++++++++++++----------
 8 files changed, 207 insertions(+), 42 deletions(-)
 create mode 100644 src/utils/index.js
 create mode 100644 src/views/Guidance.vue

diff --git a/public/index.html b/public/index.html
index 4a26471..40b7041 100644
--- a/public/index.html
+++ b/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;
diff --git a/src/App.vue b/src/App.vue
index 04644e2..e0697ef 100644
--- a/src/App.vue
+++ b/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;
diff --git a/src/router/index.js b/src/router/index.js
index b8d77d3..accee5a 100644
--- a/src/router/index.js
+++ b/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;
diff --git a/src/store/index.js b/src/store/index.js
index a82f3e1..fcb424e 100644
--- a/src/store/index.js
+++ b/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;
+    }
+  },
 });
diff --git a/src/utils/aisdapp.js b/src/utils/aisdapp.js
index fce87ce..23db127 100644
--- a/src/utils/aisdapp.js
+++ b/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: "提示", //可传空
diff --git a/src/utils/index.js b/src/utils/index.js
new file mode 100644
index 0000000..4dbbfc2
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/src/views/Guidance.vue b/src/views/Guidance.vue
new file mode 100644
index 0000000..b79c7d2
--- /dev/null
+++ b/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>
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index fad9cc7..f60e2b5 100644
--- a/src/views/HomeView.vue
+++ b/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;