cyzh-SoundOfMusic-H5/pages/index/guide.vue

<template>
	<view>
		<u-image :src="src" mode="widthFix"></u-image>
		<view class="modal" :class="show ? 'show' : ''" @click="show = false">
			<image class="img" src="/static/index/arrow.png"></image>
			<view class="view text-white">
				<view class="flex align-center text-bold margin-bottom" style="font-size: 36upx;">
					<view class="theme-bg-color flex justify-center align-center margin-right" style="width: 60upx;height: 60upx;border-radius: 16upx;">1</view>
					<view class="flex align-center">
						<view>点击右上角</view>
						<image class="margin-lr-sm" src="/static/index/point.png" style="width: 60upx;height: 38upx;"></image>
						<view>按钮</view>
					</view>
				</view>
				<view class="flex align-center text-bold" style="font-size: 36upx;">
					<view class="theme-bg-color flex justify-center align-center margin-right" style="width: 60upx;height: 60upx;border-radius: 16upx;">2</view>
					<view class="flex align-center">
						<view>选择</view>
						<image class="margin-lr-sm" src="/static/index/browser.png" style="width: 48upx;height: 48upx;"></image>
						<view>在浏览器打开</view>
					</view>
				</view>
			</view>
		</view>
		<view style="height: 120upx;"></view>
		<view class="footer-fixed" style="background-color: #ffffff;padding: 10upx 60upx;">
			<button class="cu-btn round theme-bg-color text-white text-bold" style="width: 100%;height: 100upx;font-size: 36upx;" @click="tips">
				<view>投票通道已启动！</view>
				<image src="/static/index/left-arrow.png" style="width: 32upx;height: 32upx;"></image>
			</button>
			<view class="flex align-center justify-center">
				<view class="theme-color text-bold margin-tb-xs" style="font-size: 36upx;">快来为爱豆和Ta的作品打Call，冲鸭</view>
				<image src="/static/index/duck.png" style="width: 34upx;height: 34upx;"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import {getUrlParams} from '@/common/utils/utils.js';
	export default {
		data() {
			return {
				userId: '',
				show: false,
				src: 'https://gxsz-bucket-01.obs.cn-south-1.myhuaweicloud.com/WechatIMG62.png'
			}
		},
		onLoad(options) {
			if (!this.$u.test.isEmpty(options.userId)) {
				this.userId = options.userId;
			} else {
				this.authorization();
			}
		},
		methods: {
			tips() {
				this.show = true;
				if (this.$isWxBrowser()) {
					this.show = true;
				}
			},
			async authorization() {
				let agenterId=uni.getStorageSync("agenterId")
				let params = getUrlParams(window.location.search);
				if (!this.$u.test.isEmpty(params.code)) {
					let res = await this.$u.api.wxInfo.getUserInfo({userCode: params.code});
					uni.setStorageSync("openid", res.openid);
					let datas = {
						nickName: res.nickname,
						avatar: res.headimgurl,
						gender: res.sex,
						openid: res.openid,
						unionid: res.unionid,
						province:res.province,
						city:res.city
					}
					if (!this.$u.test.isEmpty(agenterId)) {
						datas.agenterId=agenterId
					}
					let result = await this.$u.api.user.login(datas);
					if (result) {
						this.userId = result.id;
						uni.setStorageSync("userId", result.id);
						let url = window.location.href;
						url = url + "?userId=" +  this.userId;
						console.log(url);
						window.location.href = url;
					}
				}
			},
		}
	}
</script>

<style>
	.modal {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 1110;
		opacity: 0;
		outline: 0;
		-ms-transform: scale(1.185);
		transform: scale(1.185);
		backface-visibility: hidden;
		perspective: 2000upx;
		background: rgba(0, 0, 0, 0.6);
		transition: all 0.3s ease-in-out 0s;
		pointer-events: none;
	}
	
	.modal::before {
		content: "\200B";
		display: inline-block;
		height: 100%;
	}
	
	.modal.show {
		opacity: 1;
		transition-duration: 0.3s;
		-ms-transform: scale(1);
		transform: scale(1);
		overflow-x: hidden;
		overflow-y: auto;
		pointer-events: auto;
	}
	.img {
		position: fixed;
		top: 20px;
		right: 10px;
		width: 127px;
		height: 184px;
	}
	.view {
		position: fixed;
		top: 230px;
		right: 50upx;
		text-align: center;
		width: 550upx;
		height: 480upx;
	}
</style>