193 lines
3.6 KiB
Vue
193 lines
3.6 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="inputC mobile flex">
|
|
<image class="icon" src="/static/icon/login/mobile.png" mode="widthFix"></image>
|
|
<input class="flex1" type="number" v-model="mobile" placeholder="请输入手机号" placeholder-style="color: #aaa"/>
|
|
</view>
|
|
<view class="inputC code flex">
|
|
<image class="icon" src="/static/icon/login/code.png" mode="widthFix"></image>
|
|
<input class="flex1" type="number" v-model="code" placeholder="请输入验证码" placeholder-style="color: #aaa"/>
|
|
<view class="getCode" @click="clickGetCode()">获取验证码</view>
|
|
</view>
|
|
<view class="btn loginAtOnce" @click="clickLoginAtOnce()">立即登录</view>
|
|
<view class="btn oneClickLogin" @click="clickOneClickLogin()">授权手机号一键登录</view>
|
|
<view class="agreeProtocolC fixed flexCenter">
|
|
<view class="agreeC">
|
|
<image class="icon" src="" mode="widthFix"></image>
|
|
</view>
|
|
阅读并同意我们的<text class="protocol">《用户服务协议》</text>和<text class="protocol">《隐私政策》</text>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { inject } from 'vue';
|
|
import { loginByPhone } from '@/request/api';
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
contentTop:'',
|
|
mobile:'', //手机号
|
|
code:'', //验证码
|
|
}
|
|
},
|
|
onLoad() {
|
|
this.contentTop = inject('navHeight')+230/750*inject('windowWidth')
|
|
},
|
|
methods: {
|
|
/**
|
|
* 点击获取验证码
|
|
*/
|
|
clickGetCode()
|
|
{
|
|
|
|
},
|
|
/**
|
|
* 点击立即登录
|
|
*/
|
|
clickLoginAtOnce()
|
|
{
|
|
if(!this.mobile)
|
|
{
|
|
uni.showToast({
|
|
title:'请输入手机号',
|
|
icon:'none'
|
|
})
|
|
return
|
|
}
|
|
if(!this.code)
|
|
{
|
|
uni.showToast({
|
|
title:'请输入验证码',
|
|
icon:'none'
|
|
})
|
|
return
|
|
}
|
|
let param = {phone:this.mobile,code:this.code,isJson:1}
|
|
loginByPhone(param).then(res=>{
|
|
if(res.code==200)
|
|
{
|
|
|
|
}else
|
|
uni.showToast({
|
|
title:res.message,
|
|
icon:'none'
|
|
})
|
|
}).catch(error=>{
|
|
|
|
})
|
|
},
|
|
/**
|
|
* 点击一键登录
|
|
*/
|
|
clickOneClickLogin()
|
|
{
|
|
uni.navigateBack()
|
|
}
|
|
}
|
|
}
|
|
</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;
|
|
}
|
|
.inputC
|
|
{
|
|
background-color: #f8f8f8;
|
|
margin: 0 75rpx;
|
|
height: 80rpx;
|
|
border-radius: 10rpx;
|
|
input
|
|
{
|
|
font-size: 26rpx;
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
.inputC.mobile
|
|
{
|
|
margin-top: 40rpx;
|
|
padding-left: 29rpx;
|
|
.icon
|
|
{
|
|
margin-right: 13rpx;
|
|
width: 26rpx;
|
|
height: auto;
|
|
}
|
|
}
|
|
.inputC.code
|
|
{
|
|
margin-top: 36rpx;
|
|
padding-left: 27rpx;
|
|
.icon
|
|
{
|
|
margin-right: 10rpx;
|
|
width: 26rpx;
|
|
height: auto;
|
|
}
|
|
.getCode
|
|
{
|
|
padding: 0 30rpx;
|
|
font-size: 26rpx;
|
|
font-weight: 500;
|
|
color: #F97316;
|
|
}
|
|
}
|
|
.btn
|
|
{
|
|
margin: 0 75rpx;
|
|
line-height: 80rpx;
|
|
border-radius: 20rpx;
|
|
font-size: 26rpx;
|
|
font-weight: 500;
|
|
text-align: center;
|
|
}
|
|
.btn.loginAtOnce
|
|
{
|
|
background-color: #F97316;
|
|
margin-top: 60rpx;
|
|
color: white;
|
|
}
|
|
.btn.oneClickLogin
|
|
{
|
|
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>
|