From 15fc941f769b64933906c0183626e3c5c4f30700 Mon Sep 17 00:00:00 2001
From: mk <2403457699@qq.com>
Date: Tue, 16 Jul 2024 15:59:13 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E5=8A=A0=E8=B7=B3=E8=BD=AC?=
 =?UTF-8?q?=E5=B0=8F=E7=A8=8B=E5=BA=8F=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/launchWeapp/index.vue |  51 +++++++++
 src/main.js                          |   1 +
 src/utils/jweixin.js                 |   3 +-
 src/views/houseQR/index.vue          | 163 ++++++++++++++-------------
 4 files changed, 141 insertions(+), 77 deletions(-)
 create mode 100644 src/components/launchWeapp/index.vue

diff --git a/src/components/launchWeapp/index.vue b/src/components/launchWeapp/index.vue
new file mode 100644
index 0000000..02e175e
--- /dev/null
+++ b/src/components/launchWeapp/index.vue
@@ -0,0 +1,51 @@
+<template>
+    <div class="navi-container">
+        <div class="fake-btn" id="weappBtn">点击跳转小程序</div>
+        <wx-open-launch-weapp @launch="launch" appid="wx6163d215ef686f78" path="pages/home/index.html"
+            style="position: absolute;top: 0;left: 0;width: 100%;height: 50px;z-index: 10;">
+            <script type="text/wxtag-template">
+          <style>.btn {width: 100%;height: 50px;position: absolute;left: 0;top: 0;z-index: 99;background: transparent;border: none;}</style>
+          <button class="btn" id="NaviToMini"></button>
+        </script>
+        </wx-open-launch-weapp>
+    </div>
+</template>
+<script>
+import { setConfig } from '@/utils/jweixin'
+
+export default {
+    data() {
+        return {}
+    },
+    mounted() {
+        setConfig()
+    },
+    methods: {
+        launch(e) {
+            console.log("获取小程序 允许 按钮 操作回调", e)
+        }
+    }
+}
+</script>
+<style lang="less" scoped>
+.navi-container {
+    position: relative;
+    width: 200px;
+    height: 30px;
+    margin: 18px auto;
+   
+    .fake-btn {
+        width: 180px;
+        height: 30px;
+        margin: 0 auto;
+        border-radius: 25px;
+        border: 1px solid rgba(62, 134, 255);
+        color: #fff;
+        font-size: 16px;
+        text-align: center;
+        line-height: 30px;
+        z-index: 1;
+        background: linear-gradient(to right, #3e86ff, #5f9af9);
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index 1f0ac8b..6e94a0b 100644
--- a/src/main.js
+++ b/src/main.js
@@ -28,6 +28,7 @@ Vue.prototype.$tips = Tips
 //开发环境使用，生产环境自动取消
 import Vconsole from 'vconsole'
 import Perfect from '@/components/Perfect'
+Vue.config.ignoredElements = ["wx-open-launch-weapp"];
 Vue.component('Perfect', Perfect)
 if (process.env.NODE_ENV !== 'production') {
   new Vconsole()
diff --git a/src/utils/jweixin.js b/src/utils/jweixin.js
index 7ba062e..ac89c5f 100644
--- a/src/utils/jweixin.js
+++ b/src/utils/jweixin.js
@@ -8,7 +8,8 @@ export const setConfig = function (jsApiList = []) {
       timestamp: res.data.timestamp,
       nonceStr: res.data.nonceStr,
       signature: res.data.signature,
-      jsApiList
+      jsApiList,
+      openTagList:['wx-open-launch-weapp']
     })
   })
 }
diff --git a/src/views/houseQR/index.vue b/src/views/houseQR/index.vue
index 969169c..6937739 100644
--- a/src/views/houseQR/index.vue
+++ b/src/views/houseQR/index.vue
@@ -4,62 +4,62 @@
       <div class="mask"></div>
     </div>
     <section v-if="formData">
-      <div class="flex flex-y m-bot10">
-        <div class="house_base flex">
-          <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>
-        </div>
-        <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="" />
-              <span class="gray">所属社区：</span>
+        <div class="flex flex-y m-bot10">
+          <div class="house_base flex">
+            <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>
-            <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="" />
-              <span class="gray">所属网格：</span>
+          <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="" />
+                <span class="gray">所属社区：</span>
+              </div>
+              <div class="value flex1">{{ formData.communityName || '--' }}</div>
             </div>
-            <span class="value flex1">{{ formData.gridName || '--' }}</span>
-          </div>
-          <div class="flex flex-center2 flex-end m-top15">
-            <div class="flex">
+            <div class="flex flex-center m-top15">
               <div class="label">
-                <img src="@/assets/images/icons/tel.png" class="img_16 m-right10" alt="" />
-                <span class="gray">社区电话：</span>
+                <img src="@/assets/images/icons/grid.png" class="img_16 m-right10" alt="" />
+                <span class="gray">所属网格：</span>
               </div>
-              <div class="value">{{ formData.communityTel || '--' }}</div>
+              <span class="value flex1">{{ formData.gridName || '--' }}</span>
+            </div>
+            <div class="flex flex-center2 flex-end m-top15">
+              <div class="flex">
+                <div class="label">
+                  <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>
             </div>
-            <a :href="`tel:${formData.communityTel}`" v-show="formData.communityTel">拨打</a>
           </div>
         </div>
-      </div>
-      <div class="content card">
-        <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" v-for="(item, index) in myCommunity"
-            :key="index">
-            <img :src="item.imgSrc" class="img_33 m-top16" alt="" @click="handelCLickJump(item)" />
-            <span class="font-size14 m-top10">{{ item.title }}</span>
+        <div class="content card">
+          <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" v-for="(item, index) in myCommunity"
+              :key="index">
+              <img :src="item.imgSrc" class="img_33 m-top16" alt="" @click="handelCLickJump(item)" />
+              <span class="font-size14 m-top10">{{ item.title }}</span>
+            </div>
           </div>
         </div>
-      </div>
-      <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" v-for="(item, index) in serverList"
-            :key="index" @click="handelCLickJump">
-            <img :src="item.imgSrc" class="img_33 m-top16" alt="" />
-            <span class="font-size14 m-top10">{{ item.title }}</span>
+        <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" v-for="(item, index) in serverList"
+              :key="index" @click="handelCLickJump(item)">
+              <img :src="item.imgSrc" class="img_33 m-top16" alt="" />
+              <span class="font-size14 m-top10">{{ item.title }}</span>
+            </div>
           </div>
         </div>
-      </div>
     </section>
     <div class="footer content flex flex-center2 flex-end">
       <span>关注公众号了解更多...</span>
@@ -67,12 +67,16 @@
         url="https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzkxNzQ5MzUzNg==&scene=110#wechat_redirect"
         size="small">关注</van-button>
     </div>
+    <van-popup v-model="showLaunch" round>
+          <launch-weapp v-if="showLaunch"></launch-weapp>
+    </van-popup>
   </div>
 </template>
 
 <script>
 import { getHouseInfoQR } from '@/api/house'
 import { Notify } from 'vant'
+import launchWeapp from '@/components/launchWeapp/index'
 export default {
   name: 'houseQR',
   data() {
@@ -86,32 +90,32 @@ export default {
         {
           imgSrc: require('@/assets/images/houseQR/2.png'),
           title: '我有诉求',
-          path:'/event'
+          path: '/event'
         },
         {
           imgSrc: require('@/assets/images/houseQR/3.png'),
           title: '社区讯息',
-          path:'/communityPublicity'
+          path: '/communityPublicity'
         },
         {
           imgSrc: require('@/assets/images/houseQR/4.png'),
           title: '社区活动',
-          path:'/activity'
+          path: '/activity'
         },
         {
           imgSrc: require('@/assets/images/houseQR/5.png'),
           title: '居民议事',
-          path:'/discussion'
+          path: '/discussion'
         },
         {
           imgSrc: require('@/assets/images/houseQR/6.png'),
           title: '满意度测评',
-          path:'/mySatisfaction'
+          path: '/mySatisfaction'
         },
         {
           imgSrc: require('@/assets/images/houseQR/7.png'),
           title: '可享服务',
-          path:'/Enjoyableservices'
+          path: '/Enjoyableservices'
         },
         {
           imgSrc: require('@/assets/images/houseQR/8.png'),
@@ -133,10 +137,12 @@ export default {
         },
         {
           imgSrc: require('@/assets/images/houseQR/bot_4.png'),
-          title: '电子社保'
+          title: '电子社保',
+          type: 'security'
         }
       ],
-      formData: null
+      formData: null,
+      showLaunch:false
     }
   },
   created() {
@@ -144,34 +150,36 @@ export default {
     this.houesId = this.$store.state.app.houseId
     this.getHouseInfo()
   },
-  mounted() { 
-    setConfig(['updateAppMessageShareData', 'onMenuShareAppMessage', 'updateTimelineShareData'])
+  mounted() {
     this.share()
   },
+  components:{
+    launchWeapp
+  },
   methods: {
     share() {
-           let than = this
-            if (wx.updateAppMessageShareData) {
-                wx.ready(function () {
-                    wx.updateAppMessageShareData({
-                        title: 'e智社区',
-                        desc: '我的电子门牌',
-                        link: `https://epmet-preview.elinkservice.cn/epmet-wx-pa/#/houseQR?houseId=${than.houesId}&appId=${than.$store.state.app.appId}`,
-                        imgUrl: 'https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet/test/20240710/617f7fb327064d89892823b81b11cd70.png',
-                        success: function () {}
-                    })
-                });
+      let than = this
+      if (wx.updateAppMessageShareData) {
+        wx.ready(function () {
+          wx.updateAppMessageShareData({
+            title: 'e智社区',
+            desc: '我的电子门牌',
+            link: `https://epmet-preview.elinkservice.cn/epmet-wx-pa/#/houseQR?houseId=${than.houesId}&appId=${than.$store.state.app.appId}`,
+            imgUrl: 'https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet/test/20240710/617f7fb327064d89892823b81b11cd70.png',
+            success: function () { }
+          })
+        });
 
-            } else {
-                wx.onMenuShareAppMessage({
-                    title: 'e智社区',
-                    desc: '我的电子门牌',
-                    link: `http://epmet-cloud.elinkservice.cn/#/houseQR?houseId=${than.houesId}}&appId=${than.$store.state.app.appId}`,
-                    imgUrl: 'https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet/test/20240710/617f7fb327064d89892823b81b11cd70.png',
-                    success: function () {}
-                })
-            }
-        },   
+      } else {
+        wx.onMenuShareAppMessage({
+          title: 'e智社区',
+          desc: '我的电子门牌',
+          link: `http://epmet-cloud.elinkservice.cn/#/houseQR?houseId=${than.houesId}}&appId=${than.$store.state.app.appId}`,
+          imgUrl: 'https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet/test/20240710/617f7fb327064d89892823b81b11cd70.png',
+          success: function () { }
+        })
+      }
+    },
     getHouseInfo() {
       console.log(this.houesId)
       getHouseInfoQR(this.houesId).then(res => {
@@ -181,7 +189,10 @@ export default {
     handelCLickJump(item) {
       if (item.path) {
         this.$router.push({ path: item.path })
-      } else {
+      }else if(item.type === 'security'){
+        this.showLaunch = true;
+      }
+       else {
         Notify({ type: 'primary', message: '功能持续开放中，敬请期待！' })
       }
     }