登录页面调整
This commit is contained in:
@@ -1,45 +1,14 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class='login-form-wrap'>
|
||||
<view class='title'>
|
||||
欢迎登录
|
||||
</view>
|
||||
<input v-model='tel' class='u-border-bottom' type='number' placeholder='请输入手机号'>
|
||||
<view class='u-border-bottom my-40rpx flex'>
|
||||
<input v-model='code' class='flex-1' type='number' placeholder='请输入验证码'>
|
||||
<view>
|
||||
<u-code ref='uCodeRef' @change='codeChange' />
|
||||
<u-button :text='tips' type='success' size='mini' @click='getCode' />
|
||||
</view>
|
||||
</view>
|
||||
<button :style='[inputStyle]' class='login-btn' @tap='submit'>
|
||||
登录
|
||||
</button>
|
||||
<view class='content'>
|
||||
<view class='title'>
|
||||
欢迎登录VIP顾客中心
|
||||
</view>
|
||||
|
||||
<view class='alternative'>
|
||||
<view class='password'>
|
||||
密码登录
|
||||
</view>
|
||||
<view class='issue'>
|
||||
遇到问题
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class='login-type-wrap'>
|
||||
<view class='item wechat' @click.stop='wechatLogin'>
|
||||
<view class='icon'>
|
||||
<u-icon size='35' name='weixin-fill' color='rgb(83,194,64)' />
|
||||
</view>
|
||||
微信
|
||||
<!-- <button open-type='getUserInfo' @getuserinfo='bindGetUserInfo'>确认授权</button>-->
|
||||
</view>
|
||||
<view class='item QQ'>
|
||||
<view class='icon'>
|
||||
<u-icon size='35' name='qq-fill' color='rgb(17,183,233)' />
|
||||
</view>
|
||||
QQ
|
||||
</view>
|
||||
</view>
|
||||
<image class='logo' :src='assetsUrl("ic_logo.jpeg")' />
|
||||
|
||||
<button class='login-btn' @tap='wechatLogin'>
|
||||
微信登录
|
||||
</button>
|
||||
<view class='hint'>
|
||||
登录代表同意
|
||||
<text class='link'>
|
||||
@@ -51,45 +20,10 @@
|
||||
</template>
|
||||
|
||||
<script setup lang='ts'>
|
||||
import uCode from 'uview-plus/components/u-code/u-code.vue';
|
||||
import { setToken } from '@/utils/auth';
|
||||
import { useUserStore } from '@/store';
|
||||
import { assetsUrl } from '@/utils/assets';
|
||||
|
||||
const userStore = useUserStore();
|
||||
const tel = ref<string>('18502811111');
|
||||
const code = ref<string>('1234');
|
||||
const tips = ref<string>();
|
||||
const uCodeRef = ref<InstanceType<typeof uCode> | null>(null);
|
||||
|
||||
const inputStyle = computed<CSSStyleDeclaration>(() => {
|
||||
const style = {} as CSSStyleDeclaration;
|
||||
if(tel.value && code.value) {
|
||||
style.color = '#fff';
|
||||
style.backgroundColor = uni.$u.color.warning;
|
||||
}
|
||||
return style;
|
||||
});
|
||||
|
||||
function codeChange(text: string) {
|
||||
tips.value = text;
|
||||
}
|
||||
|
||||
function getCode() {
|
||||
if(uCodeRef.value?.canGetCode) {
|
||||
// 模拟向后端请求验证码
|
||||
uni.showLoading({
|
||||
title: '正在获取验证码'
|
||||
});
|
||||
setTimeout(() => {
|
||||
uni.hideLoading();
|
||||
uni.$u.toast('验证码已发送');
|
||||
// 通知验证码组件内部开始倒计时
|
||||
uCodeRef.value?.start();
|
||||
}, 1000);
|
||||
} else {
|
||||
uni.$u.toast('倒计时结束后再发送');
|
||||
}
|
||||
}
|
||||
|
||||
function wechatLogin() {
|
||||
uni.showLoading();
|
||||
@@ -98,77 +32,49 @@ function wechatLogin() {
|
||||
uni.reLaunch({ url: '/pages/home/index' });
|
||||
});
|
||||
}
|
||||
|
||||
function submit() {
|
||||
if(uni.$u.test.mobile(tel.value)) {
|
||||
setToken('1234567890');
|
||||
uni.reLaunch({ url: '/pages/home/index' });
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
.login-form-wrap {
|
||||
margin: 80rpx auto 0;
|
||||
width: 600rpx;
|
||||
|
||||
.title {
|
||||
margin-bottom: 100rpx;
|
||||
font-size: 60rpx;
|
||||
text-align: left;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
input {
|
||||
padding-bottom: 6rpx;
|
||||
margin-bottom: 10rpx;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.tips {
|
||||
margin-top: 8rpx;
|
||||
margin-bottom: 60rpx;
|
||||
color: $u-info;
|
||||
}
|
||||
|
||||
.login-btn {
|
||||
padding: 12rpx 0;
|
||||
font-size: 30rpx;
|
||||
color: $u-tips-color;
|
||||
background-color: rgb(253 243 208);
|
||||
border: none;
|
||||
|
||||
&::after {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
.alternative {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 30rpx;
|
||||
color: $u-tips-color;
|
||||
}
|
||||
.content {
|
||||
background: #FFFFFF;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.login-type-wrap {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 350rpx 150rpx 150rpx;
|
||||
.title {
|
||||
font-size: 60rpx;
|
||||
text-align: left;
|
||||
font-weight: 500;
|
||||
margin: 50rpx;
|
||||
}
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 28rpx;
|
||||
color: $u-content-color;
|
||||
flex-direction: column;
|
||||
.logo {
|
||||
width: 300rpx;
|
||||
height: 300rpx;
|
||||
align-self: center;
|
||||
margin: 30rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.login-btn {
|
||||
padding: 12rpx 0;
|
||||
font-size: 30rpx;
|
||||
color: #FFFFFF;
|
||||
background-color: #1cbf1e;
|
||||
border: none;
|
||||
border-radius: 45rpx;
|
||||
margin: 100rpx 45rpx 0 45rpx;
|
||||
|
||||
&::after {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
.hint {
|
||||
padding: 20rpx 40rpx;
|
||||
padding: 20rpx 50rpx;
|
||||
font-size: 20rpx;
|
||||
color: $u-tips-color;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
|
||||
.link {
|
||||
color: $u-warning;
|
||||
|
||||
Reference in New Issue
Block a user