cashier_app/entryManager/add/components/bank-select.vue

<template>
	<view>

		<view class="box" @click.stop="openPopup">
			<text class="u-font-28 color-999 u-p-r-16" v-if="!modelValue">请选择</text>
			<text class="u-font-28 color-333 u-p-r-16" v-else>{{returnLabel()}}</text>
			<view class="icon">
				<up-icon name="arrow-down" size="14" color="#999"></up-icon>
			</view>
		</view>
		<up-popup :show="show" placement="bottom" round="18rpx" closeOnClickOverlay @close="close">
			<view class="u-p-30">
				<view class="font-bold color-333 u-font-32">选择银行</view>
				<view class="u-m-t-24">
					<up-search v-model="query.bankName" @search="search" @change="bankNameChange" @custom="search"
						@clear="search"></up-search>
				</view>
				<scroll-view @scrolltolower="scrolltolower" scroll-with-animation :scroll-into-view="selid"
					class="scroll-view u-m-t-30" scroll-y="true" style="max-height :60vh;">
					<view class="u-m-b-10 u-flex item" v-for="item in list" :key="item.id" @click="itemClick(item)"
						:id="'shop_'+item.id" :class="{active:selItem&&selItem.id==item.id}">
						<view class="checkbox">
							<up-icon name="checkbox-mark" color="#fff"></up-icon>
						</view>
						<view class="u-flex-1">{{item.bankAlias}}</view>
					</view>

					<up-loadmore :status="isEnd?'nomore':'loading'"></up-loadmore>
				</scroll-view>
				<view class="u-flex gap-20 u-m-t-30">
					<view class="u-flex-1">
						<my-button type="default" @click="close">取消</my-button>
					</view>
					<view class="u-flex-1">
						<my-button type="primary" @click="submit">确定</my-button>
					</view>
				</view>
			</view>
		</up-popup>
	</view>
</template>
<script setup>
	import {
		computed,
		nextTick,
		onMounted,
		reactive,
		ref,
		watch
	} from 'vue';
	import {
		bankInfo
	} from '@/http/api/system/common.js';
	const customStyle = ref({
		marginRight: '20px'
	});

	const show = ref(false);
	const modelValue = defineModel();

	const bankInstId = defineModel('bankInstId');




	const selid = ref('')

	function returnLabel() {
		const findShop = list.value.find(v => v.bankAlias == modelValue.value)
		return findShop ? findShop.bankAlias : ''
	}

	const selItem = ref(null)

	function itemClick(bank) {
		selItem.value = bank;

	}



	function close() {
		show.value = false;
	}

	function submit() {
		modelValue.value = selItem.value.bankAlias
		bankInstId.value = selItem.value.bankCode
		console.log('modelValue', modelValue.value);
		console.log('bankInstId', bankInstId.value);
		show.value = false;

	}

	function search() {
		isEnd.value = false
		query.page = 1
		init()
	}

	const list = ref([]);
	watch(() => modelValue.value, (newval) => {
		if (newval) {
			const findShop = list.value.find(v => v.bankAlias == modelValue.value)
			if (findShop) {
				selid.value = 'shop_' + findShop.id
				selItem.value = findShop
			}
		}

	})

	function openPopup() {
		const findShop = list.value.find(v => v.bankAlias == modelValue.value)
		if (findShop) {
			selid.value = 'shop_' + findShop.id
			selItem.value = findShop
		}
		show.value = true;

	}

	// --------------- 核心新增：节流函数实现 ---------------
	/**
	 * 节流函数：限制函数在指定时间内只触发一次
	 * @param {Function} fn - 要节流的函数
	 * @param {number} delay - 节流延迟时间（毫秒）
	 * @returns {Function} 节流后的函数
	 */
	function throttle(fn, delay = 300) {
		let timer = null; // 定时器标识
		return function(...args) {
			// 如果已有定时器，直接返回（未到触发时间）
			if (timer) return;
			// 执行函数并设置新定时器
			fn.apply(this, args);
			timer = setTimeout(() => {
				clearTimeout(timer);
				timer = null;
			}, delay);
		};
	}

	// --------------- 核心修改：创建节流后的search方法 ---------------
	// 300ms内只触发一次search，可根据需求调整delay值（如500ms）
	const throttledSearch = throttle(search, 300);

	// --------------- 改造bankNameChange：调用节流后的搜索 ---------------
	function bankNameChange() {
		// 输入变化时，调用节流后的搜索方法
		throttledSearch();
	}

	const query = reactive({
		page: 1,
		size: 10,
		bankName: ''
	})
	const isEnd = ref(false)

	function scrolltolower() {
		if (isEnd.value) {
			return
		}
		query.page++
		init()
	}


	async function init() {
		const res = await bankInfo(query);
		isEnd.value = query.page >= res.totalPage * 1 ? true : false
		if (res) {
			if (query.page == 1) {
				list.value = res.records
			} else {
				list.value = list.value.concat(res.records)
			}

		}
	}
	onMounted(init);
</script>
<style lang="scss">
	.box {
		border-radius: 8upx;
		display: flex;
		flex-direction: row;
		align-items: top;
		flex-wrap: wrap;
		padding: 20rpx 24rpx;
		border: 2rpx solid #e5e5e5;
		position: relative;

		.icon {
			position: absolute;
			top: 50%;
			right: 24rpx;
			transform: translateY(-50%);
		}
	}

	.shop-item {
		padding: 4rpx 8rpx 4rpx 16rpx;
		border-radius: 4rpx;
		border: 2rpx solid #f0f0f0;
		background-color: #f5f5f5;
		margin-bottom: 16rpx;
		margin-left: 16rpx;
	}

	.scroll-view {
		.item {
			border: 1px solid #eee;
			padding: 20rpx;
			border-radius: 12rpx;

			&.active {
				border-color: $my-main-color;
			}

		}
	}

	.checkbox {
		margin-right: 10rpx;
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 6rpx;
		border: 1px solid #999;

	}

	.item {
		&.active {
			.checkbox {
				background-color: $my-main-color;
				border-color: $my-main-color;
			}
		}
	}
</style>