188 lines
3.9 KiB
Vue
188 lines
3.9 KiB
Vue
<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" flex>
|
|
<span v-text="item.type"/>
|
|
<div v-text="item.phone"/>
|
|
<div :style="{color:$dict.getColor('isPublicTag',item.isPublic)}"
|
|
v-text="$dict.getLabel('isPublicTag',item.isPublic)"/>
|
|
</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 @click="edit('')">新增按钮</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'])},
|
|
created() {
|
|
this.$dict.load("isPublicTag")
|
|
this.getList()
|
|
uni.$on('updateList', () => {
|
|
this.getList()
|
|
})
|
|
},
|
|
onShow() {
|
|
document.title = "我添加的"
|
|
},
|
|
|
|
methods: {
|
|
getList() {
|
|
this.$http.post(`/app/appconvenientaddressbook/list`, null, {
|
|
params: {
|
|
createUserId: this.user.id
|
|
}
|
|
}).then(res => {
|
|
if (res?.data) {
|
|
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%;
|
|
|
|
.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;
|
|
|
|
* + * {
|
|
margin-left: 16px;
|
|
}
|
|
|
|
span {
|
|
display: inline-block;
|
|
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%;
|
|
|
|
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>
|