pj_mini_app_cloud/src/pages/root/pwd-login.vue

<script setup lang="ts">
import { ref, reactive } from "vue"
import { onLoad, onShow } from "@dcloudio/uni-app"
import { constant, router } from "@@/index"
import { userApi, walletApi } from "@@/api"
import { SERVICE_IMAGE } from "@@/constant/index"
import { filePath } from "@@/utils/file"

import AffirmCheck from "@/sheep/components/common/affirm-check.vue"
import AffirmModal from "@/sheep/components/common/affirm-modal.vue"
import VerifyDeviceImpModel from "@/sheep/components/verify-device-imp-model.vue"

const affirmModalRef = ref()
const state = reactive<any>({
    userInfo: null,
    isAgree: false,
})
const applyForm = reactive<any>({
    username: "",
    password: "",
})
const applyFormRules = reactive<any>({
    username: [{ required: true, message: "请输入用户名" }],
    password: [{ required: true, message: "请输入密码" }],
})

onLoad(() => {
    const rememberUser = uni.getStorageSync(constant.storageConstant.REMEMBER_USER)
    if (rememberUser) {
        applyForm.username = rememberUser.username
        applyForm.password = rememberUser.password
    }
})
onShow(() => {
    const userInfoKey = constant.storageConstant.USERINFO
    state.userInfo = uni.getStorageSync(userInfoKey)
    const storageIsAgree = uni.getStorageSync(constant.storageConstant.LOGIN_IS_AGREE)
    if (storageIsAgree) {
        state.isAgree = storageIsAgree
    }
})


const applyFormRef = ref<any>(null)
const doSubmit = async () => {
    applyFormRef.value.submit()
    const { isPass } = applyFormRef.value.validate()
    if (!isPass) return
    const tokenKey = constant.storageConstant.TOKEN
    const userInfoKey = constant.storageConstant.USERINFO
    const rememberUser = constant.storageConstant.REMEMBER_USER
    uni.removeStorageSync(tokenKey)
    uni.showLoading({ title: "登录中...", mask: true })
    const res: any = await userApi.login({
        ...applyForm,
        grant_type: "password",
        scope: "server",
    })
    if (res.code != 0) {
        uni.showToast({ title: res.msg + ",登录失败，请重新登录", icon: "error" })
        return
    }
    uni.setStorageSync(tokenKey, {
        accessToken: res.data.access_token,
        refreshToken: res.data.refresh_token,
        // OAuth expires_in 的单位是秒，Date.now() 的单位是毫秒，必须先乘 1000。
        accessTokenExpiresIn: new Date(Date.now() + Number(res.data.expires_in) * 1000).toISOString(),
        refreshTokenExpiresIn: "",
    } as GlobalSetting.TokenStorage)

    // 查询用户信息
    const { data: userData } = await userApi.userInfo()
    uni.setStorageSync(userInfoKey, userData)
    uni.setStorageSync(rememberUser, {
        username: applyForm.username,
        password: applyForm.password,
    } as GlobalSetting.RememberUser)
    uni.setStorageSync(constant.storageConstant.LOGIN_IS_AGREE, true)
    await createWallet()
    uni.hideLoading()
    uni.showToast({ title: "登录成功", icon: "none" })
    router.jump("/pages/root/dashboard", {}, 3)
}

// 创建钱包
const createWallet = async () => {
    try {
        const { data, code }: any = await walletApi.createTopupWallet()
        if (code != 0) throw new Error()
    } catch (error) {
        console.error("创建钱包意外的错误error:", error)
    }
}

const disposeLogin = () => {
    applyFormRef.value.submit()
    const { isPass } = applyFormRef.value.validate()
    if (!isPass) return
    // 没有同意
    if (!state.isAgree) {
        affirmModalRef.value.show()
        return
    }
    doSubmit()
}

const affirmModalConfirm = () => {
    state.isAgree = true
    doSubmit()
}

</script>

<template>
    <crud-layout title="账号密码登录" :bg="filePath(SERVICE_IMAGE.blueBg)">
        <view class="h-30rpx" />
        <view class="card p-x-30rpx p-y-40rpx">
            <tm-form ref="applyFormRef" v-model="applyForm" :rules="applyFormRules" direction="vertical">
                <tm-form-item name="username" label="用户名" :showBottom="false">
                    <tm-input v-model="applyForm.username" placeholder="请输入用户名.." />
                </tm-form-item>
                <view class="h-30rpx" />
                <tm-form-item name="password" label="密码" :showBottom="false">
                    <tm-input password showEye v-model="applyForm.password" placeholder="请输入用户密码.." />
                </tm-form-item>
            </tm-form>
        </view>
        <view v-if="state.detailType != 'view'"
            class="bg-blue p-y-20rpx text-center rounded-40rpx m-x-30rpx m-t-40rpx sub-text-30 color-white!"
            @tap="disposeLogin">
            登录
        </view>
        <view class="flex justify-between items-center m-t-30rpx">
            <text></text>
            <text class="color-blue font-size-sm" @click="router.jump('/pages/root/login')">手机号一键登录</text>
        </view>
        <view class="absolute bottom-60rpx">
            <view class="sub-text-28 color-red! indent-2em">
                <text>小程序只提供给有"浦江县机关事务智慧后勤一体化平台"账号的用户使用,其余用户不能使用该小程序</text>
            </view>
            <view class="h-10rpx" />
            <affirm-check v-model="state.isAgree" />
        </view>
        <affirm-modal ref="affirmModalRef" @confirm="affirmModalConfirm" />
    </crud-layout>
</template>

<style lang="scss" scoped>
:deep() {
    .tmFormItemLabel {
        padding-bottom: 10rpx !important;
    }
}
</style>