material-shop-user/pages/register/index.vue

<template>
	<div class="register">
		<div class="back">
			<tui-icon name="arrowleft" color="#000" :size="30" @click="handleBack"></tui-icon>
		</div>
		<div class="title">
			<h2>填写注册信息</h2>
			<p>请仔细填写以下信息，以免后期登陆异常</p>
		</div>
		<div class="ipt">
			<tui-input v-model="registerQuery.phone" placeholder="请输入手机号码"></tui-input>
			<div class="code-box">
				<tui-input v-model="registerQuery.verificationCode" :maxlength="4" placeholder="请输入验证码"></tui-input>
				<div class="code">
					<tui-countdown-verify
						ref="refRegisterVerify" color="#EF530E" border-color="transparent"
						:size="28" :seconds="60" @send="handleSendVerify"
					></tui-countdown-verify>
				</div>
			</div>
		</div>
		<div class="btn-list">
			<tui-form-button
				:disabled="!(registerQuery.phone && registerQuery.verificationCode)" color="#fff" :background="!!(registerQuery.phone && registerQuery.verificationCode) ? '#EF530E' : '#C6C7CB'"
				@click="addAcount"
			>
				确定
			</tui-form-button>
		</div>
		<footer>
			<p>登录即代表你已阅读并同意</p>
			<span>《用户服务协议》</span>
		</footer>
		<tui-modal :show="hasRegister" custom fade-i :button="[]" @cancel="hasRegister = false">
			<view style="padding: 28upx 0;text-align: center;">
				<image style="width: 240rpx;height: 144rpx;" src="../../static/images/icon/acount.png"></image>
				<view
					style="margin-top: 46rpx;font-size: 36rpx;font-weight: normal;line-height: 52rpx;text-align: center;color: #222229;"
				>
					注册完成
				</view>
				<view
					style="margin-top: 18rpx;font-size: 28fpx;font-weight: 350;line-height: 40fpx;text-align: center;color: #888889;"
				>
					您已完成注册，请前往首页
				</view>
				<button
					style="width: 484rpx;height: 80rpx;border-radius: 8rpx;background: #EF530E;color: #fff;line-height: 80rpx;margin-top: 80rpx;"
					@click="$switchTab('/')"
				>
					立即跳转
				</button>
			</view>
		</tui-modal>
	</div>
</template>

<script>
import { updatePhoneLoginRegisterApi, getVerifyCodeApi } from '../../api/anotherTFInterface'

export default {
	name: 'Register',
	data() {
		return {
			registerQuery: {
				password: '',
				passwordAgain: '',
				phone: '',
				verificationCode: ''
			},
			hasRegister: false
		}
	},
	methods: {
		// 获取验证码
		handleSendVerify() {
			if (!this.registerQuery.phone) {
				this.$refs.refRegisterVerify.reset()
				return this.$showToast('请填写手机号')
			}
			if (!/^1[3-9]\d{9}$/.test(this.registerQuery.phone)) {
				this.$refs.refRegisterVerify.reset()
				return this.$showToast('请输入正确的手机号')
			}
			getVerifyCodeApi({ phone: this.registerQuery.phone })
				.then((res) => {
					this.$refs.refRegisterVerify.success()
					this.$showToast('发送成功，请注意查看手机短信')
				})
				.catch(() => {
					this.$refs.refRegisterVerify.reset()
				})
		},

		addAcount() {
			this.$refs.form.validate(this.registerQuery, [
				{
					name: 'phone',
					rule: ['required', 'isMobile'],
					msg: ['请输入手机号', '请输入正确的手机号']
				},
				{
					name: 'verificationCode',
					rule: [ 'required' ],
					msg: [ '请输入验证码' ]
				}
				// {
				// 	name: 'password',
				// 	rule: ['required', 'isEnAndNo'],
				// 	msg: ['请输入密码', '密码为8~20位英文和数字组合']
				// },
				// {
				// 	name: 'passwordAgain',
				// 	rule: ['required', 'isSame:password'],
				// 	msg: ['请再次确认密码', '两次密码不一致']
				// }
			])
				.then(() => {
					updatePhoneLoginRegisterApi({
						type: 1,
						phone: this.registerQuery.phone,
						verificationCode: this.registerQuery.verificationCode,
						password: this.registerQuery.password
					}).then((res) => {
						this.$store.dispatch('auth/LoginAfterAction', { type: 'phone', data: res.data })
						this.hasRegister = true
					})
				})
				.catch((e) => {
					this.$showToast(JSON.stringify(e.errorMsg))
				})
		}
	}
}
</script>

<style lang="scss" scoped>
.register {
    position: relative;
    padding: 190rpx 65rpx 0;
    box-sizing: border-box;

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

    .title {
        padding-left: 25rpx;

        h2 {
            font-size: 64rpx;
            font-weight: normal;
        }

        p {
            margin-top: 10rpx;
        }
    }

    .ipt {
        margin-top: 80rpx;

        .code-box {
            margin-top: 40rpx;
            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: 80rpx;
    }

    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;
        }
    }

    .tui-modal-custom {
        padding: 40rpx 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 30rpx;
        position: relative;

        .img-box {
            width: 200rpx;
            height: 120rpx;

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

        .tui-modal-custom-text {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            gap: 30rpx;
            margin-bottom: 50rpx;
        }
    }
}
</style>