cashier_app/entryManager/components/shop-select.vue

<template>
	<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.shopName" @search="search" @clear="search" @custom="search"></up-search>
				</view>
				<scroll-view @scrolltolower="scrolltolower" scroll-with-animation :scroll-into-view="selShopId"
					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.shopId" @click="itemClick(item)"
						:id="'shop_'+item.shopId" :class="{active:selShop==item.shopId}">
						<view class="checkbox">
							<up-icon name="checkbox-mark" color="#fff"></up-icon>
						</view>
						<view class="u-flex-1">{{item.shopName}}</view>
					</view>
					<template v-if="query.shopName!==''">
						<up-empty v-if="list.length==0" text="未搜索到相关店铺"></up-empty>
						<up-loadmore v-else :status="isEnd?'nomor':'loading'"></up-loadmore>
					</template>
					<template v-else>
						<up-loadmore :status="isEnd?'nomor':'loading'"></up-loadmore>
					</template>
				</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,
		onMounted,
		reactive,
		ref,
		watch
	} from 'vue';
	import {
		adminShopList
	} from '@/http/api/shop.js';

	const customStyle = ref({
		marginRight: '20px'
	});

	const show = defineModel(false)
	let selShop = defineModel('selShop', {
		default: '',
	});



	const selShopId = ref('')

	function returnLabel() {
		const findShop = list.value.find(v => v.shopId == selShop.value)
		return findShop ? findShop.shopName : ''
	}

	function itemClick(shop) {
		selShop.value = shop.shopId
	}

	function returnShopName(shopId) {
		const item = list.value.find((v) => v.shopId == shopId);
		return item?.shopName || '';
	}

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

	const emits=defineEmits(['confirm'])
	function submit() {
		show.value = false;
		if(!selShop.value){
			return uni.showToast({
				title:'请选择门店',
				icon:'none'
			})
		}
		const findShop = list.value.find(v => v.shopId == selShop.value)
		emits('confirm',findShop)
	}


	const list = ref([]);

	function openPopup() {
		selShopId.value = 'shop_' + selShop.value
		show.value = true;

	}

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

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

	function search() {
		selShop.value = '';
		query.page = 1;
		isEnd.value = false
		init()
	}
	async function init() {
		const res = await adminShopList(query);
		if (res) {
			const arr = res.records.map((item) => ({
				shopId: item.id,
				shopName: item.shopName,
			}));
			isEnd.value = query.page >= res.totalPage * 1
			if (query.page == 1) {
				list.value = arr
			} else {
				list.value.push(...arr)
			}
		}
	}
	onMounted(init);
</script>
<style lang="scss">
	.box {
		border-radius: 8upx;
		display: flex;
		flex-direction: row;
		align-items: top;
		flex-wrap: wrap;
		padding: 10rpx 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>