weapp-v1/pages/makeApply/makeApply.vue

<template>
	<view style="background-color: #FF531C;">
		<!-- 预约报名 -->
		<image :src="bg1" mode="widthFix" style="width: 100%;" class="bground">
		<!-- <image src="../../static/apply/bg.png" mode="widthFix" style="width: 100%;" class="bground"> -->
			<view class="bground_time">报名时间：{{ sign_start_time }}-{{ sign_end_time }}</view>
			<view class="bground_box" v-if="apply === 0">
				<view class="title">大卫博士学位争霸赛第{{season}}季</view>
				<video id="myVideo" :src="src" controls></video>
				<view class="shuoming">赛事规则说明</view>
				<view class="apply" @click="$noMultipleClicks(goApply)" >预约报名</view>
			</view>
			<view class="bground_box" v-if="apply === 1">
				<view class="title">大卫博士学位争霸赛第{{season}}季</view>
				<!-- <image src="../../static/apply/success.png" mode="widthFix" style="width: 260rpx;"></image> -->
				<image :src="bg2" mode="widthFix" style="width: 260rpx;"></image>
				<view class="success">预约成功！</view>
				<view style="margin-bottom: 164rpx;text-align: center;">
					<view class="tixing">报名开始时会有微信消息提醒，请注意查收！</view>
					<view class="tixing">报名时请使用已注册账号。</view>
				</view>
			</view>
			<view class="bground_box" v-if="apply === 2">
				<view class="title">大卫博士学位争霸赛第{{season}}季</view>
				<image :src="bg3" mode="widthFix" style="width: 260rpx;"></image>
				<!-- <image src="../../static/apply/error.png" mode="widthFix" style="width: 260rpx;"></image> -->
				<view class="success">无法报名</view>
				<view class="error">抱歉您还不是公司客户，暂无法报名！</view>
			</view>
		</image>
	</view>
</template>
<script>
	import { GetAppointmentInfo, Appointment } from '../../api.js'
	export default {
		data() {
			return {
				noClick:true,
				apply: 0,
				sign_start_time: '',
				sign_end_time: '',
				season: '',
				bg1: 'https://api.admin.jiuweiyun.cn/uploads/images/rule/202205/06/rule_1651832138_qhqrS4AqcC.png',
				bg2: 'https://api.admin.jiuweiyun.cn/uploads/images/rule/202205/06/rule_1651832177_1zgFmqrSEw.png',
				bg3: 'https://api.admin.jiuweiyun.cn/uploads/images/rule/202205/06/rule_1651832158_EVe4qth6lv.png',
				src:'https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20200317.mp4'
			}
		},
		onShow() {
			this.$store.dispatch('onLaunch').then(() => {
				this.getAppointment()
			}).catch(e => {})
		},
		methods: {
			happenTimeFun(num){//时间戳数据处理
				let date = new Date(num*1000);
				//时间戳为10位需*1000，时间戳为13位的话不需乘1000
				let y = date.getFullYear();
				let MM = date.getMonth() + 1;
				MM = MM < 10 ? ('0' + MM) : MM;//月补0
				let d = date.getDate();
				d = d < 10 ? ('0' + d) : d;//天补0
				let h = date.getHours();
				h = h < 10 ? ('0' + h) : h;//小时补0
				let m = date.getMinutes();
				m = m < 10 ? ('0' + m) : m;//分钟补0
				let s = date.getSeconds();
				s = s < 10 ? ('0' + s) : s;//秒补0
				 return y + '.' + MM + '.' + d;
			},
			getAppointment() {
				uni.showLoading({title: '加载中',mask:true});
				this.$ajax.get(`${GetAppointmentInfo}`).then(([, { data: res }]) => {
					setTimeout(function () {uni.hideLoading();}, 100);
					this.sign_start_time = this.happenTimeFun(Number(res.data.sign_start_time))
					this.sign_end_time = this.happenTimeFun(Number(res.data.sign_end_time))
					this.season = res.data.season
					if (res.data.status === true) {
						this.apply = 1
					} else {
						this.apply = 0
					}
				})
			},
			async goApply() {
				const res = await uni.getSetting({ withSubscriptions: true })
				const go = () => {
					this.sureApply()
				}
				let s;
				try {
					const [, { subscriptionsSetting: { itemSettings: _s } }] = await uni.getSetting({ withSubscriptions: true })
					s = _s
				} catch(e) {
					go()
					return false
				}
				const tmplIds = [
					't9_3hsUqanNeYNheYEDtsL26VWqCVRrFBaj7QLiSh2M',
					'8R9SbxBeziYURpzOqMYQUyd1dCzBKQVuayrpeUr4PSQ',
					'FjXnhSWmUSoCLf-eC1zkNxbojpD7bzoe0U9yVGRZR54'
				]
				const t_alen = tmplIds.length
				let t_len = 0
				if(s) {
					const s_k = Object.keys(s)
					const s_v = Object.values(s)
					t_len = tmplIds.filter(id => s_k.indexOf(id) !== -1).length
				}
				if(!s || t_len !== t_alen) {
					uni.requestSubscribeMessage({
						tmplIds,
						success(res) {
							const _o = Object.assign({}, res)
							Reflect.deleteProperty(_o, 'errMsg')
							const a_len = Object.values(_o).filter(s => s === 'accept').length
							if(a_len !== t_alen){
								uni.showModal({
									title: '提示',
									content: '请选择订阅服务,以便我们通知您活动信息',
									showCancel: false
								})
							} else {
								go()
							}
						},
						fail(err) {
							uni.showModal({
								title: '失败',
								content: '打开订阅服务失败',
								showCancel: false
							})
							go()
						}
					})
				} else {
					go()
				}
			},
			sureApply() {
				this.$ajax.get(`${Appointment}`).then(([, { data: res }]) => {
					if (res.code === 200) {
						this.apply = 1
					} else {
						this.apply = 2
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		width: 100%;
		display: flex;
		flex-direction: column;
	}
	.bground {
		position: relative;
		&_time {
			width: 522rpx;
			font-size: 32rpx;
			font-weight: bold;
			line-height: 32rpx;
			color: #FFFFFF;
			position: absolute;
			left: 50%;
			top: 450rpx;
			margin-left: -242rpx; 
		}
		&_box {
			position: absolute;
			left: 50%;
			top: 420rpx;
			margin-left: -345rpx; 
			width: 690rpx;
			height: 924rpx;
			border-radius: 24rpx;
			padding: 120rpx 0 64rpx 0;
			display: flex;
			justify-content: space-between;
			flex-direction: column;
			align-items: center;
			color: #333333;
			font-weight: bold;
			.title {
				font-size: 44rpx;
			}
			.shuoming {
				font-size: 32rpx;
			}
			.apply {
				width: 582rpx;
				line-height: 100rpx;
				background: linear-gradient(179deg, #F7C02F 0%, #F17E06 100%);
				opacity: 1;
				border-radius: 50rpx;
				color: #fff;
				font-size: 36rpx;
				text-align: center;
			}
			.success {
				font-size: 56rpx;
			}
			.tixing {
				font-size: 30rpx;
				line-height: 40rpx;
				margin-top: 10rpx;
			}
			.error {
				font-size: 36rpx;
				margin-bottom: 212rpx;
			}
		}
	}
</style>