1

pages/subpack/pages/application/choose.vue

@@ -0,0 +1,233 @@
+<template>
+	<z-paging ref="paging" v-model="data.list" @query="queryList" empty-view-text="~ 暂无数据 ~">
+		<template #top>
+			<u-navbar class="u-navbar-box" title="请选择" placeholder bgColor="transparent" autoBack />
+			<view style="padding: 20rpx 10rpx;background-color: #fff;">
+				<u-search placeholder="请输入搜索" v-model="data.keyword" @custom="search" @search="search"
+					@clear="search" />
+			</view>
+		</template>
+		<template #default>
+			<view v-for="(v, i) in data.list" :key="i" class="flex-row p-item" @click="chooseHandle(i)">
+				<u-icon :class="{ 'radio-active': v.checked }" class="radio" name="checkbox-mark" :size="20"
+					color="#fff" />
+				<view style="width: 20rpx"></view>
+				<u-avatar :text="nameText(v.name)" shape="square" bgColor="#2979ff" />
+				<view style="margin-left: 20rpx">
+					<view class="text-size-n">{{ v.name }}</view>
+					<view class="text-grey text-size-m mt-1">{{ v.des }}</view>
+				</view>
+			</view>
+		</template>
+		<template #bottom>
+			<view class="l-fixed__box" style="position: relative; z-index: 9999">
+				<view class="u-flex u-row-between">
+					<view style="width: 65%">
+						<view class="flex flex-row" style="color: #2979ff">
+							<text class="text-size-n">已选择:</text>
+							<text class="text-size-n" v-if="!showCheck" @tap="cancel"
+								style="display: inline-block; margin-left: 40rpx; color: #ff9900">取消全部选中</text>
+						</view>
+						<view style="color: #909399; font-size: 26rpx">
+							<text class="text-size-n" v-if="showCheck">最多可以选择{{ maxCount }}人</text>
+							<text class="text-overflow text-size-n"
+								style="width: 300rpx;color: #2979ff;">{{ checkedText }}</text>
+						</view>
+					</view>
+					<view>
+						<u-button type="primary" :disabled="showCheck" @tap="submit"
+							:text="`确定(${checkedCount}/${data.maxCount})`"></u-button>
+					</view>
+				</view>
+			</view>
+		</template>
+	</z-paging>
+</template>
+
+<script setup>
+	import {
+		ref,
+		computed,
+		reactive,
+		getCurrentInstance
+	} from 'vue';
+	import {
+		onLoad
+	} from "@dcloudio/uni-app"
+
+	const {
+		proxy
+	} = getCurrentInstance();
+
+	const data = reactive({
+		list: [],
+		maxCount: 3, //最大选中的数量
+		dufaultIds: '', //默认选中的id
+		keyword: '', //名字查询
+		pageType: '' //条件：返回带入
+	})
+
+	const nameText = computed(() => {
+		return (name) => {
+			let index = name.length - 2;
+			index = index >= 0 ? index : 0;
+			return name.substring(index);
+		};
+	})
+
+	const showCheck = computed(() => {
+		console.log(checkedCount.value);
+		return checkedCount.value === 0;
+	})
+
+	const checkedText = computed(() => {
+		let text = [];
+		data.list.map((v) => {
+			if (v.checked) text.push(v.name);
+		});
+		return text.join(',');
+	})
+
+	const checkedCount = computed(() => {
+		let count = 0;
+		data.list.map((v) => {
+			if (v.checked) count++;
+		});
+		return count;
+	})
+
+	function chooseHandle(index) {
+		let checked = data.list[index].checked;
+		if (data.maxCount <= checkedCount.value && !checked) return false;
+		data.list[index].checked = !checked;
+	}
+
+	function submit() {
+		let checkList = [];
+		data.list.map((v) => {
+			if (v.checked) {
+				checkList.push({
+					id: v.id,
+					name: v.name
+				});
+			}
+		});
+		let backParams = {
+			checkList: checkList
+		};
+		if (data.pageType) backParams.backType = data.pageType;
+		uni.$emit('checkPerson', backParams);
+		uni.$u.route({
+			type: 'back'
+		});
+	}
+
+	function queryList(pageNo, pageSize) {
+		uni.showLoading({
+			title: '加载中...',
+			mask: true
+		})
+		let list = [];
+		for (var i = 0; i < 20; i++) {
+			list.push({
+				id: i,
+				name: `test${i}`,
+				des: '已经服务11人'
+			})
+		}
+		setTimeout(() => {
+			paging.value.complete(list);
+			uni.hideLoading();
+		}, 500)
+	}
+
+	const paging = ref(null)
+
+	function search() {
+		paging.value.reload();
+	}
+
+
+	function cancel() {
+		data.list.map((v) => {
+			if (v.checked) v.checked = false;
+		});
+	}
+
+
+	onLoad((options) => {
+		if (options.maxCount) data.maxCount = options.maxCount;
+		if (options.dufaultIds) data.dufaultIds = options.dufaultIds;
+		if (options.pageType) data.pageType = options.pageType;
+	})
+</script>
+<style>
+	page {
+		background-color: #F6FAFF;
+	}
+</style>
+<style lang="scss" scoped>
+	::v-deep {
+		.u-navbar__content__title {
+			font-weight: bold;
+			font-size: 36rpx;
+			color: #222222;
+		}
+
+		.u-navbar__content {
+			background: radial-gradient(circle at left, #FFE5E4 0%, #EEF2F5 40%, #DBEEFB 100%);
+		}
+	}
+	.u-navbar-box {
+		background: radial-gradient(circle at left, #FFE5E4 0%, #EEF2F5 40%, #DBEEFB 100%);
+	}
+	.radio {
+		background-color: #fff;
+		border: 1px solid #909399;
+		border-radius: 50%;
+		height: 45rpx;
+		width: 45rpx;
+		justify-content: center;
+	}
+	
+	.radio-active {
+		background-color: #2979ff;
+		border: 1px solid #2979ff;
+	}
+	
+	.p-item {
+		padding: 20rpx;
+		align-items: center;
+		background-color: #fff;
+		margin: 20rpx 0;
+	}
+	
+	.p-item:active {
+		background-color: #e8e8e8;
+	}
+	
+	.l-fixed {
+		&__placeholder {
+			height: 100rpx;
+		}
+	
+		&__box {
+			position: fixed;
+			width: 750rpx;
+			padding: 20rpx;
+			bottom: 0;
+			height: 120rpx;
+			border-top: 1px solid #c8c9cc;
+			background-color: #fff;
+		}
+	}
+	.text-size-n{
+		font-size: 30rpx;
+	}
+	.text-size-m{
+		font-size: 26rpx;
+	}
+	.text-grey{
+		color: rgba(34, 34, 34, .4);
+	}
+</style>