elink-star
/
epmet-wx-pa
16
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

新增加跳转小程序组件

dev
mk 1 year ago
parent
10f04f2945
commit
15fc941f76
4 changed files with 141 additions and 77 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 51
      src/components/launchWeapp/index.vue
  2. 1
      src/main.js
  3. 3
      src/utils/jweixin.js
  4. 161
      src/views/houseQR/index.vue

51
src/components/launchWeapp/index.vue
View File

@ -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>

1
src/main.js
View File

@ -28,6 +28,7 @@ Vue.prototype.$tips = Tips
//开发环境使用，生产环境自动取消 //开发环境使用，生产环境自动取消
import Vconsole from 'vconsole' import Vconsole from 'vconsole'
import Perfect from '@/components/Perfect' import Perfect from '@/components/Perfect'
Vue.config.ignoredElements = ["wx-open-launch-weapp"];
Vue.component('Perfect', Perfect) Vue.component('Perfect', Perfect)
if (process.env.NODE_ENV !== 'production') { if (process.env.NODE_ENV !== 'production') {
new Vconsole() new Vconsole()

3
src/utils/jweixin.js
View File

@ -8,7 +8,8 @@ export const setConfig = function (jsApiList = []) {
timestamp: res.data.timestamp, timestamp: res.data.timestamp,
nonceStr: res.data.nonceStr, nonceStr: res.data.nonceStr,
signature: res.data.signature, signature: res.data.signature,
jsApiList jsApiList,
openTagList:['wx-open-launch-weapp']
}) })
}) })
} }

161
src/views/houseQR/index.vue
View File

@ -4,62 +4,62 @@
<div class="mask"></div> <div class="mask"></div>
</div> </div>
<section v-if="formData"> <section v-if="formData">
<div class="flex flex-y m-bot10"> <div class="flex flex-y m-bot10">
<div class="house_base flex"> <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="flex flex-y flex-center1 flex1">
<div class="van-multi-ellipsis--l3">{{ formData.houseAddress || '--' }}</div> <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> </div>
<div class="value flex1">{{ formData.communityName || '--' }}</div>
</div> </div>
<div class="flex flex-center m-top15"> <div class="card flex flex-y basi_content content">
<div class="label"> <div class="flex flex-center">
<img src="@/assets/images/icons/grid.png" class="img_16 m-right10" alt="" /> <div class="label">
<span class="gray">所属网格：</span> <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>
<span class="value flex1">{{ formData.gridName || '--' }}</span> <div class="flex flex-center m-top15">
</div>
<div class="flex flex-center2 flex-end m-top15">
<div class="flex">
<div class="label"> <div class="label">
<img src="@/assets/images/icons/tel.png" class="img_16 m-right10" alt="" /> <img src="@/assets/images/icons/grid.png" class="img_16 m-right10" alt="" />
<span class="gray">社区电话：</span> <span class="gray">所属网格：</span>
</div> </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> </div>
<a :href="`tel:${formData.communityTel}`" v-show="formData.communityTel">拨打</a>
</div> </div>
</div> </div>
</div> <div class="content card">
<div class="content card"> <div class="title">
<div class="title"> <span>我的社区</span>
<span>我的社区</span> </div>
</div> <div class="my_community flex flex-wrap">
<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"
<div style="width: 25%" class="flex flex-y flex-center1 flex-center2" v-for="(item, index) in myCommunity" :key="index">
:key="index"> <img :src="item.imgSrc" class="img_33 m-top16" alt="" @click="handelCLickJump(item)" />
<img :src="item.imgSrc" class="img_33 m-top16" alt="" @click="handelCLickJump(item)" /> <span class="font-size14 m-top10">{{ item.title }}</span>
<span class="font-size14 m-top10">{{ item.title }}</span> </div>
</div> </div>
</div> </div>
</div> <div class="content card " style="margin-top: 10px;margin-bottom: 70px;">
<div class="content card " style="margin-top: 10px;margin-bottom: 70px;"> <div class="title"><span>服务矩阵</span></div>
<div class="title"><span>服务矩阵</span></div> <div class="my_community flex flex-wrap">
<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"
<div style="width: 25%" class="flex flex-y flex-center1 flex-center2" v-for="(item, index) in serverList" :key="index" @click="handelCLickJump(item)">
: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>
<span class="font-size14 m-top10">{{ item.title }}</span> </div>
</div> </div>
</div> </div>
</div>
</section> </section>
<div class="footer content flex flex-center2 flex-end"> <div class="footer content flex flex-center2 flex-end">
<span>关注公众号了解更多...</span> <span>关注公众号了解更多...</span>
@ -67,12 +67,16 @@
url="https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzkxNzQ5MzUzNg==&scene=110#wechat_redirect" url="https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzkxNzQ5MzUzNg==&scene=110#wechat_redirect"
size="small">关注</van-button> size="small">关注</van-button>
</div> </div>
<van-popup v-model="showLaunch" round>
<launch-weapp v-if="showLaunch"></launch-weapp>
</van-popup>
</div> </div>
</template> </template>
<script> <script>
import { getHouseInfoQR } from '@/api/house' import { getHouseInfoQR } from '@/api/house'
import { Notify } from 'vant' import { Notify } from 'vant'
import launchWeapp from '@/components/launchWeapp/index'
export default { export default {
name: 'houseQR', name: 'houseQR',
data() { data() {
@ -86,32 +90,32 @@ export default {
{ {
imgSrc: require('@/assets/images/houseQR/2.png'), imgSrc: require('@/assets/images/houseQR/2.png'),
title: '我有诉求', title: '我有诉求',
path:'/event' path: '/event'
}, },
{ {
imgSrc: require('@/assets/images/houseQR/3.png'), imgSrc: require('@/assets/images/houseQR/3.png'),
title: '社区讯息', title: '社区讯息',
path:'/communityPublicity' path: '/communityPublicity'
}, },
{ {
imgSrc: require('@/assets/images/houseQR/4.png'), imgSrc: require('@/assets/images/houseQR/4.png'),
title: '社区活动', title: '社区活动',
path:'/activity' path: '/activity'
}, },
{ {
imgSrc: require('@/assets/images/houseQR/5.png'), imgSrc: require('@/assets/images/houseQR/5.png'),
title: '居民议事', title: '居民议事',
path:'/discussion' path: '/discussion'
}, },
{ {
imgSrc: require('@/assets/images/houseQR/6.png'), imgSrc: require('@/assets/images/houseQR/6.png'),
title: '满意度测评', title: '满意度测评',
path:'/mySatisfaction' path: '/mySatisfaction'
}, },
{ {
imgSrc: require('@/assets/images/houseQR/7.png'), imgSrc: require('@/assets/images/houseQR/7.png'),
title: '可享服务', title: '可享服务',
path:'/Enjoyableservices' path: '/Enjoyableservices'
}, },
{ {
imgSrc: require('@/assets/images/houseQR/8.png'), imgSrc: require('@/assets/images/houseQR/8.png'),
@ -133,10 +137,12 @@ export default {
}, },
{ {
imgSrc: require('@/assets/images/houseQR/bot_4.png'), imgSrc: require('@/assets/images/houseQR/bot_4.png'),
title: '电子社保' title: '电子社保',
type: 'security'
} }
], ],
formData: null formData: null,
showLaunch:false
} }
}, },
created() { created() {
@ -145,33 +151,35 @@ export default {
this.getHouseInfo() this.getHouseInfo()
}, },
mounted() { mounted() {
setConfig(['updateAppMessageShareData', 'onMenuShareAppMessage', 'updateTimelineShareData'])
this.share() this.share()
}, },
components:{
launchWeapp
},
methods: { methods: {
share() { share() {
let than = this let than = this
if (wx.updateAppMessageShareData) { if (wx.updateAppMessageShareData) {
wx.ready(function () { wx.ready(function () {
wx.updateAppMessageShareData({ wx.updateAppMessageShareData({
title: 'e智社区', title: 'e智社区',
desc: '我的电子门牌', desc: '我的电子门牌',
link: `https://epmet-preview.elinkservice.cn/epmet-wx-pa/#/houseQR?houseId=${than.houesId}&appId=${than.$store.state.app.appId}`, 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', imgUrl: 'https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet/test/20240710/617f7fb327064d89892823b81b11cd70.png',
success: function () {} success: function () { }
}) })
}); });
} else { } else {
wx.onMenuShareAppMessage({ wx.onMenuShareAppMessage({
title: 'e智社区', title: 'e智社区',
desc: '我的电子门牌', desc: '我的电子门牌',
link: `http://epmet-cloud.elinkservice.cn/#/houseQR?houseId=${than.houesId}}&appId=${than.$store.state.app.appId}`, 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', imgUrl: 'https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet/test/20240710/617f7fb327064d89892823b81b11cd70.png',
success: function () {} success: function () { }
}) })
} }
}, },
getHouseInfo() { getHouseInfo() {
console.log(this.houesId) console.log(this.houesId)
getHouseInfoQR(this.houesId).then(res => { getHouseInfoQR(this.houesId).then(res => {
@ -181,7 +189,10 @@ export default {
handelCLickJump(item) { handelCLickJump(item) {
if (item.path) { if (item.path) {
this.$router.push({ path: item.path }) this.$router.push({ path: item.path })
} else { }else if(item.type === 'security'){
this.showLaunch = true;
}
else {
Notify({ type: 'primary', message: '功能持续开放中，敬请期待！' }) Notify({ type: 'primary', message: '功能持续开放中，敬请期待！' })
} }
} }

Write Preview
Loading…
Cancel
Save