7.10 增加登录页面,事件详情接口对接,我的点赞,关注收藏页面搭建,接口对接
This commit is contained in:
192
pages/login/codeLogin/codeLogin.vue
Normal file
192
pages/login/codeLogin/codeLogin.vue
Normal file
@@ -0,0 +1,192 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user