112 lines
2.9 KiB
Plaintext
112 lines
2.9 KiB
Plaintext
<template>
|
|
<view class="home">
|
|
<view class=""
|
|
style=" margin-top: 300rpx; display: flex; flex-direction: column; justify-content: center; align-items: center;">
|
|
<image :src="Service.GetIconImg('/static/dele/logo.png')" style="width: 150rpx; height: 150rpx; "
|
|
mode=""></image>
|
|
<view class="" style="font-size: 36rpx; font-weight: 600; ">
|
|
美味到家
|
|
</view>
|
|
</view>
|
|
<view class="" style="margin: 30rpx 30rpx;">
|
|
<view class="" style="font-size: 34rpx; font-weight: 600; ">
|
|
欢迎登陆
|
|
</view>
|
|
<view class="" style="font-size: 28rpx; margin-top: 20rpx; ">
|
|
手机号登录,安全又便捷
|
|
</view>
|
|
|
|
<view class="" style="margin-top: 30rpx;">
|
|
<up-input v-model="login.phone" type="number" shape='circle'
|
|
:customStyle="{'padding':'20rpx 30rpx','font-size':'32rpx'}" placeholder="请输入手机号" clearable='true'
|
|
border="surround"></up-input>
|
|
</view>
|
|
|
|
<view class=""
|
|
style=" display: flex; align-items: center; justify-content: space-between; margin-top: 30rpx; border: 1rpx solid #dadbde; box-sizing: border-box; padding: 20rpx 30rpx; border-radius: 200rpx; ">
|
|
<up-code-input v-model="login.code" mode="line" size='24'></up-code-input>
|
|
<view class="wrap">
|
|
<up-toast ref="uToastRef"></up-toast>
|
|
<up-code :seconds="seconds" @end="end" @start="start" ref="uCodeRef" @change="codeChange"></up-code>
|
|
<view @click="getCode">{{tips}}</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="" style="text-align: center; color: #888; margin-top: 30rpx; ">
|
|
登录即代表同意
|
|
<text style="color: var(--nav-banbacor);">《用户协议》</text>
|
|
和
|
|
<text style="color: var(--nav-banbacor);">《隐私政策》</text>
|
|
</view>
|
|
<view class="" style="text-align: center; margin-top: 20rpx;">
|
|
新用户?系统将自动为您注册
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { onShow, onLoad } from "@dcloudio/uni-app";
|
|
import { Service } from "@/Service/Service"
|
|
import { ref } from "vue";
|
|
|
|
let login = ref({
|
|
phone: '',
|
|
code: ''
|
|
})
|
|
|
|
const tips = ref('');
|
|
const seconds = ref(60);
|
|
const uCodeRef = ref(null);
|
|
|
|
|
|
onLoad(() => {
|
|
|
|
});
|
|
|
|
onShow(() => {
|
|
|
|
});
|
|
|
|
const codeChange = (text) => {
|
|
tips.value = text;
|
|
};
|
|
|
|
|
|
const getCode = () => {
|
|
if (uCodeRef.value.canGetCode) {
|
|
// 模拟向后端请求验证码
|
|
uni.showLoading({
|
|
title: '正在获取验证码',
|
|
});
|
|
setTimeout(() => {
|
|
uni.hideLoading();
|
|
// 这里此提示会被start()方法中的提示覆盖
|
|
Service.Msg('验证码已发送')
|
|
// 通知验证码组件内部开始倒计时
|
|
uCodeRef.value.start();
|
|
}, 2000);
|
|
} else {
|
|
Service.Msg('倒计时结束后再发送')
|
|
}
|
|
};
|
|
|
|
|
|
const end = () => {
|
|
console.log('倒计时结束');
|
|
};
|
|
|
|
const start = () => {
|
|
console.log('倒计时开始');
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.home {
|
|
width: 100vw;
|
|
height: 100vh;
|
|
background: linear-gradient(to bottom, var(--nav-mian), #fff 40%);
|
|
overflow: hidden;
|
|
}
|
|
</style> |