siteFront/pages/attendance/entry_success.vue

<template>
	<view class="entry_success" v-if="flag">
		<view class="top-img">
			<image :src="meetingInfo.image" style="width: 100%;height: 100%;"></image>
		</view>
		<view class="main tn-pt-xl">
			<view class="warn">
				<view class="icon tn-flex tn-flex-center-center">
					<tn-icon name="success-circle-fill" color="#19be6b" size="160"></tn-icon>
				</view>
				<view class="text tn-text-center ">
					<view class="tn-text-2xl tn-text-bold">
						你已成功报名
					</view>
					<view class="tn-pt-sm tn-pb-sm">
						{{'请于'+ meetingInfo.meeting_time +'前完成到达会场'}}
					</view>
				</view>
				<view class="timer tn-text-center tn-red-dark_text tn-text-lg">
					{{time + '秒后回到首页'}}
				</view>
			</view>
			
			<view class="userinfo tn-flex tn-flex-center-between tn-shadow tn-shadow-lg tn-shadow-blur tn-m-xl tn-p tn-radius tn-gradient-bg__cool-6 tn-bg-image">
				<view class="tn-flex tn-flex-center-center tn-w-3-12">
					<view class="avatar tn-text-center">
						<TnAvatar :url="userInfo.avatar" size="xl" shape="square" style="width: 160rpx;height: 160rpx;"/>
					</view>
				</view>
				
				<view class="info tn-w-8-12">
					<view class="company">
						<view class="tn-text-xl tn-text-bold">
							{{userInfo.company}}
						</view>
					</view>
					
					<view class="name">
						{{'姓名：' + userInfo.name}}
					</view>
					
					<view class="position">
						{{'职务：' + userInfo.position}}
					</view>
					
					<view class="phone">
						{{'电话：' + userInfo.phone}}
					</view>
				</view>
			</view>

			<view class="btn tn-flex tn-flex-center-center tn-p" >
				<view class="tn-text-center tn-w-2-3 tn-p-sm tn-type-warning_bg tn-radius" @click="toHome">
					{{'确认信息(' + time + '秒)'}}
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { onMounted, reactive, ref } from 'vue';
	import { onLoad } from "@dcloudio/uni-app";
	import request from '@/utils/request';
	import TnAvatar from '@/uni_modules/tuniaoui-vue3/components/avatar/src/avatar.vue'
	
	const meetingId = ref()
	
	const time = ref(10)
	
	const flag = ref(false)
	
	const meetingInfo = ref()
	
	const userInfo = reactive<{
		avatar?:string,
		name?:string,
		company?:string,
		position?:string,
		phone?:string
	}>({})
	
	const toHome = () =>{
		uni.reLaunch({
			url:'/pages/attendance/index?id=' + meetingId.value
		})
	}
	const countDown = () =>{
		if(time.value > 0){
			let timer = setInterval(()=>{
				time.value--
				if(time.value === 0){
					clearInterval(timer)
					toHome()
				}
			},1000)
		}	
	}
	const getUserInfo = () => {
			let user = uni.getStorageSync('user')
			userInfo.avatar = user.avatar
			request({
				url: '/sign/entryUser',
				method:'GET',
				data:{'meetingId':meetingId.value,'openid':user.openid}
			}).then(res=>{
				if(res.data.code === 0){
					meetingInfo.value = res.data.data.meeting
					userInfo.name = res.data.data.name
					userInfo.company = res.data.data.company
					userInfo.position = res.data.data.position
					userInfo.phone = res.data.data.phone
					flag.value = true
					uni.setNavigationBarTitle({
						title:'登记成功'
					})
				}else{
					uni.showToast({
					   title:'请登记个人信息',
					   icon:'none',
					   success: () => {	
							uni.navigateTo({
								url:'/pages/attendance/register?id=' + meetingId.value
							})
						}
					})
				}
			})
		}

	onLoad((options) => {
		meetingId.value = options.id
		countDown()
	})
	
	onMounted(()=>{
		getUserInfo()
	})

</script>

<style lang="scss" scoped>
	.entry_success{
		background-color: #f5f5f5;
		height: 100vh;
		.top-img{
			width: 100%;
			height: 360rpx;
		}
		.main{
			height: calc(100vh - 360rpx);
			background-color: #fff;
		}
	}
</style>