uniProject/pages/admin/Hetong/components/selectJz.vue

<template>
	<uni-popup ref="popupRef" type="bottom" background-color="#fff" :is-mask-click="false" :mask-click="false">
		<view class="jz-select-list">
			<view class="phone-navBar-box">
				<view @click="goback2" class="nav-bar-icon"></view>
				<text class="nav-bar-title">选择家政阿姨</text>
				<uni-icons class="nav-bar-right-icon bar-ml10" type="search" size="20"
					@click="toggle('top')"></uni-icons>
			</view>
			<view>
				<search-dialog ref="searchDialogRef" shenfen="jz" @search-btn="dialogSearchBtn"
					@reset-search="dialogSearchReset"></search-dialog>
			</view>
			<!-- 无限滚动容器 -->
				<scroll-view scroll-y="true" refresher-enabled="true" :refresher-triggered="data.loading"
					:refresher-threshold="50" @scrolltolower="onScrolltolower" refresher-background="transparent"
					@refresherrefresh="onRefresh" class="jz-scroll-view">
					<uni-list class="jz-scroll-view">
						<radio-group @change="radioChange">
							<uni-list-item v-for="item in data.list" class="jz-list-item-box">
								<template v-slot:body>
									<view class="jz-select-card">
										<radio :value="item.id && item.id.toString()" activeBackgroundColor="#3fd2a1"
										:checked="item.id == data.activeData" />
										<view class="card-body-row">
											<view class="card-img-box">
												<img :src="item.icon" v-if="item.icon">
												<icon class="phone-default-userImg" v-else></icon>
											</view>
											<view class="body-content-row">
												<view class="head-name">{{item.realName}}</view>
												<view class="content-text-row">
													<view> {{item.age}}岁<text v-if="item.jingyan"> ｜ {{item.jingyan}}经验</text>
													</view>
													<view class="text-status">{{item.zhuangtai}}</view>
												</view>
												<view class="content-text-row">
													{{item.jiguanShengName === item.jiguanShiName ? item.jiguanShengName  : `${item.jiguanShengName} ${item.jiguanShiName}`}}人
												</view>
											</view>
										</view>
									</view>
								</template>
							</uni-list-item>
						</radio-group>
						<uni-load-more :status="data.state" @click="getMore(0)"
							:contentText="data.contentText"></uni-load-more>
					</uni-list>
				</scroll-view>

			<view class="select-jz-btn-box">
				<button @click="handleSelect" type="default" class="phone-green-btn">选择此家政阿姨</button>
			</view>

		</view>
	</uni-popup>
</template>

<script setup>
	import {
		ref,
		reactive,
		nextTick
	} from "vue";
	import {
		onLoad
	} from "@dcloudio/uni-app";
	import * as httpApi from "@/api/sanfang.js"
	import {
		getJiazhengList
	} from "@/api/jiazheng.js"
	import searchDialog from "./search.vue";


	const emits = defineEmits(['select'])

	function goback2() {
		popupRef.value.close();
	}
	const searchDialogRef = ref(null);
	const popupRef = ref(null)
	const data = reactive({
		status: 0,
		statusText: '待签字',
		state: 'more',
		list: [], // 考试列表
		loading: false,
		realName: '',
		page: 0,
		size: 10,
		activeData: null
	})

	function toggle() {
		searchDialogRef.value.handleShow();
	}

	function dialogSearchBtn(opt, searchInput) {
		data.realName = searchInput
		onRefresh()
	}

	function dialogSearchReset() {
		data.realName = '';
	}

	function onScrolltolower() {
		getMore()
	}

	function onRefresh() {
		if (data.loading) return;
		data.page = 0;
		data.list = [];
		data.loading = true;
		refreshData();
	}

	function refreshData() {
		const opt = {
			realName: data.realName,
			page: data.page,
			size: data.size,
			status: data.status
		}
		data.list = [];
		// 数学
		data.state = 'loading';
		data.page++;
		opt.page = data.page;

		getJiazhengList(opt).then(res => {
			data.list = data.list.concat(res.data.data);
			data.loading = false;

			if (res.data.total > data.list.length) {
				data.state = 'more';
			} else {
				data.state = 'no-more';
			}
		}).catch(err => {
			data.state = 'more';
		}).finally(() => {
			data.loading = false;
		})
	}

	function getMore() {
		const opt = {
			realName: data.realName,
			page: data.page,
			size: data.size,
			status: data.status
		}
		if (data.state == 'no-more') return;
		data.state = 'loading';
		data.page++;
		opt.page = data.page;
		getJiazhengList(opt).then(res => {
			data.list = data.list.concat(res.data.data);
			data.loading = false;
			if (res.data.total > data.list.length) {
				data.state = 'more';
			} else {
				data.state = 'no-more';
			}
		}).catch(err => {
			data.state = 'more';
		}).finally(() => {
			data.loading = false;
		})
	}

	function radioChange(opt) {
		data.activeData = data.list.find(item => item.id == opt.detail.value)
	}

	function handleSelect() {
		emits('select', data.activeData)
		popupRef.value.close();
	}

	function handleShow() {
		data.realName = '';
		popupRef.value.open();
		onRefresh();
	}

	defineExpose({
		handleShow
	})
</script>

<style>
</style>