Files
JiaZhiQianYan/pages/login/login.vue

136 lines
2.4 KiB
Vue

<template>
<view>
<navBar leftText="登录" :hideNavBg="true" :backBlack="true"></navBar>
<image class="logo" :style="'margin-top:'+contentTop+'px;'" src="/static/image/login/logo.png" mode="widthFix"></image>
<view class="loginTitle">欢迎登录价值前沿平台</view>
<view class="btn oneClickLogin" @click="clickOneClickLogin()">授权手机号一键登录</view>
<view class="btn codeLogin" @click="clickCodeLogin()">使用短信验证登录</view>
<view class="agreeProtocolC fixed flexCenter">
<view class="agreeC" @click="clickAgree()">
<image class="icon" src="" mode="widthFix"></image>
</view>
阅读并同意我们的<text class="protocol" @click="clickProtocol()">用户服务协议</text><text class="protocol"@click="clickProtocol()">隐私政策</text>
</view>
</view>
</template>
<script>
import { inject } from 'vue';
import { loginByWx } from '@/request/api';
export default {
data() {
return {
contentTop:''
}
},
onLoad() {
this.contentTop = inject('navHeight')+230/750*inject('windowWidth')
},
methods: {
/**
* 点击一键登录
*/
clickOneClickLogin()
{
uni.login({
provider:'weixin',
success(res) {
let param = {code:res.code,isJson:1}
loginByWx(param).then(res=>{
}).catch(error=>{
})
},
fail() {
}
})
},
/**
* 点击验证码登录
*/
clickCodeLogin()
{
uni.navigateTo({
url:'/pages/login/codeLogin/codeLogin'
})
},
/**
* 点击同意
*/
clickAgree()
{
},
/**
* 点击查看协议
*/
clickProtocol()
{
}
}
}
</script>
<style lang="less">
.logo
{
margin-left: calc((100% - 144rpx)/2);
width: 144rpx;
height: auto;
}
.loginTitle
{
margin: 40rpx 80rpx 0;
font-size: 40rpx;
font-weight: bold;
text-align: center;
}
.btn
{
margin: 0 75rpx;
line-height: 80rpx;
border-radius: 20rpx;
font-size: 26rpx;
font-weight: 500;
text-align: center;
}
.btn.oneClickLogin
{
background-color: #F97316;
margin-top: 60rpx;
color: white;
}
.btn.codeLogin
{
background-color: #FFF1E8;
margin-top: 28rpx;
color: #F97316;
}
.agreeProtocolC
{
left: 0;
right: 0;
bottom: calc(120rpx + env(safe-area-inset-bottom));
font-size: 26rpx;
font-weight: 500;
.agreeC
{
padding: 14rpx;
.icon
{
width: 28rpx;
height: auto;
}
}
.protocol
{
color: #F97316;
}
}
</style>