This commit is contained in:
liuye
2022-02-22 11:41:21 +08:00
parent ec0d778a24
commit 4d208cfe21
12 changed files with 71 additions and 764 deletions

View File

@@ -76,6 +76,9 @@ export default {
...mapState(['user']),
},
onLoad() {
console.log(this.user)
this.areaId = this.user.areaId
this.areaName = this.user.areaName
this.$dict.load('householdRelation', 'auditStatus').then(() => {
this.getList()
})

View File

@@ -56,6 +56,9 @@ export default {
current: 1,
size: 10,
tabList: [
{
name: '全部居民',
},
{
name: '本地居民',
},
@@ -82,6 +85,8 @@ export default {
},
methods: {
getList() {
var residentType = ['', 0, 1][this.currentTabs]
console.log(residentType)
this.$http
.post('/app/appresident/list', null, {
params: {
@@ -89,7 +94,7 @@ export default {
current: this.current,
con: this.keyword,
areaId: this.areaId,
residentType: this.currentTabs == 0 ? '0' : '1',
residentType: residentType,
},
})
.then((res) => {

View File

@@ -1,231 +0,0 @@
<template>
<div class="AppPhoneList">
<AiTopFixed>
<!-- <div class="header-top">
<div>区域选择</div>
<AiAreaPicker v-model="areaId" :areaId="user.areaId" @select="areaSelect" :name.sync="areaName">
<span class="label" v-if="areaName">{{ areaName }}</span>
<span v-else>请选择</span>
<u-icon name="arrow-right" color="#666" size="24" style="margin-left:4px;" />
</AiAreaPicker>
</div> -->
<div class="currentLeft-top">
<div class="left">
<AiAreaPicker v-model="areaId" :areaId="user.areaId" @select="areaSelect" :name.sync="areaName">
<span class="label" v-if="areaName">{{ areaName }}</span>
<span v-else>请选择</span>
<u-icon name="arrow-down" color="#666" size="24" style="margin-left:4px;" />
</AiAreaPicker>
</div>
<u-search v-model="keyword" :clearabled="true" placeholder="请输入标题" :show-action="false" bg-color="#F5F5F5" search-icon-color="#ccc" color="#666" height="58" @search="getList" @clear="handerClear"></u-search>
</div>
</AiTopFixed>
<div class="list-content">
<u-index-list :scrollTop="scrollTop" :index-list="indexList">
<div v-for="(letter, index) in indexList" :key="index">
<u-index-anchor :index="letter"/>
<div class="item" v-for="(item, index) in list.filter(e=>e.nameInitials==letter)" :key="index">
<div class="title">{{item.label}}</div>
<div class="phone-list">
<div class="item-info">
<p>{{item.name}}</p>
<div class="phone">
<span>{{item.type}}</span>{{item.phone}}
</div>
</div>
</div>
<img :src="$cdn + 'common/phone.png'" alt="" @click="callPhone(item.phone)" class="phone-icon" >
</div>
</div>
</u-index-list>
</div>
<AiEmpty v-if="!list.length"/>
<!-- <div class="id-list">
<div class="item" v-for="(item, index) in list" :key="index">
<u-index-anchor :index="item.label" />
</div>
</div> -->
<div class="footer-btn" @click="toAddList">我添加的</div>
</div>
</template>
<script>
import { mapState } from 'vuex'
export default {
name: "AppPhoneList",
appName: "(山东)便民通讯录",
inject: {
root: {}
},
data() {
return {
scrollTop: 0,
list: [],
indexList: [],
areaId: '',
areaName: '',
keyword: ''
}
},
computed: { ...mapState(['user']) },
mounted() {
this.areaId = this.user.areaId
this.areaName = this.user.areaName
this.getList()
uni.$on('updateList', () => {
this.getList()
})
},
onShow() {
document.title = "便民通讯录"
},
methods: {
areaSelect(e) {
this.areaId = e
this.getList()
},
callPhone(phone) {
uni.makePhoneCall({phoneNumber: phone})
},
handerClear() {
this.keyword = ''
this.getList()
},
getList() {
this.$http.post(`/app/appconvenientaddressbook/list`, null, {
params: {
areaId: this.areaId,
isPublic: 1,
resource: "portal",
size: 999,
name: this.keyword
}
}).then(res => {
if (res.code == 0) {
this.indexList = [...new Set(res.data.records.map(e=>e.nameInitials))];
this.list = res.data.records;
}
})
},
toAddList() {
// this.$emit('change', {
// type: 'MyAddList',
// })
uni.navigateTo({url: `./myAddList`})
},
},
onPageScroll(e) {
this.scrollTop = e.scrollTop;
}
}
</script>
<style lang="scss" scoped>
.AppPhoneList {
::v-deep .fixed{
z-index: 9999;
}
.header-top {
display: flex;
background: #fff;
justify-content: space-between;
align-items: center;
padding-top: 16px;
}
// background-color: #F3F6F9;
.list-content{
padding-bottom: 112px;
// .title{
// padding-left: 48px;
// line-height: 64px;
// font-size: 26px;
// font-family: PingFangSC-Semibold, PingFang SC;
// font-weight: 600;
// color: #999;
// }
.item{
position: relative;
}
.phone-list{
background-color: #fff;
width: 100%;
.item-info{
width: 680px;
padding: 32px 48px;
box-sizing: border-box;
box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.02);
p{
font-size: 32px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #333;
line-height: 44px;
word-break: break-all;
margin-bottom: 8px;
width: 100%;
}
.phone{
font-size: 26px;
font-family: PingFangSC-Regular, PingFang SC;
color: #333;
line-height: 36px;
width: 100%;
word-break: break-all;
span{
display: inline-block;
margin-right: 16px;
color: #999;
}
}
}
}
}
.footer-btn{
width: 100%;
text-align: center;
height: 112px;
line-height: 112px;
background: #3975C6;
box-shadow: 0 1px 0 0 #EEEEEE;
position: fixed;
bottom: 0;
left: 0;
font-size: 32px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #FFF;
z-index: 999;
}
::v-deep .u-index-anchor {
top: 0!important;
}
.phone-icon{
width: 40px;
height: 40px;
vertical-align: sub;
position: absolute;
top: 60px;
right: 64px;
}
.currentLeft-top {
display: flex;
align-items: center;
.left {
width: 40%;
display: flex;
align-items: center;
img {
width: 48px;
height: 48px;
}
}
}
::v-deep .u-search{
margin-bottom: 0!important;
}
}
</style>

View File

@@ -1,191 +0,0 @@
<template>
<div class="add">
<div class="pad-l32">
<div class="item border">
<span class="label"><span class="tips">*</span>名称</span>
<div class="value">
<u-input type="text" placeholder="请输入" v-model="userInfo.name" input-align="right" placeholder-style="color:#999;font-size:16px;" height="48" :maxlength="30" :clearable="false" />
</div>
</div>
<div class="item border">
<span class="label"><span class="tips">*</span>类型</span>
<div class="value">
<u-input type="text" placeholder="请输入" v-model="userInfo.type" input-align="right" placeholder-style="color:#999;font-size:16px;" height="48" :maxlength="30" :clearable="false" />
</div>
</div>
<div class="item border">
<span class="label"><span class="tips">*</span>电话</span>
<div class="value">
<u-input type="number" placeholder="请输入" v-model="userInfo.phone" input-align="right" placeholder-style="color:#999;font-size:16px;" height="48" :maxlength="11" :clearable="false" />
</div>
</div>
<div class="item border">
<span class="label"><span class="tips">*</span>是否公开</span>
<div class="value" @click="showSelect=true">
<span v-if="userInfo.isPublic !== ''">{{$dict.getLabel('yesOrNo', userInfo.isPublic)}}</span>
<span v-else class="color-999">请选择</span>
<u-icon name="arrow-right" color="#cccccc" size="14"></u-icon>
</div>
</div>
<div class="item">
<span class="label"><span class="tips">*</span>地区</span>
<div class="value">
<AiAreaPicker :areaId="user.areaId" v-model="userInfo.areaId" :name.sync="userInfo.areaName" @select="areaSelect">
<span class="label" v-if="userInfo.areaName">{{ userInfo.areaName }}</span>
<span v-else class="color-999">请选择</span>
<u-icon name="arrow-right" color="#cccccc" size="14"></u-icon>
</AiAreaPicker>
</div>
</div>
</div>
<div class="footer" @click="submit">
<div class="btn">保存</div>
</div>
<u-select v-model="showSelect" :list="$dict.getDict('yesOrNo')" label-name="dictName" value-name="dictValue" @confirm="confirmSelect"></u-select>
</div>
</template>
<script>
import { mapState } from 'vuex'
export default {
props: ['params'],
data() {
return {
id: '',
userInfo: {
id: '',
name: '',
phone: '',
type: '',
isPublic: '',
areaId: '',
areaName: ''
},
showSelect: false,
flag: true
}
},
computed: { ...mapState(['user']) },
onLoad(option) {
this.userInfo.areaId = this.user.areaId
this.userInfo.areaName = this.user.areaName
this.$dict.load('yesOrNo').then(() => {
if(option.id) {
this.userInfo.id = option.id
this.getDetail()
}
})
},
onShow() {
document.title = "新增"
},
methods: {
areaSelect(e) {
this.userInfo.areaId = e
},
confirmSelect(e) {
this.userInfo.isPublic = e[0].value
},
getDetail() {
this.$http.post(`/app/appconvenientaddressbook/queryDetailById?id=${this.userInfo.id}`).then(res => {
if (res.code == 0) {
this.userInfo = res.data
}
})
},
submit() {
if(!this.userInfo.name) {
return this.$u.toast('请输入名称')
}
if(!this.userInfo.type) {
return this.$u.toast('请输入类型')
}
if(!this.userInfo.phone) {
return this.$u.toast('请输入电话')
}
if(this.userInfo.isPublic === '') {
return this.$u.toast('请选择是否公开')
}
if(!this.userInfo.areaId) {
return this.$u.toast('请选择地区')
}
if(!this.flag) return
this.$http.post(`/app/appconvenientaddressbook/addOrUpdate`, this.userInfo).then(res => {
if (res.code == 0) {
this.flag = false
this.$u.toast('提交成功')
uni.$emit('updateList')
setTimeout(() => {
uni.navigateBack()
}, 600)
}
})
},
}
}
</script>
<style lang="scss" scoped>
.add {
padding-bottom: 112px;
.border{
border-bottom: 1px solid #ddd;
}
.item{
width: 100%;
padding: 40px 32px 40px 0;
background: #FFFFFF;
display: flex;
justify-content: space-between;
font-size: 34px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #666;
line-height: 48px;
box-sizing: border-box;
.color-999{
color: #999;
}
.value{
color: #333;
.u-icon{
margin-left: 16px;
}
}
.tips{
display: inline-block;
width: 16px;
font-size: 32px;
font-family: PingFangSC-Regular, PingFang SC;
color: #FF4466;
line-height: 44px;
margin-right: 4px;
}
}
.footer{
width: 100%;
position: fixed;
bottom: 0;
left: 0;
}
.btn{
width: 100%;
height: 112px;
line-height: 112px;
text-align: center;
background: #3975C6;
font-size: 32px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #FFF;
}
.pad-l32{
padding-left: 32px;
background-color: #fff;
}
}
</style>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.5 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.5 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 8.2 KiB

View File

@@ -1,161 +0,0 @@
<template>
<div class="list">
<div class="list-content">
<u-index-list :scrollTop="scrollTop" :index-list="indexList">
<div v-for="(letter, index) in indexList" :key="index">
<u-index-anchor :index="letter"/>
<div class="item" v-for="(item, index) in list.filter(e=>e.nameInitials==letter)" :key="index">
<div class="title">{{item.label}}</div>
<div class="phone-list">
<div class="item-info">
<p>{{item.name}}</p>
<div class="phone">
<span>{{item.type}}</span>{{item.phone}}
</div>
</div>
</div>
<img :src="$cdn + 'common/phone.png'" alt="" @click="callPhone(item.phone)" class="phone-icon" >
</div>
</div>
</u-index-list>
</div>
<AiEmpty v-if="!list.length"/>
<!-- <div class="id-list">
<div class="item" v-for="(item, index) in list" :key="index">
<u-index-anchor :index="item.label" />
</div>
</div> -->
<div class="footer-btn" @click="toAddList">我添加的</div>
</div>
</template>
<script>
import { mapState } from 'vuex'
export default {
data() {
return {
scrollTop: 0,
list: [],
indexList: []
}
},
computed: { ...mapState(['user']) },
mounted() {
this.getList()
},
onShow() {
document.title = "便民通讯录"
},
methods: {
callPhone(phone) {
uni.makePhoneCall({phoneNumber: phone})
},
getList() {
this.$http.post(`/app/appconvenientaddressbook/list`, null, {
params: {
areaId: this.user.areaId,
isPublic: 1,
resource: "portal",
size: 999
}
}).then(res => {
if (res.code == 0) {
this.indexList = [...new Set(res.data.records.map(e=>e.nameInitials))];
this.list = res.data.records;
}
})
},
toAddList() {
// this.$emit('change', {
// type: 'MyAddList',
// })
uni.navigateTo({url: `./myAddList`})
},
},
onPageScroll(e) {
this.scrollTop = e.scrollTop;
}
}
</script>
<style lang="scss" scoped>
.list {
background-color: #F3F6F9;
.list-content{
padding-bottom: 112px;
// .title{
// padding-left: 48px;
// line-height: 64px;
// font-size: 26px;
// font-family: PingFangSC-Semibold, PingFang SC;
// font-weight: 600;
// color: #999;
// }
.item{
position: relative;
}
.phone-list{
background-color: #fff;
width: 100%;
.item-info{
width: 680px;
padding: 32px 48px;
box-sizing: border-box;
box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.02);
p{
font-size: 32px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #333;
line-height: 44px;
word-break: break-all;
margin-bottom: 8px;
width: 100%;
}
.phone{
font-size: 26px;
font-family: PingFangSC-Regular, PingFang SC;
color: #333;
line-height: 36px;
width: 100%;
word-break: break-all;
span{
display: inline-block;
margin-right: 16px;
color: #999;
}
}
}
}
}
.footer-btn{
width: 100%;
text-align: center;
height: 112px;
line-height: 112px;
background: #3975C6;
box-shadow: 0 1px 0 0 #EEEEEE;
position: fixed;
bottom: 0;
left: 0;
font-size: 32px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #FFF;
z-index: 999;
}
::v-deep .u-index-anchor {
top: 0!important;
}
.phone-icon{
width: 40px;
height: 40px;
vertical-align: sub;
position: absolute;
top: 60px;
right: 64px;
}
}
</style>

View File

@@ -1,167 +0,0 @@
<template>
<div class="myAddList">
<div class="list-content" v-if="list.length">
<div class="item-info" v-for="(item, index) in list" :key="index">
<div class="left">
<p>{{item.name}}</p>
<div class="phone">
<span>{{item.type}}</span>{{item.phone}}
</div>
</div>
<div class="right">
<img src="./img/edit-icon.png" alt="" @click="edit(item.id)">
<img src="./img/del-icon.png" alt="" @click="del(item)">
</div>
</div>
</div>
<div class="empty" v-else>
<img src="./img/empty.png" alt="">
<p>您还未添加便民通讯录<br/>点击<span>新增按钮</span>试试吧</p>
</div>
<div class="footer-btn" @click="edit('')">新增</div>
</div>
</template>
<script>
import { mapState } from 'vuex'
export default {
data() {
return {
list: [],
}
},
computed: { ...mapState(['user']) },
mounted() {
this.getList()
uni.$on('updateList', () => {
this.getList()
})
},
onShow() {
document.title = "便民通讯录"
},
methods: {
getList() {
this.$http.post(`/app/appconvenientaddressbook/list`, null, {
params: {
areaId: this.user.areaId,
createUserId: this.user.id
}
}).then(res => {
if (res.code == 0) {
this.list = res.data.records
}
})
},
edit(id) {
// this.$emit('change', {
// type: 'Add',
// params: {
// id: id,
// }
// })
uni.navigateTo({url: `./add?id=${id}`})
},
del(item) {
this.$confirm("是否确认删除该发布信息?").then(() => {
this.$http.post("/app/appconvenientaddressbook/delete", null, {
params: {ids: item.id}
}).then(res => {
if (res?.code == 0) {
this.$u.toast("删除成功!")
this.getList()
}
})
})
},
},
}
</script>
<style lang="scss" scoped>
.myAddList {
height: 100%;
background-color: #F3F6F9;
.list-content{
padding-bottom: 112px;
.item-info{
width: 100%;
padding: 32px 48px;
box-sizing: border-box;
background-color: #fff;
margin-bottom: 4px;
p{
font-size: 32px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #333;
line-height: 44px;
word-break: break-all;
margin-bottom: 8px;
}
.phone{
font-size: 26px;
font-family: PingFangSC-Regular, PingFang SC;
color: #333;
line-height: 36px;
span{
display: inline-block;
margin-right: 16px;
color: #999;
}
}
.left{
display: inline-block;
width: calc(100% - 176px);
}
.right{
display: inline-block;
width: 176px;
img{
width: 56px;
height: 56px;
margin-left: 32px;
vertical-align: super;
}
}
}
}
.empty{
height: 100%;
background-color: #fff;
img{
width: 282px;
height: 306px;
margin: 168px 0 0 234px;
}
p{
text-align: center;
font-size: 28px;
font-family: PingFangSC-Regular, PingFang SC;
color: #999;
line-height: 44px;
span{
color: #467DFE;
}
}
}
.footer-btn{
width: 100%;
text-align: center;
height: 112px;
line-height: 112px;
background: #3975C6;
box-shadow: 0 1px 0 0 #EEEEEE;
position: fixed;
bottom: 0;
left: 0;
font-size: 32px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #FFF;
z-index: 999;
}
}
</style>