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

<template>
	<view style="position: relative;">
		<u-navbar title=" " background="{ background: '#ffffff',opacity:0.4; }"></u-navbar>
		<view style="width: 100%;height: 375rpx;position: fixed;top: 0;z-index: 300;">
			<image :src="pageInfo.activityLogo !== null ? $method.splitImgHost(pageInfo.activityLogo) : '@/static/bg_help.jpg'" style="width: 100%;height: 100%;"></image>
			<view class="fotPost">
				<view style="display: flex;align-items: center;">
					<image style="width: 23rpx;height: 27rpx;margin-right: 5rpx;" src="@/static/clock@3x.png" mode=""></image>
					<view style="color: #fff;font-weight: 500;font-size: 30rpx;">距结束 {{ dstime }}</view>
				</view>
				<view style="display: flex;align-items: center;padding-right: 20rpx;">
					<view style="color: #fff;font-weight: 500;font-size: 30rpx;">
						剩余名额:
						<text style="font-weight: bold;margin-left: 9rpx;">{{ pageInfo.quantity - pageInfo.userNumber }}</text>
					</view>
				</view>
			</view>
		</view>
		<view style="padding: 20rpx;padding-top: 0!important;" :style="'margin-top:' + imgHeight + 'px'">
			<view class="activity_box">
				<button class="clasTys" open-type="share"><image style="width: 100%;height: 100%;position: absolute;top: 0;left: 0;z-index: 99;" src="@/static/shares@3x.png" mode=""></image></button>
				<text class="titleIns">活动介绍</text>
				<view class="texts">活动名称：{{ pageInfo.activityName }}</view>
				<view class="texts">活动类型：{{pageInfo.activityType === 0 ? '优惠券':pageInfo.activityType === 1 ? '折扣券':pageInfo.activityType === 2 ? '线上直播':pageInfo.activityType === 3 ? '定价':pageInfo.activityType === 4 ? '优惠':pageInfo.activityType === 5 ? '折扣':'未知'}}</view>
				<view class="texts" style="margin-bottom: 46rpx;">
					活动时间：{{ $method.timestampToTime(pageInfo.startTime) }} ~ {{ $method.timestampToTime(pageInfo.endTime) }}
				</view>
				<text class="titleIns">活动详情</text>
				<view class="acDetail"><image style="width: 100%;" :src="$method.splitImgHost(pageInfo.activityContentUrl)" mode="widthFix"></image></view>
			</view>
			<view class="classTs" style="margin-left: 25rpx;">活动课程</view>
			<view class="lisboxsz">
				<view class="listSty" v-for="(item, index) in pageInfo.courseList" :key="index" @click="jumpCourse(item.courseId)">
					<view class="imgboxsfot"><image style="width: 100%;height: 100%;" :src="$method.splitImgHost(item.coverUrl)" mode=""></image></view>
					<view class="textsFot">{{ item.courseName }}</view>
					<view class="fotStys">
						<view class="dis_fu">
							<view class="leftImgs"><image style="width: 100%;height: 100%;" src="@/static/people.png" mode=""></image></view>
							<view class="rightNums">2023</view>
						</view>
						<view class="dis_fu">
							<view class="riTs">活动价</view>
							<view class="PriceStsy">￥{{ item.price }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			imgHeight: 0,
			pageInfo: {},
			dstime: null
		};
	},
	onLoad(option) {
		this.getAtionlist(option.id);
	},
	onShow() {
		let w = uni.getSystemInfoSync().windowWidth;
		this.imgHeight = w / (750 / 375) - 78;
	},
	onShareAppMessage: function(res) {
		return {
			title: '助学活动',
			path: `/pages2/wd/helpDetail?id=${this.pageInfo.id}`
		};
	},
	mounted() {},
	methods: {
		getAtionlist(int) {
			this.$api.configurationlist({ id: int }).then(res => {
				this.pageInfo = res.data.rows[0];
				this.djStime(res.data.rows[0].endTime);
			});
		},
		jumpCourse(int) {
			this.$navTo.togo('/pages2/course/detail', {
				id: int
			});
			return;
		},
		djStime(v) {
			var self = this;
			setInterval(() => {
				self.dstime = self.$method.GetRTime(v);
			}, 1000);
		},
	}
};
</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;
	padding: 20rpx;
}
.clasTys {
	background-color: #fff;
	width: 52rpx;
	height: 52rpx;
	position: absolute;
	border-radius: 50%;
	overflow: hidden;
	top: 20rpx;
	right: 20rpx;
	box-shadow: 0rpx 0rpx 16rpx 4rpx rgba(11, 208, 120, 0.2);
}
.clasTys::after{
	border: none;
}
.titleIns {
	height: 46rpx;
	line-height: 46rpx;
	padding: 0rpx 17rpx;
	border-radius: 23rpx;
	background-color: #fff;
	box-shadow: 0rpx 0rpx 16rpx 4rpx rgba(145, 156, 178, 0.1);
	color: #32467b;
	font-size: 30rpx;
	font-weight: bold;
	margin-bottom: 15rpx;
	display: inline-block;
}
.texts {
	margin-left: 14rpx;
	margin-bottom: 21rpx;
	color: #32467b;
	font-weight: 500;
	font-size: 24rpx;
}
.fotPost {
	width: 100%;
	display: flex;
	padding: 13rpx 35rpx;
	align-items: center;
	background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.4));
	position: absolute;
	bottom: 0rpx;
	justify-content: space-between;
}
.acDetail {
	width: 100%;
	/* height: auto; */
}
.lisboxsz {
	padding: 0rpx 14rpx;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.classTs {
	margin-bottom: 16rpx;
	color: #32467b;
	font-size: 24rpx;
	font-weight: bold;
}
.listSty {
	flex-shrink: 1;
	width: 331rpx;
	height: 230rpx;
	margin-bottom: 28rpx;
}
.imgboxsfot {
	width: 100%;
	height: 160rpx;
	box-shadow: 0rpx 6rpx 6rpx 0rpx rgba(47, 67, 121, 0.08);
}
.textsFot {
	font-size: 24rpx;
	color: #666;
	font-weight: 500;
	display: -webkit-box;
	overflow: hidden;
	text-overflow: ellipsis;
	word-wrap: break-word;
	white-space: normal !important;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
}
.fotStys {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.dis_fu {
	display: flex;
	align-items: center;
}
.leftImgs {
	width: 22rpx;
	height: 16rpx;
	margin-right: 9rpx;
	line-height: 16rpx;
}
.rightNums {
	color: #999;
	font-size: 20rpx;
}
.riTs {
	font-weight: 500;
	font-size: 16rpx;
	color: #e91313;
	margin-right: 9rpx;
}
.PriceStsy {
	font-size: 24rpx;
	color: #e91313;
	font-weight: bold;
}
page {
	background: #ffffff;
}
</style>