SmartStorage/pages/login/login.vue

<template>
    <view>
        <view class="upper-bgd">
            <view class="logo">
                <image src="../../static/logo.png" mode=""></image>
            </view>
            <view class="tit"> 智慧仓储管理平台 </view>
        </view>
        <view class="switch-log">
            <view
                :class="[{ active: switchStatus == 1 }]"
                @click="switchUpper(1)">
                账号登录
            </view>
            <view
                :class="[{ active: switchStatus == 2 }]"
                @click="switchUpper(2)">
                手机登录
            </view>
        </view>
        <view class="login-area">
            <uni-forms
                v-show="switchStatus == 1"
                ref="accountForm"
                :modelValue="accountFormData"
                :rules="accountRules"
                class="form-area"
                label-position="top">
                <uni-forms-item
                    name="username"
                    required
                    label="用户名"
                    label-width="100">
                    <uni-easyinput
                        placeholder="请输入用户名称"
                        maxlength="60"
                        v-model="accountFormData.username"></uni-easyinput>
                </uni-forms-item>
                <uni-forms-item
                    name="password"
                    required
                    label="密码"
                    label-width="100">
                    <uni-easyinput
                        type="password"
                        placeholder="请输入密码"
                        maxlength="60"
                        v-model="accountFormData.password"></uni-easyinput>
                </uni-forms-item>
                <text
                    style="
                        width: 100%;
                        display: flex;
                        justify-content: flex-end;
                        color: #3689ff;
                        font-size: 14px;
                    "
                    @click="forgetPwd">
                    忘记密码
                </text>
                <button class="submit-btn" @click="accountSubmit">登录</button>
            </uni-forms>
            <uni-forms
                v-show="switchStatus == 2"
                ref="veriForm"
                :modelValue="veriFormData"
                :rules="veriRules"
                class="form-area"
                label-position="top">
                <uni-forms-item
                    name="phone"
                    required
                    label="手机号码"
                    label-width="100">
                    <uni-easyinput
                        placeholder="请输入手机号码"
                        type="number"
                        v-model="veriFormData.phone"
                        maxlength="11"></uni-easyinput>
                </uni-forms-item>
                <uni-forms-item
                    name="code"
                    required
                    label="验证码"
                    label-width="100">
                    <uni-easyinput
                        type="number"
                        maxlength="6"
                        placeholder="请输入验证码"
                        v-model="veriFormData.code"></uni-easyinput>
                    <button
                        class="count-down"
                        :disabled="sendDisabled"
                        @click="sendVeriCode"
                        style="font-size: 14px">
                        <span v-if="countDownStatus == 0">发送验证码</span>
                        <span v-if="countDownStatus == 1">
                            {{ countDown }}s
                        </span>
                    </button>
                </uni-forms-item>
                <button class="submit-btn" @click="veriSubmit">登录</button>
            </uni-forms>
        </view>
        <u-loading-page
            :loading="showLoading"
            color="#000"
            loading-text="登录中,请稍后..."></u-loading-page>
        <u-loading-page
            :loading="showDownload"
            color="#000"
            :loading-text="`下载中,请稍后...${percent}%`"></u-loading-page>
    </view>
</template>

<script>
    import { authPath, publicPath, systemPath } from "../../public";
    import store from "../../store/user";
    export default {
        data() {
            return {
                showLoading: false,
                showDownload: false,
                accountFormData: {
                    username: "",
                    password: "",
                },
                veriFormData: {
                    phone: "",
                    code: "",
                },
                switchStatus: 1,
                countDown: 60,
                countDownStatus: 0,
                sendDisabled: false,
                givenCode: "",
                accountRules: {
                    username: {
                        rules: [
                            {
                                required: true,
                                errorMessage: "请输入用户名称！",
                            },
                        ],
                    },
                    password: {
                        rules: [
                            {
                                required: true,
                                errorMessage: "请输入密码！",
                            },
                        ],
                    },
                },
                veriRules: {
                    phone: {
                        rules: [
                            {
                                required: true,
                                errorMessage: "请输入手机号码！",
                            },
                        ],
                    },
                    code: {
                        rules: [
                            {
                                required: true,
                                errorMessage: "请输入验证码！",
                            },
                        ],
                    },
                },
                percent: "",
            };
        },
        methods: {
            switchUpper(count) {
                this.switchStatus = count;
            },
            forgetPwd() {
                console.log("忘记密码");
            },
            sendVeriCode() {
                let that = this;
                let phoneReg = /^(?:(?:\+|00)86)?1[3-9]\d{9}$/;
                if (!phoneReg.test(that.veriFormData.phone)) {
                    uni.showToast({
                        icon: "none",
                        title: "请输入正确格式的手机号！",
                    });
                } else {
                    that.$api.login
                        .codeLogin({
                            phone: String(that.veriFormData.phone),
                        })
                        .then((res) => {
                            console.log(res);
                        })
                        .catch((err) => {
                            console.log(err);
                        });
                    that.countDownStatus = 1;
                    that.sendDisabled = true;
                    let timeInterval = setInterval(() => {
                        that.countDown -= 1;
                    }, 1000);
                    let timeOut = setTimeout(() => {
                        that.countDownStatus = 0;
                        that.countDown = 60;
                        that.sendDisabled = false;
                        clearInterval(timeInterval);
                        clearTimeout(timeOut);
                    }, 1000 * 60);
                }
            },
            veriSubmit() {
                let that = this;
                that.$refs.veriForm.validate().then((formRes) => {
                    that.showLoading = true;
                    console.log(formRes);
                    that.$api.login
                        .checkCode(formRes)
                        .then((res) => {
                            console.log(res);
                            if (res.data.code == 200) {
                                uni.setStorageSync(
                                    "userInfo",
                                    res.data.data.login_user
                                );
                                uni.setStorageSync(
                                    "token",
                                    res.data.data.access_token
                                );
                                uni.setStorageSync(
                                    "roles",
                                    res.data.data.login_user.roles
                                );
                                uni.setStorageSync(
                                    "deptId",
                                    res.data.data.login_user.sysUser.dept.deptId
                                );
                                uni.showToast({
                                    icon: "none",
                                    title: "登录成功！",
                                    success: () => {
                                        that.showLoading = false;
                                        uni.switchTab({
                                            url: "/pages/index/index",
                                        });
                                    },
                                });
                            } else {
                                uni.showToast({
                                    icon: "none",
                                    title: res.data.msg,
                                    success: () => {
                                        that.showLoading = false;
                                    },
                                });
                            }
                        })
                        .catch((err) => {
                            console.log(err);
                        });
                });
            },
            accountSubmit() {
                let that = this;
                that.$refs.accountForm.validate().then((formData) => {
                    that.showLoading = true;
                    console.log(formData);
                    that.$api.login
                        .log(formData)
                        .then(async (res) => {
                            console.log(res);
                            if (res.data.code == 200) {
                                uni.setStorageSync(
                                    "userInfo",
                                    res.data.data.login_user
                                );
                                uni.setStorageSync(
                                    "token",
                                    res.data.data.access_token
                                );
                                uni.setStorageSync(
                                    "roles",
                                    res.data.data.login_user.roles
                                );
                                uni.setStorageSync("pwd", formData.password);
                                // uni.setStorageSync('deptId', res.data.data.login_user.sysUser.dept.deptId)

                                const { data: resS } =
                                    await this.$api.index.getUserInfo();
                                store.commit(
                                    "SET_PERMISSIONS",
                                    resS.permissions
                                );
                                uni.showToast({
                                    icon: "none",
                                    title: "登录成功！",
                                    success: () => {
                                        that.showLoading = false;
                                    },
                                });

                                setTimeout(() => {
                                    uni.switchTab({
                                        url: "/pages/index/index",
                                    });
                                }, 500);
                            } else {
                                uni.showToast({
                                    icon: "none",
                                    title: res.data.msg,
                                    success: () => {
                                        that.showLoading = false;
                                    },
                                });
                            }
                        })
                        .catch((err) => {
                            console.log(err);
                            uni.showToast({
                                icon: "none",
                                title: "网络异常，请稍后再试！",
                                success: () => {
                                    that.showLoading = false;
                                },
                            });
                        });
                });
            },
        },
        onShow() {
            if (uni.getStorageSync("pwd")) {
                this.accountFormData.password = uni.getStorageSync("pwd");
            }
        },
        onLoad() {
            let that = this;
            let nowVer = "";
            let serveVer = "";
            let apkPath = "";
            // 获取app版本号
            plus.runtime.getProperty(plus.runtime.appid, (info) => {
                nowVer = info.version.replace(/\./g, "");
            });
            // 获取服务端app版本号
            this.$api.update
                .fetchAppVer()
                .then((res) => {
                    console.log(res);
                    if (res.data.code == 200) {
                        serveVer = res.data.data[0].versionName.replace(
                            /\./g,
                            ""
                        );
                        apkPath = res.data.data[0].apkPath;
                        // 比较版本大小
                        setTimeout(() => {
                            console.log(nowVer, serveVer, apkPath);
                            if (nowVer < serveVer) {
                                uni.showModal({
                                    title: "版本升级",
                                    content: "当前版本非最新版本，请前往升级！",
                                    showCancel: false,
                                    confirmText: "升级",
                                    success: (res) => {
                                        if (res.confirm) {
                                            that.showDownload = true;
                                            uni.hideTabBar();
                                            let downloadApk = uni.downloadFile({
                                                url: apkPath,
                                                success: (download) => {
                                                    console.log(download);
                                                    if (
                                                        download.statusCode ==
                                                        200
                                                    ) {
                                                        plus.runtime.install(
                                                            download.tempFilePath,
                                                            {
                                                                force: true,
                                                            },
                                                            (install) => {
                                                                that.showDownload = false;
                                                                uni.showTabBar();
                                                                console.log(
                                                                    install
                                                                );
                                                            }
                                                        );
                                                    } else {
                                                        uni.showTabBar();
                                                        that.showDownload = false;
                                                        uni.showToast({
                                                            icon: "none",
                                                            title: "下载异常，请稍后再试！",
                                                        });
                                                    }
                                                },
                                            });
                                            downloadApk.onProgressUpdate(
                                                (res) => {
                                                    that.percent = res.progress;
                                                }
                                            );
                                        }
                                    },
                                });
                            }
                        }, 500);
                    }
                })
                .catch((err) => {
                    console.log(err);
                });
        },
    };
</script>

<style lang="scss">
    body {
        background: url("/static/log-bgd.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }

    .upper-bgd {
        width: 100%;
        height: 25vh;
        box-sizing: border-box;
        padding-top: 10vh;

        .logo {
            width: 20%;
            height: 10vh;
            margin: 0 auto;
            margin-bottom: 2vh;

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

        .tit {
            width: 100%;
            font-size: 20px;
            font-weight: bold;
            display: flex;
            justify-content: center;
            color: #3c87f3;
        }
    }

    .switch-log {
        width: 80%;
        height: 100rpx;
        margin: 6vh auto;
        margin-bottom: 1vh;
        display: flex;
        justify-content: space-around;
        align-items: center;
        font-size: 26rpx;

        .active {
            font-size: 14px;
            font-weight: bold;
            border-bottom: 4px solid #b4d0ff;
            border-bottom-left-radius: 15rpx;
            border-bottom-right-radius: 15rpx;
        }
    }

    .login-area {
        width: 80%;
        box-sizing: border-box;
        padding: 3vh;
        margin: 0 auto;
        background-color: #fff;
        border-radius: 20rpx;
        box-shadow: 0 3px 5px #e6eefe;

        .uni-forms-item__content[data-v-61dfc0d0] {
            display: flex;
        }

        .submit-btn {
            background-color: #3888ff;
            margin: 10vh auto;
            margin-bottom: 0;
            border-radius: 50rpx;
            color: #fff;
            font-size: 26rpx;
        }
    }
</style>