zc_saas_h5/pages5/mockExam/registrationSuccess.vue

<template>
	<view class="registration_success">
		<nav-bar title="模考报名成功"></nav-bar>
		<view class="exam_success">
			<image class="imgs" src="../static/ping_bg.png"></image>
			<view class="activity_time">
				活动时间：{{ startTime | formate("yyyy年mm月dd日") }}-{{
          endTime | formate("yyyy年mm月dd日")
        }}
			</view>
		</view>
		<view class="hint">
			温馨提示：中途退出视为交卷，请学员认真作答
		</view>
		<view class="exam_times">
			<view class="time_up">
				<view class="start_time all_time">
					<view class="time_left">
						<text class="numbers">{{ startTime | getLastDay }}</text>
						<text class="days">天</text>
					</view>
					<view class="words">距模考开始时间</view>
				</view>
				<view class="lines"></view>
				<view class="end_time all_time">
					<view class="time_left">
						<text class="numbers">{{ endTime | getLastDay }}</text>
						<text class="days">天</text>
					</view>
					<view class="words">距模考结束时间</view>
				</view>
			</view>
			<view class="time_down">
				<view class="look_mock" @click="toLookMock()">立即进入模考</view>
			</view>
		</view>
		<view class="mains">
			<view class="gives">
				<view>考前冲刺班</view>
				<view>密押特训 高命中率</view>
			</view>
			<view class="middles">
				<view class="qr_codes">
					<image class="code" :src="$method.splitImgHost('oss/images/file/20240424/1713920422193.jpg')"
						show-menu-by-longpress="true"></image>
				</view>
				<view class="discern">扫码咨询冲刺班</view>
			</view>
			<!-- <view class="middle_line">
        <view class="half_cir_left"></view>
        <view class="line"></view>
        <view class="half_cir_rig"></view>
      </view> -->
			<!-- <view class="flows">
        <view class="f_title">活动流程</view>
        <view class="f_lines">
          <view class="numbers">1</view>
          <view class="line line_one"></view>
          <view class="numbers">2</view>
          <view class="line line_two"></view>
          <view class="numbers">3</view>
          <view class="line line_three"></view>
          <view class="numbers">4</view>
        </view>
        <view class="f_words">
          <view class="word word_one">预约报名</view>
          <view class="word word_two">扫码添加活动 专属微信号</view>
          <view class="word word_three">模考</view>
          <view class="word word_four">领福利</view>
        </view>
      </view> -->
		</view>
		<view class="activity_phone">
			<view class="titles">活动咨询电话</view>
			<view class="phone_num">
				<text @click="call('13138489426')">13138489426</text>、
				<text @click="call('13631379636')">13631379636</text>
			</view>
			<view class="titles">报名咨询</view>
			<view class="phone_num">
				<text style="margin-right: 20rpx" @click="call('13434221571')">苏老师13434221571
				</text>
				<text @click="call('13434221571')">13434221571</text>
			</view>
			<view class="titles">联系地址</view>
			<view class="phone_num">广州市天河区燕岭路123号建设大厦3楼</view>
		</view>

		<view v-if="courseList.length" class="course_list">
			<view class="titles">
				<image class="code" src="@/static/learn/act_icon.png"></image>
				<text class="title">推荐课程</text>
			</view>
			<view class="list_item" v-for="(item, index) in courseList" :key="index" @click="toBuy(item)">
				<view class="course_content">
					<view class="c_title">{{ item.goodsName }}</view>
					<view class="c_downs">
						<view class="img">
							<image :src="$method.splitImgHost(item.coverUrl, true)"></image>
							<view class="time" v-if="item.year">{{
                item.year ? item.year : ""
              }}</view>
						</view>
						<view class="text">
							<view class="desc">
								<view class="left">
									<text class="mon_t">¥ {{ item.standPrice }}</text>
									<text v-if="item.linePrice" class="sale"> ¥ </text>
									<text v-if="item.linePrice" class="price_line">&nbsp;{{ item.linePrice }}</text>
								</view>
								<view class="right">
									<view class="regiser_row" v-if="!hideBuyState">立即购买</view>
								</view>
							</view>
							<view v-if="item.buyUserNum" class="joins">
								<!-- 为0时，不显示 -->
								<view class="people">{{ item.buyUserNum }}人参与</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from "vuex";
	var curTime = new Date().getTime(); // 当前时间的时间戳
	export default {
		name: "registrationSuccess",
		data() {
			return {
				startTime: "",
				endTime: "",
				// lastStartDay: '',
				// lastEndDay: '',
				// sDay: '',
				// eDay: '',
				activityId: "",
				courseList: [],
				pageNum: 1,
				pageSize: 10,
				total: 0,
			};
		},
		filters: {
			getLastDay(time) {
				var padDate = function(va) {
					va = va < 10 ? "0" + va : va;
					return va;
				};
				if (time) {
					var value = new Date(time * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
					var year = value.getFullYear();
					var month = padDate(value.getMonth() + 1);
					var day = padDate(value.getDate());
					let t_value = year + "/" + month + "/" + day;
					let curTimeLast =
						new Date(new Date(t_value).toLocaleDateString()).getTime() +
						24 * 60 * 60 * 1000 -
						1;

					let lastStartDay =
						parseInt(curTimeLast / 1000) - parseInt(curTime / 1000);
					let days = parseInt(lastStartDay / 24 / 60 / 60);
					return days >= 1 ? days : 0;
				}
			},
		},
		computed: {
			...mapGetters(["hideBuyState"])
		},
		onLoad(option) {
			// console.log('option: ', option)
			// endTime=1663084800&startTime=1662998400&activityId=13
			this.startTime = option.startTime;
			this.endTime = option.endTime;
			this.activityId = option.activityId;
		},
		onShow() {
			this.courseList = [];
			this.getAct();
		},
		onPullDownRefresh() {
			this.pageNum = 1;
			this.getAct();
		},
		onReachBottom() {
			console.log(this.total, "total");
			console.log(this.courseList.length, "length");
			if (this.courseList.length < this.total) {
				this.pageNum++;
				this.getAct();
			}
		},
		methods: {
			getAct() {
				this.$http({
					url: `/app/common/activity/goodsList/${this.activityId}`,
					method: "get",
					noToken: true,
					data: {
						pageNum: this.pageNum,
						pageSize: this.pageSize,
					},
				}).then((res) => {
					if (res.data.code == 200) {
						// this.courseList = res.data.data || []
						this.courseList.push(...res.data.rows);
						this.total = res.data.total;
					}
				});
			},
			toBuy(item) {
				if (item.goodsType == 2) {
					uni.navigateTo({
						url: "/pages2/bank/detail?id=" + item.goodsId,
					});
				} else {
					// /pages5/liveDetail/index
					uni.navigateTo({
						url: "/pages3/course/detail?id=" +
							item.goodsId +
							"&goodsType=" +
							item.goodsType,
					});
				}
			},
			// 查看模考
			toLookMock() {
				uni.navigateTo({
					url: "/pages5/examList/index?state=0",
				});
			},
			call(phone) {
				wx.makePhoneCall({
					phoneNumber: phone, //仅为示例，并非真实的电话号码
					success: function() {
						console.log("拨打电话成功！");
					},
					fail: function() {
						console.log("拨打电话失败！");
					},
				});
			},
		},
	};
</script>

<style>
	page {
		/* background-color: #DFECFD; */
		background: linear-gradient(90deg, #edf1ff 0%, #d9f0ff 100%);
	}
</style>

<style lang="scss" scoped>
	.registration_success {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.hint {
		width: 662rpx;
		height: 72rpx;
		line-height: 72rpx;
		text-align: center;
		background: rgba(255, 255, 255, 0.7);
		border-radius: 16rpx;
		border: 2rpx solid #ffffff;
		font-size: 30rpx;
		font-weight: 500;
		color: #2d5692;
		margin-top: 5rpx;
	}

	.exam_success {
		width: 100%;
		height: 360rpx;
		// margin-top: 68rpx;
		display: flex;
		align-items: center;
		position: relative;
		top: 0;
		left: 0;

		.imgs {
			width: 100%;
			height: 360rpx;
			// width: 56rpx;
			// height: 56rpx;
		}

		.activity_time {
			width: 662rpx;
			height: 72rpx;
			line-height: 72rpx;
			text-align: center;
			background: rgba(255, 255, 255, 0.7);
			border-radius: 16rpx;
			border: 2rpx solid #ffffff;
			font-size: 30rpx;
			font-weight: 500;
			color: #2d5692;
			position: absolute;
			bottom: 12rpx;
			left: 40rpx;
		}
	}

	.exam_times {
		margin-top: 28rpx;
		width: 670rpx;
		// height: 178rpx;
		background: #ffffff;
		border-radius: 24rpx;
		padding: 0rpx 64rpx;

		.time_up {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			height: 178rpx;
		}

		.time_down {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 40rpx;

			.look_mock {
				width: 288rpx;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				background: #ffffff;
				border-radius: 160rpx;
				border: 2rpx solid #f67205;
				font-size: 32rpx;
				color: #f67205;
			}
		}

		.all_time {
			.time_left {
				text-align: center;
			}

			.numbers {
				font-size: 52rpx;
				font-weight: 800;
				color: #f67205;
			}

			.days {
				font-size: 28rpx;
				font-weight: 500;
				color: #f67205;
			}

			.words {
				font-size: 28rpx;
				color: #6d7d94;
				margin-top: 10rpx;
			}
		}

		.time_title {
			font-size: 48rpx;
			font-weight: bold;
			color: #3487ff;
		}

		.time_range {
			font-size: 26rpx;
			font-weight: 500;
			color: #222222;
			margin-top: 12rpx;
		}

		.lines {
			width: 2rpx;
			height: 84rpx;
			background: #e4e4e4;
		}
	}

	.mains {
		width: 670rpx;
		background: #ffffff;
		border-radius: 16rpx;
		margin-top: 36rpx;
		padding-bottom: 64rpx;

		.gives {
			width: 100%;
			height: 160rpx;
			padding: 32rpx 60rpx;
			background-color: #3f8dfd;
			font-size: 36rpx;
			font-weight: bold;
			color: #ffffff;
			border-radius: 16rpx 16rpx 0rpx 0rpx;
			text-align: center;

			view {
				line-height: 50rpx;
			}
		}

		.middles {
			margin-top: 48rpx;
			display: flex;
			flex-direction: column;
			align-items: center;

			.qr_codes {
				width: 268rpx;
				height: 268rpx;
				background: #ffffff;
				border-radius: 24rpx;
				border: 4rpx solid #91beff;
				position: relative;
				top: 0;
				left: 0;

				.code {
					width: 248rpx;
					height: 248rpx;
					position: absolute;
					top: 6rpx;
					left: 6rpx;
				}
			}

			.discern {
				font-size: 28rpx;
				color: #222222;
				margin-top: 24rpx;
			}
		}

		.middle_line {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 28rpx;

			.half_cir_left {
				width: 20rpx;
				height: 40rpx;
				border-radius: 0rpx 20rpx 20rpx 0rpx;
				background-color: #dfecfd;
			}

			.half_cir_rig {
				width: 20rpx;
				height: 40rpx;
				border-radius: 20rpx 0rpx 0rpx 20rpx;
				background-color: #dfecfd;
			}

			.line {
				width: 588rpx;
				height: 2rpx;
				border-bottom: 2rpx dashed #c4dcff;
			}
		}

		.flows {
			margin-top: 18rpx;
			display: flex;
			flex-direction: column;
			align-items: center;

			.f_title {
				font-size: 32rpx;
				font-weight: bold;
				color: #222222;
				position: relative;
				top: 0rpx;
				left: 0rpx;

				&::after {
					content: "";
					width: 32rpx;
					height: 8rpx;
					background: #3f8dfd;
					position: absolute;
					bottom: -8rpx;
					left: 40rpx;
				}
			}

			.f_lines {
				width: 500rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin: 26rpx 0rpx 16rpx 0rpx;

				.numbers {
					width: 40rpx;
					height: 40rpx;
					line-height: 40rpx;
					text-align: center;
					background: #d5e6ff;
					border-radius: 50%;
					font-size: 24rpx;
					font-weight: bold;
					color: #3f8dfd;
				}

				.line {
					height: 2rpx;
					border-bottom: 2rpx dashed #c4dcff;
				}

				.line_one {
					width: 112rpx;
				}

				.line_two {
					width: 86rpx;
				}

				.line_three {
					width: 48rpx;
				}
			}

			.f_words {
				display: flex;
				align-items: flex-start;
				width: 526rpx;
				justify-content: space-between;

				.word {
					font-size: 26rpx;
					font-weight: 400;
					color: #3f8dfd;
				}

				.word_two {
					width: 156rpx;
					text-align: center;
				}
			}
		}
	}

	.distance_time {
		margin-top: 56rpx;

		.time_item {
			font-size: 32rpx;
			color: #222222;
			margin-bottom: 24rpx;
		}
	}

	.activity_phone {
		margin: 40rpx 0rpx 56rpx 0rpx;
		padding: 32rpx 0rpx 32rpx 44rpx;
		width: 670rpx;
		// height: 148rpx;
		background: #ffffff;
		border-radius: 24rpx;

		.titles {
			font-size: 28rpx;
			color: #222222;
			margin-bottom: 12rpx;
		}

		.phone_num {
			font-size: 28rpx;
			color: #3f8dfd;
			margin-bottom: 32rpx;
		}
	}

	.exam_entry {
		font-size: 32rpx;
		font-weight: 500;
		color: #222222;
		margin-bottom: 80rpx;
	}

	.course_list {
		// width: 100%;
		padding: 0rpx 32rpx;
		box-shadow: 0px 10rpx 9rpx 1rpx rgba(165, 196, 239, 0.1);

		.titles {
			margin-left: 10rpx;
			margin-bottom: 32rpx;

			.code {
				width: 38rpx;
				height: 24rpx;
			}

			.title {
				font-size: 40rpx;
				font-family: OPPOSans-Bold, OPPOSans;
				font-weight: bold;
				color: #222222;
				margin-left: 14rpx;
			}
		}

		.list_item {
			padding: 24rpx;
			// height: 278rpx;
			background: #ffffff;
			box-shadow: 0rpx 0rpx 20rpx 1rpx rgba(1, 99, 235, 0.1);
			border-radius: 24rpx;
			background: #fff;
			margin-bottom: 32rpx;
			display: flex;
			align-items: center;

			.c_title {
				font-size: 32rpx;
				font-weight: bold;
				margin-bottom: 24rpx;
				font-weight: bold;
				color: #222222;
			}

			.c_downs {
				display: flex;
			}

			.img {
				position: relative;
				margin-right: 24rpx;
				border-radius: 16rpx;
				overflow: hidden;
				width: 204rpx;
				height: 120rpx;

				image {
					width: 100%;
					height: 100%;
				}

				.time {
					position: absolute;
					bottom: 0;
					right: 0;
					width: 80rpx;
					height: 32rpx;
					background: rgba(1, 25, 45, 0.4);
					color: #fff;
					text-align: center;
					line-height: 32rpx;
					font-size: 24rpx;
					border-radius: 10rpx 0px 10rpx 0px;
				}
			}

			.text {
				width: 440rpx;
				position: relative;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				height: 120rpx;

				.joins {
					.people {
						width: 160rpx;
						font-size: 20rpx;
						color: #999999;
						padding: 0rpx 8rpx;
						text-align: center;
						height: 36rpx;
						line-height: 36rpx;
						background: #f6f7fb;
						border-radius: 4px;
					}
				}

				.desc {
					margin-top: 10rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					width: 100%;

					.left {
						flex: 1;
						color: #333;
						font-size: 26rpx;

						.mon_t {
							font-weight: bold;
							color: #fc3f3f;
							font-size: 36rpx;
						}

						.sale {
							color: #999999;
							font-size: 24rpx;
							margin-left: 8rpx;
						}

						.price_line {
							color: #999999;
							font-size: 24rpx;
							text-decoration: line-through;
							font-weight: 400;
						}
					}

					.right {
						font-size: 24rpx;
						font-weight: bold;

						.regiser_row {
							width: 144rpx;
							height: 52rpx;
							line-height: 52rpx;
							text-align: center;
							border-radius: 16rpx;
							background-color: #fc3f3f;
							color: #fff;
							font-weight: 500;
							font-size: 26rpx;
						}
					}
				}
			}
		}
	}
</style>