client-app/pages/my/index.vue

<template>
    <hc-sys class="hc-user-page" :tabbar="false" :isNavBar="false">
        <hc-nav-bar class="user-nav-bar" :style="`background: rgba(85, 77, 132, ${opacitys})`">
            <text class="i-ri-settings-4-fill" @click="toSkipClick('/pages/my/config')"/>
        </hc-nav-bar>
        <view class="user-nav-bg"/>
        <!--内容区域-->
        <view class="hc-user-content-box">
            <view class="user-nav-h"/>

            <!--个人信息卡片-->
            <view class="user-info-card animation-mode" :class="isAnimation?'is-animation':''">
                <view class="name-avatar-bar">
                    <view class="name" @click="toSkipClick('/pages/my/info')">{{userInfo.realName}}</view>
                    <view class="avatar" @click="selectImageTap">
                        <HcImg class="avatar-img" :src="userInfo.avatar" width="72" height="72"/>
                    </view>
                </view>
                <view class="user-auth-bar">
                    <view class="auth-tag visit">
                        <text class="i-ri-vip-diamond-line"/>
                        <text class="name">{{userInfo.roleName}}</text>
                    </view>
                    <view class="auth-tag approve">
                        <text class="name">审批权限</text>
                        <text class="i-ri-checkbox-circle-fill check-icon" v-if="userInfo.signatureUrl"/>
                        <text class="i-ri-close-circle-fill close-icon" v-else/>
                    </view>
                </view>
                <uni-row class="info-num-bar">
                    <uni-col :span="8" class="col-bar">
                        <view class="num">{{userInfo.fillNum}}</view>
                        <view class="text">填报数量</view>
                    </uni-col>
                    <uni-col :span="8" class="col-bar">
                        <view class="num">{{userInfo.appdNum}}</view>
                        <view class="text">审批数量</view>
                    </uni-col>
                    <uni-col :span="8" class="col-bar">
                        <view class="num">{{userInfo.fbNum}}</view>
                        <view class="text">反馈问题</view>
                    </uni-col>
                </uni-row>
            </view>

            <!--常用操作-->
            <view class="common-operation-box">
                <view class="title">常用操作</view>
                <uni-row :gutter="24" class="handle-row-bar">
                    <uni-col :span="12">
                        <view class="col-item-card animation-mode"
                              :class="isAnimation?'in-left':''"
                              @click="toSkipClick('/pages/my/project')"
                        >
                            <view class="content">
                                <view class="title">项目管理</view>
                                <view class="text">设置当前默认项目</view>
                            </view>
                            <view class="icon-bar">
                                <text class="i-ri-stack-line"/>
                            </view>
                        </view>
                    </uni-col>
                    <uni-col :span="12" class="col-bar">
                        <view class="col-item-card animation-mode"
                              :class="isAnimation?'in-right':''"
                              @click="toSkipClick('/pages/my/record')"
                        >
                            <view class="content">
                                <view class="title">填报记录</view>
                                <view class="text">查看历史记录</view>
                            </view>
                            <view class="icon-bar">
                                <text class="i-ri-file-history-line"/>
                            </view>
                        </view>
                    </uni-col>
                </uni-row>
                <uni-row :gutter="24" class="handle-row-bar">
                    <uni-col :span="12">
                        <view class="col-item-card animation-mode"
                              :class="isAnimation?'in-left':''"
                              @click="toSkipClick('/pages/my/explain')"
                        >
                            <view class="content">
                                <view class="title">相关资料</view>
                                <view class="text">查看系统相关资料</view>
                            </view>
                            <view class="icon-bar">
                                <text class="i-ri-profile-line"/>
                            </view>
                        </view>
                    </uni-col>
                    <uni-col :span="12" class="col-bar">
                        <view class="col-item-card animation-mode"
                              :class="isAnimation?'in-right':''"
                              @click="toSkipClick('/pages/my/customer')"
                        >
                            <view class="content">
                                <view class="title">我的客服</view>
                                <view class="text">问题反馈寻求帮助</view>
                            </view>
                            <view class="icon-bar">
                                <text class="i-ri-question-answer-line"/>
                            </view>
                        </view>
                    </uni-col>
                </uni-row>
            </view>

            <!--消息动态-->
            <view class="news-dynamics-box animation-mode"
                  :class="isAnimation?'is-animation':''"
                  @click="toSkipClick('/pages/work-order/index')"
            >
                <view class="title-bar">
                    <text class="i-ri-notification-2-fill"/>
                    <text class="name">消息动态圈</text>
                </view>
            </view>

            <!--退出按钮-->
            <view class="exit-button-bar" :class="isAnimation?'is-animation':''">
                <button class="exit-button animation-mode" @click="signOutClick">退出登录</button>
            </view>
        </view>
    </hc-sys>
</template>

<script setup>
import {ref} from "vue";
import mainApi from '~api/user/index';
import {onShow, onHide, onPageScroll} from '@dcloudio/uni-app'
import {errorToast, successToast} from "@/utils/tools";
import {getTokenHeader} from "@/httpApi/request/header";
import {getObjValue} from "js-fast-way";
import {getUploadApi} from "@/httpApi/modules/upload";
import {useAppStore} from "@/store";

//初始变量
const store = useAppStore()
const userInfo = ref(store.userInfo);

//获取数据
const setUserData = async () => {
    const user_info = userInfo.value
    const user = await mainApi.queryCurrentUserData()
    const yown = await mainApi.appQuerYownData()
    userInfo.value = {
        ...user_info,
        ...getObjValue(user.data),
        ...getObjValue(yown.data),
    }
}

const isAnimation = ref(store.isAnimation)

onShow(()=>{
    setUserData()
    if(store.isAnimation) {
        isAnimation.value = true
    }
})

onHide(() => {
    isAnimation.value = false
})

//选择头像
const selectImageTap = () => {
    uni.chooseImage({
        count: 1,
        sizeType: ['original'],
        success: (res)=> {
            uploadAvatarFile(res.tempFilePaths[0])
        }
    });
}

//上传头像文件
const uploadAvatarFile = async (file) => {
    uni.showLoading({title: '上传头像中...', mask: true});
    const url = await uploadFile(file)
    if(!url) {
        uni.hideLoading();
        return;
    }
    const {user_id} = userInfo.value
    const {error, code} = await mainApi.updateUserInfo({
        avatar: url,
        id: user_id
    })
    if (!error && code === 200) {
        userInfo.value.avatar = url
        store.setUserInfo(userInfo.value)
        uni.hideLoading();
        successToast('头像上传成功')
    } else {
        uni.hideLoading();
        errorToast('头像上传失败');
    }
}

//上传文件
const uploadFile = async (file) => {
    return new Promise((resolve) => {
        uni.uploadFile({
            url: getUploadApi() + 'blade-resource/oss/endpoint/put-file',
            name: 'file',
            filePath: file,
            header: getTokenHeader(),
            timeout: 300000,
            success: (res) => {
                const data = JSON.parse(res.data)
                const {link} = getObjValue(data.data)
                if (!link) errorToast('文件上传异常');
                resolve(link ?? '');
            },
            fail: () => {
                errorToast('文件上传失败');
                resolve('');
            }
        });
    })
}

//跳转到其他页面
const toSkipClick = (url) => {
    uni.navigateTo({url: url});
}

//退出登录
const signOutClick = () => {
    uni.reLaunch({url: '/pages/login/login'});
}

//监听页面滚动
const opacitys = ref(0)
onPageScroll((event) => {
    const scrollTop = event.scrollTop
    if (scrollTop <= 1) {
        opacitys.value = 0
    } else if (scrollTop > 1 && scrollTop <= 10) {
        opacitys.value = 0.2
    } else if (scrollTop > 10 && scrollTop <= 20) {
        opacitys.value = 0.4
    } else if (scrollTop > 20 && scrollTop <= 30) {
        opacitys.value = 0.6
    } else if (scrollTop > 30 && scrollTop <= 40) {
        opacitys.value = 0.8
    } else if (scrollTop > 40) {
        opacitys.value = 1
    }
})
</script>

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