You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

176 lines
3.6 KiB

<template>
<view>
<view class="item" v-for="(res, index) in list_archive" :key="res.id">
<view class="top">
<view class="name">{{ res.name }}</view>
<view class="phone">{{ res.mobile }}</view>
</view>
<view class="bottom">
<text>{{ res.address }}</text>
<view class="icon">
<u-icon name="edit-pen" :size="40" color="#999999" @tap="toEdit(res)"></u-icon>
<u-icon name="trash" style="margin-left: 40rpx;" :size="40" color="red"
@tap="selectSite = res,show = true"></u-icon>
</view>
</view>
</view>
<view class="addSite" @tap="addArchive">
<view class="add">
<u-icon name="plus" color="#ffffff" class="icon" :size="30"></u-icon>新增被服务人
</view>
</view>
<u-modal v-model="show" content="确认操作?" show-cancel-button @confirm="destroy"></u-modal>
<service-archive ref="serviceArchive"></service-archive>
</view>
</template>
<script>
import serviceArchive from "@/component/serviceArchive/service-archive.vue";
export default {
components: {
serviceArchive
},
data() {
return {
btnStyle: {
"background-image": "linear-gradient(-90deg, #e26165 0%, #c10d12 94%, #c10d12 100%)",
"font-weight": "500",
"font-size": "28rpx",
color: "#fff",
width: "288rpx",
"margin-right": "25rpx",
},
show: false,
list_archive: [],
selectSite: {}
};
},
methods: {
toEdit(item) {
this.$refs.serviceArchive.form = item
this.$refs.serviceArchive.isShow = true;
},
async getUserArchive() {
try {
const res = await this.$u.api.userArchive({
page: 1,
page_size: 999,
});
this.list_archive = res.data;
} finally {
uni.stopPullDownRefresh()
}
},
addArchive() {
this.$refs.serviceArchive.isShow = true;
},
async destroy() {
try {
if (!this.selectSite?.id) return
const res = await this.$u.api.userArchiveDestroy({
id: this.selectSite?.id
})
this.getUserArchive()
} catch (err) {
console.error(err)
}
}
},
onLoad() {
this.getUserArchive()
},
onPullDownRefresh() {
this.getUserArchive()
},
}
</script>
<style>
</style>
<style lang="scss" scoped>
page {
height: 100%;
background-color: #f2f3f7;
}
.item {
padding: 40rpx 20rpx;
background: #fff;
margin: 20rpx;
.top {
display: flex;
font-weight: bold;
font-size: 34rpx;
.phone {
margin-left: 60rpx;
}
.tag {
display: flex;
font-weight: normal;
align-items: center;
text {
display: block;
width: 60rpx;
height: 34rpx;
line-height: 34rpx;
color: #ffffff;
font-size: 20rpx;
border-radius: 6rpx;
text-align: center;
margin-left: 30rpx;
background-color: rgb(49, 145, 253);
}
.red {
background-color: $uni-color-primary;
}
}
}
.bottom {
display: flex;
margin-top: 20rpx;
font-size: 28rpx;
justify-content: space-between;
align-items: flex-start;
color: #999999;
.icon {
text-align: right;
margin-left: 10rpx;
flex: 0;
flex-basis: 200rpx;
}
}
}
.addSite {
display: flex;
justify-content: space-around;
width: 600rpx;
line-height: 100rpx;
position: absolute;
bottom: 30rpx;
left: 80rpx;
background: linear-gradient(-90deg, #e26165 0%, #c10d12 94%, #c10d12 100%);
border-radius: 60rpx;
font-size: 30rpx;
.add {
display: flex;
align-items: center;
color: #ffffff;
.icon {
margin-right: 10rpx;
}
}
}
</style>