WenWuGuanJia/answer_pages/home/welcome.vue

<template>
	<view class="wrap">
		<u-navbar title="答题即将开始" bgColor="rgba(255,255,255,0.3)" leftText="返回" :autoBack="true" titleStyle="font-weight:bold;color:#7a5831"></u-navbar>
		<view style="position: relative" class="screen" v-if="screenImage" :style="{ height: screenHeight + 'px' }">
			<image :src="screenImage" mode="aspectFill" :style="{ height: screenHeight + 'px' }"></image>
			<view @click="skipBtn" style="position: absolute; top: 200rpx; right: 38rpx; display: flex; align-items: center; justify-content: space-between">
				<u-button customStyle="width:100rpx" shape="circle" size="mini" text="跳过" color="#3e3c41"></u-button>
			</view>

			<view class="b-countdown" @click="onJumHome">
				<view class="s-text">{{ screenCountdown }}</view>
			</view>
		</view>
		<!-- 加载中 -->

		<load-more :loadingType="loadingType" :loadingText="loadingText" :top="300"></load-more>
	</view>
</template>

<script>
import { getConfig } from '@/service/api/common.js';
import { silentReload, smartLogin } from '@/service/request/main.js';
import Util from '../../common/util.js';
// import mixinsCommon from '../../mixins/common.js';

export default {
	// mixins: [mixinsCommon],
	data() {
		return {
			screenHeight: 0,
			screenImage: 'https://huli-app.wenlvti.net/app_static/WenWuGuanJia/image/dtydy.png',
			screenCountdown: 5,
			loadingType: 1,
			loadingText: '',
			interval: 0,
			aid: 0,
			user: {}
		};
	},
	onLoad(options) {
		console.log('web onLoad', options);
		let params = options;
		this.aid = options.aid;
		let from = params.from;
		if (params.scene) {
			params = Util.urlDecode(decodeURIComponent(params.scene));
			from = 'qrcode';
		}
		this.$store.commit('setActivityId', params.aid);
		getConfig().then(([err, res]) => {
			// console.log('getConfig', err, res);
			if (!err) {
				this.user = this.$common.userInfo();

				this.loadingType = -1;
				this.$store.commit('setGlobalConfig', res);
				// this.screenImage = res.welcome_img;
				this.screenCountdown = res.welcome_countdown || 5;
				if (this.screenImage) {
					// 验证码倒计时
					this.interval = setInterval(() => {
						this.screenCountdown--;
					}, 1000);
					setTimeout(() => {
						if (this.interval > 0) {
							this.onJumHome(from);
						}
					}, this.screenCountdown * 1000);
				} else {
					this.onJumHome(from);
				}
			} else {
				this.loadingType = 3;
				this.loadingText = err.data.msg || '加载失败';
			}
		});

		// 获取窗口高度
		const systemInfo = uni.getSystemInfoSync();
		this.screenHeight = systemInfo.screenHeight;
	},
	onShow() {},
	methods: {
		onJumHome(from) {
			if (this.interval > 0) {
				clearInterval(this.interval);
				this.interval = 0;
			}
			if (this.$store.getters.accessToken) {
				// console.log(this.user, '78787878');
				uni.redirectTo({
					url: '/answer_pages/home/index?SharerId=' + this.user.id // 跳到首页
				});
			} else {
				if (from === 'qrcode') {
					// console.info('needLogin qrcode', 'silentReload');
					silentReload(false, ''); // 扫描尝试自动登录
				} else {
					smartLogin('/answer_pages/home/dashboard');
				}
			}
		},
		/* 跳过事件 */
		skipBtn() {
			clearTimeout(this.interval);
			this.interval = null;
			uni.redirectTo({
				url: '/answer_pages/home/index?SharerId=' + this.user.id // 跳到首页
			});
		}
	}
};
</script>

<style lang="scss">
.wrap {
}

.screen {
	width: 750upx;

	image {
		width: 750upx;
	}

	.b-countdown {
		position: absolute;
		right: 80upx;
		bottom: 80upx;
		width: 80upx;
		height: 80upx;
		border-radius: 40upx;
		background: rgba(0, 0, 0, 0.5);
		display: flex;
		align-items: center;
		justify-content: center;

		.s-text {
			font-size: 32upx;
			font-weight: bold;
			color: #fff;
		}
	}
}
</style>