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

<template>
    <view class="page">
        <view class="add-button">
			<u-button type="primary" icon="plus" shape="circle" size="large" @click="add" />
		</view>
        <view class="list">
            <u-list :height="listHeight" @scrolltolower="reachBottom">
                <u-swipe-action>
                <u-list-item v-for="item in list" :key="item.id">
                    <u-swipe-action-item :options="swipeOption" :name="item.id" @click="swipeClick">
                        <u-cell size="large" :url="`/pages/record/detail?id=${item.id}`">
                            <view slot="title" class="title">
                                <view class="list-item-title">医师: {{ item.doctor ? item.doctor.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-swipe-action-item>
                </u-list-item>
                </u-swipe-action>
            </u-list>
        </view>
        <u-action-sheet
            :actions="option.list"
            :title="option.title"
            :show="option.show"
            :closeOnClickOverlay="true"
            @close="closeOption"
            @select="chooseOption"
        />
    </view>
</template>

<script>
export default {
    data() {
        return {
            patient_id: '',
            patient: {},
            typeIndex: 0,
            perPage: 20,
            typeList: [],
            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.init()
    },
    onPullDownRefresh() {
        this.loadData(true)
    },
    methods: {
        async init() {
            let res
            res = await this.$ajax.get(`/admin-api/patient/${this.patient_id}`, { params: {_action: 'getData'}})
            if (res.status == 0) {
                this.patient = res.data
                uni.setNavigationBarTitle({ title: `${this.patient.name}-病历记录` })
            }
            // res = await this.$ajax.get('/admin-api/category', { params: {_action: 'getData'}})
            // if (res.status == 0) {
            //     this.typeList = res.data.items
            // }
            this.loadData(true)
        },
        changeType(e) {
            this.typeIndex = e
            this.loadData(true)
        },
        loadData(refresh) {
            if (refresh) {
                this.list = []
                this.page = 1
            }
            uni.showLoading()
            const params = { _action: 'getData', page: this.page, perPage: this.perPage, patient_id: this.patient_id }
            this.$ajax.get('/admin-api/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()
            }
        },
        openOption(index) {
            const item = this.list[index]
            this.option.title = item.name
            this.option.id = item.id
            this.option.show = true
        },
        closeOption() {
            this.option.show = false
        },
        chooseOption(e) {
            const id = this.option.id
            if (e.action == 'detail') {
                return uni.navigateTo({ url: `/pages/record/detail?id=${id}` })
            }
            if (e.action == 'edit') {
                return uni.navigateTo({ url: `/pages/record/form?id=${id}&patient=${this.patient_id}` })
            }
        },
        swipeClick(e) {
            const action = e.index
            if (action == 0) {
                return uni.showModal({
                    title: '删除病历记录',
                    content: '是否确定?',
                    success: (result) => {
                        if (result.confirm) {
                            this.handleDelete(e.name)
                        }
                    }
                })
            }
        },
        handleDelete(id) {
            uni.showLoading()
            this.$ajax.delete(`/admin-api/record/${id}`).then(res => {
                if (res.status == 0) {
                    uni.showToast({
                        title: '删除成功',
                        icon: 'success'
                    })
                    setTimeout(() => {
                        this.loadData(true)
                    }, 1000)
                }
            })  
        },
        add() {
            return uni.navigateTo({ url: `/pages/record/form?patient=${this.patient_id}` })
        }
    }
}
</script>

<style scoped>
    .page {
        padding-top: 20px;
    }
    .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>