zh_order_food_xcx/pages-takeout/run-errands-mod/select-mod.vue

<template>
	<view class="">
		<uni-popup ref="popSelect" type="bottom">
			<view class="pop-box bgc-f ptb-24">
				<view class="text-align-center fs-36 fw-600 box-title mb-32">
					{{popTitleName}}
					<uni-icons @click="closeCoupon" class="box-close" type="closeempty" size="20"></uni-icons>
				</view>
				<scroll-view :scroll-y="true" class="scroll-view-css" @scrolltolower="scrolltolower">
					<view class="align-items-center flex-justify-space p-24 box-border-box b-b-EAEAEC"
						v-for="(item,index) in list" :key="index" @click="selectClick(item)">
						<view class="align-items-center">
							<view class="fs-28 mr-24">
								{{item.name}}
							</view>
							<view class="fs-26 fc-FB3D03">
								￥{{item.price}}
							</view>
						</view>
						<uni-icons v-if="item.item_id === select_id" type="checkbox-filled" size="22"
							color="#4495FD"></uni-icons>
					</view>
				</scroll-view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		props: {
			popTitleName: {}
		},
		components: {},
		data() {
			return {
				list: [],
				select_id: 0
			};
		},
		onLoad(data) {},
		mounted() {},
		methods: {
			getList(id, data) {
				if (id && id != 0) {
					this.select_id = id
				}
				if (data) {
					this.list = data
					this.openPop()
				}
			},
			selectClick(item) {
				console.log(item, this.select_id);
				if (item.item_id === this.select_id) {
					return
				}
				this.select_id = item.item_id
				this.$emit('selectData', item)
				this.closeCoupon()
			},
			openPop() {
				this.$refs.popSelect.open();
			},
			closeCoupon() {
				this.$refs.popSelect.close();
			},
		},
	}
</script>

<style lang="scss" scoped>
	.pop-box {
		max-height: 60vh;
	}

	.box-close {
		position: absolute;
		right: 22rpx;
	}
</style>