uniProject/pages/admin/Jiazheng/index.vue

<template>
	<view>
		<view class="jiazheng-uni-list">
			<view class="icon-title-navBar-box">
				<text class="nav-bar-title">家政人员</text>
				<text class="nav-bar-title">+</text>
				<uni-icons type="search" size="16" color="#000" @click="toggle('top')"></uni-icons>
			</view>
			<view class="jiazheng-search-box">

				<view @click="clickAlltype" class="select-item-box">
					<text>全部类型</text>
					<icon :class="allJtClass" />
				</view>
				<view class="all-type-list">
					<view v-if="isOpen" v-for="(item,index) in allType" :key="index" @click="onSelectCell(item,index)"
						class="all-type-item all-type-active">
						<view class="le-dropdown-cell-active-text">{{item.label}}</view>
						<view v-show="item.value==typeChecked"></view>
					</view>
				</view>
				<view class="jiazheng-search-right">
					<!--  当前点击 增加 saixuan-active-->
					<view class="saixuan-item-box saixuan-active">
						<text>更新时间</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="wgy" @click="lookUserInfo">
				<view>
					<view>王一一123</view>
					<view>分享阿斯蒂芬</view>
					<view>打电话</view>
				</view>
				<view>
					<image src="" mode=""></image>
					<view>
						<p> 1000岁｜3年经验</p>
						<p>四川成都人</p>
					</view>
					<view>
						待岗
					</view>
				</view>
			</view>
			<view>
				<!-- 普通弹窗 -->
				<uni-popup ref="popup" background-color="#fff">
					<view>
						<view>
							<uni-section title="全部" type="line">
								<view class="uni-px-5 uni-pb-5">
									<uni-data-select v-model="value" :localdata="range"
										@change="change"></uni-data-select>
								</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>
							</uni-section>
						</view>
					</view>
				</uni-popup>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue";
	import {
		onLoad
	} from "@dcloudio/uni-app";
	import {
		getJiazhengList
	} from "@/api/jiazheng.js"
	// import {
	// 	DropdownList
	// } from "./data.js";
	// const menuList = ref(DropdownList)
	const allType = [{
			label: "由近到远",
			value: 0
		},
		{
			label: "由远到近",
			value: 1
		},
		{
			label: "由远到近",
			value: 2
		},
		{
			label: "由远到近",
			value: 3
		},
	]

	let range = ref([{
			"value": 0,
			"text": "篮球",
			"disable": true
		},
		{
			"value": 1,
			"text": "足球"
		},
		{
			"value": 2,
			"text": "游泳"
		}
	])
	let zyName = ref('')
	let value = ref(0)
	let isOpen = ref(false)
	let typeChecked = ref(1)
	const popup = ref(null);
	const allJtClass = 'select-jt-default';
	const updataJtClass = 'saixuan-jt-default';
	const luruJtClass = 'saixuan-jt-click';
	const clickAlltype = (data) => {
		isOpen.value = true
	}
	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 lookUserInfo = (data, index) => {
		uni.redirectTo({
			url: `/pages/admin/Jiazheng/jiazhengUserInfo`
		})
	}
	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);
		})
	}
	onLoad(() => {
		getDataList()
	})
</script>

<style>
	.jiazheng-uni-list {
		display: flex;
		width: 100%;
		flex-direction: column;
	}

	.jiazheng-uni-list-left {
		position: relative;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
</style>