百富门答题小程序
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

199 lines
4.0 KiB

<template>
<view class="home">
<image src="/static/image/bg/X1.png"
class="page-bg"
mode="aspectFill"></image>
<view class="content_now">
<view class="title">
Genius Journey Club
</view>
<view class="title-desc">
欢迎您的到来
</view>
<view class="desc">
使用小程序请确认您已满18周岁
</view>
<view class="mian-btn"
:class="{active:isActive === '未满18岁'}"
@click="setActive('未满18岁')">{{ '未满18岁' }}</view>
<view class="mian-btn"
:class="{active:isActive === '已满18岁'}"
@click="setActive('已满18岁')">{{ '已满18岁' }}</view>
<view class="checkbox">
<uv-checkbox-group v-model="checkboxValue">
<view class="flex-center"
style="flex-wrap: wrap;">
<uv-checkbox
size="40rpx"
icon-size="30rpx"
activeColor="#ecb864"
:name="1"></uv-checkbox>
<view>我已仔细阅读并已同意以下条款:</view>
<text @click="$refs.popup.open('user_ys_one')">《全球隐私声明1》</text>
<text @click="$refs.popup.open('user_ys_two')">《全球隐私声明2》</text>
<text @click="$refs.popup.open('user_xy_three')">《全球隐私声明3》</text>
<!-- <text @click="$refs.popup.open('user_xy_four')">《全球隐私声明4》</text> -->
<text
@click="$refs.checkboxPopup.open('bottom')"
>
查看40项协议
</text>
</view>
</uv-checkbox-group>
</view>
<view class="uni-color-btn"
@click="next">
立即开启
</view>
<text class="second-color">{{ configObj.bg_title }}</text>
</view>
<!-- <configPopup ref="popup"
required
:keys="keys"
@success="checkboxValue = [1]"/> -->
<uv-popup ref="checkboxPopup"
:round="30">
<view class="checkboxPopupContent">
<view @click="$refs.popup.open('user_xy_four')"
v-for="item in 40"
:key="item"
>全球隐私声明{{item + 1}}</view>
</view>
</uv-popup>
<configPopup ref="popup"/>
</view>
</template>
<script>
import { mapState } from 'vuex'
export default {
data() {
return {
isActive : null,
checkboxValue : [],
configObj : {},
keys : ['user_ys_one', 'user_ys_two', 'user_xy_three', 'user_xy_four'],
}
},
computed : {
},
onLoad() {
uni.$on('initConfig', data => {
this.configObj = data
})
},
onShow() {
},
methods: {
setActive(value){
this.isActive = value
},
next(){
if(!this.isActive){
uni.showToast({
title:'请选择',
icon: 'none'
})
return
}
if(!this.checkboxValue.length){
// uni.showToast({
// title:'请同意隐私政策',
// icon: 'none'
// })
this.$refs.popup.openkeys()
return
}
if(!uni.getStorageSync('token')){
this.$utils.toLogin()
return
}
this.$store.commit('getUserInfo', () => {
uni.navigateTo({
url: '/pages/index/index'
})
})
},
}
}
</script>
<style lang="scss" scoped>
.content_now{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
position: fixed;
top: 55%;
transform: translate(0, -50%);
padding: 0 70rpx;
box-sizing: border-box;
width: 100%;
--color2 : #000;
.title-desc{
font-size: 26rpx;
}
.desc{
font-size: 26rpx;
margin-top: 30rpx;
}
.mian-btn{
border-color: $uni-color-primary;
color: $uni-color-primary;
}
.active{
background-color: $uni-color-primary;
color: #fff;
}
.checkbox{
margin-top: 470rpx;
view{
line-height: 50rpx;
}
text{
color: #1e52ff;
line-height: 50rpx;
}
}
.uni-color-btn{
width: 80%;
}
.flex-center {
display: flex;
justify-content: center;
align-items: center;
font-size: 26rpx;
}
}
.checkboxPopupContent{
padding: 40rpx;
display: flex;
flex-wrap: wrap;
view{
color: #1e52ff;
line-height: 50rpx;
}
}
</style>