zz--front/pages2/wd/help.vue

<template>
	<view style="position: relative;">
		<u-navbar title="助学活动" background="{ background: '#ffffff',opacity:0.4; }"></u-navbar>
		<view style="width: 100%;position: fixed;top: 0;z-index: 300;"><image src="/static/bg_help.jpg" style="width: 100%;" mode="widthFix"></image></view>
		<view style="padding: 20rpx;" :style="'margin-top:' + imgHeight + 'px'">
			<view class="activity_box" v-for="(item, index) in list" :key="index">
				<view class="box_title" style="display: flex;align-items: center;justify-content: space-between;">
					<view>{{ item.activityName }}</view>
					<view><u-icon name="info-circle" color="#2F4379" size="28" @click="openActivesList(item)"></u-icon></view>
				</view>
				<view><image :src="$method.splitImgHost()" style="width: 100%;height: 330rpx;"></image></view>
				<u-row>
					<u-col span="6">
						<view class="box_title">{{ $method.timestampToTime(item.startTime) }}至{{ $method.timestampToTime(item.endTime) }}</view>
					</u-col>
					<u-col span="6" text-align="right">
						<view style="padding: 8rpx;"><view class="boxbtn" @click="uploadActives">立即参与</view></view>
					</u-col>
				</u-row>
			</view>
		</view>
		<u-popup v-model="show" mode="bottom" border-radius="14">
			<header style="text-align: center;margin-top: 10rpx;color: #2F4379;font-size: 30rpx;font-weight: bold;">参与活动课程列表</header>
			<view style="padding: 24rpx;">
				<view v-for="(item,index) in activeSList" :key="index" style="padding: 12rpx;display: flex;margin-bottom: 8rpx;border-radius: 32rpx;box-shadow: 0rpx 0rpx 16rpx 4rpx rgba(145,156,178,0.1);background-color: #fff;" @click="jumpPages(item)">
					<image style="width:278rpx;height:134rpx;margin-right: 23rpx;" :src="$method.splitImgHost(item.coverUrl)" mode=""></image>
					<view style="font-size: 30rpx;color: #2f4379;font-weight: 500;">
						{{item.courseName}}
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			list: [],
			imgHeight: 0,
			activeSList: [],
			show: false
		};
	},
	onLoad(option) {
		this.getAtionlist();
	},
	onShow() {
		let w = uni.getSystemInfoSync().windowWidth;
		this.imgHeight = w / (750 / 375) - 68;
	},
	methods: {
		getAtionlist() {
			this.$api.configurationlist().then(res => {
				this.list = res.data.rows;
			});
		},
		uploadActives() {},
		openActivesList(option) {
			console.log(option)
			this.activeSList = option.courses
			this.show = true
		},
		jumpPages(option){
			this.$navTo.togo('/pages2/course/detail', {
				id: option.courseId
			});
			return;
		},
	}
};
</script>
<style>
.u-border-bottom:after,
.u-border-left:after,
.u-border-right:after,
.u-border-top-bottom:after,
.u-border-top:after,
.u-border:after {
	border: none !important;
}
</style>
<style scope>
.boxbtn {
	width: 132rpx;
	height: 40rpx;
	background: rgba(249, 96, 10, 0.6);
	border-radius: 20rpx;
	font-size: 24rpx;
	color: #ffffff;
	float: right;
	text-align: center;
	line-height: 40rpx;
}
.box_title {
	font-size: 24rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #2f4379;
	padding: 15rpx;
}
.activity_box {
	width: 100%;
	height: 466rpx;
	background: #ffffff;
	box-shadow: 0rpx 0rpx 16rpx 4rpx rgba(145, 156, 178, 0.1);
	border-radius: 32rpx;
	position: relative;
	margin-bottom: 20rpx;
}

page {
	background: #ffffff;
}
</style>