117 lines
3.4 KiB
Vue
117 lines
3.4 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>
|
|
<up-input placeholder="请输入手机号" clearable type="number" border="none" v-model="tel"
|
|
style="width: 320rpx;"></up-input>
|
|
</template>
|
|
<template #l2>
|
|
<div class="box-left">
|
|
验证码
|
|
</div>
|
|
</template>
|
|
<template #r2>
|
|
<div class="box-right">
|
|
<up-input placeholder="请输入验证码" border="none" v-model="code">
|
|
<template #suffix>
|
|
<up-code ref="uCodeRef" @change="codeChange" seconds="60" changeText="x秒重新获取"
|
|
endText="重新获取"></up-code>
|
|
<up-button @tap="getCode" :text="tips" type="success" size="mini"></up-button>
|
|
</template>
|
|
</up-input>
|
|
</div>
|
|
</template>
|
|
</card>
|
|
<up-button type="primary" text="登录" shape="circle" color="#000" style="width:436rpx ;"
|
|
@click="goCheck"></up-button>
|
|
</div>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, getCurrentInstance } from 'vue';
|
|
import card from '@/components/card/index.vue'
|
|
const currentInstance = getCurrentInstance();
|
|
const { $request } =
|
|
currentInstance.appContext.config.globalProperties;
|
|
const tips = ref('');
|
|
const tel = ref(null)
|
|
const code = ref(null)
|
|
const uCodeRef = ref(null);
|
|
const codeChange = (text) => {
|
|
console.log(text)
|
|
tips.value = text;
|
|
};
|
|
const getCode = () => {
|
|
if (uCodeRef.value.canGetCode) {
|
|
uni.showLoading({
|
|
title: '正在获取验证码',
|
|
});
|
|
$request.sendCode({ telNum: tel.value }).then((res) => {
|
|
console.log(res)
|
|
if (res.status === 0) {
|
|
uni.hideLoading();
|
|
uni.$u.toast('验证码已发送');
|
|
uCodeRef.value.start();
|
|
} else {
|
|
uni.hideLoading();
|
|
uCodeRef.value.start();
|
|
uni.$u.toast(res.msg);
|
|
}
|
|
})
|
|
}
|
|
};
|
|
const goCheck = () => {
|
|
$request.login({
|
|
telNum: tel.value,
|
|
code: code.value
|
|
}).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> |