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
Split 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 Perfect from '@/components/Perfect'
Vue.config.ignoredElements = ["wx-open-launch-weapp"];
Vue.component('Perfect', Perfect)
if (process.env.NODE_ENV !== 'production') {
new Vconsole()

3
src/utils/jweixin.js
View File

@ -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']
})
})
}

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

@ -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() {
@ -145,33 +151,35 @@ export default {
this.getHouseInfo()
},
mounted() {
setConfig(['updateAppMessageShareData', 'onMenuShareAppMessage', 'updateTimelineShareData'])
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: '功能持续开放中，敬请期待！' })
}
}

Write Preview
Loading…
Cancel
Save