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 || 'https://img95.699pic.com/photo/50058/1378.jpg_wh860.jpg'" mode="aspectFill"/>
						<view class="imageTag" v-if="item.statusInfo">
							{{ item.statusInfo }}
						</view>
					</view>
					<view class="center">
						<view>
						{{ item.goodsName }}
						</view>
						<view>规格:{{ item.sku }}</view>
						<view>下单时间:{{ $dayjs(item.createTime).format('YYYY-MM-DD') }}</view>
					</view>
					<view class="right">×{{item.num}}</view>
					
					<view class="leaseFlag" v-if="item.leaseFlag">
						租
					</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>
	import leaseMixins from '@/mixins/lease.js'
	export default {
		mixins : [leaseMixins],
		props: {
			height: {
				default: 'calc(90vh - 180rpx)'
			},
			leaseFlag : {
				
			},
			status : {
				
			}
		},
		data() {
			return {
				total: 0,
				commodityList: [],
				queryParams: {
					pageNo: 1,
					pageSize: 10,
				},
			}
		},
		methods: {
			// 选择了商品
			selectSp(e) {
				if(e.statusInfo){
					return uni.showToast({
						title: '该物品' + e.statusInfo,
						icon: 'none',
					})
				}
				this.$emit('selectSp', e)
			},
			//获取租赁列表
			getList() {
				return new Promise((success, fail) => {
					let queryParams = {...this.queryParams}
					if(this.leaseFlag){
						queryParams.leaseFlag = this.leaseFlag
					}
					if(this.status){
						queryParams.status = this.status
					}
					this.$api('getLeasePage', queryParams, res => {
						if (res.code == 200) {
							this.commodityList = res.result.records || [];
							
							
							this.commodityList.forEach(n => {
								n.statusInfo = this.isLeaseStatus(n)
							})
							
							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;
		position: relative;

		.left {
			padding: 20rpx;
			width: 150rpx;
			height: 150rpx;
			border-radius: 20rpx;
			background-color: #ffffff;
			flex-shrink: 0;
			position: relative;
			image{
				width: 100%;
				height: 100%;
				border-radius: 20rpx;
			}
			.imageTag{
				position: absolute;
				bottom: 0;
				left: 0;
				font-size: 22rpx;
				color: #fff;
				background-color: rgba(#000, 0.5);
				padding: 20rpx 0;
				width: 100%;
				text-align: center;
			}
		}

		.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;
		}
		
		.leaseFlag{
			position: absolute;
			background-color: $uni-color;
			left: 10rpx;
			top: 10rpx;
			color: #fff;
			// display: flex;
			// justify-content: center;
			// align-items: center;
			border-radius: 50%;
			padding: 12rpx;
			font-size: 24rpx;
		}
	}
</style>