retail-app/pages/login/index.vue

<template>
    <view class="login" :style="{background:'url('+ bannerImage +')'}">
        <view><nav-bar title="none" icon="none" background="transparent" border-color="transparent" ></nav-bar></view>
        <view class="logo"><re-image imgSrc="/retail/login/img_logo_login.png" width="442" height="130"></re-image></view>
        <view class="content">
            <view class="form">
                <view class="input-wrapper">
                    <view class="label">手机号码</view>
                    <view class="input-box flex aic"><u-input maxlength="11"  v-model="phone" fontSize="32rpx"
                        border="none" type="text" placeholder="请输入手机号" ></u-input></view>
                </view>
                <view class="input-wrapper">
                    <view class="label">验证码</view>
                    <view class="input-box flex aic">
                        <u-input maxlength="6" v-model="code" fontSize="30rpx" border="none" type="text" placeholder="请输入验证码"></u-input>
                        <u-code change-text="重新获取(Xs)" startText="获取验证码" endText="重新获取" @end="end" @start="start" ref="uCode"
                            @change="codeChange"></u-code>
                        <view :class="{'getting': getCoding}" class="get-code-btn" @tap="getCode">{{tips}}</view>
                    </view>
                </view>
				<view class="btn">
					<u-button>登录</u-button>
				</view>
            </view>
        </view>
    </view>
</template>
<script>
	import {
		toRpx
	} from '@/utils/calculate.js'
	import defaultConfig from '@/config/default.js'
    import {
		navigateTo,
		phoneValidate,
		filterPhone,
		openFilterPhone
	} from '@/utils/utils.js'
	export default {
		components: {},
		computed: {
			statusBarHeight() {
				return this.$store.state.info.systemInfo?.statusBarHeight
			},
		},
		data() {
			return {
				bannerImage: defaultConfig.ossImgUrl + '/retail/login/login-bg.png',
				navBarHeight: uni.getStorageSync('navBarHeight'),
                phone:'',
                code:'',
                tips:'',
				getCoding: false,
			}
		},
		onLoad() {

		},
        computed:{
            canClick() {
				return this.phone.length && this.code.length
			},
			ftPhone() {
				return (v) => {
					return filterPhone(v)
				}
			}
        },
		methods: {
            bindPhone() {
				console.log('绑定成功')
			},
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				if (!this.phone) {
					uni.showToast({
						title: '请先输入手机号',
						icon: 'none'
					})
					return
				}
				if (!phoneValidate(openFilterPhone(this.phone))) {
					uni.showToast({
						title: '手机号格式不正确',
						icon: 'none'
					})
					return
				}
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码',
						icon: 'none'
					})
					setTimeout(() => {
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						uni.$u.toast('验证码已发送');
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
					}, 1000);
				}
			},
			end() {
				this.getCoding = false
			},
			start() {
				this.getCoding = true
			}
		},
		mounted() {

		},
	}
</script>

<style lang="scss" scoped>
	.login {
		background-repeat: no-repeat !important;
		background-size: 100% auto !important;
		width: 100%;
		position: absolute;
		top: 0;
		bottom: 0;
		display: flex;
		flex-direction: column;
        .logo{
            padding: 48rpx 0 0 48rpx;
        }
        .content{
            flex-grow: 1;
            padding: 58rpx 32rpx 92rpx;
            .form{
				height: 100%;
                background: #fff;
                padding: 40rpx 32rpx;
                border-radius: 24rpx;
                .input-wrapper {
                    background:#fff;
                    padding-bottom: 22rpx;
                    font-size: 36rpx;
                    margin-bottom: 50rpx;
                    .label{
                        font-weight: 500;
                        font-size: 32rpx;
                        color: #171717;
						margin-bottom: 20rpx;
                    }
					.input-box{
						color: #171717;
						height: 84rpx;
						background: #F3F7FF;
						border-radius: 42rpx;
						padding: 0 32rpx;
						font-size: 28rpx
					}
                    .icon-pad {
                        padding: 10rpx;
                    }
                    
                }
				.btn{
					margin-top: 127rpx;
					button{
						color: #fff;
						background: linear-gradient( 140deg, #FF8500 0%, #FFA600 100%);
						border-radius: 48rpx;
					}
				}
            }
            
        }
    }
</style>