sailun-tbr-web/pages/login/index.vue

<template>
	<view>
		<view class="status_bar">
			<!-- 这里是状态栏 -->
		</view>
		<u-image src="../../static/sailun/login_bg.png" mode="widthFix"></u-image>
		<view class="content">
			<u-card padding="50" :head-border-bottom="false" :show-head="false" :show-foot="false" :border="false" box-shadow="0px 1px 10px rgba(0,0,0,0.2)"
			 border-radius="20" margin="50rpx">
				<view slot="body">
					<view style="margin-top: 20rpx;">
						<u-field v-model="tel" placeholder="请填写手机号" label-width="50">
							<u-icon slot="icon" name="account" size="36" color="#666666"></u-icon>
						</u-field>
					</view>
					<view style="margin-top: 30rpx;">
						<u-field v-model="code" placeholder="请填写验证码" label-width="50">
							<u-icon slot="icon" name="lock" size="36" color="#666666"></u-icon>
							<u-button size="mini" slot="right" type="primary" @click="getCode" shape="circle">{{codeText}}</u-button>
						</u-field>
					</view>
					<u-verification-code ref="uCode" @change="codeChange"></u-verification-code>
					<view style="margin-top: 80rpx;">
						<u-button type="primary" :ripple="true" ripple-bg-color="#99d4ff" shape="circle" @tap="$u.debounce(submit, 2000,immediate = true)"
						 :loading="loading">登录</u-button>
					</view>
					<view style="margin-top: 80rpx;display: flex;justify-content: center;">
						<view class="u-flex" @click="inregister">
							<view style="color: rgba(0,160,234,0.5)">
								还没有账号？
							</view>
							<view style="color: #00A0EA">
								立即注册
							</view>
						</view>
					</view>
				</view>
			</u-card>
		</view>
		<view class="foot">
			<view class="u-flex u-row-center u-col-center">
				<u-line color="#0095FF" length="15%" />
				<view style="margin: 0 20rpx;color:#0095FF;font-family: Source Han Sans CN;">
					赛轮店管家
				</view>
				<u-line color="#0095FF" length="15%" />
			</view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tel: '',
				code: '',
				codeText: '',
				pact: false,
				loading: false,
			}
		},
		computed: {},
		methods: {
			submit() {
				if (this.$u.test.mobile(this.tel)) {
					this.loading = true
					setTimeout(() => {
						this.$u.route({
							url: 'pages/home/index',
							type: 'switchTab'
						})
						this.loading = false
					}, 2000)
				}
			},
			inregister() {
				this.$u.route({
					url: 'pages/login/register',
				})
			},
			codeChange(text) {
				this.codeText = text;
			},
			getCode() {
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码',
					})
					setTimeout(() => {
						uni.hideLoading();
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
					}, 1000);
				} else {
					this.$u.toast('倒计时结束后再发送');
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	.status_bar {
	    height: var(--status-bar-height);
	    width: 100%;
		  background-color:#0095FF;
	}
	.content {
		position: relative;
		top: -350rpx;
	}

	.foot {
		position: fixed;
		bottom: 10rpx;
		width: 100%;
	}
</style>