This commit is contained in:
liuye
2022-07-01 17:14:22 +08:00
parent 236cc6a114
commit 65afc37240
14 changed files with 214 additions and 274 deletions

View File

@@ -1,5 +1,5 @@
<template>
<div class="AddFamily">
<div class="AddMerchan">
<div class="search">
<div class="left">
<AiAreaPicker v-model="areaId" :areaId="user.areaId" @select="areaSelect" :name.sync="areaName" style="color: #666">
@@ -134,7 +134,7 @@ export default {
</script>
<style lang="scss" scoped>
.AddFamily {
.AddMerchan {
.search{
width: 100%;
height: 112px;

View File

@@ -1,23 +1,46 @@
<template>
<div class="AppMerchanGrid">
<template v-if="isGridMember">
<div class="pad-t32" v-if="component != 'Map'"/>
<div class="select-gird" v-if="component != 'Map'" flex>
<div class="pad-t32" />
<div class="select-gird" flex>
<AiPagePicker type="gird" class="fill" @select="handleSelectGird">
<div flex>
<img src="./components/img/gird-icon.png" alt="" class="gird-icon">
<AiMore v-model="params.girdName" icon="arrow-down"/>
<AiMore v-model="userGird.girdName" icon="arrow-down"/>
</div>
</AiPagePicker>
<span @click="linkTo('./SetGird?id='+params.id)" v-if="isGridAdmin&&!!params.id">网格配置</span>
<span @click="linkTo('./SetGird?id='+userGird.id)" v-if="isGridAdmin&&!!userGird.id">网格配置</span>
</div>
<component v-if="refresh" :is="component" @change="onChange" :params="params"/>
<!-- <div class="tabs" v-if="isTab">
<div class="item" @click="tabClick(index, item.component)" v-for="(item, index) in tabs" :key="index">
<img :src="tabIndex == index ? item.activeImg : item.img" alt=""/>
<p :class="{'color-3267F0':tabIndex == index}" v-text="item.text"/>
<div class="title">网格人员</div>
<div class="user-content" v-for="(item, index) in dataInfo.parentGirdMembers" :key="item.id">
<div>
<!-- <image :src="item.photo" alt="" mode="aspectFill" v-if="item.photo" /> -->
<img :src="item.photo" alt="" v-if="item.photo">
<img src="./components/img/big-user.png" alt="" v-else>
</div>
</div> -->
<div class="right">
<div class="name">{{ item.name }}</div>
<div class="gird">{{ item.checkType == 2 ? '网格长' : '网格员' }}</div>
<p>{{ item.girdName }}</p>
</div>
</div>
<div class="user-content user-item" v-for="(item, index) in dataInfo.girdMembers" :key="item.id" @click="viewUser(item.wxUserId)">
<div>
<!-- <image :src="item.photo" alt="" mode="aspectFill" v-if="item.photo" /> -->
<img :src="item.photo" alt="" v-if="item.photo">
<img src="./components/img/big-user.png" alt="" v-else>
</div>
<div class="right">
<div class="name">{{ item.name }}
<span class="gird">{{ item.checkType == 2 ? '网格长' : '网格员' }}</span>
<span class="family-btn" @click.stop="linkTo(`./FamilyList?id=${item.id}&girdId=${userGird.id}`)" v-if="item.checkType == 1">责任家庭 ></span>
</div>
<p>{{ item.girdName }} </p>
</div>
</div>
<AiEmpty description="暂无数据" class="emptyWrap"
v-if="dataInfo.parentGirdMembers && !dataInfo.parentGirdMembers.length && !dataInfo.girdMembers.length"></AiEmpty>
<AiGap h="112"/>
</template>
<div v-if="!isGridMember" class="empty">
<img src="./components/img/no-admin.png" alt="">
@@ -28,39 +51,12 @@
</template>
<script>
import Organization from './Organization.vue'
import {mapState} from 'vuex'
export default {
name: 'AppMerchanGrid',
appName: '网格管理',
data() {
return {
component: 'Organization',
params: {},
refresh: true,
tabIndex: 0,
tabs: [
{
img: require('./components/img/statistics-icon.png'),
activeImg: require('./components/img/statistics-icon-active.png'),
text: '统计',
component: 'Statistics',
},
{
img: require('./components/img/org-icon.png'),
activeImg: require('./components/img/org-icon-active.png'),
text: '组织',
component: 'Organization',
},
{
img: require('./components/img/map-icon.png'),
activeImg: require('./components/img/map-icon-active.png'),
text: '地图',
component: 'Map'
}
],
isTab: true,
dataInfo: {},
userGird: {}
}
},
computed: {
@@ -72,58 +68,148 @@ export default {
return this.user.girdCheckType == 2
}
},
components: {
Organization,
onLoad() {
this.handleSelectGird(this.user.gridInfo)
},
onShow() {
document.title = '网格管理'
},
mounted() {
this.getGirdUserList()
uni.$on('goback', (res) => {
this.userGird = res
this.getGirdUserList()
})
},
methods: {
onChange(e) {
this.params = e.params
this.component = e.type
handleSelectGird(v) {
this.userGird = v || {}
this.getGirdUserList()
},
refreshHome() {
this.refresh = false
this.$nextTick(() => {
this.refresh = true
getGirdUserList() {
this.$http.post(`/app/appgirdmemberinfo/listGirdMemberByGirdId?girdId=${this.userGird.id}`).then((res) => {
if (res.code == 0) {
this.dataInfo = res.data
}
})
},
tabClick(index, component) {
this.tabIndex = index
this.component = component
this.refreshHome();
},
linkTo(url) {
uni.navigateTo({url})
},
handleSelectGird(v) {
this.params = v || {}
this.refreshHome()
}
},
onLoad() {
this.handleSelectGird(this.user.gridInfo)
uni.$on('hideTab', () => {
this.isTab = false
})
uni.$on('showTab', () => {
this.isTab = true
})
},
onShow() {
document.title = '网格管理'
},
onReachBottom() {
if (!this.tabIndex) {
uni.$emit('nextList')
}
viewUser(userid) {
userid && this.injectJWeixin('openUserProfile').then(() => {
this.wxInvoke(['openUserProfile', {type: 1, userid}, () => 0])
})
},
},
}
</script>
<style lang="scss" scoped>
.AppMerchanGrid {
height: 100vh;
}
background-color: #f5f5f5;
.title {
font-size: 38px;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #333;
line-height: 52px;
padding-left: 32px;
margin-bottom: 32px;
}
.user-content {
width: calc(100% - 64px);
margin: 0 0 32px 32px;
background-color: #fff;
padding: 32px;
box-sizing: border-box;
display: flex;
img {
display: inline-block;
width: 200px;
height: 200px;
margin-right: 32px;
}
image {
width: 200px;
height: 200px;
margin-right: 32px;
}
.right {
width: 100%;
.name {
font-size: 32px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #333;
line-height: 44px;
margin-bottom: 12px;
}
.gird {
display: inline-block;
line-height: 44px;
background: #E8EFFF;
border-radius: 8px;
padding: 0 8px;
font-size: 26px;
font-family: PingFangSC-Regular, PingFang SC;
color: #26F;
margin-bottom: 12px;
}
p {
font-size: 26px;
font-family: PingFangSC-Regular, PingFang SC;
color: #666;
line-height: 36px;
}
}
}
.user-item {
img {
width: 96px;
height: 96px;
border-radius: 50%;
}
image {
width: 96px;
height: 96px;
border-radius: 50%;
}
.gird {
display: inline-block;
margin-left: 16px;
margin-bottom: 0 !important;
}
.name {
margin-bottom: 8px !important;
}
}
.family-btn {
font-size: 26px;
font-family: PingFangSC-Regular, PingFang SC;
color: #3975C6;
line-height: 36px;
float: right;
}
.pad-b112 {
padding-bottom: 112px;
}
}
.pad-t32 {
padding-top: 32px;
}

View File

@@ -1,181 +0,0 @@
<template>
<div class="Organization">
<div class="title">网格人员</div>
<div class="user-content" v-for="(item, index) in dataInfo.parentGirdMembers" :key="item.id">
<div>
<!-- <image :src="item.photo" alt="" mode="aspectFill" v-if="item.photo" /> -->
<img :src="item.photo" alt="" v-if="item.photo">
<img src="./components/img/big-user.png" alt="" v-else>
</div>
<div class="right">
<div class="name">{{ item.name }}</div>
<div class="gird">{{ item.checkType == 2 ? '网格长' : '网格员' }}</div>
<p>{{ item.girdName }}</p>
</div>
</div>
<div class="user-content user-item" v-for="(item, index) in dataInfo.girdMembers" :key="item.id" @click="viewUser(item.wxUserId)">
<div>
<!-- <image :src="item.photo" alt="" mode="aspectFill" v-if="item.photo" /> -->
<img :src="item.photo" alt="" v-if="item.photo">
<img src="./components/img/big-user.png" alt="" v-else>
</div>
<div class="right">
<div class="name">{{ item.name }}
<span class="gird">{{ item.checkType == 2 ? '网格长' : '网格员' }}</span>
<span class="family-btn" @click.stop="linkTo(`./FamilyList?id=${item.id}&girdId=${userGird.id}`)" v-if="item.checkType == 1">责任家庭 ></span>
</div>
<p>{{ item.girdName }} </p>
</div>
</div>
<AiEmpty description="暂无数据" class="emptyWrap"
v-if="dataInfo.parentGirdMembers && !dataInfo.parentGirdMembers.length && !dataInfo.girdMembers.length"></AiEmpty>
<AiGap h="112"/>
</div>
</template>
<script>
export default {
data() {
return {
userGird: {},
dataInfo: {},
}
},
props: ['params'],
onShow() {
document.title = '网格管理'
},
mounted() {
this.userGird = this.params
this.getGirdUserList()
uni.$on('goback', (res) => {
this.userGird = res
this.getGirdUserList()
})
},
methods: {
getGirdUserList() {
this.$http.post(`/app/appgirdmemberinfo/listGirdMemberByGirdId?girdId=${this.userGird.id}`).then((res) => {
if (res.code == 0) {
this.dataInfo = res.data
}
})
},
linkTo(url) {
uni.navigateTo({url})
},
viewUser(userid) {
userid && this.injectJWeixin('openUserProfile').then(() => {
this.wxInvoke(['openUserProfile', {type: 1, userid}, () => 0])
})
},
},
}
</script>
<style lang="scss" scoped>
.Organization {
background-color: #f5f5f5;
.title {
font-size: 38px;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #333;
line-height: 52px;
padding-left: 32px;
margin-bottom: 32px;
}
.user-content {
width: calc(100% - 64px);
margin: 0 0 32px 32px;
background-color: #fff;
padding: 32px;
box-sizing: border-box;
display: flex;
img {
display: inline-block;
width: 200px;
height: 200px;
margin-right: 32px;
}
image {
width: 200px;
height: 200px;
margin-right: 32px;
}
.right {
width: 100%;
.name {
font-size: 32px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #333;
line-height: 44px;
margin-bottom: 12px;
}
.gird {
display: inline-block;
line-height: 44px;
background: #E8EFFF;
border-radius: 8px;
padding: 0 8px;
font-size: 26px;
font-family: PingFangSC-Regular, PingFang SC;
color: #26F;
margin-bottom: 12px;
}
p {
font-size: 26px;
font-family: PingFangSC-Regular, PingFang SC;
color: #666;
line-height: 36px;
}
}
}
.user-item {
img {
width: 96px;
height: 96px;
border-radius: 50%;
}
image {
width: 96px;
height: 96px;
border-radius: 50%;
}
.gird {
display: inline-block;
margin-left: 16px;
margin-bottom: 0 !important;
}
.name {
margin-bottom: 8px !important;
}
}
.family-btn {
font-size: 26px;
font-family: PingFangSC-Regular, PingFang SC;
color: #3975C6;
line-height: 36px;
float: right;
}
.pad-b112 {
padding-bottom: 112px;
}
}
</style>

View File

@@ -1,5 +1,5 @@
<template>
<div class="FamilyList">
<div class="merchanList">
<div class="title">
<div>户主列表({{ total }})</div>
<div v-if="list.length">
@@ -118,7 +118,7 @@ export default {
</script>
<style lang="scss" scoped>
.FamilyList {
.merchanList {
min-height: 100vh;
.title {
display: flex;

View File

@@ -1,58 +1,93 @@
<template>
<div class="AppPageMerchant">
<AiListPage :label="label" :appList="appList" :headerBg="headerBg" />
<div class="list">
<div class="item" v-for="(item, index) in appList" :key="index" @click="linkTo(item.url)" :style="item.isBottom ? 'border-bottom: 1px solid #eee;' : ''">
<div class="icon" :style="`backgroundImage: url(${item.icon});`"></div>
<p>{{item.name}}</p>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'AppPageMerchant',
appName: '西城-商户管理',
appName: '商户入口',
data() {
return {
label: '西城-商户管理',
appList: [
{
name: '商户档案',
icon: require('./img/police-logo.jpg'),
icon: require('./img/shanghudangan.png'),
url: '../AppMerchantManage/AppMerchantManage',
isBottom: true
},
{
name: '网格管理',
icon: require('./img/jmqgl.png'),
icon: require('./img/wanggeguanli.png'),
url: '../AppMerchanGird/AppMerchanGird',
isBottom: true
},
{
name: '商户地图',
icon: require('./img/police-logo.jpg'),
icon: require('./img/shanghuditu.png'),
url: '../AppMerchantMap/AppMerchantMap',
isBottom: true
},
{
name: '网格统计',
icon: require('./img/police-logo.jpg'),
icon: require('./img/wanggetongji.png'),
url: '../AppMerchanStatistics/AppMerchanStatistics'
}
],
headerBg: require('./img/header-bg.png'),
}
},
onShow() {
document.title = '西城-商户管理'
document.title = '商户入口'
},
methods: {
linkTo(url) {
console.log(url)
uni.navigateTo({url})
}
},
}
</script>
<style lang="scss" scoped>
uni-page-body{
height: 100%;
}
.AppPageMerchant{
height: 100%;
padding: 20px;
.list{
background-color: #fff;
border-radius: 16px;
overflow: hidden;
.item{
text-align: center;
padding-bottom: 38px;
border-right: 1px solid #eee;
width: calc(33% - 1px);
float: left;
.icon{
display: inline-block;
width: 80px;
height: 80px;
margin: 40px 0 8px 0;
background-size: 100% 100%;
text-align: center;
}
p{
font-size: 28px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #3D434A;
line-height: 40px;
}
}
.item:nth-of-type(3n) {
border-right: 0;
}
}
}
</style>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 46 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 28 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 35 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 30 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 64 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 978 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 837 B