guosen-ldt-shop/pages/login/login.vue

<template>
	<view style="position: relative;">
		<view class="bg"></view>
		<view class="bg1"></view>
		<view class="back" @click="$back">
			<u-icon name="arrow-left" size="50" color="#919191"></u-icon>
		</view>
		
		<view class="content">
			<view class="top">
				<view class="logo">
					<image src="@/static/icon/logo.png" mode=""></image>
				</view>
				<view class="title">
					<text>欢迎进入联兑通</text>
					<text>输入手机号快捷登录</text>
				</view>
			</view>
			
			<view  style="width: 76%;margin-top: 80rpx;">
				<u-form >
					<u-form-item :rightIconStyle="{color: '#888', fontSize: '32rpx'}"  label-position="top" label="手机号" prop="phone" label-width="150">
						<view style="border-bottom: 1rpx solid #DDDDDD;">
							<u-input :border="false" placeholder="请输入手机号" v-model="phone" type="number"></u-input>
						</view>
					</u-form-item>
					<u-form-item   label-position="top" label="验证码" prop="code" label-width="150">
						<view class="flex" style="border-bottom: 1rpx solid #DDDDDD;">
							<u-input style="width: 100%;" :border="false" placeholder="请输入验证码" v-model="code" type="text"></u-input>
							<u-button shape="circle" slot="right" :custom-style="customStyle" size="mini" @click="getCode">{{codeTips}}</u-button>
						</view>
					</u-form-item>
				</u-form>
			</view>
			
			<view  style="width: 86%;margin-top: 80rpx;">
				<view @click="login" class="btn cu-btn round" style="width:100%;height: 90rpx;font-size: 34rpx;">
					立即登录
				</view>
				<view class="center" style="margin-top: 100rpx;">
					<text style="color: #949494;">登录即代表已阅读并同意</text>
					<text style="color: #0000ff;">《软件服务协议》</text>
				</view>
			</view>
		</view>
		
		<u-verification-code seconds="60" ref="uCode" @change="codeChange"></u-verification-code>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				customStyle:{
					'backgroundColor':'#d18c42',
					'color':'#ffffff'
				},
				codeTips: '',
				phone:'',
				code:'',
			}
		},
		methods: {
			login(){
				uni.reLaunch({
					url:"/pages/index/index"
				})
			},
			codeChange(text) {
				this.codeTips = text;
			},
			// 获取验证码
			getCode() {
				if(this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码',
						mask: true
					})
					setTimeout(() => {
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						this.$u.toast('验证码已发送');
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
					}, 2000);
				} else {
					this.$u.toast('倒计时结束后再发送');
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	$color:#d18c42;
	
	page{
		background-color: #FFFFFF;
	}
	
	.btn{
		background-color: $color;
		color:#FFFFFF;
	}
	
	.bg{
		z-index: 99;
		height: 440rpx;
		width: 440rpx;
		position: absolute;
		right: -240rpx;
		top: -240rpx;
		background-color: #d18c42;
		border-radius: 50%;
		box-shadow: 0rpx 0rpx 50rpx #c5803b;
	}
	
	.bg1{
		height: 500rpx;
		width: 500rpx;
		position: absolute;
		right: -240rpx;
		top: -240rpx;
		background-color: #d18c42;
		border-radius: 50%;
		box-shadow: #c6813b;
	}
	
	.back{
		position: absolute;
		top: var(--status-bar-height);
		left: 20rpx;
		padding-top: var(--status-bar-height);
	}
	
	.content{
		height: 90vh;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		
		.top{
			display: flex;
			.logo{
				background-color: $color;
				width: 130rpx;
				height: 130rpx;
				border-radius: 30rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-right: 20rpx;
				
				image{
					width: 90rpx;
					height: 90rpx;
				}
			}
			
			.title{
				margin-right: 20rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: flex-start;
				text-align: left;
				
				text:first-child{
					font-weight: 800;
					font-size: 50rpx;
					color: #000;
					margin-bottom: 20rpx;
				}
				
				text:last-child{
					font-size: 28rpx;
					color: #7f7f7f;
				}
			}
			
			
		}
	}
</style>