uniProject/pages/admin/Jiazheng/index.vue

<template>
	<view class="admin-jiazheng-list">
		<view class="phone-navBar-box">
			<view @click="goUpPage" 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 class="jiazheng-search-box">
			<view @click.stop="clickAlltype" class="select-item-box">
				<text class="select-text">{{data.leixing}}</text>
				<icon :class="allJtClass" />
			</view>

			<view class="jiazheng-search-right">
				<!--  当前点击 增加 saixuan-active-->
				<view @click="updateTimeClick" :class="shaixuanStyleUpdate">
					<text>更新时间</text>
					<icon :class="updataJtClass" />
				</view>
				<view @click="luruTimeClick" :class="shaixuanStyleluru">
					<!-- class切换  saixuan-jt-default  saixuan-jt-click-->
					<text>录入时间</text>
					<icon :class="luruJtClass" />
				</view>
				<view @click="juliClick" :class="shaixuanStylejuli">
					<!-- class切换  saixuan-jt-default  saixuan-jt-click-->
					<text :class="data.weizhiFlag?'':'saixuan-disabled'">距离排序</text>
					<icon :class="juliJtClass" />
				</view>
			</view>
		</view>
		<view class="all-type-box" v-show="isOpen" @click="clickAlltype">
			<dataChecked :list="allType" mode="single" :defaultCount="99" :showAdd="false"
				@change="selectChangeSkill" />
		</view>
		<view>
			<scroll-view scroll-y="true" refresher-enabled="true" :refresher-triggered="data.loading"
				:refresher-threshold="50" refresher-background="transparent" @refresherrefresh="onRefresh"
				class="jz-scroll-view">
				<uni-list class="admin-list-box">
					<view class="jz-new-btn-box">
						<button type="default" class="phone-green-btn" @click="addJiazhengRenyuan">新增人员</button>
					</view>

					<uni-list-item v-for="item in data.list" class="jz-list-item-box">
						<template v-slot:body>
							<view class="card-head-row">
								<view class="head-name">{{item.realName}}</view>
								<button type="default" class="phone-green-btn bz-bind-btn"
									@click.stop="kechengBind(item)">课程绑定</button>
									<button type="default" class="phone-green-btn bz-tel-btn"
										@click.stop="telephone(item)">打电话</button>
								<share :id="item.id" ref="shareRef">分享</share>

							</view>
							<view @click="lookUserInfo(item)" 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="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 class="content-lx-box">
										<view class="content-lx-item" v-for="item2 in item.leixing" :key="item2">
											{{item2}}
										</view>
									</view>
									<!-- <view class="content-text-row">{{item.jiguan}}</view> -->
								</view>
							</view>
						</template>
					</uni-list-item>
					<uni-load-more :status="data.state" @click="getMore(0)"
						:contentText="data.contentText"></uni-load-more>
				</uni-list>
			</scroll-view>
		</view>
		<view>
			<search-dialog ref="searchDialogRef" @search-btn="dialogSearchBtn"
				@reset-search="dialogSearchReset"></search-dialog>
		</view>
		<customTabbarAdminVue :current-tab="1"></customTabbarAdminVue>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from "vue";
	import {
		onLoad
	} from "@dcloudio/uni-app";
	import {
		getJiazhengList,
		getJiazhengLeixing
	} from "@/api/jiazheng.js"
	import dataChecked from './common/dataChecked.vue';
	import searchDialog from "./common/search.vue";
	import share from "./common/share.vue";
	import customTabbarAdminVue from "@/components/custom-tabbar/custom-tabbar-admin.vue";
	const searchDialogRef = ref(null);
	const shareRef = ref(null);
	let allType = ref([])
	let data = reactive({
		leixing: '全部类型',
		page: 0,
		size: 10,
		realName: '',
		sortRule: '', //排序规则（1降序，2升序
		sortRule: '', //排序类型（1更新时间，2录入时间）
		userName: '',
		weidu: '',
		jingdu: '',
		weizhiFlag: false,
		id: '',
		list: [], // 考试列表
		loading: false,
		state: 'more',
		contentText: {
			contentdown: '查看更多',
			contentrefresh: '加载中',
			contentnomore: '没有更多'
		}
	})
	let isOpen = ref(false)
	let defauleImg = ref('@/static/images/my/user-default-img.png')
	const allJtClass = 'select-jt-default';
	let updataJtClass = ref('');
	let luruJtClass = ref('');
	let juliJtClass = ref('');
	let shaixuanStyleUpdate = ref('saixuan-item-box');
	let shaixuanStyleluru = ref('saixuan-item-box');
	let shaixuanStylejuli = ref('saixuan-item-box');
	const isOpenSelect = ref(false);
	const selectedOption = ref('');
	let isFirstClickUpdate = ref('true')
	let isFirstClickluru = ref('true')
	let isFirstClickjuli = ref('true')

	function updateTimeClick() {
		data.sortType = 1
		const isFirst = isFirstClickUpdate.value == 'true';
		const isSecond = isFirstClickUpdate.value == 'false';
		if (isFirst) {
			shaixuanStyleUpdate.value = 'saixuan-item-box saixuan-active';
			updataJtClass.value = 'saixuan-jt-default';
			isFirstClickUpdate.value = 'false';
			data.sortRule = 1
		} else if (isSecond) {
			shaixuanStyleUpdate.value = 'saixuan-item-box saixuan-active';
			updataJtClass.value = 'saixuan-jt-click';
			isFirstClickUpdate.value = 'empty';
			data.sortRule = 2
		} else {
			shaixuanStyleUpdate.value = 'saixuan-item-box';
			updataJtClass.value = '';
			isFirstClickUpdate.value = 'true';
			data.sortRule = 0
		}
		data.page = 0;
		refreshData()
	}

	function luruTimeClick() {
		data.sortType = 2
		const isFirst = isFirstClickluru.value == 'true';
		const isSecond = isFirstClickluru.value == 'false';
		if (isFirst) {
			shaixuanStyleluru.value = 'saixuan-item-box saixuan-active';
			luruJtClass.value = 'saixuan-jt-default';
			isFirstClickluru.value = 'false';
			data.sortRule = 1
		} else if (isSecond) {
			shaixuanStyleluru.value = 'saixuan-item-box saixuan-active';
			luruJtClass.value = 'saixuan-jt-click';
			isFirstClickluru.value = 'empty';
			data.sortRule = 2
		} else {
			shaixuanStyleluru.value = 'saixuan-item-box';
			luruJtClass.value = '';
			isFirstClickluru.value = 'true';
			data.sortRule = 0
		}
		data.page = 0;
		refreshData()
	}

	function juliClick() {
		if (!data.weizhiFlag) {
			uni.showToast({
				title: `当前位置经纬度获取失败，请重新进入该页面！`,
				icon: 'none',
				duration: 2000
			})
			return false
		}
		data.sortType = 3
		const isFirst = isFirstClickjuli.value == 'true';
		const isSecond = isFirstClickjuli.value == 'false';
		if (isFirst) {
			shaixuanStylejuli.value = 'saixuan-item-box saixuan-active';
			juliJtClass.value = 'saixuan-jt-default';
			isFirstClickjuli.value = 'false';
			data.sortRule = 1
		} else if (isSecond) {
			shaixuanStylejuli.value = 'saixuan-item-box saixuan-active';
			juliJtClass.value = 'saixuan-jt-click';
			isFirstClickjuli.value = 'empty';
			data.sortRule = 2
		} else {
			shaixuanStylejuli.value = 'saixuan-item-box';
			juliJtClass.value = '';
			isFirstClickjuli.value = 'true';
			data.sortRule = 0
		}
		data.page = 0;
		refreshData()
	}

	function dialogSearchBtn(name, searchData) {
		switch (name) {
			case '姓名':
				dialogSearchReset();
				data.realName = searchData.value;
				break;
			case '手机号':
				data.userName = searchData.value;
				break;
		}
		data.page = 0;
		refreshData();

	}

	function dialogSearchReset() {
		data.userName = '';
		data.realName = '';
	}
	const clickAlltype = (data) => {
		isOpen.value = !isOpen.value;
	}

	const toggle = (data, index) => {
		searchDialogRef.value.handleShow();
	}
	const addJiazhengRenyuan = () => {
		let pageInfo = {
			status: 'add'
		}
		uni.redirectTo({
			url: "/pages/admin/Jiazheng/jiazhengUserManager?pageInfo=" + JSON.stringify(pageInfo)
		})
	}
	const lookUserInfo = (data) => {
		let pageInfo = {
			status: 'edit',
			id: data.id,
			userId: data.userId
		}
		uni.redirectTo({
			url: `/pages/admin/Jiazheng/jiazhengUserInfo?pageInfo=` + JSON.stringify(pageInfo)
		})
	}

	function goUpPage() {
		uni.redirectTo({
			url: `/pages/admin/ShouYe/shouye`
		})
	}

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

	function telephone(data) {
		console.log('data', data);
		if (data.userName) {
			uni.makePhoneCall({
				phoneNumber: data.userName
			});
		} else {
			uni.showToast({
				title: `无电话号`,
				icon: 'none',
				duration: 2000
			})
			return false
		}

	}
	function kechengBind(data){
		uni.redirectTo({
			url: `/pages/admin/Jiazheng/kechengBind?id=`+ data.id
		})
	}

	function selectChangeSkill(item) {
		if (item.length > 0) {
			data.leixing = item[0].name
			console.log('selectChangeSkill', item);
			data.page = 0;
			refreshData()
		}
	}

	function refreshData() {
		const opt = {
			"leixing": data.leixing == '全部类型' ? '' : data.leixing,
			"page": 1,
			"realName": data.realName,
			"size": 10,
			"sortRule": data.sortRule,
			"sortType": data.sortType,
			"userName": data.userName,
			"jingdu": data.jingdu,
			"weidu": data.weidu
		}
		data.list = [];
		// 数学
		data.state = 'loading';
		data.page++;
		opt.page = data.page;

		getJiazhengList(opt).then(res => {
			data.list = data.list.concat(res.data.data);
			data.list = data.list.map(item => {
				const newItem = {
					...item
				};
				newItem.leixing = item.leixing.split(',');
				return newItem;
			})
			data.loading = false;

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

	function getMore() {
		const opt = {
			"leixing": data.leixing == '全部类型' ? '' : data.leixing,
			"page": 1,
			"realName": data.realName,
			"size": 10,
			"sortRule": data.sortRule,
			"sortType": data.sortType,
			"userName": data.userName,
			"jingdu": data.jingdu,
			"weidu": data.weidu
		}
		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.list = data.list.map(item => {
				const newItem = {
					...item
				};
				newItem.leixing = item.leixing.split(',');
				return newItem;
			})
			console.log('data.list', data.list);
			data.loading = false;

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

	function getLeixing() {
		let req = {}
		getJiazhengLeixing(req).then(res => {
			res.data.unshift("全部类型");
			allType = dataConversionObject(res.data)
			console.log('allType', allType);
		})
	}

	function dataConversionObject(data) {
		let newList
		newList = data.map((name, index) => ({
			id: index,
			name: name
		}));
		return newList
	}

	function getCurrentWeizhi() {
		console.log('1231231');
		uni.getLocation({
			type: 'wgs84',
			success: function(res) {
				console.log('res', res)
				data.jingdu = res.longitude
				data.weidu = res.latitude
				data.weizhiFlag = true
				console.log('当前位置的经度：' + res.longitude);
				console.log('当前位置的纬度：' + res.latitude);
			}
		});
	}
	onLoad(() => {
		getMore()
		getLeixing()
		getCurrentWeizhi()
	})
</script>