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>
				<view class="nav-bar-icon-box">
					<text class="nav-bar-right-icon" @click="addJiazhengRenyuan">+</text>
					<uni-icons class="nav-bar-right-icon" type="search" size="18" color="#666" @click="toggle('top')"></uni-icons>
				</view>
			</view>
			<view class="jiazheng-search-box">
				<view @click="clickAlltype" class="select-item-box">
					<text>全部类型</text>
					<icon :class="allJtClass" />
				</view>
				
				<view class="jiazheng-search-right">
					<!--  当前点击 增加 saixuan-active-->
					<view class="saixuan-item-box saixuan-active">
						<text @click="timeClick">更新时间</text>
						<icon :class="updataJtClass" />
					</view>
					<view class="saixuan-item-box">
						<!-- class切换  saixuan-jt-default  saixuan-jt-click-->
						<text>录入时间</text>
						<icon :class="luruJtClass" />
					</view>
				</view>
			</view>	
			<view class="all-type-box" v-show="isOpen">
				<dataChecked :list="allType" mode="multiple" :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="phone-scroll-view">
					<uni-list class="admin-list-box">
						<uni-list-item v-for="item in data.list" class="admin-list-item-box">
							<template v-slot:body>
								<view>
									<view>{{item.realName}}</view>
									<view @click="shareInfo">分享</view>
									<view @click="telephone">打电话</view>
								</view>
								<view @click="lookUserInfo(item)">
									<image :src="item.icon ||defauleImg" mode=""></image>
									<view>
										<p> {{item.age}}岁｜{{item.jingyan}}年经验</p>
										<p>{{item.jiguan}}</p>
									</view>
									<view>
										{{item.zhuangtai}}
									</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>
				<!-- 普通弹窗 -->
				<uni-popup ref="popup" background-color="#fff">
					<view>
						<view>
							 <view class="container">
							    <!-- 下拉触发按钮 -->
							    <view class="select-box" @click="toggleDropdown">
							      <text class="selected-label">{{ selectedOption || '请选择' }}</text>
							      <text class="arrow" :class="{ 'rotate': isOpen }">▼</text>
							    </view>
							
							    <!-- 下拉菜单 -->
							    <view v-if="isOpenSelect" class="dropdown-menu">
							      <view 
							        v-for="(item, index) in options" 
							        :key="index" 
							        class="dropdown-item"
							        @click="selectOption(item)"
							      >
							        <text>{{ item.label }}</text>
							      </view>
							    </view>
							
							    <!-- 点击外部关闭的遮罩层 -->
							    <view v-if="isOpenSelect" class="mask" @click="isOpenSelect = false"></view>
							  </view>
							
							
							
							
							
							<view class="phone-search-box">
								<input class="search-input" placeholder="请输入职业名称" v-model="zyName" />
								<view class="search-icon" @click="handleSearch">
									<uni-icons type="search" size="24" color="#fff"></uni-icons>
								</view>
							</view>
						</view>
					</view>
				</uni-popup>
			</view>
		</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';
	let range = ref([{
			"value": 0,
			"text": "篮球",
			"disable": true
		},
		{
			"value": 1,
			"text": "足球"
		},
		{
			"value": 2,
			"text": "游泳"
		}
	])
	let allType = ref([])
	let data = reactive({
		zyName: '', // 职业名称
		list: [], // 考试列表
		list2:[
		{
				"value": 0,
				"text": "全部",
			},
			{
				"value": 1,
				"text": "姓名"
			},
			{
				"value": 2,
				"text": "手机号"
			}
		],
		loading: false,
		page: 0,
		size: 10,
		state: 'more',
		contentText: {
			contentdown: '查看更多',
			contentrefresh: '加载中',
			contentnomore: '没有更多'
		}
	})
	let zyName = ref('')
	let value = ref(0)
	let isOpen = ref(false)
	let typeChecked = ref(1)
	let defauleImg = ref('@/static/images/my/client-default-icon.png')
	const popup = ref(null);
	const allJtClass = 'select-jt-default';
	const updataJtClass = 'saixuan-jt-default';
	const luruJtClass = 'saixuan-jt-click';
	
	const isOpenSelect = ref(false);
	const selectedOption = ref('');
	const options = ref([
	  { label: '全部', value: 1 },
	  { label: '姓名', value: 2 },
	  { label: '手机号', value: 3 }
	]);
	
	const clickAlltype = (data) => {
	 isOpen.value = !isOpen.value;
	}
	const toggleDropdown = () => {
	  isOpenSelect.value = !isOpenSelect.value;
	};
	const selectOption = (item) => {
	  selectedOption.value = item.label;
	  isOpenSelect.value = false;
	  // 这里可以触发自定义事件
	  // uni.$emit('select-change', item.value);
	};
	
	const onSelectCell = (data, index) => {
		console.log('data', data);
		console.log('index', index);
		//	isOpen.value = false;
		//	allJtClass = 'select-jt-click'
	}
	const toggle = (data, index) => {
		popup.value.open('top')
	}
	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() {
		uni.makePhoneCall({
			phoneNumber: '114' //仅为示例
		});
	}

	function shareInfo() {

	}
	function selectChangeSkill() {

	}

	function refreshData() {

	}

	function timeClick() {

	}

	function change() {

	}

	function handleSearch() {

	}

	function getDataList() {
		let req = {
			"leixing": "",
			"page": 1,
			"realName": "",
			"size": 10,
			"sortRule": 0,
			"sortType": 0,
			"userName": ""
		}
		getJiazhengList(req).then(res => {
			console.log('res', res);
			data.list = res.data.data
			console.log('data.list', data.list);
		})
	}
	function getLeixing() {
		let req = {
		}
		getJiazhengLeixing(req).then(res => {
				allType = dataConversionObject(res.data)
			console.log('allType',allType.value);
		})
	}
	function dataConversionObject(data) {
		let newList
		newList = data.map((name, index) => ({
			id: index,
			name: name
		}));
		return newList
	}
	onLoad(() => {
		getDataList()
		getLeixing()
	})
</script>