ZhHealth/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">ZH健康，身边的营养专家</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>