BD-LDBD-UNI/pages/maintenance/setMeal/index.vue

<template>
	<view class="body">
		<view class="card" v-for="(item, index) in setMealList" :key="index" @tap="routerTo(item)">
			<image :src="'https://biaodianfuhao.oss-cn-beijing.aliyuncs.com/'+item.imgUrl"></image>
			<view class="title">
				{{item.name}}
			</view>
			<view class="content">
				{{item.title}}
			</view>
			<view class="bottomView">
				<view class="priceView">
					<view class="unit">
						￥
					</view>
					<view class="price">
						{{item.carPrice}}-{{item.truckPrice}}
					</view>
				</view>
				<view class="dprice">
					已售:{{item.buyNum}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import SetMeal from '@/components/SetMeal';
	import {
		packageList
	} from "@/api/maintain.js"
	export default {
		components: {
			SetMeal
		},
		data: function() {
			return {
				setMealList: [],
				pageNo: 1,
				pageSize: 10,
				loadmore: true
			}
		},
		onLoad() {
			this.packageList();
		},
		onReachBottom() {
			if (this.loadmore) {
				this.packageList();
			}
		},
		methods: {
			// 路由跳转
			routerTo(item) {
				this.$yrouter.push({
					path: "/pages/maintenance/setMeal/setMealDetail/index?item=" + JSON.stringify(item)
				});
			},
			packageList() {
				packageList({
					pageNo: this.pageNo,
					pageSize: this.pageSize,
				}).then((res) => {
					this.setMealList = [...this.setMealList,...res.data.rows];
					if (this.setMealList.length < this.pageSize) {
						this.loadmore = false
					}
					this.pageNo++
				})
			},
		}
	}
</script>
<style>
	page{
		background-color: #EDEDED;
	}
</style>
<style lang="less" scoped>
	.body {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding-top: 20rpx;
		padding-bottom: 30rpx;
		padding-left: 20rpx;
		padding-right: 20rpx;
		background-color: #EDEDED;
		.card {
			width: 344rpx;
			height: 532rpx;
			background: #FFFFFF;
			border: 1px solid #E5E5E5;
			box-shadow: 0px 0px 14rpx 0px rgba(125, 125, 125, 0.13);
			border-radius: 10rpx;
			margin-top: 18rpx;
			position: relative;
			image {
				width: 344rpx;
				height: 344rpx;
				box-shadow: 0px 0px 14rpx 0px rgba(125, 125, 125, 0.13);
				border-radius: 10rpx;
			}

			.title {
				height: 27rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
				line-height: 39rpx;
				padding: 15rpx 0 0 20rpx;
			}

			.content {
				font-size: 22rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #666666;
				line-height: 28rpx;
				padding: 16rpx 20rpx 0 20rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				line-clamp: 2;
				-webkit-box-orient: vertical;
			}

			.bottomView {
				width: calc(100% - 34rpx);
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0rpx 17rpx 0 17rpx;
				position: absolute;
				bottom: 10rpx;
				.priceView {
					display: flex;
					align-items: baseline;

					.unit {
						font-size: 20rpx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #FF3C00;
					}

					.price {
						font-size: 32rpx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #FF3C00;
					}
				}

				.dprice {
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #999999;
				}
			}
		}
	}
</style>