128 lines
3.6 KiB
Vue
128 lines
3.6 KiB
Vue
|
<template>
|
||
|
|
<div class="main">
|
||
|
|
<image src="@/static/33@2x.png" mode="aspectFill" class="img" />
|
||
|
|
<div class="loginInfo">
|
||
|
|
<card>
|
||
|
|
<template #l1>
|
||
|
|
<div class="box-left">
|
||
|
|
手机号(+86)
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<template #r1>
|
||
|
|
<u--input placeholder="请输入手机号" clearable type="number" border="none" v-model="tel"
|
||
|
|
style="width: 320rpx;"></u--input>
|
||
|
|
</template>
|
||
|
|
<template #l2>
|
||
|
|
<div class="box-left">
|
||
|
|
验证码
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<template #r2>
|
||
|
|
<div class="box-right">
|
||
|
|
<u--input placeholder="请输入验证码" border="none" v-model="code">
|
||
|
|
<template #suffix>
|
||
|
|
<u-code ref="uCodeRef" @change="codeChange" seconds="60" changeText="x秒重新获取"
|
||
|
|
endText="重新获取"></u-code>
|
||
|
|
<u-button @tap="getCode" :text="tips" type="success" size="mini"></u-button>
|
||
|
|
</template>
|
||
|
|
</u--input>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
</card>
|
||
|
|
<u-button type="primary" text="登录" shape="circle" color="#000" style="width:436rpx ;"
|
||
|
|
@click="goCheck"></u-button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import card from '@/components/card/index.vue'
|
||
|
|
export default {
|
||
|
|
components: {
|
||
|
|
card
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
tips: '',
|
||
|
|
tel: null,
|
||
|
|
code: null,
|
||
|
|
uCodeRef: null
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
codeChange(text) {
|
||
|
|
console.log(text)
|
||
|
|
this.tips = text;
|
||
|
|
},
|
||
|
|
getCode() {
|
||
|
|
if (this.$refs.uCodeRef.canGetCode) {
|
||
|
|
uni.showLoading({
|
||
|
|
title: '正在获取验证码',
|
||
|
|
});
|
||
|
|
this.$request.sendCode({ telNum: this.tel }).then((res) => {
|
||
|
|
console.log(res)
|
||
|
|
if (res.status === 0) {
|
||
|
|
uni.hideLoading();
|
||
|
|
uni.$u.toast('验证码已发送');
|
||
|
|
this.$refs.uCodeRef.start();
|
||
|
|
} else {
|
||
|
|
uni.hideLoading();
|
||
|
|
uni.$u.toast(res.msg);
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
},
|
||
|
|
goCheck() {
|
||
|
|
this.$request.login({
|
||
|
|
telNum: this.tel,
|
||
|
|
code: this.code
|
||
|
|
}).then((res) => {
|
||
|
|
if (res.status === 0) {
|
||
|
|
uni.setStorageSync("token", res.data.token);
|
||
|
|
uni.setStorageSync("nickName", res.data.accountInfo.nickName);
|
||
|
|
uni.navigateTo({
|
||
|
|
url: '/pages/check/index'
|
||
|
|
})
|
||
|
|
} else {
|
||
|
|
uni.$u.toast(res.msg);
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
}
|
||
|
|
},
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.main {
|
||
|
|
width: 100%;
|
||
|
|
height: 100vh;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
background: url('@/static/bg.png');
|
||
|
|
background-size: cover;
|
||
|
|
|
||
|
|
.img {
|
||
|
|
width: 100%;
|
||
|
|
height: 1000rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.loginInfo {
|
||
|
|
height: 100%;
|
||
|
|
padding: 42rpx;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
justify-content: space-between;
|
||
|
|
|
||
|
|
.box-left {
|
||
|
|
font-size: 28rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|