ykz-wx/pages/cfList/index.vue

<template>
	<view class="cf-list-page">
		<TopCard :data="queryParams" />
		<view class="cf-list-section">
			<pub-list-scroll ref="pubListScrollRef" @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" @click.native="cardClick(item)">
						<view class="cf-item-title">
							<view><text class="label">开方日期</text>{{item.kfrq}}</view>
							<view class="cf-item-title-addr" v-if="isShowTag(item)" @click="skipAddressList($event,item)">
								<text class="iconfont">&#xe692;</text>
								填写收货地址
							</view>
						</view>
						<view class="row">
							<text class="label">处方状态</text>
							<!-- 已签收/已快递/已发药 绿色,	其他全部橙色 -->
							<text
								:class="['cf-status', { 'is-green': ['09', '10', '11'].includes(item.cfzt) }]">{{ DictLabelCFZT(item.cfzt) }}</text>
						</view>
						<view class="row">
							<text class="label">医疗机构</text>{{item.orgFullName}}
						</view>
					</view>
				</view>
			</pub-list-scroll>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref } from 'vue'
	import { onLoad, onShow } from "@dcloudio/uni-app";
	import { aesEncrypt, aesDecrypt } from "@/lib/encryption";
	import dlg from '@/lib/dlg'
	import rest from '@/stores/rest'

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

	import { BasicInfoVO } from '../../lib/type'
	import { DictLabelCFZT } from '@/lib/util'
	import * as link from '@/lib/link'

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


	const getList = async () => {
		try {
			loaded.value = true;
			let res = await rest.get('/app-api/bmfw/findList', queryParams.value) as BasicInfoVO
			console.log("基础信息", res)
			let _list = res.list

			if (queryParams.value.pageNo === 1) {
				list.value = _list;
			} else {
				list.value = list.value.concat(_list);
			}

			total.value = res.total
			if (res.total && queryParams.value.pageNo >= total.value / queryParams.value.pageSize) {
				status.value = "noMore"
			}
			// 重置滚动位置
			if (queryParams.value.pageNo === 1) { 
				pubListScrollRef.value.goTop()
			}
		} catch (e) {
			dlg.error(e)
		} finally {
			loaded.value = false;
		}
	}

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

	const cardClick = (item) => {
		link.goCFDetails(aesEncrypt(item.ptwybm),aesEncrypt(queryParams.value.zjhm),aesEncrypt(queryParams.value.hzxm))
	}
	const isShowTag = (item) => {
		if (['3', '5'].includes(item.fyfslx) && ['00', '001', '01', '02', '05', '06', '07', '08'].includes(item.cfzt)) {
			return true
		}
		return false
	}

	const skipAddressList = (event, item) => {
		event.stopPropagation();
		link.goAddressList(aesEncrypt(queryParams.value.zjhm), aesEncrypt(item.ptwybm))
	}
	onLoad((data) => {
		queryParams.value.zjhm = aesDecrypt(data.hzsfzh)
		queryParams.value.hzxm = aesDecrypt(data.hzxm)
	})
	
	onShow(() => { 
		queryParams.value.pageNo = 1;
		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;

			.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;
							font-size: $uni-font-size-sm;
							line-height: $uni-line-height-sm;
							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>