TmOct5/BlockChainH5
1
0
Fork 0
Code Issues Pull Requests Projects Releases 1 Wiki Activity

merge

Browse Source
This commit is contained in:
唐明明
2021-09-24 16:46:02 +08:00
parent 03c6628e84 8ab145ea73
commit d1c5a052e4
53 changed files with 4990 additions and 4338 deletions
Download Patch File Download Diff File Expand all files Collapse all files

195
pages/login/login.vue
View File

@@ -1,20 +1,22 @@
<template>
<template>
<view class="content">
<view class="title">易品新境</view>
<!-- <view class="title">易品新境</view> -->
<view class="login-top">
<view class="top-logo-content">
<image class="top-logo" fit="contain" src="/static/imgs/top_logo.png" />
链商星球(中国)
</view>
<image class="top-bg" fit="contain" src="/static/imgs/top_bg.png" />
</view>
<!-- 输入手机号相关 -->
<view class="inputs phone">
<label class="label">+86</label>
<input type="number" placeholder="输入您的手机号码" v-model="phone"/>
<input type="number" placeholder="输入您的手机号码" v-model="phone" />
</view>
<view class="inputs sms">
<input type="number" placeholder="输入短信验证码" v-model="code"/>
<button
class="sms-btn"
type="default"
size="mini"
:disabled="phone == '' || getSms"
@click="getPhoneCode"
>{{getSms ? '重新发送' + smsTime + 's': '发送验证码'}}</button>
<input type="number" placeholder="输入短信验证码" v-model="code" />
<button class="sms-btn" type="default" size="mini" :disabled="phone == '' || getSms"
@click="getPhoneCode">{{getSms ? '重新发送' + smsTime + 's': '发送验证码'}}</button>
</view>
<button class="btn" type="default" :disabled="phone == '' || code == ''" @click="login">登录</button>
<!-- 快捷登录 -->
@@ -25,86 +27,133 @@
</view>
</view>
<!-- 用户登录注册协议 -->
<view class="agreement">未注册的手机号验证后将自动创建账号，登录即表示同意接收<navigator url="">用户隐私规格</navigator>和<navigator url="">用户服务协议</navigator></view>
</view>
</template>
<view class="agreement">未注册的手机号验证后将自动创建账号，登录即表示同意接收<navigator url="">用户隐私规格</navigator>和<navigator url="">用户服务协议
</navigator>
</view>
</view>
</template>
<script>
import { getSms, smsAuth } from '@/apis/interfaces/auth'
export default {
data() {
import {
getSms,
smsAuth
} from '@/apis/interfaces/auth'
export default {
data() {
return {
phone : "18245180131",
code : "",
smsTime : 60,
getSms : false
}
},
phone: "18245180131",
code: "",
smsTime: 60,
getSms: false
}
},
methods: {
// 用户登录
login(){
login() {
smsAuth({
mobileNo: this.phone,
code : this.code
code: this.code
}).then(res => {
this.$store.commit('setToken', res.token_type + ' ' + res.access_token)
if(!res.is_company){
this.$Router.replace({name: "Registered"})
if (!res.is_company) {
this.$Router.replace({
name: "Index"
})
return
}
this.$Router.back()
}).catch(err => {
uni.showToast({
title: err.message,
icon : "none"
icon: "none"
})
})
},
// 获取验证码
getPhoneCode(){
getPhoneCode() {
let outTime
getSms({
mobileNo: this.phone
}).then(res => {
uni.showToast({
title: res,
icon : "none"
icon: "none"
})
this.getSms = true
outTime = setInterval(()=>{
if(this.smsTime <= 1){
this.getSms = false
outTime = setInterval(() => {
if (this.smsTime <= 1) {
this.getSms = false
this.smsTime = 60
clearInterval('outTime')
}
this.smsTime -= 1
},1000)
}, 1000)
}).catch(err => {
uni.showToast({
title: err.message,
icon : "none"
icon: "none"
})
})
}
}
}
</script>
<style lang="scss" scoped>
.content{
}
}
</script>
<style lang="scss" scoped>
.content {
height: 100vh;
width: 100vw;
padding: $padding * 3;
box-sizing: border-box;
background: white;
.inputs{
background: $border-color-lg;
.login-top {
height: 36vh;
width: 100%;
display: flex;
flex-direction: row;
align-items: flex-end;
justify-content: center;
box-sizing: border-box;
position: relative;
padding-bottom: 160rpx;
.top-bg {
position: absolute;
bottom: 30rpx;
// left: 2rpx;
z-index: 2;
width: 740rpx;
margin-left: 40rpx;
}
.top-logo-content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-sizing: border-box;
color: #7f56a4;
font-size: 18px;
.top-logo {
margin-bottom: 20rpx;
width: 240rpx;
height: 240rpx;
}
}
}
.inputs {
background:rgba($color: $mian-color, $alpha: 0.05);
border: solid 1rpx $border-color;
position: relative;
margin-top: $margin;
height: 80rpx;
line-height: 80rpx;
input{
input {
width: 100%;
height: 80rpx;
line-height: 80rpx;
@@ -113,9 +162,11 @@
box-sizing: border-box;
font-size: $title-size-lg;
}
&.phone{
&.phone {
padding-left: 120rpx;
.label{
.label {
position: absolute;
left: 0;
top: 0;
@@ -125,9 +176,11 @@
font-size: $title-size-lg;
}
}
&.sms{
&.sms {
padding-right: 200rpx;
.sms-btn[size='mini']{
.sms-btn[size='mini'] {
width: 200rpx;
height: 80rpx;
line-height: 80rpx;
@@ -140,25 +193,29 @@
border-left: solid 1rpx $border-color;
color: $text-price;
font-size: $title-size-lg;
&::after{
&::after {
border: none;
}
&[disabled]{
&[disabled] {
color: rgba($color: $text-price, $alpha: .6);
background: $border-color-lg;
}
}
}
}
.title{
.title {
text-align: center;
font-size: $title-size + 6;
font-weight: bold;
color: $text-color;
margin-bottom: 100rpx;
}
.btn{
background: $text-price;
.btn {
background: $mian-color;
color: white;
border-radius: 0;
margin-top: $margin;
@@ -166,39 +223,47 @@
line-height: 90rpx;
height: 90rpx;
font-weight: bold;
&::after{
&::after {
border: none;
}
&[disabled]{
background: rgba($color: $text-price, $alpha: .6);
&[disabled] {
background: rgba($color: $mian-color, $alpha: .6);
}
}
.quick{
.quick {
padding-top: $padding * 3;
text-align: center;
.quick-title{
.quick-title {
text-align: center;
color: $text-gray;
font-size: $title-size-sm;
padding-bottom: $padding;
}
.quick-box{
.quick-box {
display: flex;
justify-content: center;
.quick-icon{
.quick-icon {
width: 78rpx;
}
}
}
.agreement{
.agreement {
padding-top: $padding * 4;
font-size: $title-size-sm;
color: $text-gray;
navigator{
navigator {
color: $text-price;
display: inline-block;
padding: 0 10rpx;
}
}
}
}
</style>