cyzh-SoundOfMusic-H5/pages/activityList/index.vue

<template>
	<view>
		<view class="bg-white" style="padding: 30upx; 30upx 0upx 30upx">
			<u-swiper height="268" :list="imgList" name="url" bg-color="#fff" interval="5000"></u-swiper>
		</view>
		<view>
			<search-bar :disabled="false" @onSearch="onSearch" placeholder="请输入活动名称"></search-bar>
		</view>
		<!-- <view class="padding-lr-sm bg-white flex flex-wrap" style="padding-bottom: 10upx;">
			<block v-for="(item, index) in activityTags" :key="index">
				<view class="activity-tag">{{item}}</view>
			</block>
		</view> -->
		<block v-for="(item, index) in activityList" :key="index">
			<view 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/index/ing.png" style="width: 85upx;height: 73upx;"></image>
							</view>
							<view style="margin-top: 10upx;" v-if="item.activityStatus == 1">
								<image src="/static/index/ing.png" style="width: 100upx;height: 86upx;"></image>
							</view>
							<view style="margin-top: 10upx;" v-if="item.activityStatus == 2">
								<image src="/static/index/finish.png" style="width: 100upx;height: 86upx;"></image>
							</view>
						</view>
						<!-- <view class="text-sm flex flex-wrap">
							<block v-for="(item, index) in awardTags" :key="index">
								<view class="award-tag">{{item}}</view>
							</block>
						</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>
		</block>
	</view>
</template>

<script>
	import searchBar from "@/components/basic/search-bar.vue";
	export default {
		components: {searchBar},
		data() {
			return {
				imgList: [],
				activityList: [],
				awardTags: ['1万RMB','点歌机','100000积分'],
			}
		},
		onLoad() {
			this.getAdsList();
			this.getActivityList();
		},
		methods: {
			navWithParm(id) {
				uni.navigateTo({
					url: "/pages/activityList/home/home?activityId=" + id
				})
			},
			getAdsList() {
				this.$u.api.activity.getAdsList().then(res => {
					this.imgList = res.records;
				});
			},
			getActivityList() {
				this.$u.api.activity.list().then(res => {
					this.activityList = res.records;
				})
			},
			onSearch(item) {
				this.$u.api.activity.list({name: item}).then(res => {
					this.activityList = res.records;
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.activity-tag {
		margin: 10upx;
		padding: 0 10upx;
		font-size: 24upx;
		line-height: 40upx;
		background-color: #efefef;
		border-radius: 16upx;
	}
	.award-tag {
		margin: 10upx;
		padding: 0 10upx;
		font-size: 20upx;
		line-height: 40upx;
		background-color: #fff0d9;
		border-radius: 10upx;
		color: #feac65;
	}
	.tag {
		border-radius: 30upx;
		border: #fd8678 1upx solid;
		color: #fd8678;
		background-color: #FFFFFF;
		line-height: 40upx;
		font-size: 20upx;
		padding: 0 20upx;
		margin: 0 8upx;
	}
	.container {
		margin: 20upx;
		background-color: #FFFFFF;
		border-radius: 20upx;
	}
</style>