door-uniapp-240802/service-uniapp-client/components/payOrder/selectEssentialOilPopup.vue

<template>
	<view class="selectEssentialOil">
		<van-popup v-model:show="showBottom" round position="bottom" @close="close" :style="{ height: '75%' }">

			<view class="box">

				<view class="title">
					{{ title || '选择精油' }}
				</view>

				<view class="technician-list">
					<van-list v-model:loading="loading" :finished="finished" @load="onLoad">
						<view class="EssentialOil-list">
							<view @click="select(item)" v-for="item in essentialOilList" :key="item.key" class="EssentialOil-item">
								<view class="img-box">
									<image :src="item.path" mode="aspectFill"></image>
								</view>
								<view class="name-price">
									<view class="name">{{ item.name }}</view>
									<view class="price">￥{{ item.price }}</view>
								</view>
							</view>
						</view>
					</van-list>
				</view>

			</view>

		</van-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showBottom : false,
				essentialOilList : [
					{ id : 1 , path : '/static/test/精油.png' , name : '精油1' , price : 600 },
					{ id : 2 , path : '/static/test/精油1.png' , name : '精油2' , price : 660 },
					{ id : 3 , path : '/static/test/精油2.png' , name : '精油3' , price : 888 },
					{ id : 4 , path : '/static/test/精油3.png' , name : '精油4' , price : 999 },
				],
				loading : false,
				finished : true
			}
		},
		props : ['show', 'title'],
		created(){
			this.getEssentialOil()
		},
		methods: {
			//获取精油列表
			getEssentialOil(){
				this.loading = false;
				this.finished = true;
				console.log('获取精油列表');
			},
			
			//用户选择了精油
			select(e){
				this.$emit('select', e)
			},
			
			//关闭弹窗
			close(){
				this.$emit('close')
			},
			
			//滑动到屏幕底部触发(分页)
			onLoad(){
				// this.queryParams.pageSize += 10
				// this.getEssentialOil()
			}
		},
		watch: {
			show: {
			   handler (newValue, oldValue) {
				   this.showBottom = newValue
				   this.getEssentialOil()
			   },
			   immediate: true
			}
		}
	}
</script>

<style lang="scss" scoped>
	.selectEssentialOil {

		.box {
			width: 100%;
			height: 100%;
			background: #F1B8BD;
			box-sizing: border-box;
			padding: 40rpx;

			.title {
				font-size: 32rpx;
				text-align: center;
				color: #fff;
				margin-bottom: 40rpx;
			}

			.technician-list {
				overflow: auto;
				width: 100%;
				height: calc(100% - 45rpx);
			}
			
			.EssentialOil-list{
				display: flex;
				flex-wrap: wrap;
				
				.EssentialOil-item{
					width: calc(50% - 15rpx);
					background: #fff;
					padding: 20rpx;
					margin-right: 15rpx;
					flex-shrink: 0;
					margin-bottom: 20rpx;
					border-radius: 10rpx;
					box-sizing: border-box;
					
					.img-box{
						display: flex;
						align-items: center;
						justify-content: center;
						width: 100%;
						aspect-ratio: 1 / 1; /* 设置宽高比为1:1 */ 
						
						image{
							width: 100%;
							height: 100%;
						}
					}
					
					.name-price{
						
						.name{
							font-size: 30rpx;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
							color: #666;
							margin: 20rpx;
						}
						
						.price{
							color: red;
						}
					}
					
					&:nth-child(2n){
						margin-right: 0rpx;
					}
				}
			}
		}
	}
</style>