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

样式跟进

feature
mk 1 year ago
parent
0427438c48
commit
a3125227ad
4 changed files with 157 additions and 136 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. BIN
      src/assets/images/houseQR/header_bg.png
  2. 4
      src/router/index.js
  3. 13
      src/views/houseQR/index.less
  4. 276
      src/views/houseQR/index.vue

BIN
src/assets/images/houseQR/header_bg.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 186 KiB

After

Width:  |  Height:  |  Size: 147 KiB

4
src/router/index.js
View File

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

13
src/views/houseQR/index.less
View File

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

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

@ -1,148 +1,168 @@
<template> <template>
<div > <div style="position: relative;">
<div class="header"> <div class="header">
<div class="mask"></div> <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="" />
<div class="flex flex-y flex-center1 flex1">
<div class="van-multi-ellipsis--l3">{{ formData.houseAddress }}</div>
</div>
</div> </div>
<section class=""> <div class="card flex flex-y basi_content content">
<div class="flex flex-y m-bot10"> <div class="flex flex-center">
<div class="house_base flex"> <div class="label">
<img src="@/assets/images/houseQR/house.png" alt=""> <img src="@/assets/images/icons/community.png" class="img_16 m-right10" alt="" />
<div class="flex flex-y flex-center1 flex1"> <span class="gray">所属社区：</span>
<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 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>
<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/grid.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>
</div> </div>
<div class="content card "> <div class="value flex1">{{ formData.communityName || '--' }}</div>
<div class="title"> </div>
<span>我的社区</span> <div class="flex flex-center m-top15">
</div> <div class="label">
<div class="my_community flex flex-wrap"> <img src="@/assets/images/icons/grid.png" class="img_16 m-right10" alt="" />
<div style="width: 25%;" class="flex flex-y flex-center1 flex-center2" <span class="gray">所属网格：</span>
v-for="(item, index) in myCommunity" :key="index">
<img :src="item.imgSrc" class="img_33 m-top16" alt="" @click="handelCLickJump">
<span class="font-size14 m-top10">{{ item.title }}</span>
</div>
</div>
</div> </div>
<div class="content card" style="margin-top: 10px;"> <span class="value flex1">{{ formData.gridName || '--' }}</span>
<div class="title"><span>服务矩阵</span></div> </div>
<div class="my_community flex flex-wrap"> <div class="flex flex-center2 flex-end m-top15">
<div style="width: 25%;" class="flex flex-y flex-center1 flex-center2" <div class="flex">
v-for="(item, index) in serverList" :key="index" @click="handelCLickJump"> <div class="label">
<img :src="item.imgSrc" class="img_33 m-top16" alt=""> <img src="@/assets/images/icons/tel.png" class="img_16 m-right10" alt="" />
<span class="font-size14 m-top10">{{ item.title }}</span> <span class="gray">社区电话：</span>
</div> </div>
</div> <div class="value">{{ formData.communityTel || '--' }}</div>
</div> </div>
</section> <a :href="`tel:${formData.communityTel}`" v-show="formData.communityTel">拨打</a>
<div class="footer content flex flex-center2 flex-end"> </div>
<span>关注公众号了解更多...</span> </div>
<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> </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(index)" />
<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>
</div>
</div>
</section>
<div class="footer content flex flex-center2 flex-end">
<span>关注公众号了解更多...</span>
<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>
</div>
</template> </template>
<script> <script>
import { getHouseInfoQR } from '@/api/house' import { getHouseInfoQR } from '@/api/house'
import { Notify } from 'vant'; import { Notify } from 'vant'
export default { export default {
name: 'houseQR', name: 'houseQR',
data() { data() {
return { return {
houesId: null, houesId: null,
myCommunity: [ myCommunity: [
{ {
imgSrc: require('@/assets/images/houseQR/1.png'), imgSrc: require('@/assets/images/houseQR/1.png'),
title: '二维码下载' title: '二维码下载'
}, },
{ {
imgSrc: require('@/assets/images/houseQR/2.png'), imgSrc: require('@/assets/images/houseQR/2.png'),
title: '我有诉求' title: '我有诉求'
}, { },
imgSrc: require('@/assets/images/houseQR/3.png'), {
title: '社区讯息' imgSrc: require('@/assets/images/houseQR/3.png'),
}, { title: '社区讯息'
imgSrc: require('@/assets/images/houseQR/4.png'), },
title: '社区活动' {
}, { imgSrc: require('@/assets/images/houseQR/4.png'),
imgSrc: require('@/assets/images/houseQR/5.png'), title: '社区活动'
title: '居民议事' },
}, { {
imgSrc: require('@/assets/images/houseQR/6.png'), imgSrc: require('@/assets/images/houseQR/5.png'),
title: '满意度测评' title: '居民议事'
}, { },
imgSrc: require('@/assets/images/houseQR/7.png'), {
title: '可享服务' imgSrc: require('@/assets/images/houseQR/6.png'),
}, { title: '满意度测评'
imgSrc: require('@/assets/images/houseQR/8.png'), },
title: '身边网格员' {
} imgSrc: require('@/assets/images/houseQR/7.png'),
], title: '可享服务'
serverList: [ },
{ {
imgSrc: require('@/assets/images/houseQR/bot_1.png'), imgSrc: require('@/assets/images/houseQR/8.png'),
title: '户政服务' 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() { serverList: [
console.log(this.$store.state.app.houseId, '路由中'); {
this.houesId = this.$store.state.app.houseId; imgSrc: require('@/assets/images/houseQR/bot_1.png'),
this.getHouseInfo(); title: '户政服务'
}, },
mounted() { }, {
methods: { imgSrc: require('@/assets/images/houseQR/bot_2.png'),
getHouseInfo() { title: '身份证业务'
console.log(this.houesId); },
getHouseInfoQR(this.houesId).then(res => { {
this.formData = res imgSrc: require('@/assets/images/houseQR/bot_3.png'),
}) title: '公积金'
}, },
handelCLickJump(){ {
Notify({ type: 'primary', message: '功能持续开放中，敬请期待！' }); imgSrc: require('@/assets/images/houseQR/bot_4.png'),
title: '电子社保'
} }
],
formData: null
} }
},
created() {
console.log(this.$store.state.app.houseId, '路由中')
this.houesId = this.$store.state.app.houseId
this.getHouseInfo()
},
mounted() { },
methods: {
getHouseInfo() {
console.log(this.houesId)
getHouseInfoQR(this.houesId).then(res => {
this.formData = res
})
},
handelCLickJump(index) {
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> </script>
<style scoped lang="less" scoped> <style scoped lang="less">
@import './index'; @import './index';
</style> </style>

Write Preview
Loading…
Cancel
Save