ykz-wx/pages/cfList/index.vue

<template>
	<view class="cf-list-page">
		<TopCard :info="info" @update="onUpdate" />
		<view class="cf-list-section">
			<pub-list-scroll @next="onScrollTolower" :loaded="loaded" :text="loadText" :status="status">
				<view class="no-data" v-if="!list || list.length == 0">
					<image mode="heightFix" src="/static/image/no-data.png" />
					暂无数据
				</view>
				<view class="cf-list" v-else>
					<view v-for="(item,index) in list" :key="'cf'+index" class="cf-item">
						<view class="cf-item-title">
							<view><text class="label">开方日期</text>{{item.date}}</view>
							<view class="cf-item-title-addr" @click="link.goAddressList()">
								<text class="iconfont">&#xe692;</text>
								填写收货地址
							</view>
						</view>
						<view class="row">
							<text class="label">处方状态</text>
							<!-- 签收/已快递/已发药 绿色,	其他全部橙色 -->
							<text class="cf-status" :class="true?'is-green':''">{{item.status}}</text>
						</view>
						<view class="row">
							<text class="label">医疗机构</text>{{item.jj}}
						</view>
					</view>
				</view>
			</pub-list-scroll>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref, onMounted } from 'vue'
	import dlg from '@/lib/dlg'
	import rest from '@/stores/rest'
	import * as link from '@/lib/link'

	import TopCard from '../index/TopCard.vue'


	const loaded = ref(false)
	const loadText = ref('数据加载中...')
	const status = ref('loading')
	const list = ref() //处方列表
	const queryParams = ref({
		pageNo: 1,
		pageSize: 10,
		total: 0,
		status: 2
	})

	const originalInfo = ref({
		name: '',
		address: '',
		addressDetails: '',
		addr: '',
		sex: '',
		text: '近三个月就诊记录',
		idCard: '',
		date: ''
	})
	const info = ref({ ...originalInfo.value })
	const _list = [{
		id: 1,
		date: '2024-08-22 14:30',
		status: '已调剂',
		jj: '重庆两江新区中医院1'
	},
	{
		id: 2,
		date: '2024-08-22 14:30',
		status: '已调剂',
		jj: '重庆两江新区中医院2'
	}, {
		id: 3,
		date: '2024-08-22 14:30',
		status: '已调剂',
		jj: '重庆两江新区中医院3'
	}, {
		id: 4,
		date: '2024-08-22 14:30',
		status: '已调剂',
		jj: '重庆两江新区中医院4'
	}, {
		id: 5,
		date: '2024-08-22 14:30',
		status: '已调剂',
		jj: '重庆两江新区中医院5'
	}, {
		id: 6,
		date: '2024-08-22 14:30',
		status: '已调剂',
		jj: '重庆两江新区中医院6'
	}, {
		id: 7,
		date: '2024-08-22 14:30',
		status: '已调剂',
		jj: '重庆两江新区中医院7'
	}, {
		id: 8,
		date: '2024-08-22 14:30',
		status: '已调剂',
		jj: '重庆两江新区中医院8'
	}, {
		id: 9,
		date: '2024-08-22 14:30',
		status: '已调剂',
		jj: '重庆两江新区中医院9'
	}, {
		id: 10,
		date: '2024-08-22 14:30',
		status: '已调剂',
		jj: '重庆两江新区中医院10'
	}]


	const getList = async () => {
		try {
			loaded.value = true;
			let res = ''


			if (!list.value) {
				list.value = _list;
			} else {
				list.value = list.value.concat(_list);
			}

			// queryParams.value.total = res.total
			// if (res.total && queryParams.value.pageNo >= queryParams.value.total / queryParams.value.pageSize) {
			// 	status.value = "noMore"
			// }
		} catch (e) {
			dlg.error(e)
		} finally {
			loaded.value = false;
		}
	}

	//下一页
	const onScrollTolower = async () => {
		console.log("onScrollTolower")
		if (!list.value || queryParams.value.pageNo > (queryParams.value.total / queryParams.value.pageSize)) {
			return false;
		}
		if (queryParams.value.pageNo < queryParams.value.total / queryParams.value.pageSize) {
			status.value = "loading";
		} else {
			status.value = "noMore"
			return;
		}
		queryParams.value.pageNo++;
		getList();
	}

	const onUpdate = (isMasked : boolean) => {

	}

	onMounted(() => {
		getList()
	})
</script>

<style lang="scss" scoped>
	.cf-list-page {
		display: flex;
		flex-direction: column;
		height: 100%;

		.cf-list-section {
			flex: 1;
			overflow-y: auto;
			margin-top: 32rpx;
			padding: 0 32rpx;

			.no-data {
				margin-top: 160rpx;
				@include flex-center;
				flex-direction: column;

				image {
					width: 320rpx;
					height: 320rpx;
					margin-bottom: 48rpx;
					color: $uni-text-color-light;
				}
			}

			.cf-list {

				.cf-item {
					background: #fff;
					margin-bottom: 24rpx;
					border-radius: 8rpx;
					padding: 24rpx 24rpx;

					.label {
						color: $uni-text-color-grey;
						margin-right: 32rpx;

					}

					.cf-item-title {
						border-bottom: 1px solid $uni-border-color;
						margin: 0 -24rpx;
						padding: 0 24rpx 24rpx;
						@include flex-between;

						.cf-item-title-addr {
							font-size: $uni-font-size-sm;
							line-height: $uni-line-height-sm;
							color: $uni-color-primary;
							@include flex;

							.iconfont {
								font-size: 40rpx;
								margin-right: 8rpx;
							}
						}
					}

					.row {
						margin-top: 16rpx;
						@include flex;

						.cf-status {
							height: 56rpx;
							padding: 0 32rpx;
							@include flex-center;
							color: $uni-color-orange;
							border-radius: 8rpx;
							background: linear-gradient(0deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)), $uni-color-orange;

							&.is-green {
								color: $uni-color-green;
								background: linear-gradient(0deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)), $uni-color-green;
							}
						}
					}
				}
			}

			::v-deep .scroll-view {
				height: calc(100%);
			}
		}
	}
</style>