dtx_store/pages/auth/auth.vue

<template>
    <view class="content">
        <!-- tool -->
        <view class="tool-flex">
            <view class="tool-flex-item" @click="$Router.back()">
                <uni-icons type="closeempty" size="22" color="#666"></uni-icons>
            </view>
            <view class="tool-flex-item" @click="onKeyAuth()" v-if="$Route.query.keyPhone == 1">一键登录</view>
        </view>
        <!-- 欢迎使用 -->
        <view class="header">
            <view class="title">欢迎使用</view>
            <view class="sumbit">共力生态，即刻开始共力人生</view>
        </view>
        <!-- 输入手机号相关 -->
        <view class="inputs phone">
            <label class="label">+86</label>
            <input type="number" placeholder="输入您的手机号码" maxlength="11" v-model="phone" />
        </view>
        <view class="inputs sms">
            <input type="number" placeholder="输入短信验证码" maxlength="4" v-model="code" />
            <button class="sms-btn" type="default" size="mini" :disabled="phone == '' || getSms"
                @click="getPhoneCode">{{getSms ? '重新发送' + smsTime + 's': '发送验证码'}}</button>
        </view>
        <button class="btn" type="default" :disabled="phone == '' || code == ''" @click="login">登录</button>
        <!-- 用户登录注册协议 -->
        <view class="agreement">
            未注册的手机号码验证后自动创建账号，登录即表示同意接受平台
            <view @click="$Router.push({name: 'agreement', params: {name : 'secret'}})">《隐私协议》</view>
            和
            <view @click="$Router.push({name: 'agreement', params: {name : 'service'}})">《服务协议》</view>
        </view>
    </view>
</template>

<script>
    import { getSms, smsAuth } from "@/apis/interfaces/auth";
    import userAuth from "@/public/userAuth";
	
    export default {
        data() {
            return {
                phone: "",
                code: "",
                smsTime: 60,
                getSms: false,
            };
        },
        methods: {
            // 用户登录
            login() {
                smsAuth({
                    mobileNo: this.phone,
                    code: this.code,
                }).then((res) => {
                    this.$store.commit(
                        "setToken",
                        res.token_type + " " + res.access_token
                    );
                    this.$Router.back();
                }).catch((err) => {
                    uni.showToast({
                        title: err.message,
                        icon: "none",
                    });
                });
            },
            // 获取验证码
            getPhoneCode() {
                let outTime;
                getSms({
                        mobileNo: this.phone,
                    })
                    .then((res) => {
                        uni.showToast({
                            title: res,
                            icon: "none",
                        });
                        this.getSms = true;
                        outTime = setInterval(() => {
                            if (this.smsTime <= 1) {
                                this.getSms = false;
                                this.smsTime = 60;
                                clearInterval(outTime);
                            }
                            this.smsTime -= 1;
                        }, 1000);
                    })
                    .catch((err) => {
                        uni.showToast({
                            title: err.message,
                            icon: "none",
                        });
                    });
            },
            // 一键登录
            onKeyAuth() {
                const Auth = new userAuth();
                this.$Router.back();
                Auth.Login();
            },
        },
    };
</script>

<style lang="scss" scoped>
    .content {
        height: 100vh;
        width: 100vw;
        padding: $padding * 3;
        box-sizing: border-box;
        background: white;
        @extend .vertical;

        // 操作栏
        .tool-flex {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            display: flex;
            justify-content: space-between;
            padding-left: $padding * 2;
            padding-right: $padding * 2;
            background: white;
            @extend .ios-top;

            &-item {
                line-height: 90rpx;
                color: $text-gray;
                font-size: $title-size-lg;
            }
        }

        // 表单
        .inputs {
            background: $window-color;
            position: relative;
            margin-top: $margin;
            height: 90rpx;
            line-height: 90rpx;
            border-radius: 45rpx;

            input {
                width: 100%;
                height: 90rpx;
                line-height: 90rpx;
                padding: 0 $padding;
                border: none;
                box-sizing: border-box;
                font-size: $title-size-lg;
            }

            &.phone {
                padding-left: 120rpx;

                .label {
                    position: absolute;
                    left: 0;
                    top: 0;
                    width: 120rpx;
                    text-align: center;
                    border-right: solid 1rpx $border-color;
                    font-size: $title-size-lg;
                }
            }

            &.sms {
                padding-right: 200rpx;

                .sms-btn[size='mini'] {
                    width: 200rpx;
                    height: 90rpx;
                    line-height: 90rpx;
                    position: absolute;
                    top: 0;
                    right: 0;
                    padding: 0;
                    margin: 0;
                    border-radius: 0 45rpx 45rpx 0;
                    color: $main-color;
                    font-size: $title-size-lg;
                    background: $window-color;

                    &::after {
                        border: none;
                    }

                    &[disabled] {
                        color: rgba($color: $main-color, $alpha: .6);
                        background: rgba($color: $window-color, $alpha: 0);
                    }
                }
            }
        }

        // 头部
        .header {
            text-align: center;
            margin-bottom: 5vh;

            .title {
                font-size: $title-size + 10;
                font-weight: bold;
                color: $text-color;
                line-height: 70rpx;
            }

            .sumbit {
                line-height: 50rpx;
                font-size: $title-size-m;
                color: $text-gray-m;
            }
        }

        // 登录按钮
        .btn {
            margin: 0;
            margin-top: $margin*2;
            height: 90rpx;
            line-height: 90rpx;
            padding: 0;
            font-size: $title-size;
            border-radius: 45rpx;
            background: $main-color;
            color: white;
            font-weight: bold;

            &::after {
                display: none;
            }

            &[disabled] {
                background: rgba($color: $main-color, $alpha: .5);
            }
        }

        // 协议
        .agreement {
            padding-top: 5vh;
            font-size: $title-size-sm;
            color: $text-gray-m;

            view {
                color: $main-color;
                display: inline-block;
                padding: 0 10rpx;
            }
        }
    }
</style>