政务管理跳转测试

src/views/govAffairs/index.vue

@@ -9,7 +9,7 @@
     <!-- 主内容区域 -->
     <div class="content-wrapper">
       <!-- 左侧Tab栏，固定不动 -->
-      <div class="left-tab">
+      <!-- <div class="left-tab">
         <div
           v-for="(tab, index) in tabs"
           :key="index"
@@ -18,7 +18,7 @@
         >
           {{ tab.name }}
         </div>
-      </div>
+      </div> -->
 
       <!-- 右侧内容区域：显示所有图标列表，可滚动 -->
       <div class="right-content" ref="rightContent">
@@ -27,8 +27,9 @@
           :key="index"
           class="icon-list"
         >
-          <h3 class="tab-title" :ref="'tabTitle' + index">{{ tab.name }}</h3> <!-- 使用ref获取标题 -->
+          <!-- <h3 class="tab-title" :ref="'tabTitle' + index">{{ tab.name }}</h3>  -->
-          <div class="icon-item" v-for="(icon, iconIndex) in tab.icons" :key="iconIndex">
+          <!-- 使用ref获取标题 -->
+          <div class="icon-item" v-for="(icon, iconIndex) in tab.icons" :key="iconIndex" @click="handelClickIcon(icon.type)">
             <img :src="icon.url" :alt="icon.name" class="icon-image" />
             <div class="icon-name">{{ icon.name }}</div>
           </div>
@@ -36,6 +37,10 @@
       </div>
     </div>
     <Android></Android>
+    <van-popup v-model="showQRCode" round  v-if="qrType">
+          <h3>长按识别二维码跳转小程序</h3>
+          <img :src="require(`@/assets/images/govAffairs/qrImg/${qrType}.png`)" show-menu-by-longpress="true" style="width: 200px;height: 200px;margin-bottom: 20px;"/>
+    </van-popup>
   </div>
 
 </template>
@@ -46,40 +51,24 @@ export default {
         return {
             activeTab: 0, // 当前激活的Tab索引
             tabs: [
-                { 
-                name: "公积金服务", 
-                icons: [
-                    { name: "公积金账户信息查询", url: require('@/assets/images/govAffairs/gjjzh.png')},
-                    { name: "公积金账户明细", url: require('@/assets/images/govAffairs/mx.png')},
-                    { name: "公积金账户缴存明细", url: require('@/assets/images/govAffairs/jcmx.png')},
-                    { name: "公积金账户提取明细", url: require('@/assets/images/govAffairs/tqmx.png')}
-                ]
-                },
                 { 
                 name: "社保医保", 
                 icons: [
-                    { name: "医保电子凭证", url: require('@/assets/images/govAffairs/ybdz.png')},
+                    { name: "国家政务服务平台", url: require('@/assets/images/govAffairs/gjzw.png'),type:'gjzwfw'},
-                    { name: "跨省异地就医备案", url: require('@/assets/images/govAffairs/ksyd.png')},
+                    { name: "爱山东", url: require('@/assets/images/govAffairs/asd.png'),type:'asd'},
-                    { name: "医保机构查询", url: require('@/assets/images/govAffairs/ybjg.png')},
+                    { name: "东明县政务服务", url: require('@/assets/images/govAffairs/dmzw.png'),type:'dmzwfw'},
-                    { name: "定点零售药店", url: require('@/assets/images/govAffairs/ddls.png')}
+                    { name: "东明教研", url: require('@/assets/images/govAffairs/dmjy.png'),type:'dmjy'},
-                ]
+                    { name: "东明县司法局", url: require('@/assets/images/govAffairs/sfj.png'),type:'sfj'},
-                },
+                    { name: "菏泽微警务", url: require('@/assets/images/govAffairs/wjw.png'),type:''},//类型 wjw
-                { 
+                    { name: "菏泽医保", url: require('@/assets/images/govAffairs/ybdz.png'),type:'hzyb'},
-                name: "出入境服务", 
+                    { name: "菏泽疾控", url: require('@/assets/images/govAffairs/ksyd.png'),type:'hzjk'},
-                icons: [
+                    // { name: "医保机构查询", url: require('@/assets/images/govAffairs/ybjg.png')},
+                    // { name: "定点零售药店", url: require('@/assets/images/govAffairs/ddls.png')}
                 ]
                 },
-                { 
+            ],
-                name: "助残服务", 
+            showQRCode:false,
-                icons: [
+            qrType:null
-                ]
-                },
-                { 
-                name: "执业资质", 
-                icons: [
-                ]
-                }
-            ]
         };
     },
     created() {
@@ -99,8 +88,15 @@ export default {
                 behavior: "smooth"
                 });
             }
+        },
+        handelClickIcon(type){
+         if(type){
+          this.showQRCode = true;
+          this.qrType = type;
+         }else{
+          this.$toast('暂无二维码')
+         }
         }
-        
     },
     components: {},
     computed: {},
@@ -197,4 +193,21 @@ export default {
   font-size: 14px;
   color: #333;
 }
+:deep .van-popup{
+    width: 320px;
+    height: 350px;
+    padding-top: 15px;
+    box-sizing: border-box;
+    background: url('@/assets/images/houseQR/dialog_bg.png') no-repeat;
+    background-size: 100% 100%;
+    overflow: hidden;
+    display: flex;
+    justify-content:  flex-end;
+    align-items:center;
+    flex-direction: column;
+    h3{
+      width: 100%;
+      padding-left: 10px;
+    }
+}
 </style>