medical-record-client/src/pages/record/index.vue

122 lines
3.6 KiB
Vue

<template>
<view class="page">
<view class="list">
<u-list :height="listHeight" @scrolltolower="reachBottom">
<u-list-item v-for="item in list" :key="item.id">
<u-cell size="large" :url="`/pages/record/detail?id=${item.id}`">
<view slot="title" class="title">
<view class="list-item-title">患者: {{ item.patient ? item.patient.name : '' }}</view>
<!-- <view class="list-item-price">
<text style="color: #dd524d;font-size: 19px">
<u-icon name="rmb" color="#dd524d" size="19px" />
{{ item.sell_price }}
</text>
<text style="color: #c0c0c0;text-decoration: line-through;">{{ item.origin_price }}</text>
</view> -->
</view>
<view slot="label" class="label">
: {{ item.treat_at }}
</view>
</u-cell>
</u-list-item>
</u-list>
</view>
</view>
</template>
<script>
export default {
data() {
return {
patient_id: '',
patient: {},
page: 1,
perPage: 20,
list: [],
option: {
id: '',
show: false,
list: [
{ name: "详细", color: '#4cd964', action: 'detail' },
{ name: "修改", color: "#007aff", action: 'edit' },
{ name: "删除", color: "#dd524d", action: 'delete' },
],
title: '',
},
swipeOption: [
{ text: '删除', style: {backgroundColor: '#dd524d'} }
],
listHeight: 0,
}
},
onLoad(e) {
this.patient_id = e.patient
uni.getSystemInfo({
success: (res) => {
this.listHeight = res.safeArea.height - 20
}
})
this.loadData(true)
},
onPullDownRefresh() {
this.loadData(true)
},
methods: {
loadData(refresh) {
if (refresh) {
this.list = []
this.page = 1
}
uni.showLoading()
const params = { page: this.page, perPage: this.perPage, patient_id: this.patient_id }
this.$ajax.get('/api/client/record', { params }).then(res => {
uni.stopPullDownRefresh()
if (res.status == 0) {
this.list = this.list.concat(res.data.items)
this.total = res.data.total
}
}).catch(error => {
uni.stopPullDownRefresh()
})
},
reachBottom() {
if (this.list.length < this.total) {
this.page++
this.loadData()
}
},
}
}
</script>
<style scoped>
.page {
padding-top: 20px;
}
.page .info {
background: white;
}
.list {
background: white;
}
.list .title {
display: flex;
flex-direction: row;
justify-content: space-between;
font-size: 18px;
}
.list .label {
color: gray;
margin-top: 10px;
}
.list-item-price ::v-deep .u-icon {
display: inline-block;
}
.add-button {
position: absolute;
bottom: 100px;
right: 50px;
z-index: 999;
}
</style>