MinNan/xueyuan_fenbao/kcXiangQing/huoDong.vue

<template>
	<view class="box">
		<u-navbar title="活动" :autoBack="true" bgColor="#ffffff" :placeholder="true" titleStyle="font-weight:bold;color:#121212"></u-navbar>
		<view class="box_top">
			<view @click="timeShow = true" class="top_item">
				<view class="">{{ timeValCom }}</view>
				<view class="">
					<uni-icons type="bottom" size="20"></uni-icons>
				</view>
			</view>
			<view @click="locationShow = true" class="top_item">
				<view class="">{{ locationValCom }}</view>
				<view class="">
					<uni-icons type="bottom" size="20"></uni-icons>
				</view>
			</view>
			<view @click="stateShow = true" class="top_item">
				<view class="">{{ stateValCom }}</view>
				<view class="">
					<uni-icons type="bottom" size="20"></uni-icons>
				</view>
			</view>
		</view>
		<!-- 时间 -->
		<u-picker @confirm="timeBtn" @cancel="timeShow = false" :show="timeShow" :columns="timeList" closeOnClickOverlay></u-picker>
		<!-- 地点 -->
		<u-picker @confirm="locationBtn" @cancel="locationShow = false" :show="locationShow" :columns="locationList" closeOnClickOverlay></u-picker>
		<!-- 状态 -->
		<u-picker @confirm="stateBtn" @cancel="stateShow = false" :show="stateShow" :columns="stateList" closeOnClickOverlay></u-picker>
		<!-- 活动内容 -->
		<view @click="detailsBtn" class="box_ban">
			<view class="box_left">
				<image style="width: 100%; height: 100%" src="https://huli-app.wenlvti.net/app_static/minnanhun/image/kctp.png"></image>
			</view>
			<view class="box_right">
				<view class="tit">公益创投|厦门小海星”我和星星有个约”国防夏令营</view>
				<view class="btm">
					<view class="time">2023-10-30 8:00</view>
					<view class="baom">报名中</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			timeVal: '',
			locationVal: '',
			stateVal: '',
			timeShow: false /* 时间 */,
			locationShow: false /* 地点 */,
			stateShow: false /* 状态 */,
			timeList: [['今天', '昨天', '一周前']],
			locationList: [['殿前', '高殿', '中铺']],
			stateList: [['报名中', '报名截至']]
		};
	},
	computed: {
		timeValCom() {
			return this.timeVal ? this.timeVal : '时间';
		},
		locationValCom() {
			return this.locationVal ? this.locationVal : '地点';
		},
		stateValCom() {
			return this.stateVal ? this.stateVal : '状态';
		}
	},
	methods: {
		timeBtn(e) {
			console.log(e);
			this.timeVal = e.value;
			this.timeShow = false;
		},
		locationBtn(e) {
			this.locationVal = e.value;
			this.locationShow = false;
		},
		stateBtn(e) {
			this.stateVal = e.value;
			this.stateShow = false;
		},
		// 活动详情
		detailsBtn() {
			uni.navigateTo({
				url: '/xueyuan_fenbao/zhuangJia/huodongXq'
			});
		},
		close() {
			this.timeShow = false;
			this.locationShow = false;
			this.stateShow = false;
		}
	}
};
</script>

<style>
.box {
	height: auto;
	width: 100%;
	background-color: #f8f8f8;
	background-attachment: fixed;
	position: relative;
	display: flex;
	flex-direction: column;
}

.box_top {
	height: 80rpx;
	display: flex;
	background-color: #ffffff;
	margin-top: 40rpx;
	justify-content: space-around;
	line-height: 80rpx;
}
.top_item {
	display: flex;
	height: 100%;
}
.box_ban {
	display: flex;
	background-color: #ffffff;
	margin: 40rpx 32rpx 0 32rpx;
}
.box_left {
	width: 307rpx;
	height: 170rpx;
	border-radius: 10rpx;
}
.box_right {
	width: 340rpx;
	padding-top: 20rpx;
	margin-left: 18rpx;
}

.tit {
	width: 100%;
	height: 74rpx;
	font-size: 28rpx;
	color: #312520;
	margin-bottom: 20rpx;
	text-overflow: -o-ellipsis-lastline;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
}

.btm {
	width: 96%;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.time {
	font-size: 24rpx;
	color: #666666;
}
.baom {
	font-size: 28rpx;
	color: #ca5642;
}
</style>