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

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

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

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

@ -1,148 +1,168 @@
<template>
<div >
<div class="header">
<div class="mask"></div>
<div style="position: relative;">
<div class="header">
<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>
<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 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 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="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">
<span class="font-size14 m-top10">{{ item.title }}</span>
</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>
<div class="content card" style="margin-top: 10px;">
<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>
<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>
</section>
<div class="footer content flex flex-center2 flex-end">
<span>关注公众号了解更多...</span>
<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>
<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(index)" />
<span class="font-size14 m-top10">{{ item.title }}</span>
</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>
</template>
<script>
import { getHouseInfoQR } from '@/api/house'
import { Notify } from 'vant';
import { Notify } from 'vant'
export default {
name: 'houseQR',
data() {
return {
houesId: null,
myCommunity: [
{
imgSrc: require('@/assets/images/houseQR/1.png'),
title: '二维码下载'
},
{
imgSrc: require('@/assets/images/houseQR/2.png'),
title: '我有诉求'
}, {
imgSrc: require('@/assets/images/houseQR/3.png'),
title: '社区讯息'
}, {
imgSrc: require('@/assets/images/houseQR/4.png'),
title: '社区活动'
}, {
imgSrc: require('@/assets/images/houseQR/5.png'),
title: '居民议事'
}, {
imgSrc: require('@/assets/images/houseQR/6.png'),
title: '满意度测评'
}, {
imgSrc: require('@/assets/images/houseQR/7.png'),
title: '可享服务'
}, {
imgSrc: require('@/assets/images/houseQR/8.png'),
title: '身边网格员'
}
],
serverList: [
{
imgSrc: require('@/assets/images/houseQR/bot_1.png'),
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
name: 'houseQR',
data() {
return {
houesId: null,
myCommunity: [
{
imgSrc: require('@/assets/images/houseQR/1.png'),
title: '二维码下载'
},
{
imgSrc: require('@/assets/images/houseQR/2.png'),
title: '我有诉求'
},
{
imgSrc: require('@/assets/images/houseQR/3.png'),
title: '社区讯息'
},
{
imgSrc: require('@/assets/images/houseQR/4.png'),
title: '社区活动'
},
{
imgSrc: require('@/assets/images/houseQR/5.png'),
title: '居民议事'
},
{
imgSrc: require('@/assets/images/houseQR/6.png'),
title: '满意度测评'
},
{
imgSrc: require('@/assets/images/houseQR/7.png'),
title: '可享服务'
},
{
imgSrc: require('@/assets/images/houseQR/8.png'),
title: '身边网格员'
}
},
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
})
],
serverList: [
{
imgSrc: require('@/assets/images/houseQR/bot_1.png'),
title: '户政服务'
},
{
imgSrc: require('@/assets/images/houseQR/bot_2.png'),
title: '身份证业务'
},
{
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>
<style scoped lang="less" scoped>
<style scoped lang="less">
@import './index';
</style>
Write Preview
Loading…
Cancel
Save