h5-meike/pages/ticket/select.vue

<template>
	<view class="page mm-page">
		<gmy-back-touch></gmy-back-touch>
		<!-- xuchao: 顶部提示徽章 —— 需添加的出行人数量 -->
		<view class="tip mm-fade-up">
			<view class="mm-badge">
				<view class="mm-badge__dot"></view>
				<text class="mm-badge__text">需添加 {{value}} 个出行人（已选 {{selectedCount}}）</text>
			</view>
		</view>

		<!-- xuchao: 新增出行人 —— 虚线描边引导卡 -->
		<view class="add mm-fade-up" @click="toAddPerson">
			<view class="add__icon mm-grad">
				<u-icon name="plus" color="#ffffff" size="30"></u-icon>
			</view>
			<text class="add__text">新增出行人</text>
			<u-icon name="arrow-right" color="#CBD5E1" size="28"></u-icon>
		</view>

		<!-- xuchao: 出行人列表 —— 整卡点击勾选，笔形图标进编辑 -->
		<view class="list mm-stagger">
			<view class="person mm-card mm-fade-up" v-for="(item,index) in list" :key="index" @click="toggle(item)">
				<view class="person__avatar mm-grad">{{(item.name||'').charAt(0)}}</view>
				<view class="person__info">
					<view class="person__name">{{item.name}}</view>
					<view class="person__id">{{item.identityNo}}</view>
				</view>
				<view class="person__edit" @click.stop="toPerson(item)">
					<u-icon name="edit-pen" color="#64748B" size="36"></u-icon>
				</view>
				<view class="person__check" @click.stop>
					<u-checkbox v-model="item.isSelect" active-color="#0052FF"></u-checkbox>
				</view>
			</view>
		</view>

		<!-- xuchao: 底部固定完成按钮（视口水平居中，宽屏下与页面列对齐） -->
		<view class="bar">
			<view class="mm-btn" @click="select">完成</view>
		</view>
	</view>
</template>

<script>
	var that=''
	import gmyBackTouch from "@/components/gmy-back-touch/gmy-back-touch.vue"
export default {
	components: {
		'gmy-back-touch': gmyBackTouch
	},
	data() {
		return {
			checked:true,
			list:[],
			value:0
		};
	},
	onLoad(e){
		that=this
		this.value=Number(e.value)
	},
	onShow(){
		this.getMemberTouristMethod()
	},
	computed: {
		// xuchao: 已勾选的出行人数量
		selectedCount() {
			return this.list.filter(item => item.isSelect).length
		}
	},
	methods: {
		// 选中某个复选框时，由checkbox时触发
		checkboxChange(e) {
			console.log(e);
		},
		// xuchao: 整卡点击即勾选/取消；勾选数达到需求量 value 后再勾选则提示拦截
		toggle(item) {
			if (!item.isSelect && this.selectedCount >= this.value) {
				uni.showToast({
					icon: 'none',
					title: '只需 ' + this.value + ' 位出行人',
					duration: 1500
				})
				return
			}
			item.isSelect = !item.isSelect
		},
		toAddPerson(){
			uni.navigateTo({
				url: 'person'
			})
		},
		toPerson(e){
			uni.navigateTo({
				url: 'person?info='+JSON.stringify(e)
			})
		},
		getMemberTouristMethod(){
			this.$u.api.getMemberTourist({mobile:uni.getStorageSync('phone')}).then(res => {
				if (res) {
					res.data.forEach(item=>{
						this.$set(item,'isSelect',false)
					})
					this.list=res.data

				}
			})
		},
		select(){
			let arr =[]
			this.list.forEach(item=>{
				if(item.isSelect){
					arr.push(item)
				}
			})
			let pages = getCurrentPages(); //获取所有页面栈实例列表
			let nowPage = pages[pages.length - 1]; //当前页页面实例
			let prevPage = pages[pages.length - 2]; //上一页页面实例
			prevPage.objitem = JSON.stringify(arr); //修改上一页面的 couponNumber 参数值为 value
			uni.navigateBack({ //uni.navigateTo跳转的返回，默认1为返回上一级
				delta: 1
			});
		}
	}
};
</script>

<style lang="less" scoped>
	/* xuchao: 底部预留 220rpx，避免列表被固定完成按钮遮挡 */
	.page {
		padding: 32rpx 32rpx 220rpx;
	}

	.tip {
		display: flex;
	}

	.add {
		margin-top: 24rpx;
		display: flex;
		align-items: center;
		border: 2rpx dashed rgba(0, 82, 255, 0.4);
		border-radius: 20rpx;
		background: rgba(0, 82, 255, 0.04);
		padding: 28rpx 24rpx;
		transition: transform 0.15s ease;
	}

	.add:active {
		transform: scale(0.985);
	}

	.add__icon {
		flex: none;
		width: 64rpx;
		height: 64rpx;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: var(--mm-shadow-accent);
	}

	.add__text {
		flex: 1;
		margin-left: 20rpx;
		font-size: 28rpx;
		font-weight: 500;
		color: var(--mm-accent);
	}

	.list {
		margin-top: 24rpx;
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}

	.person {
		display: flex;
		align-items: center;
		padding: 28rpx 24rpx;
		transition: transform 0.15s ease;
	}

	.person:active {
		transform: scale(0.985);
	}

	.person__avatar {
		flex: none;
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		font-size: 32rpx;
		font-weight: 600;
		box-shadow: var(--mm-shadow-accent);
	}

	.person__info {
		flex: 1;
		min-width: 0;
		margin-left: 20rpx;
	}

	.person__name {
		font-size: 30rpx;
		font-weight: 600;
		color: var(--mm-fg);
	}

	.person__id {
		margin-top: 6rpx;
		font-size: 22rpx;
		letter-spacing: 0.04em;
		color: var(--mm-muted-fg);
	}

	.person__edit {
		flex: none;
		padding: 0 24rpx 0 8rpx;
	}

	.person__check {
		flex: none;
		/* xuchao: 复选框仅作状态展示，勾选统一走整卡 toggle，数量上限才拦得住 */
		pointer-events: none;
	}

	/* xuchao: 底部固定按钮 —— left/right 0 + margin auto 保证宽屏居中时与页面列对齐 */
	.bar {
		position: fixed;
		left: 0;
		right: 0;
		margin: 0 auto;
		width: 686rpx;
		bottom: calc(32rpx + constant(safe-area-inset-bottom));
		bottom: calc(32rpx + env(safe-area-inset-bottom));
		z-index: 99;
	}
</style>