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

<template>
	<view>
		<u-image src="../../static/sailun/login_bg.png" mode="widthFix"></u-image>
		<view class="content">
			<u-card padding="70" :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="20rpx 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">登录</u-button>
					</view>
					<view style="margin-top: 100rpx;display: flex;justify-content: center;">
						<view style="color: rgba(0,160,234,0.5)">
							还没有账号？
						</view>
						<view style="color: #00A0EA">
							立即注册
						</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;">
					赛轮店管家11
				</view>
				<u-line color="#0095FF" length="15%" />
			</view>
		</view>
	</view>
</template>

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

<style lang="scss" scoped>
	.content {
		position: relative;
		top: -400rpx;
	}

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