client-app/pages/login/login.vue

<template>
    <view class="hc-login-box relative h-full p-4">
        <view class="hc-dot-box" v-show="isDotShow">
            <view un-absolute un-b-rounded-100 class="dot dot-1"/>
            <view un-absolute un-b-rounded-100 class="dot dot-2"/>
            <view un-absolute un-b-rounded-100 class="dot dot-3"/>
        </view>
        <web-view name="animationIframe" src="/hybrid/html/animation/index.html" :webview-styles="webStyle" :style="webStyle" @message="handleMessage"/>
        <view class="hc-login-container">
            <view class="hc-login-center">
                <view class="hc-login-title">欢迎登录</view>
                <view class="hc-login-text">泓创让每一个数据更具价值</view>
                <view class="hc-login-form">
                    <view class="hc-login-form-item">
                        <input class="hc-login-input" v-model="formData.username" placeholder="请输入登录账户"/>
                    </view>
                    <view class="hc-login-form-item">
                        <input type="password" class="hc-login-input" v-model="formData.password"
                               placeholder="请输入登录密码"/>
                    </view>
                </view>
                <button class="mt-16" :type="!formData.username || !formData.password ? 'info' : 'primary'" @click="submitClick">
                    <text class="mr-5">登</text>
                    <text class="ml-5">录</text>
                </button>
            </view>
        </view>
    </view>
</template>

<script setup>
import {ref, onMounted} from "vue";
import {onLoad, onUnload} from '@dcloudio/uni-app'
import {getStorage, setStorage} from "@/utils/storage";
import {useAppStore} from "@/store";
import {userLogin} from "@/store/user";
import {getObjVal} from "js-fast-way";

//初始变量
const store = useAppStore()
const webStyle = ref({
    width: '1px',
    height: '1px',
})

const isDotShow = ref(false)

onLoad(() => {
    const user_info = getStorage('login_user_info');
    if (getObjVal(user_info)) {
        formData.value = user_info
    }
    //清除所有缓存
    store.clearStoreData()
    //关闭引导页
    setTimeout(() => {
        setStorage('app_guide', true);
        if (getObjVal(user_info)) {
            setStorage('login_user_info', user_info);
        }
        isDotShow.value = true
    }, 1000)
})

//渲染完成
onMounted(() => {
    // #ifdef H5
    window.addEventListener('message', handleMessage);
    // #endif
})

const handleMessage = (event) => {
    let msg = {};
    // #ifdef H5
    if (event.data && event.data.data && event.data.data.arg) {
        msg = event.data.data.arg
    }
    // #endif
    // #ifdef APP-PLUS
    msg = event.detail.data[0]
    // #endif
    if (msg.source === 'animation-web') {
        if (msg.type === "on-animation") {
            isAnimation(msg.data)
        }
    }
}

//判断动画
const isAnimation = (data) => {
    console.log('动画结束，耗时：', data)
    if (data > 1500) {
        store.setAnimation(false)
    } else {
        store.setAnimation(true)
    }
}

//登录表单
const formData = ref({
    tenantId: "000000",
    username: '',
    password: '',
    type: "account"
})

//登录
const submitClick = () => {
    const {username, password} = formData.value
    if (!username) {
        uni.showToast({
            title: '请先输入登录账户',
            icon: 'none',
            duration: 3000
        });
    } else if (!password) {
        uni.showToast({
            title: '请先输入登录密码',
            icon: 'none',
            duration: 3000
        });
    } else {
        userLogin(formData.value).then((res) => {
            uni.showToast({
                title: '登录成功',
                duration: 2000,
                mask: true
            });
            //跳转登录
            setTimeout(() => {
                uni.switchTab({
                    url: '/pages/index/index'
                })
            }, 2000);
        }).catch(({msg}) => {
            uni.showToast({
                title: msg,
                icon: 'none'
            });
        })
    }
}

onUnload(()=>{
    // #ifdef H5
    window.removeEventListener('message', handleMessage);
    // #endif
})
</script>

<style lang="scss" scoped>
page {
    height: 100%;
}

@import "@/style/login/login.scoped.scss";
</style>

<style lang="scss">
@import "@/style/login/login.scss";
</style>