xk-doctor-wx/subPackages/sub_patient/patient_select.vue

<template>
	<view class="page">
		<!-- <view class="search white">
			<u-search placeholder="请输入患者姓名、标签" @input="handleSearch" v-model="keyword" :show-action="false"></u-search>
		</view> -->
		<view class="box p-row-2 m-t-2">
			<view class="flex-col b-r-8 white p-32 m-t-2 p-t-0">
				<view class="flex-row m-t-32 flex-ali-center" v-for="(item,index) in list" :key="index"
					@click="changeSelect(index)">
					<view style="width: 40rpx;height: 40rpx;" v-if="item.select">
						<u-icon name="checkmark-circle-fill" color="#6ACDBB" size="40"></u-icon>
					</view>
					<view class="select" v-else></view>
					<view class="m-l-32">
						<u-image width="80rpx" height="80rpx" shape="circle" :src="item.avatar || require(`../../static/image/${item.sex%2==0?'nv':'nan'}.png`)">
							<u-loading slot="loading"></u-loading>
						</u-image>
					</view>
					<view class="flex-col m-l-2 flex-ali-center">
						<view class="flex-row">
							<d-text :text="item.patient" className="content-c fs-32"></d-text>
							<d-text :text="item.age+'岁'" className="fs-28 tips-c m-l-2"></d-text>
						</view>
					</view>
					<view class="flex-row flex-ali-center" v-if="item.tags&&item.tags.length>0">
						<view class="m-r08" v-for="(it,idx) in item.tags" :key="idx">
							<u-tag :text="it" size="mini" border-color="rgba(41,121,255,0.08)"
								bg-color="rgba(41,121,255,0.08)" color="#6ACDBB" />
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="button">
			<u-button :throttle-time="0"  shape="circle" @click="submit" :ripple="true"
				:disabled="getSelect==0">{{`确定（${getSelect}）`}}</u-button>
		</view>
	</view>
</template>

<script>
	import {
		getPatientListApi
	} from "@/api/all.js";

	export default {
		data() {
			return {
				male: this.$male,
				girl: this.$girl,
				keyword: '',
				navbarHeight: this.$navbarHeight,
				statusBarHeight: this.$statusBarHeight,
				list: [],
				page: 1,
				loading: true,
				loading2: false,
				status: "loading",
				loadText: {
					loadmore: "轻轻上拉",
					loading: "努力加载中",
					nomore: "已加载全部",
				},
				totalPage: 1,
			};
		},
		computed: {
			getSelect() {
				return this.list.reduce((co, item) => {
					if (item['select']) co++
					return co
				}, 0)
			}
		},
		onShow() {
			this.init();
		},
		onReachBottom() {
			if (this.page >= this.totalPage) {
				this.$toast("数据已全部加载");
				return;
			}
			this.page++;
			this.getList();
		},
		methods: {
			handleSearch() {
				this.page = 1
				this.getList()
			},
			init() {
				this.list = [];
				this.page = 1;
				this.keyword = '';
				this.loading = true;
				this.getList(true);
			},
			getList(is_stop = false) {
				if (this.loading2) {
					return;
				}
				this.loading2 = true;
				getPatientListApi({
					page: this.page,
					name: this.keyword,
					store_id: uni.getStorageSync('store_id') || '11001',
					status: 1
					})
					.then((res) => {
						if (res.errcode == 0) {
							this.list = this.page === 1 ? res.data.list : [...this.list, ...res.data.list];
							this.totalPage = res.data.pagination.totalPage;
							if (this.page >= this.totalPage) {
								this.status = "nomore";
							} else {
								this.status = "loadmore";
							}
							this.$nextTick(() => {
								this.loading = false;
								is_stop && uni.stopPullDownRefresh();
							});
						} else {
							this.$toast(res.msg);
							is_stop && uni.stopPullDownRefresh();
							this.loading = false;
							if (this.page >= this.totalPage) {
								this.status = "nomore";
							} else {
								this.status = "loadmore";
							}
						}
					})
					.finally(() => {
						this.loading2 = false;
					});
			},
			changeSelect(index) {
				const current = this.list[index]
				current.select = !current.select
				this.list.splice(index, 1, current)
			},
			submit() {
				uni.navigateBack({
					delta: 1
				})
				uni.setStorageSync('patients', this.list.filter(item => item.select))
			}
		}
	};
</script>

<style>
	page {
		background-color: #eeeeef;
	}
</style>
<style lang="scss" scoped>
	.select {
		width: 44rpx;
		height: 44rpx;
		border: 2rpx solid #E8E9EB;
		border-radius: 44rpx;
	}

	.search {
		position: relative;
		z-index: 982;
		padding: 16rpx 32rpx;
	}

	.box {
		position: relative;
		z-index: 982;
	}

	.button {
		position: fixed;
		bottom: env(safe-area-inset-bottom);
		left: 0;
		width: 750rpx;
		height: 110rpx;
		background: #FFFFFF;
		border-top: 2rpx solid #F2F3F5;
		padding: 12rpx 32rpx;
		box-sizing: border-box;
		z-index: 999;

		::v-deep button {
			z-index: 999;
			background: #6ACDBB;
			color: #FFFFFF;
		}
	}
</style>