推拿小程序前端代码仓库
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.
 
 
 

186 lines
3.3 KiB

<template>
<view class="login">
<view class="logo">
<!-- 后续改回接口获取 -->
<image src="../static/auth/logo.png" mode=""></image>
<view class="text">
{{ configList.logo_name }}
</view>
</view>
<view class="btn mt"
@click="wxLogin">
<view class="icon">
<image style="width: 36rpx; height: 30rpx; transform: translateY(5rpx);" src="../static/auth/wx.png" mode=""></image>
</view>
<view class="">
微信登录
</view>
</view>
<view class="config">
<view style="flex: 1;">
<uv-checkbox-group
v-model="checkboxValue"
shape="circle"
>
<view class="content">
<uv-checkbox
size="28rpx"
icon-size="28rpx"
activeColor="#07C261"
:name="1"
></uv-checkbox>
已同意
<text @click="openModal">《注册协议》、隐私协议</text>
</view>
</uv-checkbox-group>
</view>
<view class="flex">
<uv-icon name="info-circle" color="#07C261" size="28rpx"></uv-icon>
</view>
</view>
<agreementModal ref="modal" @confirm="onConfirmAggrement"></agreementModal>
<button class="btn-cancel" :plain="true" :hairline="false" @click="onCancel">
暂不登录
</button>
</view>
</template>
<script>
import agreementModal from './agreementModal.vue'
export default {
name : 'Login',
data() {
return {
checkboxValue : []
}
},
components: {
agreementModal
},
methods: {
getPhoneNumber(e){
console.log(e, e.detail.code);
this.wxLogin(phoneCode)
},
wxLogin(phoneCode){
if(!this.checkboxValue.length){
return uni.showToast({
title: '请先同意隐私协议',
icon:'none'
})
}
this.$store.commit('login', phoneCode)
},
openModal() {
this.$refs.modal.open()
},
onConfirmAggrement(confirm) {
if (confirm) {
this.checkboxValue = [1]
} else {
this.checkboxValue = []
}
},
onCancel() {
uni.reLaunch({
url: '/pages/index/index'
})
},
}
}
</script>
<style scoped lang="scss">
.login{
display: flex;
justify-content: flex-start;
align-items: center;
height: 100vh;
flex-direction: column;
position: relative;
background: $uni-bg-color;
.logo{
margin-top: 334rpx;
width: 320rpx;
image{
height: 150rpx;
width: 320rpx;
}
.text{
margin-top: 90rpx;
font-size: 38rpx;
font-family: PingFang SC, PingFang SC-Bold;
font-weight: 700;
text-align: center;
color: #000000;
}
}
.btn{
all: unset;
width: 80%;
height: 100rpx;
background-color: #B3997E;
color: #fff;
font-size: 15px;
font-family: PingFang SC, PingFang SC-Regular;
font-weight: 400;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50rpx;
border: none;
.icon{
margin-right: 10rpx;
image{
width: 40rpx;
height: 35rpx;
}
}
}
.mt{
margin-top: 200rpx;
}
.config{
width: 80%;
line-height: 40rpx;
margin-top: 27rpx;
color: #C7C7C7;
text-align: left;
display: flex;
.content {
font-size: 22rpx;
display: flex;
align-items: center;
}
text{
color: #07C261;
}
}
.btn-cancel {
border: none;
font-size: 30rpx;
font-family: PingFang SC, PingFang SC-Regular;
font-weight: 400;
text-align: left;
color: #c7c7c7;
margin-top: 432rpx;
}
}
.flex {
display: flex;
align-items: center;
}
</style>