<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>
|