index.vue 4.13 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>