guosen-ldt-client/pages/gain/comps/card1.vue

<template>
	<view class="">
		<view class="ads">
			<image
				src="https://music.nanyue6688.com/obsfile/e47815d1738640a09655b12efa4f59a9-%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20210705182001.png">
			</image>
		</view>

		<view class="">
			<view v-for="(item, index) in activityList" :key="index" class="container" @click="navWithParm(item.id)">
				<view class="flex align-center">
					<view style="margin: 30upx 0 10upx 20upx;">
						<image :src="item.cover" style="width: 234upx;height: 188upx;border-radius: 16upx;"></image>
					</view>
					<view class="padding-lr-sm">
						<view class="flex">
							<view style="width: 80%">
								<view class="text-lg text-bold">{{item.name}}</view>
								<view class="text-sm margin-tb-xs">{{item.beginTime.split(' ')[0]}} -
									{{item.endTime.split(' ')[0]}}
								</view>
								<view class="text-sm text-cut-2" style="width: 330upx;height: 70upx;">
									{{item.description}}
								</view>
							</view>
							<view style="margin-top: 10upx;" v-if="item.activityStatus == 0">
								<image src="/static/icon/ing.png" style="width: 85upx;height: 73upx;"></image>
							</view>
							<view style="margin-top: 10upx;" v-if="item.activityStatus == 1">
								<image src="/static/icon/ing.png" style="width: 100upx;height: 86upx;"></image>
							</view>
							<view style="margin-top: 10upx;" v-if="item.activityStatus == 2">
								<image src="/static/icon/finish.png" style="width: 100upx;height: 86upx;"></image>
							</view>
						</view>
					</view>
				</view>
				<view class="flex justify-end padding-right-sm">
					<block v-for="(item, index) in item.tags.split(',')" :key="index">
						<view class="tag">{{item}}</view>
					</block>
				</view>
				<view class="flex align-center justify-end text-sm" style="padding: 20upx 30upx 30upx ;">
					<text class="cuIcon-hotfill text-orange"></text>
					<view class="padding-left-xs">已有{{item.applyNum}}人报名</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				activityList: [],
			}
		},
		created() {
			this.getActivityList()
		},
		methods: {
			getActivityList() {
				this.$api.activity.yyzs_list().then(res => {
					this.activityList = res.data.records
				})
			},
			navWithParm(id) {
				let url = 'https://music.nanyue6688.com/vote-h5/#/pages/index/guide?id=' + id
				uni.reLaunch({
					url: "/pages/webview/webview?url=" + url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.ads {
		margin: 20rpx;

		image {
			width: 100%;
			height: 360rpx;
			border-radius: 20rpx;
		}
	}

	.container {
		margin: 20upx;
		background-color: #FFFFFF;
		border-radius: 20upx;
	}
</style>