样式跟进

src/router/index.js

@@ -79,7 +79,7 @@ router.beforeEach((to, from, next) => {
     } else {
       document.title = to.meta.title ? to.meta.title : title
     }
-    if (localStorage.getItem('token')) {
+    if (localStorage.getItem('token') && to.path != '/houseQR') {
       store.dispatch('getUserInfo').then((res) => {
           if (res.agencyId) {
             next()
@@ -93,7 +93,7 @@ router.beforeEach((to, from, next) => {
           }
       })
     } else { 
-      if (getQueryStringByName('code')) {
+      if (getQueryStringByName('code') && to.path != '/houseQR') {
         login({ wxCode: getQueryStringByName('code'),appId:'wx1078fa1e99424de9'}).then(res => {
           localStorage.setItem('token', res.token)
           localStorage.setItem('userId', res.userH5DTO.id)

src/views/houseQR/index.less

@@ -1,8 +1,8 @@
 .header{
-    background:url('@/assets/images/houseQR/header_bg.png');
+    background:url('@/assets/images/houseQR/header_bg.png') no-repeat;
     background-size: 100%;
     width: 100%;
-    height: 180px;
+    height: 100px;
     z-index: 1;
 }
 .mask{
@@ -16,8 +16,8 @@
     z-index: 2;
 }
 section{
-    position: relative;
+    position: absolute;
-    top: -40px;
+    top: 90px;
     z-index: 3;
     .house_base{
         position: relative;
@@ -85,8 +85,9 @@ a{
     border-radius: 7px;
     height: 38px;
     padding: 7px 16px;
-    position: relative;
+    position: fixed;
-    bottom: 20px;
+    bottom: 10px;
+    left: 10px;
     box-sizing: border-box;
     z-index: 10;
 }

src/views/houseQR/index.vue

@@ -1,12 +1,12 @@
 <template>
-    <div >
+  <div style="position: relative;">
     <div class="header">
       <div class="mask"></div>
     </div>
     <section class="">
       <div class="flex flex-y m-bot10">
         <div class="house_base flex">
-                    <img src="@/assets/images/houseQR/house.png" alt="">
+          <img src="@/assets/images/houseQR/house.png" alt="" />
           <div class="flex flex-y flex-center1 flex1">
             <div class="van-multi-ellipsis--l3">{{ formData.houseAddress }}</div>
           </div>
@@ -14,14 +14,14 @@
         <div class="card flex flex-y basi_content content">
           <div class="flex flex-center">
             <div class="label">
-                            <img src="@/assets/images/icons/community.png" class="img_16 m-right10" alt="">
+              <img src="@/assets/images/icons/community.png" class="img_16 m-right10" alt="" />
               <span class="gray">所属社区：</span>
             </div>
             <div class="value flex1">{{ formData.communityName || '--' }}</div>
           </div>
           <div class="flex flex-center m-top15">
             <div class="label">
-                            <img src="@/assets/images/icons/grid.png" class="img_16 m-right10" alt="">
+              <img src="@/assets/images/icons/grid.png" class="img_16 m-right10" alt="" />
               <span class="gray">所属网格：</span>
             </div>
             <span class="value flex1">{{ formData.gridName || '--' }}</span>
@@ -29,12 +29,12 @@
           <div class="flex flex-center2 flex-end m-top15">
             <div class="flex">
               <div class="label">
-                                <img src="@/assets/images/icons/grid.png" class="img_16 m-right10" alt="">
+                <img src="@/assets/images/icons/tel.png" class="img_16 m-right10" alt="" />
                 <span class="gray">社区电话：</span>
               </div>
               <div class="value">{{ formData.communityTel || '--' }}</div>
             </div>
-                        <a :href='`tel:${formData.communityTel}`' v-show="formData.communityTel">拨打</a>
+            <a :href="`tel:${formData.communityTel}`" v-show="formData.communityTel">拨打</a>
           </div>
         </div>
       </div>
@@ -43,19 +43,19 @@
           <span>我的社区</span>
         </div>
         <div class="my_community flex flex-wrap">
-                    <div style="width: 25%;" class="flex flex-y flex-center1 flex-center2"
+          <div style="width: 25%" class="flex flex-y flex-center1 flex-center2" v-for="(item, index) in myCommunity"
-                        v-for="(item, index) in myCommunity" :key="index">
+            :key="index">
-                        <img :src="item.imgSrc" class="img_33 m-top16" alt="" @click="handelCLickJump">
+            <img :src="item.imgSrc" class="img_33 m-top16" alt="" @click="handelCLickJump(index)" />
             <span class="font-size14 m-top10">{{ item.title }}</span>
           </div>
         </div>
       </div>
-            <div class="content card" style="margin-top: 10px;">
+      <div class="content card " style="margin-top: 10px;margin-bottom: 70px;">
         <div class="title"><span>服务矩阵</span></div>
         <div class="my_community flex flex-wrap">
-                    <div style="width: 25%;" class="flex flex-y flex-center1 flex-center2"
+          <div style="width: 25%" class="flex flex-y flex-center1 flex-center2" v-for="(item, index) in serverList"
-                        v-for="(item, index) in serverList" :key="index" @click="handelCLickJump">
+            :key="index" @click="handelCLickJump">
-                        <img :src="item.imgSrc" class="img_33 m-top16" alt="">
+            <img :src="item.imgSrc" class="img_33 m-top16" alt="" />
             <span class="font-size14 m-top10">{{ item.title }}</span>
           </div>
         </div>
@@ -63,14 +63,16 @@
     </section>
     <div class="footer content flex flex-center2 flex-end">
       <span>关注公众号了解更多...</span>
-            <van-button round color="#ffa800" utl="https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzkxNzQ5MzUzNg==&scene=110#wechat_redirect" size="small">关注</van-button>
+      <van-button round color="#ffa800"
+        url="https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzkxNzQ5MzUzNg==&scene=110#wechat_redirect"
+        size="small">关注</van-button>
     </div>
   </div>
 </template>
 
 <script>
 import { getHouseInfoQR } from '@/api/house'
-import { Notify } from 'vant';
+import { Notify } from 'vant'
 export default {
   name: 'houseQR',
   data() {
@@ -84,22 +86,28 @@ export default {
         {
           imgSrc: require('@/assets/images/houseQR/2.png'),
           title: '我有诉求'
-                }, {
+        },
+        {
           imgSrc: require('@/assets/images/houseQR/3.png'),
           title: '社区讯息'
-                }, {
+        },
+        {
           imgSrc: require('@/assets/images/houseQR/4.png'),
           title: '社区活动'
-                }, {
+        },
+        {
           imgSrc: require('@/assets/images/houseQR/5.png'),
           title: '居民议事'
-                }, {
+        },
+        {
           imgSrc: require('@/assets/images/houseQR/6.png'),
           title: '满意度测评'
-                }, {
+        },
+        {
           imgSrc: require('@/assets/images/houseQR/7.png'),
           title: '可享服务'
-                }, {
+        },
+        {
           imgSrc: require('@/assets/images/houseQR/8.png'),
           title: '身边网格员'
         }
@@ -108,41 +116,53 @@ export default {
         {
           imgSrc: require('@/assets/images/houseQR/bot_1.png'),
           title: '户政服务'
-                }, {
+        },
+        {
           imgSrc: require('@/assets/images/houseQR/bot_2.png'),
           title: '身份证业务'
-                }, {
+        },
+        {
           imgSrc: require('@/assets/images/houseQR/bot_3.png'),
           title: '公积金'
-                }, {
+        },
+        {
           imgSrc: require('@/assets/images/houseQR/bot_4.png'),
           title: '电子社保'
-                },
+        }
       ],
       formData: null
     }
   },
   created() {
-        console.log(this.$store.state.app.houseId, '路由中');
+    console.log(this.$store.state.app.houseId, '路由中')
-        this.houesId = this.$store.state.app.houseId;
+    this.houesId = this.$store.state.app.houseId
-        this.getHouseInfo();
+    this.getHouseInfo()
   },
   mounted() { },
   methods: {
     getHouseInfo() {
-            console.log(this.houesId);
+      console.log(this.houesId)
       getHouseInfoQR(this.houesId).then(res => {
         this.formData = res
       })
     },
-        handelCLickJump(){
+    handelCLickJump(index) {
-            Notify({ type: 'primary', message: '功能持续开放中，敬请期待！' });
+      if (index === 0) {
+        if (this.formData.qrCode) {
+          location.assign(this.formData.qrCode)
+        } else {
+          Notify({ type: 'primary', message: '未找到图片！' })
+        }
+      } else if (index === 1) {
+        this.$router.push({ path: '/event' })
+      } else {
+        Notify({ type: 'primary', message: '功能持续开放中，敬请期待！' })
+      }
     }
   }
-
 }
 </script>
 
-<style scoped lang="less" scoped>
+<style scoped lang="less">
 @import './index';
 </style>