百富门答题小程序
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.
 
 
 

201 lines
4.4 KiB

<template>
<view class="login">
<view class="logo">
<image :src="configList.logo_image" mode="widthFix"
class="logo"></image>
</view>
<view class="title">
{{ configList.logo_name }}
</view>
<view class="btn mt" @click="wxLogin">
<view class="icon">
<image src="../static/auth/wx.png" mode=""></image>
</view>
<view class="">
微信登录
</view>
</view>
<view class="btn b2"
@click="qux">
取消登录
</view>
<view class="config">
<uv-checkbox-group v-model="checkboxValue" shape="circle">
<view class="flex-center">
<uv-checkbox size="30rpx" icon-size="20rpx" activeColor="#07c060" :name="1"></uv-checkbox>
<text>已同意</text>
<text @click="openConfigDetail('user_ys')">隐私政策</text>
<text @click="openConfigDetail('user_xy')">用户协议</text>
<view class="info">
<img src="../static/auth/info.svg" alt="info" />
</view>
</view>
</uv-checkbox-group>
</view>
<uv-popup mode="center" round="20" ref="service" duration="500">
<view class="flex-col" style="width: 88vw;">
<view class="flex-col" style="width: 76vw; padding: 30rpx;">
<div class="icon-service">
<img src="" alt="" />
</div>
<h3>服务协议和隐私权政策</h3>
<span style="color: #7a7a7a; font-size: 26.5rpx; line-height: 55rpx;">
请您务必审慎阅读充分理解用户协议和隐私政策各条款包括但不限于用户注意事项用户行为规范以及为了向你提供服务而收集使用存储你的个人信息的情况等你可阅读
<span style="color: black; font-weight: bold; font-size: 26.5rpx; ">遗产里的景德镇平台用户服务协议</span>
<span style="color: black; font-weight: bold; font-size: 26.5rpx; ">遗产里的景德镇平台隐私权政策</span>
了解详细信息如你同意请点击下方按钮开始接受我们的服务
</span>
<view class="flex-sa mt-40 mb-60">
<uv-button text="不同意" size="large" :custom-style=customStyle @click="close()"></uv-button>
<uv-button type="error" size="large" text="同意" @click="agree"></uv-button>
</view>
</view>
</view>
</uv-popup>
<configPopup ref="popup"></configPopup>
</view>
</template>
<script>
import { mapState } from 'vuex'
import configPopup from '@/components/config/configPopup.vue';
export default {
name: 'Login',
data() {
return {
checkboxValue: []
}
},
computed : {
...mapState(['configList']),
customStyle() {
return {
background: '#f1f1f1',
color: '#00bf61'
}
},
},
methods: {
wxLogin() {
if (!this.checkboxValue.length) {
return uni.showToast({
title: '请先同意隐私协议',
icon: 'none'
})
}
// this.open()
this.$store.commit('login')
// uni.navigateTo({
// url:'/pages/index/home'
// })
},
leftClick() {
uni.navigateBack({
delta: 1
})
},
openConfigDetail(key) {
this.$refs.popup.open(key)
},
open(){
this.$refs.service.open();
},
close(){
this.$refs.service.close();
},
agree(){
this.close();
uni.navigateTo({
url:'/pages/index/home'
})
},
qux(){
uni.reLaunch({
url: '/pages/index/agreement'
})
},
}
}
</script>
<style scoped lang="scss">
.logo {
width: 320rpx;
border-radius: 10rpx;
}
.login {
display: flex;
justify-content: center;
align-items: center;
height: 80vh;
flex-direction: column;
position: relative;
.btn {
width: 70%;
height: 80rpx;
background-color: $uni-wx-color;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
margin: 20rpx 0;
border-radius: 120rpx;
.icon {
position: relative;
top: 6rpx;
right: 6rpx;
margin-right: 10rpx;
image {
width: 40rpx;
height: 35rpx;
}
}
}
.b2 {
background-color: rgba($uni-wx-color, 0.2);
color: $uni-wx-color;
}
.mt {
margin-top: 200rpx;
}
.config {
font-size: 22rpx;
text-align: center;
line-height: 40rpx;
text {
color: $uni-wx-color;
}
.info {
width: 30rpx;
height: 30rpx;
position: relative;
left: 80rpx;
}
}
.icon-service {
width: 90rpx;
height: 90rpx;
background-color: #e4c28b;
border-radius: 50%;
}
}
</style>