98 lines
2.8 KiB
Vue
98 lines
2.8 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"></up-input>
|
||
|
|
</template>
|
||
|
|
<template #l2>
|
||
|
|
<div class="box-left">
|
||
|
|
验证码
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<template #r2>
|
||
|
|
<div class="box-right">
|
||
|
|
<up-input placeholder="请输入验证码" border="none">
|
||
|
|
<template #suffix>
|
||
|
|
<up-code ref="uCodeRef" @change="codeChange" :seconds="60" changeText="60秒重新获取"
|
||
|
|
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, watch } from 'vue';
|
||
|
|
import card from '@/components/card/index.vue'
|
||
|
|
|
||
|
|
const tips = ref('');
|
||
|
|
const uCodeRef = ref(null);
|
||
|
|
const codeChange = (text) => {
|
||
|
|
tips.value = text;
|
||
|
|
};
|
||
|
|
const getCode = () => {
|
||
|
|
console.log(uCodeRef.canGetCode)
|
||
|
|
if (uCodeRef.canGetCode) {
|
||
|
|
// 模拟向后端请求验证码
|
||
|
|
uni.showLoading({
|
||
|
|
title: '正在获取验证码',
|
||
|
|
});
|
||
|
|
setTimeout(() => {
|
||
|
|
uni.hideLoading();
|
||
|
|
// 这里此提示会被start()方法中的提示覆盖
|
||
|
|
uni.$u.toast('验证码已发送');
|
||
|
|
// 通知验证码组件内部开始倒计时
|
||
|
|
uCodeRef.start();
|
||
|
|
}, 2000);
|
||
|
|
} else {
|
||
|
|
uni.$u.toast('倒计时结束后再发送');
|
||
|
|
}
|
||
|
|
};
|
||
|
|
const goCheck = () => {
|
||
|
|
uni.navigateTo({
|
||
|
|
url: '/pages/check/index'
|
||
|
|
})
|
||
|
|
}
|
||
|
|
</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>
|