爱山东js用户信息对接完成,医院列表和须知ui改版更换完成

package.json

@@ -10,6 +10,7 @@
   "dependencies": {
     "core-js": "^3.8.3",
     "vant": "^2.12.53",
+    "vconsole": "^3.15.0",
     "vue": "^2.6.14",
     "vue-axios": "^3.5.2",
     "vue-router": "^3.5.1",

public/index.html

@@ -32,7 +32,7 @@
           if (clientWidth >= 750) {
             docEl.style.fontSize = '100px'; //1rem  = 100px
           } else {
-            docEl.style.fontSize = 100 * (clientWidth / 375) + 'px';
+            docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
           }
         };
       if (!doc.addEventListener) return;

src/components/Guidance.vue

@@ -14,8 +14,8 @@
       <p> 海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知海慈医院体检预约须知</p>
     </div>
     <div class="guide_btn">
-      <van-button size="small" @click="doCancel">取消</van-button>
+      <div class="guide_actBtn" @click="doCancel">取消</div>
-      <van-button @click="doRead" type="info" size="small" :disabled="this.isFlag ? false : true">已阅读</van-button>
+      <div class="guide_actBtn blue" @click="doRead">已阅读</div>
     </div>
   </div>
 </template>
@@ -34,16 +34,16 @@ export default {
   methods: {
     //取消
     doCancel() {
-      this.$emit('doCancelGuide','');
+      this.$emit('doCancelGuide', '');
     },
     //已阅读
     doRead() {
       if (!this.isFlag) {
         //未阅读完整
         lightAppJssdk.notification.alert({
-          message: "还有内容没有阅读完，请滑动屏幕阅读完全",
+          message: "须知未完全阅读，请滑动屏幕完成阅读",
-          title: "",//可传空
+          title: "提示",//可传空
-          buttonName: "确定",
+          buttonName: "继续阅读",
           success: function (data) {
             //onSuccess将在点击button之后回调
             /*回调*/
@@ -83,22 +83,49 @@ export default {
   background-color: #fff;
 
   .guide_title {
-    font-size: 0.22rem;
+    color: #333333;
+    line-height: 0.5rem;
+    font-size: 0.36rem;
+    font-family: PingFang SC-Bold, PingFang SC;
+    font-weight: bold;
     text-align: center;
-    padding: 0.15rem 0;
+    margin: 0.72rem 0 0;
   }
 
   .guide_contant {
-    height: 5rem;
+    height: 6rem;
-    line-height: 0.22rem;
+    color: #333333;
+    font-size: 0.26rem;
+    font-family: PingFang SC-Regular, PingFang SC;
+    font-weight: 400;
     overflow-y: auto;
-    margin: 0.1rem 0;
+    margin: 0.93rem 0.4rem 0 0;
-    padding: 0 0.3rem;
+    padding: 0 0.4rem;
   }
 
   .guide_btn {
+    margin: 0.86rem 0.4rem 0;
+
+    .guide_actBtn {
+      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;
-    margin-top: 0.15rem;
+      background: #FFFFFF;
+      border-radius: 0.08rem;
+      border: 0.02rem solid #E1E1E1;
+
+      &.blue {
+        float:right;
+        color: #fff;
+        background: #1677FF;
+        border-color: #1677FF;
+      }
+    }
   }
 }
 </style>

src/main.js

@@ -6,6 +6,9 @@ import store from "./store";
 import vant from "vant";
 import "vant/lib/index.css";
 
+import VConsole from "vconsole";
+let vConsole = new VConsole();
+
 Vue.use(vant);
 
 Vue.config.productionTip = false;

src/utils/aisdapp.js

@@ -111,11 +111,19 @@ export const getUserInfoByToken = (userToken) => {
             const data = JSON.parse(value)
             if (data.retcode == "000000") {
                 const userInfo = data.data
-                const userObj = JSON.parse(userInfo)
+                sessionStorage.setItem('userInfo',userInfo);
-
+                // const userObj = JSON.parse(userInfo);
-                document.getElementById("name").innerText = userObj.name
+                // lightAppJssdk.notification.alert({
-                document.getElementById("cardid").innerText = userObj.papersnumber
+				// 	title: "提示", //可传空
-                document.getElementById("mobile").innerText = userObj.mobile
+				// 	message: userObj.name+'/'+userObj.papersnumber,
+				// 	buttonName: "确认",
+				// 	success: function (data) {
+				// 		oncloseWindow()
+				// 	}
+				// })
+                // document.getElementById("name").innerText = userObj.name
+                // document.getElementById("cardid").innerText = userObj.papersnumber
+                // document.getElementById("mobile").innerText = userObj.mobile
             } else {
             }
         })

src/views/HomeView.vue

@@ -1,15 +1,44 @@
 <template>
   <div class="home">
-    <div class="act_title">医院选择</div>
     <div class="act_shoose">
-      <van-button @click="doGuidance" block>海慈医院</van-button>
+      <div @click="doGuidance" class="act_btn active">
-      <van-button @click="doGuidance" block>即墨人民医院</van-button>
+        <img/>
-      <van-button @click="doGuidance" block>平度人民医院</van-button>
+        <div class="hospital_info">
-      <van-button @click="doGuidance" block>胶州医院</van-button>
+          <div class="hospital_name">海慈医院</div>
-      <van-button @click="doGuidance" block>莱西市立医院</van-button>
+          <div class="hospital_addr">青岛市市南区栖霞路18号</div>
+        </div>
+      </div>
+      <div @click="doGuidance" class="act_btn">
+        <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/>
+        <div class="hospital_info">
+          <div class="hospital_name">平度人民医院</div>
+          <div class="hospital_addr">青岛市市南区栖霞路18号</div>
+        </div>
+      </div>
+      <div @click="doGuidance" class="act_btn">
+        <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/>
+        <div class="hospital_info">
+          <div class="hospital_name">莱西市立医院</div>
+          <div class="hospital_addr">青岛市市南区栖霞路18号</div>
+        </div>
+      </div>
     </div>
     <div class="act_box">
-      <van-button type="info" block>我的预约</van-button>
+      <div @click="testAlert" class="act_btn">我的预约</div>
     </div>
     <!-- 阅读须知 -->
     <GuidanceVue @doCancelGuide="doCancelGuide" v-if="guideShow"></GuidanceVue>
@@ -17,6 +46,7 @@
 </template>
 <script>
 import GuidanceVue from '@/components/Guidance.vue';
+import { getUserInfo } from '@/utils/aisdapp';
 export default {
   name: "HomeView",
   components: {
@@ -24,7 +54,18 @@ export default {
   },
   data() {
     return {
-      guideShow: false
+      guideShow: false,
+      userInfo: null,
+    }
+  },
+  mounted() {
+    let userInfo = sessionStorage.getItem('userInfo') ? JSON.parse(sessionStorage.getItem('userInfo')) : null;
+    console.log(userInfo);
+    if (userInfo == null) {
+      getUserInfo();
+    }
+    else {
+      this.userInfo = userInfo;
     }
   },
   methods: {
@@ -53,23 +94,69 @@ export default {
 };
 </script>
 <style scoped lang="scss">
-  .home{
+.home {
-    .act_title{
+  .act_shoose {
-      font-size: 0.22rem;
+    height:9rem;
+    margin: 1.4rem 0 0;
+    padding: 0 0.24rem;
+    overflow-y: auto;
+
+    .act_btn {
+      width: 6.98rem;
+      height: 0.96rem;
+      background: #F6F6F6;
+      border-radius: 0.08rem;
+      border: 0.02rem solid #F6F6F6;
       text-align: center;
-      padding:0.15rem 0;
+      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;
+          font-family: PingFang SC-Regular, PingFang SC;
+          font-weight: 400;
+          line-height: 0.48rem;
+        }
+        .hospital_addr{
+          color: #999999;
+          line-height: 0.45rem;
+          font-size: 0.22rem;
+          font-family: PingFang SC-Regular, PingFang SC;
+          font-weight: 400;
+        }
       }
-    .act_shoose{
-      margin: 0.1rem 0;
-      padding: 0 0.3rem;
-      .van-button{
-        margin-bottom: 0.12rem;
     }
   }
-    .act_box{
+
-      width: 2rem;
+  .act_box {
+    position:absolute;
+    left:0;
+    right:0;
+    bottom:0;
+    padding: 0.24rem;
+    background: #fff;
+    .act_btn{
+      color: #FFFFFF;
+      font-size: 0.3rem;
+      font-family: PingFang SC-Bold, PingFang SC;
+      font-weight: bold;
+      line-height:0.96rem;
       text-align: center;
-      margin:0.15rem auto 0;
+      background: #1677FF;
+      border-radius: 0.08rem;
     }
   }
+}
 </style>

yarn.lock

@@ -925,7 +925,7 @@
     "@babel/types" "^7.4.4"
     esutils "^2.0.2"
 
-"@babel/runtime@7.x", "@babel/runtime@^7.12.13", "@babel/runtime@^7.8.4":
+"@babel/runtime@7.x", "@babel/runtime@^7.12.13", "@babel/runtime@^7.17.2", "@babel/runtime@^7.8.4":
   version "7.20.13"
   resolved "https://registry.npmmirror.com/@babel/runtime/-/runtime-7.20.13.tgz#7055ab8a7cff2b8f6058bf6ae45ff84ad2aded4b"
   integrity sha512-gt3PKXs0DBoL9xCvOIIZ2NEqAGZqHjAnmVbfQtB620V0uReIQutpel14KcneZuer7UioY8ALKZ7iocavvzTNFA==
@@ -2356,6 +2356,11 @@ cookie@0.5.0:
   resolved "https://registry.npmmirror.com/cookie/-/cookie-0.5.0.tgz#d1f5d71adec6558c58f389987c366aa47e994f8b"
   integrity sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==
 
+copy-text-to-clipboard@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.npmmirror.com/copy-text-to-clipboard/-/copy-text-to-clipboard-3.0.1.tgz#8cbf8f90e0a47f12e4a24743736265d157bce69c"
+  integrity sha512-rvVsHrpFcL4F2P8ihsoLdFHmd404+CMg71S756oRSeQgqk51U3kicGdnvfkrxva0xXH92SjGS62B0XIJsbh+9Q==
+
 copy-webpack-plugin@^9.0.1:
   version "9.1.0"
   resolved "https://registry.npmmirror.com/copy-webpack-plugin/-/copy-webpack-plugin-9.1.0.tgz#2d2c460c4c4695ec0a58afb2801a1205256c4e6b"
@@ -2375,7 +2380,7 @@ core-js-compat@^3.25.1, core-js-compat@^3.8.3:
   dependencies:
     browserslist "^4.21.4"
 
-core-js@^3.8.3:
+core-js@^3.11.0, core-js@^3.8.3:
   version "3.27.2"
   resolved "https://registry.npmmirror.com/core-js/-/core-js-3.27.2.tgz#85b35453a424abdcacb97474797815f4d62ebbf7"
   integrity sha512-9ashVQskuh5AZEZ1JdQWp1GqSoC1e1G87MzRqg2gIfVAQ7Qn9K+uFj8EcniUFA4P2NLZfV+TOlX1SzoKfo+s7w==
@@ -4149,6 +4154,11 @@ multicast-dns@^7.2.5:
     dns-packet "^5.2.2"
     thunky "^1.0.2"
 
+mutation-observer@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.npmmirror.com/mutation-observer/-/mutation-observer-1.0.3.tgz#42e9222b101bca82e5ba9d5a7acf4a14c0f263d0"
+  integrity sha512-M/O/4rF2h776hV7qGMZUH3utZLO/jK7p8rnNgGkjKUw8zCGjRQPxB8z6+5l8+VjRUQ3dNYu4vjqXYLr+U8ZVNA==
+
 mz@^2.4.0:
   version "2.7.0"
   resolved "https://registry.npmmirror.com/mz/-/mz-2.7.0.tgz#95008057a56cafadc2bc63dde7f9ff6955948e32"
@@ -5747,6 +5757,16 @@ vary@~1.1.2:
   resolved "https://registry.npmmirror.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"
   integrity sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==
 
+vconsole@^3.15.0:
+  version "3.15.0"
+  resolved "https://registry.npmmirror.com/vconsole/-/vconsole-3.15.0.tgz#2383482b0a4106204090046ec128071284e04a90"
+  integrity sha512-8hq7wabPcRucSWQyN7/1tthMawP9JPvM95zgtMHpPknMMMCKj+abpoK7P7oKK4B0qw58C24Mdvo9+raUdpHyVQ==
+  dependencies:
+    "@babel/runtime" "^7.17.2"
+    copy-text-to-clipboard "^3.0.1"
+    core-js "^3.11.0"
+    mutation-observer "^1.0.3"
+
 vue-axios@^3.5.2:
   version "3.5.2"
   resolved "https://registry.npmmirror.com/vue-axios/-/vue-axios-3.5.2.tgz#28637524cca550a9e97197e85a41930ec63604d5"