wx-yunyubang-miniprogram/pages/active/my.vue

<template>
	<view class="introBox hasMenu">
		<view v-if="activityList.length > 0">
			<view class="intro_column" v-for="item in activityList" :key="item.id" @tap="gotoDetail(item.id)">
				<view class="imgOuter">
					<image mode="aspectFill" :src="item.active_playbill"></image>
					<view class="i_intro">推荐</view>
				</view>
				<view class="columnInfo">
					<view class="title">{{item.name}}</view>
					<view class="tags">
						<text v-for="(sub, subIdx) in item.label" :key="subIdx">{{sub}}</text>
					</view>
					<view class="subInfo">{{item.end_at}}</view>
					<view class="subInfo">{{item.address}}</view>
					<view class="price">
						<text class="font_red" v-if="Number(item.money) > 0">￥{{item.money}}</text>
						<text class="free" v-else>免费</text>
						<view class="shareMoney" v-if="Number(item.money) > 0">
							<text>分享金</text>{{ Number(item.money) }}元
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-else style="padding: 20rpx 0;text-align: center;font-weight: 600;">
			暂无数据
		</view>
	</view>
</template>

<script>
	import {
		weixin
	} from '@/utils/weixin.js'
	export default {
		data() {
			return {
				activitySelect: {
					page: 1,
					page_size: 10,
					myself: 1
				},
				activityList: []
			}
		},
		onReachBottom() {
			this.getActivityList()
		},
		methods: {
			gotoDetail(id) {
				uni.navigateTo({
					url: `/pages/active/detail?id=${id}`
				})
			},
			getActivityList() {
				weixin.request({
					api: "/api/member/active-list",
					data: this.activitySelect,
					utilSuccess: res => {
						if (res.data.length > 0) {
							this.activitySelect.page++
						} else {
							uni.showToast({
								icon: 'none',
								title: "没有更多了"
							})
						}
						if (this.activitySelect.page === 1) {
							this.activityList = res.data
						} else {
							this.activityList.push(...res.data)
						}
						console.log(res);

					},
					utilFail: err => {
						console.log(err);
					}
				})
			},
		},
		onShow() {
			this.getActivityList()
		}
	}
</script>

<style lang="scss" scoped>
	.introBox {
		width: 710rpx;
		margin: 20rpx auto 0 auto;
		border-radius: 16rpx;
		background: #fff;
		padding: 0 35rpx;
		box-sizing: border-box;
	}

	.intro_row {
		display: flex;
		justify-content: space-between;
		width: 100%;
	}

	.row_col {
		width: 310rpx;
		border-radius: 8rpx;
		padding-bottom: 20rpx;

		.imgOuter {
			width: 310rpx;
			height: 230rpx;
			position: relative;

			image {
				width: 310rpx;
				height: 230rpx;
				border-radius: 8rpx 8rpx 0 0;
			}

			.date {
				background-color: rgba(0, 0, 0, 0.3);
				font-size: 20rpx;
				color: #fff;
				line-height: 32rrpx;
				padding: 0 8rpx;
				border-radius: 5rpx;
				position: absolute;
				left: 20rpx;
				bottom: 20rpx;
				font-weight: 500;
			}
		}

		.title {
			width: 100%;
			font-size: 28rpx;
			color: #333;
			font-weight: 500;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			padding-top: 20rpx;
		}

		.subTit {
			width: 100%;
			font-size: 22rpx;
			color: #333;
			font-weight: 400;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			padding-top: 10rpx;
		}

		.price {
			margin-top: 20rpx;
			font-size: 22rpx;
			color: #999;

			text {
				font-size: 32rpx;
				font-weight: 400;
				padding-right: 15rpx;
			}
		}
	}

	.introBox .intro_column:last-child {
		border-bottom: none;
	}

	.intro_column {
		display: flex;
		justify-content: flex-start;
		padding: 20rpx 0;
		border-bottom: 2rpx solid #EAEAEA;

		.imgOuter {
			width: 260rpx;
			height: 210rpx;
			position: relative;

			image {
				width: 260rpx;
				height: 210rpx;
				border-radius: 5rpx;
			}

			.i_intro {
				position: absolute;
				top: 0;
				left: 0;
				width: 68rpx;
				height: 32rpx;
				background: #FF578A;
				border-radius: 5rpx 0px 18rpx 5rpx;
				font-size: 22rpx;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 32rpx;
				text-align: center;
			}
		}

		.columnInfo {
			width: 360rpx;
			margin-left: 22rpx;

			.title {
				width: 100%;
				font-size: 30rpx;
				font-weight: bold;
				color: #333;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}

			.tags text {
				height: 28rpx;
				background: rgba(255, 177, 62, 0.1);
				border-radius: 4rpx;
				line-height: 28rpx;
				font-size: 20rpx;
				padding: 0 10rpx;
				margin-right: 10rpx;
				color: #FF753E;
			}

			.subInfo {
				width: 100%;
				font-size: 24rpx;
				color: #999;
				font-weight: 400;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				padding-top: 5rpx;

				.font_red {
					margin-left: 10rpx;
				}
			}

			.price {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				align-content: center;
				margin-top: 8rpx;

				text {
					margin-right: 10rpx;
				}

				.shareMoney {
					height: 28rpx;
					border: 2rpx solid #FF578A;
					border-radius: 4rpx;
					line-height: 28rpx;
					font-size: 20rpx;
					margin-right: 10rpx;
					padding-right: 10rpx;
					color: #FF578A;
					display: flex;
					flex-direction: flex-start;

					text {
						background: #FF578A;
						color: #fff;
						padding: 0 10rpx;
					}
				}

				.free {
					height: 28rpx;
					background: #FF753E;
					border-radius: 4rpx;
					line-height: 28rpx;
					font-size: 20rpx;
					padding: 0 10rpx;
					margin-right: 10rpx;
					color: #fff;
				}
			}

		}
	}
</style>