im/pages/common/login/index.vue

<template>
    <view class="page_container">
        <view class="login">
            <view class="logo">
                <img :src="cdn(config.app_logo)" alt="" />
                <view class="title">欢迎使用{{ config.name }}</view>
            </view>
            <u-tabs v-if="1 == 2" :list="list" :current="active" @click="click"></u-tabs>
            <u-form class="loginForm" labelPosition="top" :model="loginInfo" :labelStyle="{
                fontSize: '14px',
                marginTop: '20rpx',
                width: 'max-content',
            }" ref="loginForm">
                <u-form-item v-if="active === 0" label="" prop="phoneNumber">
                    <u-input v-model="loginInfo.phoneNumber" border="surround" placeholder="请输入手机号码" clearable>
                        <view slot="prefix" class="phoneNumber_areacode" @click="showPicker">
                            <text class="areacode_content">+{{ loginInfo.region }}</text>
                            <u-icon class="arrow_down" name="arrow-down"></u-icon>
                        </view>
                    </u-input>
                </u-form-item>
                <u-form-item v-if="active === 1" label="" prop="email">
                    <u-input v-model="loginInfo.email" border="surround" placeholder="请输入您的邮箱" clearable>
                    </u-input>
                </u-form-item>
                <u-form-item v-if="active > 1 || isPwdLogin" label="" prop="password">
                    <u-input v-model="loginInfo.password" border="surround" placeholder="请输入密码" :password="!eying"
                        clearable>
                        <u-icon @click="updateEye" slot="suffix" :name="eying ? 'eye-off' : 'eye'">
                        </u-icon>
                    </u-input>
                </u-form-item>
                <u-form-item v-if="active <= 1 && !isPwdLogin" label="" prop="verificationCode">
                    <u-input v-model="loginInfo.verificationCode" border="surround" placeholder="请输入验证码">
                        <view class="code_btn" slot="suffix" @click="getCode">{{ count !== 0 ? `${count} s` : "获取验证码" }}
                        </view>
                    </u-input>
                </u-form-item>
            </u-form>
            <view v-if="active <= 1" class="other">
                <text @click="toRegisterOrForget(false)">忘记密码</text>
                <text class="forget" @click="toggleLoginMethod">{{ isPwdLogin ? "验证码登录" : "密码登录" }}</text>
            </view>
            <view class="login-btn">
                <u-button :loading="loading" type="primary" @click="startLogin" :disabled="!canLogin">
                    登录
                </u-button>
            </view>

            <AreaPicker ref="AreaPicker" @chooseArea="chooseArea" />
        </view>

        <view class="action_bar">
            <text>还没有账号？<text class="register" @click="toRegisterOrForget(true)">立即注册</text></text>
            <text style="margin-bottom: 16rpx" @click="copy">{{ appversion }}</text>
        </view>
    </view>
</template>

<script>
import { mapGetters } from "vuex";
import { v4 as uuidv4 } from "uuid";
import md5 from "md5";
import { businessLogin, businessSendSms } from "@/api/login";
import AreaPicker from "@/components/AreaPicker";
import { checkLoginError } from "@/util/common";
import { SmsUserFor } from "@/constant";
import IMSDK from "openim-uniapp-polyfill";
import util from "@/util/index.js"
import config from "@/common/config";
import {getDbDir,toastWithCallback} from "@/util/common.js";

let timer;

export default {
    components: {
        AreaPicker,
    },
    data() {
        return {
            list: [{
                name: '手机号',
            }, {
                name: '邮箱',
            }],
            loginInfo: {
                email: "",
                phoneNumber: "",
                password: "",
                region: "86",
                verificationCode: "",
            },
            appversion: 0,
            eying: false,
            loading: false,
            count: 0,
            isPwdLogin: true,
            active: 0,
        };
    },
    computed: {
        ...mapGetters(["config"]),
        canLogin() {
            return (
                (this.loginInfo.phoneNumber || this.loginInfo.email) &&
                (this.loginInfo.password || this.loginInfo.verificationCode)
            );
        },
    },
    onLoad(options) {
        const _this = this;
		// #ifdef APP
        plus.runtime.getProperty(plus.runtime.appid, (inf) => {
            //console.log(inf);
            _this.appversion = inf.version
        });
        // if(options.isRedirect){
        // 	plus.navigator.closeSplashscreen();
        // }
		// #endif
        this.init();
    },
    methods: {
		...util,
        click({ index }) {
            this.active = index;
        },
        copy() {
            uni.setClipboardData({
                showToast: false,
                data: version,
                success: function () {
                    uni.showToast({
                        icon: "none",
                        title: "复制成功",
                    });
                },
            });
        },
        init() {
            this.loginInfo.region = uni.getStorageSync("last_areaCode") || "86";
            this.loginInfo.email = uni.getStorageSync("last_email") || "";
            this.loginInfo.phoneNumber = uni.getStorageSync("last_phoneNumber") || "";

            if (process.env.NODE_ENV == 'development') {
                this.loginInfo.email = "commiu@outlook.com";
                this.loginInfo.password = "qwe123";
            }
			//plus.navigator.closeSplashscreen();
        },
        updateEye() {
            this.eying = !this.eying;
        },
        toRegisterOrForget(isRegister) {
            uni.$u.route("/pages/common/registerOrForget/index", {
                isRegister,
            });
        },
        async startLogin() {
			this.loading = true;
			this.saveLoginInfo();
			let data = {};
			try {
				data = await businessLogin({
					mobile: this.loginInfo.phoneNumber,
					email: this.loginInfo.email,
					region: `+${this.loginInfo.region}`,
					password: this.isPwdLogin ? md5(this.loginInfo.password) : "",
					platform: uni.$u.os(),
					type: this.active === 0 ? 'mobile' : 'email',
					code: this.loginInfo.verificationCode,
				});
				const { imToken, userID } = data;
				this.saveLoginProfile(data);
				this.$store.commit("user/SET_AUTH_DATA", data);
				this.loginInfo.password = "";
				// #ifdef APP
				// await IMSDK.asyncApi(IMSDK.IMMethods.Login, uuidv4(), {
				//     userID,
				//     token: imToken,
				// });
				plus.runtime.restart();
				// #endif
			} catch (err) {
				console.error(err);
				uni.$u.toast(checkLoginError(err));
			}
			this.loading = false;
        },
        saveLoginProfile(data) {
            const { imToken, token, userID } = data;
            uni.setStorage({ key: "IMUserID", data: userID, });
            uni.setStorage({ key: "IMToken", data: imToken, });
            uni.setStorage({ key: "BusinessToken", data: token, });
        },
        saveLoginInfo() {
            uni.setStorage({key: "last_areaCode",data: this.loginInfo.region,});
            uni.setStorage({key: "last_phoneNumber",data: this.loginInfo.phoneNumber,});
            uni.setStorage({key: "last_email",data: this.loginInfo.email,});
        },
        showPicker() {
            this.$refs.AreaPicker.init();
        },
        chooseArea(areaCode) {
            this.loginInfo.region = areaCode;
        },
        toggleLoginMethod() {
            this.isPwdLogin = !this.isPwdLogin;
        },
        getCode() {
            if (!this.loginInfo.phoneNumber) {
                uni.$u.toast("请先输入手机号！");
                return;
            }

            if (this.count !== 0) {
                return;
            }

			const options = {
				mobile: this.loginInfo.phoneNumber,
				email: this.loginInfo.email,
				region: `+${this.loginInfo.region}`,
				event: "login",
				type:"mobile"
			};
            businessSendSms(options)
                .then(() => {
                    uni.$u.toast("验证码已发送！");
                    this.startCount();
                })
                .catch((err) => {
                    console.error(err);
                    uni.$u.toast(checkLoginError(err));
                });
        },
        startCount() {
            if (timer) {
                clearInterval(timer);
            }
            this.count = 60;
            timer = setInterval(() => {
                if (this.count > 0) {
                    this.count--;
                }
            }, 1000);
        },
    },
};
</script>
<style lang="scss" scoped>
.page_container {
    justify-content: space-between;

    .login {
        color: #0c1c33;
        padding: 10vh 80rpx 0;
        background: linear-gradient(180deg,
                rgba(0, 137, 255, 0.1) 0%,
                rgba(255, 255, 255, 0) 100%);

        .title {
            font-size: 34rpx;
            font-weight: 700;
            margin-bottom: 64rpx;
            // color: $u-primary;
        }

        .logo {
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;

            img {
				border-radius: 32rpx;
                width: 160rpx;
                height: 160rpx;
            }
        }

        .loginType {
            margin-bottom: 36rpx;

            &-item {
                margin-right: 68rpx;
                font-size: 28rpx;
                font-weight: 400;
                border-radius: 4rpx;
                padding: 2rpx 0;
            }

            &-active {
                color: $u-primary;
                border-bottom: 4rpx solid $u-primary;
            }
        }

        .loginForm {
            .phoneNumber-code {
                display: flex;
                align-items: center;
                font-size: 36rpx;
                border-right: 2rpx solid #d8d8d8;
                margin-right: 58rpx;

                .code {
                    font-weight: 400;
                    margin-right: 20rpx;
                }

                .icon {
                    margin-right: 40rpx;
                }
            }

            .eye {
                .image {
                    width: 44rpx;
                    height: 32rpx;
                }
            }

            .code_btn {
                color: $u-primary;
            }
        }

        .other {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            margin: 8rpx;
            font-size: 24rpx;
            font-weight: 400;
            color: $u-tips-color;

            .forget {
                color: $u-primary;
            }
        }

        .login-btn {
            margin-top: 8vh;
        }

        .agreement {
            display: flex;
            align-items: flex-start;
            margin-top: 36rpx;

            .detail {
                font-size: 24rpx;
                font-weight: 400;
                color: $u-primary;
            }
        }
    }

    .action_bar {
        display: flex;
        justify-content: center;
        flex-direction: column;
        text-align: center;
        margin-bottom: 96rpx;
        font-size: 24rpx;
        font-weight: 400;
        color: $u-tips-color;

        .register {
            color: $u-primary;
        }

        .tap_line {
            width: 1px;
            margin: 0 24rpx;
            background-color: #999;
            transform: scale(0.5, 0.8);
        }
    }
}
</style>