material-shop-user/pages/login/login.vue

<template>
	<div class="login">
		<div class="contain">
			<div class="header">
				<div class="back">
					<tui-icon name="arrowleft" color="#000" :size="30" @click="handleBack"></tui-icon>
				</div>
				<div class="bg-box">
					<img src="./image/bg.png" alt="">
				</div>
				<div class="title-box">
					<h2>您好！</h2>
					<p>欢迎进入全球家具原材料交易平台</p>
				</div>
			</div>
			<div class="main">
				<div class="ipt">
					<tui-form ref="refLoginForm" :show-message="false">
						<tui-input v-model="loginQuery.phone" placeholder="请输入手机号"></tui-input>
						<div class="code-box">
							<tui-input v-model="loginQuery.verificationCode" :maxlength="4" placeholder="请输入验证码"></tui-input>
							<div class="code">
								<tui-countdown-verify
									ref="refLoginVerify" color="#EF530E" border-color="transparent"
									:size="28" :seconds="60" @send="handleSendVerify"
								></tui-countdown-verify>
							</div>
						</div>
						<div class="text">
							<p>还没有账号？</p>
							<span @click="go('/pages/register/index')">立即注册</span>
						</div>
					</tui-form>
				</div>
				<div class="btn-list">
					<tui-form-button color="#fff" background="#EF530E" @click="handleLogin">验证码一键登陆</tui-form-button>
					<tui-form-button
						style="display: none;" color="#EF530E"
						background="rgba(234, 91, 29, 0.1)"
					>
						密码登陆
					</tui-form-button>
				</div>
			</div>
		</div>
		<footer>
			<p>登录即代表你已阅读并同意</p>
			<span>《用户服务协议》</span>
		</footer>
	</div>
</template>

<script>
import { T_REDIRECT_TYPE, T_STORAGE_KEY } from '../../constant'
import { getVerifyCodeApi } from '../../api/anotherTFInterface'
import { CHANGE_IS_IN_MINIPROGRAM } from '../../store/modules/type'
import { getUrlCode } from '../../utils'

export default {
	name: 'Login',
	data() {
		return {
			loginType: 'verificationCode', // password,verificationCode
			loginQuery: {
				phone: '',
				verificationCode: '',
				password: ''
			}
		}
	},
	onLoad(options) {
		if (options.to) uni.setStorageSync(T_REDIRECT_TYPE, options.to)
		if (options.miniProgram) {
			this.$store.commit(`app/${CHANGE_IS_IN_MINIPROGRAM}`, !!options.miniProgram)
		}
	},
	onShow() {
		const userInfo = uni.getStorageSync(T_STORAGE_KEY)
		if (userInfo && userInfo.token) {
			uni.switchTab({
				url: '/'
			})
		} else if (this.$store.state.app.terminal === 3) {
			const code = getUrlCode().code
			if (code) this.handleWXLogin()
		}
	},
	methods: {
		handleBack() {
			uni.navigateBack()
		},
		// 获取验证码
		handleSendVerify() {
			if (!this.loginQuery.phone) {
				this.$refs.refLoginVerify.reset()
				return this.$showToast('请填写手机号')
			}
			if (!/^1[3-9]\d{9}$/.test(this.loginQuery.phone)) {
				this.$refs.refLoginVerify.reset()
				return this.$showToast('请输入正确的手机号')
			}
			getVerifyCodeApi({ phone: this.loginQuery.phone })
				.then((res) => {
					this.$refs.refLoginVerify.success()
					this.$showToast('发送成功，请注意查看手机短信')
				})
				.catch(() => {
					this.$refs.refLoginVerify.reset()
				})
		},
		// 点击登录
		handleLogin() {
			const validateRules = [ {
				name: 'phone',
				rule: ['required', 'isMobile'],
				msg: ['请输入手机号', '请输入正确的手机号']
			} ]
			let loginFilterQuery
			if (this.loginType === 'verificationCode') {
				validateRules.push({
					name: 'verificationCode',
					rule: ['required', 'isNum'],
					msg: [ '请输入验证码' ]
				})
				loginFilterQuery = {
					phone: this.loginQuery.phone,
					verificationCode: this.loginQuery.verificationCode
				}
			} else if (this.loginType === 'password') {
				validateRules.push({
					name: 'password',
					rule: ['required', 'isEnAndNo'],
					msg: ['请输入密码', '密码为8~20位英文和数字组合']
				})
				loginFilterQuery = {
					phone: this.loginQuery.phone,
					password: this.loginQuery.password
				}
			}
			this.$refs.refLoginForm
				.validate(this.loginQuery, validateRules)
				.then(() => {
					this.$store.dispatch('auth/phoneLoginRegisterAction', {
						isAfter: true,
						loginData: {
							type: 2, // 1注册，2登录
							...loginFilterQuery
						}
					})
				})
				.catch((e) => {
					this.$showToast(JSON.stringify(e.errorMsg))
				})
		},
		async handleAliPayLogin() {
			await this.$store.dispatch('auth/aliPayLoginAction', { isAfter: true })
		},
		async handleWXLogin() {
			await this.$store.dispatch('auth/wxLoginAction', { isAfter: true })
		}
	}
}
</script>

<style lang="scss" scoped>
.login {
    .contain {
        width: 100%;
        position: relative;

        .header {
            position: relative;

            .back {
                position: absolute;
                top: 80rpx;
                left: 35rpx;
            }

            .bg-box {
                width: 100%;
                height: 636rpx;

                img {
                    width: 100%;
                    height: 100%;
                    display: block;
                }
            }

            .title-box {
                position: absolute;
                left: 35rpx;
                top: 280rpx;

                h2 {
                    font-size: 42rpx;
                    font-weight: bold;
                }

                p {
                    font-size: 32rpx;
                    margin-top: 15rpx;
                }
            }
        }

        .main {
            width: 100%;
            height: 200rpx;
            position: absolute;
            left: 0;
            top: 550rpx;
            border-radius: 40rpx 40rpx 0 0;
            background-color: rgb(255, 255, 255);
            padding: 60rpx 40rpx;
            box-sizing: border-box;

            .ipt {

                .code-box {
                    position: relative;

                    .code {
                        position: absolute;
                        right: 0;
                        top: 50%;
                        transform: translateY(-50%);
                    }
                }

                .text {
                    margin-top: 30rpx;
                    display: flex;
                    font-size: 24rpx;
                    margin-left: 30rpx;

                    p {
                        color: #646466;
                    }

                    span {
                        color: #397BFF;
                    }
                }
            }

            .btn-list {
                margin-top: 120rpx;
                display: flex;
                flex-direction: column;
                gap: 50rpx;
            }
        }
    }

    footer {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        position: fixed;
        left: 0;
        bottom: 100rpx;
        font-size: 24rpx;

        p {
            color: #888889;
        }

        span {
            font-weight: 500;
        }
    }
}
</style>