caimei-applets-store/pages/authorize/login-custom.vue

<template>
    <view class="login-custom">
        <view class="container">
            <!-- logo -->
            <image class="logo" :src="staticUrl + 'logo2022525.png'" mode="widthFix"></image>
            <!-- 登录表单 -->
            <view class="login-form">
                <view class="form-control">
                    <input class="input" type="number" placeholder="请输入手机号" v-model="mobile" maxlength="11" />
                </view>
                <tui-divider :height="dividerHeight"></tui-divider>
                <view class="form-control">
                    <input
                        class="input"
                        type="number"
                        v-model="verificationCode"
                        placeholder="请输入短信验证码"
                        maxlength="6"
                    />
                    <view class="validate-code" @click="sendVerificationCode">
                        <text v-if="!countDownStatus">获取验证码</text>
                        <text v-else v-text="countDownTip"></text>
                    </view>
                </view>
                <tui-divider :height="dividerHeight"></tui-divider>
                <view class="tip" v-text="tipMessage"></view>
            </view>
            <tui-button
                type="base"
                width="600rpx"
                height="90rpx"
                shape="circle"
                @click="submit"
                :disabled="disabled || submitStatus"
                :loading="submitStatus"
            >
                登录
            </tui-button>
        </view>
    </view>
</template>

<script>
import { getUserProfile } from '@/common/auth.js'
import { validMobile } from '@/common/validation.js'
import { sendMobileVerification } from '@/services/api/common.js'
import { mapGetters } from 'vuex'
export default {
    data() {
        return {
            dividerHeight: 50,
            tipMsg: '',
            countDownStatus: 0,
            // 用户注册登录信息
            mobile: '', // 注册/绑定手机号
            headImgUrl: '', //微信头像
            nickName: '', //微信昵称
            verificationCode: '', //短信验证码
            invitationCode: '', // 推荐人邀请码
            // 数据校验
            valide: {
                mobile: false,
                verificationCode: false
            },
            submitStatus: false
        }
    },
    watch: {
        mobile(value) {
            const valide = validMobile(value)
            this.valide.mobile = valide
            this.tipMsg = valide ? '' : '请输入合法的手机号'
        },
        verificationCode(value) {
            const valide = value.toString().length === 6
            this.valide.verificationCode = valide
            this.tipMsg = valide ? '' : '请输入6位邀请码'
        }
    },
    computed: {
        ...mapGetters(['openId']),
        tipMessage() {
            return this.tipMsg || '未注册的手机号验证后自动创建颜选美学账户'
        },
        disabled() {
            return !this.valide.mobile || !this.valide.verificationCode
        },
        countDownTip() {
            return `重新获取(${this.countDownStatus}s)`
        }
    },
    methods: {
        // 获取用户信息
        async getUserProfile() {
            this.submitStatus = true
            if (!this.headImgUrl || !this.nickName) {
                try {
                    const result = await getUserProfile()
                    this.headImgUrl = result.avatarUrl
                    this.nickName = result.nickName
                    // return result
                    console.log(result)
                } catch (e) {
                    console.log(e)
                }
            }
        },
        // 短信验证码登录
        async mobileLogin() {
            const params = {
                openId: this.openId, //微信openId
                mobile: this.mobile, // 注册/绑定手机号
                headImgUrl: this.headImgUrl, //微信头像
                nickName: this.nickName, //微信昵称
                verificationCode: this.verificationCode, //短信验证码
                invitationCode: this.invitationCode // 推荐人邀请码
            }
            try {
                await this.$store.dispatch('user/register', params)
                // 登录成功处理
                uni.redirectTo({ url: '/pages/authorize/login-auth' })
            } catch (e) {
                this.submitStatus = false
            }
        },
        // 发送验证码
        async sendVerificationCode() {
            if (this.countDownStatus > 0) return
            if (!this.valide.mobile) {
                return this.$toast.error('请输入合法手机号')
            }
            try {
                await sendMobileVerification({ mobile: this.mobile })
                this.startCountDown()
                this.$toast.success('验证码已发送')
            } catch (e) {
                console.log('发送验证码失败')
            }
        },
        // 验证码倒计时
        startCountDown() {
            this.countDownStatus = 60
            if (this.timer) clearInterval(this.timer)
            // 开启定时器
            this.timer = setInterval(() => {
                this.countDownStatus--
                if (this.countDownStatus === 0) {
                    clearInterval(this.timer)
                }
            }, 1000)
        },
        // 提交登录
        async submit() {
            await this.getUserProfile()
            const { mobile, verificationCode } = this.valide
            if (mobile && verificationCode) {
                this.mobileLogin()
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.login-custom {
    @extend .cm-flex-center;
    align-items: flex-start;
    height: 100vh;
    background-color: #fff;

    .container {
        @extend .cm-flex-center;
        flex-direction: column;
        width: 600rpx;
        margin-top: 180rpx;
        .logo {
            width: 200rpx;
            height: 200rpx;
        }
        .login-form {
            width: 100%;
            margin: 80rpx 0 25rpx;
            .form-control {
                width: 100%;
                @extend .cm-flex-between;
                font-size: 26rpx;

                .input {
                    flex: 1;
                }

                .validate-code {
                    flex: 1;
                    text-align: right;
                    color: #666;
                }
            }
            .tip {
                font-size: 24rpx;
                color: #fc464c;
                text-align: left;
            }
        }
    }
}
</style>