h5/pages/medication/medication.vue

<template>
	<view class="mb-5">
		<view class="position-relative bghead">
			<image style="opacity: 0;" src="@/static/img/other/med.png" mode="widthFix" class="w-100"></image>
			<view class="position-absolute text-white px-3 mx-3 positionY-50" style="">
				<view class="centerY">
					<view class="bw_line"></view>
					<view class="ml-1 fs-18 font-bold">
						随访用药
					</view>
				</view>
				<view class="mt-2 fs-14">
					患者每次随访的用药记录
				</view>
			</view>
		</view>
		<view class="px-3 pb-3 mt-n2" v-if="dataArray.length>0">
			<view class="bg-white px-2 py-3 mt-3" style="border-radius: 16rpx;" v-for="(item,index) in dataArray">
				<view class="centerY mb-2 text-gry">
					<view class="bule_line"></view>
					<view class="ml-2 fs-14 text-dark font-bold">
						{{item.type=="tnb"?'糖尿病随访':item.type=="gxy"?'高血压随访':'未知类型'}}
					</view>
					<text class="ml-auto iconfont Clock fs-16"></text>
					<view class="ml-1 fs-12">
						{{item.date}}
					</view>
				</view>
				<view class="">
					<view class="mtable-title centerY bg-primary text-white fs-12">
						<view class="text-left" style="width: 23%;">
							药名
						</view>
						<view class=" text-center" style="width: 15%;">
							剂量
						</view>
						<view class="w-10 text-center">
							用法
						</view>
						<view class="text-center" style="width: 17%;">
							用药频次
						</view>
						<view class="text-center" style="width: 17%;">
							不良反应
						</view>
						<view class=" text-center" style="width: 17%;">
							用药类型
						</view>
					</view>
					<view v-if="item.medicinals.length==0">
						<Empty title="此次随访没有用药" />
					</view>
					<view class="mtable-body-item centerY fs-12" v-for="(item2,index2) in item.medicinals"
						style="color: #868687;">
						<uni-tooltip :content="item2.name" style="color: #818181;width: 23%;">
							<view class="text-left text-view2">
								{{item2.name }}
							</view>
						</uni-tooltip>
						<view class=" text-center" style="width: 15%;">
							{{item2.unit + item2.medicinalUnit}}
						</view>
						<view class="w-10 text-center">
							{{item2.medicinalUse||'未知'}}
						</view>
						<view class="text-center" style="width: 17%;">
							{{item2.medicinalInterval||'未知'}}
						</view>
						<view class="text-center" style="width: 17%;">
							{{item2.untowardReaction||'无'}}
						</view>
						<view class="text-center" style="width: 17%;">
							{{item2.type=="Tnb"?'糖尿病':item2.type=="Gxy"?'高血压':'未知类型'}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-if="dataArray.length>0">
			<uni-load-more iconType="circle" :status="status" class="fs-12"></uni-load-more>
		</view>
		<view class="px-3 pb-3 mt-n2" v-if="dataArray.length==0">
			<Empty title="没有随访用药" class="py-5" />
		</view>
	</view>
</template>

<script>
	import Empty from '@/component/empty/empty.vue'
	export default {
		components: {
			Empty
		},
		data() {
			return {
				dataArray: [],
				status: 'loading',
				filter: {
					size: 10,
					current: 1
				}
			};
		},
		onLoad() {
			this.get_medicinal()
		},
		onReachBottom(a) {
			if (this.status !== "no-more") {
				this.status = 'loading';
				let page = JSON.parse(this.filter.page) + 1
				this.get_medicinal(page)
			}
		},
		methods: {
			async get_medicinal(page) {
				page = page || 1
				this.filter = {
					...this.filter,
					page
				}
				uni.showLoading({
					title: '加载中'
				});
				let idCard = uni.getStorageSync('idCard')
				let {
					data,
					code,
					count
				} = await this.$api.find_medicinal_page({
					idCard,
					...this.filter
				})
				if (code == 0) {
					this.dataArray=[...this.dataArray,...data||[]]
					uni.hideLoading();
					console.log(count / this.filter.size > this.filter.current)
					if (count / this.filter.size > this.filter.current) {
						this.status = 'more';
					} else {
						this.status = 'no-more';
					}
					uni.stopPullDownRefresh()
				} else {
					this.status = 'more';
					uni.hideLoading();
					uni.stopPullDownRefresh()
				}
				console.log(this.dataArray)
			}
		},
		onPullDownRefresh() {
			this.dataArray=[]
			this.get_medicinal(1)
		}
	}
</script>

<style lang="scss">
	page {
		background: #F5F9FF;
	}

	.bw_line {
		width: 10rpx;
		height: 30rpx;
		background-color: #fff;
		border-radius: 6rpx;
	}

	.bghead {
		background-image: url('@/static/img/other/med.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		background-position: center;

	}

	.mtable {
		&-title {
			border-radius: 50rpx;
			padding: 20rpx 0 20rpx 20rpx;
			box-shadow: 0px 2px 7px 1px rgba(45, 142, 255, 0.5);
		}

		&-body {
			&-item {
				margin-top: 20rpx;
				border-radius: 50rpx;
				padding: 14rpx 0 14rpx 20rpx;
				background-color: #F6F9FE;
				color: #868687;
			}
		}
	}
</style>