<template>
    <view class="uni-container">
		<image class="bgImg" src="" mode=""></image>
		<view class="waper">
			<view class="image">
				<image :src="$utils.setImgUrl(logo)" mode=""></image>
			</view>
			<view class="title">{{name}}</view>
            <view class="check" @click="tabCheck">
                <view :class="'check_icon' + (checkBol ? ' active' : '')">
                    <u-icon v-if="checkBol" name="checkbox-mark" color="#03AE80" size="28rpx"></u-icon>
                </view>
                <view>您已阅读并同意</view>
                <view class="color" @click.stop="toNotice('yhfwxy')">《用户服务协议》</view>
                <view>及</view>
                <view class="color" @click.stop="toNotice('ysxy')">《隐私政策》</view>
            </view>
			<view class="btn">
				<view @click="login">一键登录</view>
				<view @click="toHome">暂不登录</view>
			</view>
		</view>
    </view>
</template>

<script>
export default {
    data () {
        return {
            logo: '',
            name: '',
            checkBol: true
        }
    },
    async onLoad () {
        if (uni.getStorageSync('ztc_token')) {
            uni.reLaunch({ url: '/pages/tabbar/home' })
            return false;
        }
        let scenic = await this.$http.scenicDetail({ id: this.$scenicId });
        this.logo = scenic.data.logo;
        this.name = scenic.data.scenicName;
    },
    methods: {
        toNotice (key) {
            uni.navigateTo({
                url: '/pages/login/notice?type=' + key
            })
        },
        tabCheck () {
            this.checkBol = !this.checkBol;
        },
        toHome () {
            uni.reLaunch({ url: '/pages/tabbar/home' })
        },
        login () {
            if (!this.checkBol) {
                uni.showToast({ mask: true, title: '请阅读并同意《用户服务协议》及《隐私政策》' })
                return false;
            }
            uni.showLoading({ mask: true })
            wx.login({
            	success: async (res) => {
					console.log(res,"login")
            		if(res.code){
            			let info = await this.$http.login({ jsCode: res.code })
                        if (info.code == 200) {
                            uni.setStorageSync('ztc_token', info.msg)
                            uni.setStorageSync('user_nickname', info.data.nickname)
                            uni.setStorageSync('user_avatar', info.data.avatar)
                            uni.hideLoading();
                            uni.showToast({ mask: true, title: '登录成功', icon: 'success' })
                            let pages = getCurrentPages();
                            let prevPage = pages[pages.length - 2];
                            setTimeout(() => {
                                if (prevPage) {
                                    uni.navigateBack({ delta: 1 })
                                    prevPage.onLoad(prevPage.options);
                                } else uni.reLaunch({ url: '/pages/tabbar/home' })
                            }, 1500)
                        } else {
                            uni.hideLoading();
                            uni.showToast({ mask: true, title: '登录失败', icon: 'none' })
                        }
            		} else {
            			uni.hideLoading();
            			uni.showToast({ mask: true, title: '登录失败', icon: 'none' })
            		}
            	},
                fail: () => {
                    uni.hideLoading();
                    uni.showToast({ mask: true, title: '登录失败', icon: 'none' })
                }
            })
        }
    }
}
</script>

<style lang="scss">
page{ background: #fff; height: 100%; }
.uni-container {
	position: relative;
	height: 100vh;
	.bgImg {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
	}
}
.waper{
    width: 100%; height: 100%; position: absolute; left: 0; top: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 9;
    .image{ width: 160rpx; height: 160rpx; }
    .title{ margin-top: 32rpx; color: #333; font-size: 36rpx; font-weight: 500; height: 48rpx; line-height: 48rpx; }
    .check{
        margin-top: 125rpx; display: flex; align-items: center; font-size: 24rpx; color: #333;
        .check_icon{
            width: 32rpx; height: 32rpx; background: #fff; box-sizing: border-box; border: 2rpx solid #999; border-radius: 4rpx; display: flex; justify-content: center; align-items: center; margin-right: 10rpx;
            &.active{ border-color: #03AE80; }
        }
        .color{ color: #03AE80; }
    }
    .btn{
        width: 510rpx; margin-top: 32rpx;
        view{
            width: 100%; height: 100rpx; text-align: center; line-height: 100rpx; border-radius: 100rpx; font-weight: 500; font-size: 32rpx; background: #03AE80;  margin-bottom: 32rpx; color :#fff;
            &:last-child{ height: 98rpx; box-sizing: border-box; border: 1rpx solid #999; background: #fff; color: #333; line-height: 98rpx; margin-bottom: 0; }
        }
    }
}
</style>