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.

160 lines
3.1 KiB

<template>
<view>
<view class="service-list" style="padding-bottom: 120rpx">
<view
class="service-list-item"
v-for="(item, i) in list_archive"
:key="i.id"
>
<view class="service-list-item__wrap">
<view class="service-list-item__name">
{{ item.name }}
</view>
<view class="service-list-item__price">
<u-icon name="phone-fill"></u-icon>
{{ item.mobile }}
</view>
</view>
<view class="service-list-item__wrap">
<view class="service-list-item__address">
{{ item.address }}
</view>
<view class="service-list-item__idcard">
{{ item.idcard }}
</view>
</view>
</view>
</view>
<view class="service-list-btn">
<u-button
shape="circle"
ripple
:custom-style="btnStyle"
@click="addArchive"
>新增就诊人</u-button
>
</view>
<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",
},
list_archive: [],
};
},
methods: {
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;
},
},
onLoad() {
this.getUserArchive()
},
onPullDownRefresh() {
this.getUserArchive()
},
}
</script>
<style lang="scss">
.service-list {
padding-top: 80rpx;
&-item {
border: 2rpx solid #e6e6eb;
border-radius: 10rpx;
background-color: #ffffff;
margin: 0 25rpx;
padding: 28rpx 39rpx;
display: flex;
align-items: center;
flex-wrap: wrap;
&__wrap {
display: flex;
align-items: center;
width: 100%;
}
&__address {
width: 100%;
padding-left: 14rpx;
line-height: 2;
}
&__icon {
display: flex;
justify-content: center;
align-items: center;
// background: #f9f5e9;
// padding: 20rpx;
}
&__name {
padding-left: 14rpx;
font-size: 28rpx;
color: #333333;
font-weight: 500;
line-height: 2;
}
&__price {
color: #c20d12;
font-weight: 500;
margin-left: auto;
line-height: 2;
}
&__idcard {
color: #c20d12;
font-weight: 500;
margin-left: auto;
line-height: 2;
}
}
&-btn {
position: fixed;
bottom: 40rpx;
left: calc(50% - 144rpx);
}
&-item + &-item {
margin-top: 20rpx;
}
}
</style>