yandu_WeChat/subPackages/line/lineList.vue

<template>
	<view class="bg">
		<span class="iconfont topLeft" @click="goBack">&#xe660;</span>
		<img :src="showImg('/uploads/20240826/97282395bdd31e0b1fe20e5356cc4fc4.png')" class="topImg" />
		<view class="item" v-for="item in list" :key="item.id" @click="viewDetail(item)">
			<image class="img" :src="showImg(item.image)" mode=""></image>
			<view class="content">
				<view class="title text-overflowRows">
					{{item.title}}
				</view>
				<view class="bottom">
					<view class="price">
						{{item.low_money/100}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[], //列表
				finished: false,
			}
		},
		onReady() {
			this.getList()
		},
		methods: {
			// 根据产品分类获取产品列表
			getList(){
				this.Post({
					type_id: 17,
					offset: this.list.length,
					limit: 10,
					lon: uni.getStorageSync('location').lon || '',
					lat: uni.getStorageSync('location').lat || '',
				},'/api/goods/getGoodsByType').then(res => {
					this.list = [...this.list, ...res.data];
					if (res.data.length < 10) {
						this.finished = true
					}
				})
			},
			viewDetail (item) {
				uni.navigateTo({
					url:'/subPackages/line/detail?id='+item.id
				})
			},
		},
		onReachBottom() {
			setTimeout(() => {
				if (!this.finished) this.getList()
			},1000)
		}
	}
</script>

<style lang="scss" scoped>
	view {
		box-sizing: border-box;
	}
	
	.bg {
		background: #FFFFFF;
		min-height: 100vh;
		padding-bottom: 26rpx;
	}
	
	.topLeft {
		position: absolute;
		left: 26rpx;
		top: 101rpx;
		font-size: 40rpx;
		z-index: 2;
	}
	
	.topImg {
		width: 750rpx;
		height: 440rpx;
	}
	
	.item {
		width: 697rpx;
		height: 227rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(153,153,153,0.38);
		border-radius: 13rpx;
		margin: 26.67rpx auto 0;
		display: flex;
	}
	
	.img {
		width: 280rpx;
		height: 227rpx;
		background: #87CD93;
		border-radius: 13rpx;
		margin-right: 20.67rpx;
		flex-shrink: 0;
	}
	
	.content {
		width: 370rpx;
		padding: 20.67rpx 0 24rpx 0;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	
	.title {
		font-family: PingFang SC;
		font-weight: bold;
		font-size: 31rpx;
		color: #000000;
		width: 367rpx;
	}
	
	.bottom {
		width: 370rpx;
		display: flex;
		justify-content: flex-end;
	}
	
	.price {
		font-family: PingFang SC;
		font-weight: bold;
		font-size: 33.33rpx;
		color: #F02A2A;
		display: flex;
		align-items: baseline;
	}
	.price::before{
		content: '￥';
		font-size: 24rpx;
	}
	.price::after{
		content: '起';
		font-size: 24rpx;
		color: #666;
		font-weight: 500;
	}

</style>