167 lines
2.9 KiB
Vue
167 lines
2.9 KiB
Vue
<template>
|
|
<view class="content">
|
|
<view class="head">
|
|
<image src="/static/image/login26_bg.png" mode="widthFix"></image>
|
|
</view>
|
|
<view class="title">
|
|
<text class="name">Hello!</text>
|
|
<text class="sub-name">欢迎登录云快充</text>
|
|
</view>
|
|
<view class="form-box">
|
|
<button class="login-btn" :disabled="!aloneChecked" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">一键注册登录</button>
|
|
<view class="tip-link" style="display: flex; align-items: center">
|
|
<up-checkbox shape="circle" name="agree" usedAlone @change="change"></up-checkbox>
|
|
我已阅读并同意
|
|
<text @click="toNav('/pages/agreement/agreement?id=9')">用户协议</text>
|
|
和
|
|
<text @click="toNav('/pages/agreement/agreement?id=10')">隐私政策</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue';
|
|
import { login } from '@/common/js/user.js';
|
|
|
|
let aloneChecked = ref(false);
|
|
|
|
let getPhoneNumber = async (e) => {
|
|
if (!aloneChecked.value) {
|
|
return uni.showToast({
|
|
title: '请先阅读并同意用户协议和隐私政策',
|
|
icon: 'none'
|
|
});
|
|
}
|
|
try {
|
|
login(e, 2);
|
|
// let token = uni.getStorageSync('token');
|
|
|
|
// if (!token) {
|
|
// login(e, 2);
|
|
// } else {
|
|
// login();
|
|
// uni.navigateBack();
|
|
// }
|
|
} catch (err) {
|
|
uni.showToast({
|
|
title: err,
|
|
icon: 'none'
|
|
});
|
|
}
|
|
};
|
|
|
|
const toNav = (e) => {
|
|
uni.navigateTo({
|
|
url: e
|
|
});
|
|
};
|
|
|
|
const change = (e) => {
|
|
aloneChecked.value = e;
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
page {
|
|
background-color: #e9edf6;
|
|
}
|
|
|
|
.head {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
width: 100%;
|
|
height: 30vh;
|
|
z-index: -1;
|
|
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.title {
|
|
padding-left: 80rpx;
|
|
padding-top: 100rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: flex-start;
|
|
flex-direction: column;
|
|
height: 30vh;
|
|
|
|
.name {
|
|
font-size: 70rpx;
|
|
line-height: 100rpx;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.sub-name {
|
|
line-height: 80rpx;
|
|
font-size: 45rpx;
|
|
letter-spacing: 8rpx;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
.form-box {
|
|
padding: 0rpx 80rpx;
|
|
|
|
.row-input {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
height: 100rpx;
|
|
background-color: #ffffff;
|
|
border-radius: 12rpx;
|
|
margin: 50rpx 0rpx;
|
|
|
|
image {
|
|
margin: 0 25rpx;
|
|
flex-shrink: 0;
|
|
width: 31rpx;
|
|
height: 35rpx;
|
|
}
|
|
|
|
input {
|
|
font-size: 30rpx;
|
|
flex: 1;
|
|
}
|
|
}
|
|
|
|
.menu-link {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
font-size: 26rpx;
|
|
}
|
|
|
|
.login-btn {
|
|
margin-top: 250rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 90rpx;
|
|
border-radius: 12rpx;
|
|
background-color: #819682;
|
|
color: #f4f4f4;
|
|
font-size: 30rpx;
|
|
letter-spacing: 5rpx;
|
|
box-shadow: 0rpx 5rpx 20rpx #94ac95;
|
|
}
|
|
|
|
.tip-link {
|
|
display: flex;
|
|
justify-content: center;
|
|
letter-spacing: 3rpx;
|
|
line-height: 150rpx;
|
|
font-size: 26rpx;
|
|
|
|
text {
|
|
color: #57a2ee;
|
|
}
|
|
}
|
|
}
|
|
</style>
|