hotel-tablecloth-uniapp-24-08-29/pages_order/components/commodity/commoditySelect.vue

<template>
	<scroll-view scroll-y="true" :style="{height: height}" @scrolltolower="more">
		<view v-if="commodityList.length">
			<view v-for="(item, index) in commodityList" :key="index" class="address-item">
				<view class="itme1" @click="selectSp(item)">
					<view class="left">
						<image :src="item.goodsPic" mode="aspectFill"/>
					</view>
					<view class="center">
						<view>{{ item.goodsName }}</view>
						<view>规格:{{ item.sku }}</view>
						<view>下单时间:{{item.startTime}}</view>
					</view>
					<view class="right">×{{item.num}}</view>
				</view>
				<uv-line></uv-line>
			</view>
		</view>
		<view style="padding: 100rpx 0;" v-else>
			<uv-empty mode="history" textSize="28rpx" iconSize="100rpx" />
		</view>
	</scroll-view>
</template>

<script>
	export default {
		props: {
			height: {
				default: 'calc(90vh - 180rpx)'
			}
		},
		data() {
			return {
				total: 0,
				commodityList: [],
				queryParams: {
					pageNo: 1,
					pageSize: 10,
				},
			}
		},
		methods: {
			// 选择了商品
			selectSp(e) {
				this.$emit('selectSp', e)
			},
			//获取租赁列表
			getList() {
				return new Promise((success, fail) => {
					this.$api('getLeasePage', this.queryParams, res => {
						if (res.code == 200) {
							this.commodityList = res.result.records || [];
							this.total = res.result.total || 0;
							success(res.result)
						}
					})
				})
			},
			// 加载更多
			more(){
				if(this.queryParams.pageSize > this.total){
					return
				}
				this.queryParams.pageSize += 10
				this.getList()
			},
		}
	}
</script>

<style scoped lang="scss">
	.itme1 {
		display: flex;
		width: 100vw;
		background-color: #ffffff;

		.left {
			padding: 20rpx;
			width: 150rpx;
			height: 150rpx;
			border-radius: 20rpx;
			background-color: #ffffff;
			flex-shrink: 0;
			image{
				width: 100%;
				height: 100%;
				border-radius: 20rpx;
			}
		}

		.center {
			display: flex;
			flex-direction: column;
			justify-content: center;
			gap: 20rpx;
			width: 60%;
			padding: 0rpx 0 0 20rpx;
			background-color: #ffffff;

			// 给第一个 view 设置样式
			>view:first-of-type {
				font-size: 34rpx;
				color: #333;
			}

			// 给第二个 view 设置样式
			>view:nth-of-type(2) {
				font-size: 26rpx;
				color: #666666;
			}
			// 给第二个 view 设置样式
			>view:nth-of-type(3) {
				font-size: 26rpx;
				color: #666666;
			}
		}

		.right {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 10%;
			color: #666666;
			background-color: #ffffff;
		}
	}
</style>