webapp / GreenwayWeb

<template>
	<view class="container">
		<view class="header">
			<view :class="clkIndex == index?'participate-record-btn join-btn': 'participate-record-btn'"
				v-for="(item,index) in canIndex" @click="clkItem(index)">{{item}}</view>
			<!-- <view class="participate-record-btn join-btn">我来参与</view> -->
		</view>
		<view class="screen-list">
			<view class="list" @click="show = true">
				<text>状态</text>
				<image :src="$imgUrl('/down.png')"></image>
				<u-select v-model="show" :list="areList"
					@confirm="(v) => {queryChange('belongingRegion', v)}"></u-select>
			</view>
		</view>
		<view class="goods-data">
			<view v-if="activityList.length == 0" style="padding: 50rpx 0;text-align: center;">暂无数据</view>
			<view class="goods-list">
				<view class="list" v-for="(item,index) in activityList" :key="index" @click="reconciliationdetail(item)">
					<view class="thumb">
						<u-image width="25vw" height="25vw" border-radius="20"
							:src="$img + (item.imageUrl)"></u-image>
						<view class="state">
							{{item.status == 1?'待审核':item.status == 2?'审核通过':'已驳回'}}
						</view>
					</view>
					<view class="item">
						<view class="title">
							<text class="one-omit">{{item.title}}</text>
						</view>
						<view class="times margin gray">
							<text class="one-omit">{{item.startTime}} 至 {{item.endTime}}</text>
						</view>
						<view class="location margin" style="color: #3D3D3D;">
							<text class="one-omit">{{item.location}}</text>
						</view>
						<view class="type gray">
							<view class="one-omit">
								<text>{{item.type}}</text>
							<text style="margin-left: 10px;">{{item.participantNum}}人参与</text>
							</view>
							<view style="background: #31AA6A;color: #fff;padding: 3px 5px;">活动记录</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				activityList: [{
					id:1,
						imageUrl: '/zsfwzxt/sp/bf83d7f7-6b30-494b-9d67-d56198d4612d-1.jpg', // 示例图片地址，需替换为实际地址
						title: '这里有标题这里有标题这里有标题',
						startTime: '2024-1-1',
						endTime: '2024-1-5',
						location: '锦江绿道',
						type: '打卡集字',
						participantNum: 20,
						status: '1',
						hasRecord: false
					},
					{
						id:2,
						imageUrl: '/zsfwzxt/sp/bf83d7f7-6b30-494b-9d67-d56198d4612d-1.jpg',
						title: '这里有标题这里有标题这里有标题',
						startTime: '2024-1-1',
						endTime: '2024-1-5',
						location: '锦江绿道',
						type: '打卡集字',
						participantNum: 20,
						status: '2',
						hasRecord: true
					},
					// 可继续添加更多活动数据项
				],
				canIndex: ['参与记录', '我来参与'],
				clkIndex: 0,
				areList: [{
						label: '待审核',
						value: '1'
					},
					{
						label: '审核通过',
						value: '2'
					},
					{
						label: '已驳回',
						value: '3'
					},
				],
				show1: false,
				show: false,
				query:{
					pageNumber: 0,
					pageSize: 10,
				}

			}
		},
		onLoad(option) {

		},
		onReady() {},
		mounted() {


		},
		methods: {
			// 查询
			search() {
				// this.$http.sendRequest('/cereBasicInformationShop/queryByPage', 'POST', this.query, 1).then(res => {
				// 	//成功回调
				// 	this.tableData = res.data.data.content
				// })
			},
			clkItem(index) {
				this.clkIndex = index
			},
			queryChange(key, val) {
				this.query[`${key}`] = val[0].value;
				this.search()
			},
			reconciliationdetail(item){
				if(!uni.getStorageSync('user').phone){
					uni.showToast({
						icon: 'none',
						title: '请登录',
						duration: 2000
					});
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/login/login'
						})
					}, 2000)
					return
				}
				let items = JSON.stringify(item)
				uni.navigateTo({
					url: `/pagesA/PunchInAct/PunchInDetails?item=${encodeURIComponent(items)}`
				})
			}
		}
	};
</script>

<style scoped lang="scss">
	.container {
		padding: 10px;
	}

	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10px;
		background-color: #fff;
		padding: 5px 6px;
		border-radius: 5px;
	}

	.participate-record-btn {
		width: 50%;
		padding: 5px;
		text-align: center;
		font-weight: bold;
		color: #7C7C7C;
		border-radius: 5px;
	}

	.join-btn {
		color: #fff;
		background-color: #0FBB59;
	}

	.screen-list {
		display: flex;
		align-items: center;
		width: 100%;
		margin: 40rpx 0;
		padding: 0 20rpx;

		.zidong {
			width: 160rpx;
			background-color: #19be6b;
			color: #fff;
			padding: 10rpx;
			border-radius: 30rpx;
			font-size: 24rpx;
			text-align: center;
		}

		.list {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 25%;
			height: 100%;

			text {
				font-size: 26rpx;
				color: #555555;
			}

			image {
				width: 30rpx;
				height: 30rpx;
				margin-left: 10rpx;
			}
		}

		.action {
			text {
				color: $base;
			}
		}
	}

	.activity-item {
		display: flex;
		margin-bottom: 10px;
		background-color: #fff;
		border-radius: 5px;
		overflow: hidden;
	}

	.activity-item-image {
		width: 120px;
		height: 120px;
		position: relative;
	}

	.activity-item-image image {
		width: 100%;
		height: 100%;
	}

	.activity-item-status {
		position: absolute;
		bottom: 0;
		left: 0;
		background-color: green;
		color: white;
		padding: 5px;
	}

	.activity-item-info {
		padding: 10px;
		flex: 1;
	}

	.activity-item-title {
		font-size: 16px;
		margin-bottom: 5px;
	}

	.activity-item-time {
		font-size: 14px;
		color: #666;
		margin-bottom: 5px;
	}

	.activity-item-location {
		font-size: 14px;
		color: #666;
		margin-bottom: 5px;
	}

	.activity-item-type {
		font-size: 14px;
		color: #666;
	}

	.activity-record-btn {
		width: 100px;
		margin-top: 5px;
	}
	.goods-data{
		width: 100%;
		.goods-list{
			width: 100%;
			padding: 0 25rpx;
			.list{
				display: flex;
				margin-bottom: 20rpx;
				background-color: #fff;
				padding: 14rpx;
				border-radius: 14rpx;
				.thumb{
					display: flex;
					align-items: center;
					// width: 36%;
					width: 25vw;
					position: relative;
					image{
						width: 230rpx;
						height: 230rpx;
						border-radius: 10rpx;
					}
					.state{
						position: absolute;
						padding: 2px 7px;
						color: #fff;
						bottom: 3px;
						left: 22%;
						background-color: rgba(#0FBB59,0.5);
						font-size: 12px;
						border-radius: 5px;
					}
				}
				.item{
					width: 66%;
					margin-left: 4%;
					.title{
						display: flex;
						align-items: center;
						width: 100%;
						text{
							font-size: 30rpx;
							font-weight: bold;
							color: #222222;
						}
					}
				.type{
					display: flex;
					justify-content: space-between;
					}
				}
			}
		}
	}
	.gray{
		color: #888D9C;
	}
	.margin{
		margin: 5px 0;
	}
</style>