index.vue 4.85 KB
<template>
    <div class="mine_container">
        <el-image class="top_bg" :src="getImage('mine-bg.png', '/mine')"></el-image>
        <div class="mine_wrap">
            <div class="mine_name_wrap">
                <div class="name_info">
                    <el-image class="mine-logo" :src="getImage('mine-logo.png', '/mine')"></el-image>
                    <div v-if="state.isLogin" class="login_info">
                        <div class="login_phone">{{state.userInfo.phoneNumber}}</div>
                        <div :class="state.userInfo.companyName ? 'company_name':''">{{state.userInfo.companyName ? state.userInfo.companyName : '还没有公司信息'}}</div>
                    </div>
                    <div v-else class="login_btn">
                        <div @click="linkTo('/login')">立即登录</div>
                    </div>
                </div>
                <div v-if="state.isLogin">
                    <template v-if="state.userInfo.identityTypeStatus == '0'">
                        <el-button round :loading="state.loading" class="primary-btn reverse">待审核</el-button>
                    </template>
                    <template v-else-if="state.userInfo.identityTypeStatus == '1'">
                    </template>
                    <template v-else-if="state.userInfo.identityTypeStatus == '2'">
                        <el-button round :loading="state.loading" @click="linkTo('/baseInfo')" class="primary-btn reverse">重新认证</el-button>
                    </template>
                    <template v-else>
                        <el-button round :loading="state.loading" @click="linkTo('/baseInfo')" class="primary-btn reverse">去认证</el-button>
                    </template>
                </div>
            </div>

            <div class="main_info">
                <div class="main_col" @click="linkTo('/credit')">
                    <div class="col_left">
                        <el-image class="col_img" :src="getImage('shouxin.png', '/mine')"></el-image>
                        <span>我的授信</span>
                    </div>
                    <div class="info_detail">
                        <ArrowRight></ArrowRight>
                    </div>
                </div>
                <div class="main_col" @click="linkTo('/auth')">
                    <div class="col_left">
                        <el-image class="col_img" :src="getImage('shiming.png', '/mine')"></el-image>
                        <span>实名认证</span>
                    </div>
                    <div class="info_detail">
                        <ArrowRight></ArrowRight>
                    </div>
                </div>
                <div class="main_col" @click="linkTo('/loanBill')">
                    <div class="col_left">
                        <el-image class="col_img" :src="getImage('zhangdan.png', '/mine')"></el-image>
                        <span>借款账单</span>
                    </div>
                    <div class="info_detail">
                        <ArrowRight></ArrowRight>
                    </div>
                </div>
                <div class="main_col">
                    <div class="col_left">
                        <el-image class="col_img" :src="getImage('kefu.png', '/mine')"></el-image>
                        <span>客服电话</span>
                    </div>
                    <div class="info_num">
                        400-688-788
                    </div>
                </div>
            </div>

            <el-button v-if="state.isLogin" type="primary" round :loading="loading" @click="loginOut" style="width: 80%;margin: 20px auto;display: block;" class="primary-btn">退出</el-button>
        </div>
    </div>
</template>

<script setup lang="ts">
    import getImage from './../../assets/getImage'
    import { ArrowRight } from '@element-plus/icons-vue'
    import './../../assets/css/mine.scss'
    import router from "../../router/index";
    import { loginMain } from './../../store/index'
    import { storeToRefs } from 'pinia';
    import * as api from "../../interface/login";
    let loginAct = loginMain()
    let { getStoreToken, getUserInfo } = storeToRefs(loginAct)

    let state = reactive({
        isLogin: false,
        userInfo: null,
        loading: false,
    })

    watchEffect(() => {
        state.isLogin = getStoreToken.value ? true : false
        state.userInfo = getUserInfo.value
    })

    if ( getStoreToken.value ) {
        api.getUserPageInfo().then(res=> {
            loginAct.setUserInfo(res.data)
        })
    }

    let linkTo = (url: string) => {
        if (state.isLogin) {
            router.push(url)
        } else {
            router.push('/login')
        }
    }

    let loginOut = () => {
        loginAct.removeUserInfo()
        ElMessage.success("退出登录")
    }

    const arrowPath = ref("/")
    defineExpose({arrowPath})
</script>

<style scoped>

</style>