THJ_Mobile/src/packages/mobile/views/home/components/mine/index.vue

<template>
  <app-view class="home-mine">
    <template #header>
      <app-navbar title="我的" :show-back-button="false" @ready="onReady" />
    </template>
    <div ref="headerRef" class="home-mine__header">
      <div class="home-mine__header-wrapper">
        <div class="profile">
          <div class="profile-user">
            <div class="profile-user__avatar">
              <img class="g-image--avatar" src="" />
            </div>
            <div class="profile-user__info">
              <div>
                <Tag :type="authStatus ? 'success' : 'primary'">{{ getAuthStatusName(authStatus) }}</Tag>
              </div>
              <span>{{ getLoginId() }}</span>
            </div>
          </div>
          <div class="profile-account">
            <span>正常</span>
            <span>{{ getFirstAccountId() }}</span>
          </div>
        </div>
        <div class="bank" v-if="accountInfo">
          <div class="bank-item">
            <span>余额</span>
            <span>{{ accountInfo.currentbalance.toFixed(2) }}</span>
          </div>
          <div class="bank-item">
            <span>冻结</span>
            <span>{{ freezeMargin.toFixed(2) }}</span>
          </div>
          <div class="bank-item">
            <span>可用</span>
            <span>{{ avaiableMoney.toFixed(2) }}</span>
          </div>
          <div class="bank-item">
            <span>
              <a @click="routerTo('bank-statement')">资金流水</a>
            </span>
            <span></span>
          </div>
        </div>
        <div class="button">
          <Button size="small" @click="doInOutMoney('1')" round>提现</Button>
          <Button type="primary" size="small" color="#00577C" @click="doInOutMoney('0')" round>充值</Button>
        </div>
      </div>
    </div>
    <div class="home-mine__iconbar">
      <ul>
        <li @click="routerTo('mine-generalize')">
          <app-iconfont icon="icon-wodetuiguang" label-direction="bottom">我的推广</app-iconfont>
        </li>
        <li>
          <app-iconfont icon="icon-wodedingdan" label-direction="bottom">我的订单</app-iconfont>
        </li>
        <!-- <li>
          <app-iconfont icon="icon-wodecangdan" label-direction="bottom">我的仓单</app-iconfont>
        </li>
        <li>
          <app-iconfont icon="icon-fapiaoxinxi" label-direction="bottom">发票信息</app-iconfont>
        </li>
        <li @click="routerTo('mine-address')">
          <app-iconfont icon="icon-shouhuodizhi" label-direction="bottom">收货地址</app-iconfont>
        </li> -->
      </ul>
    </div>
    <div class="g-navmenu">
      <CellGroup>
        <Cell is-link :to="{ name: 'account-certification' }"
          v-if="[AuthStatus.Uncertified, AuthStatus.Rejected].includes(authStatus)">
          <template #title>
            <app-iconfont icon="icon-shimingrenzheng">实名认证</app-iconfont>
          </template>
        </Cell>
        <Cell is-link :to="{ name: 'bank-sign' }" v-if="authStatus === AuthStatus.Certified">
          <template #title>
            <app-iconfont icon="icon-qianyuezhanghu">签约账户</app-iconfont>
          </template>
        </Cell>
        <Cell is-link :to="{ name: 'rules-zcxy' }">
          <template #title>
            <app-iconfont icon="icon-yonghuzhucexieyi">用户注册协议</app-iconfont>
          </template>
        </Cell>
        <Cell is-link :to="{ name: 'rules-yszc' }">
          <template #title>
            <app-iconfont icon="icon-guanyuzhengce">关于隐私</app-iconfont>
          </template>
        </Cell>
        <Cell is-link :to="{ name: 'mine-service' }">
          <template #title>
            <app-iconfont icon="icon-kefurexian">客服热线</app-iconfont>
          </template>
        </Cell>
        <Cell is-link :to="{ name: 'setting' }">
          <template #title>
            <app-iconfont icon="icon-shezhi">设置</app-iconfont>
          </template>
        </Cell>
        <Cell is-link :to="{ name: 'rules-gywm' }">
          <template #title>
            <app-iconfont icon="icon-guanyuwomen">关于我们</app-iconfont>
          </template>
        </Cell>
        <Cell is-link :to="{ name: 'logoff' }">
          <template #title>
            <app-iconfont icon="icon-zhuxiaofuwu">注销服务</app-iconfont>
          </template>
        </Cell>
      </CellGroup>
    </div>
    <div class="home-mine__footer">
      <Button class="button-logout" @click="userLogout">退出登录</Button>
    </div>
  </app-view>
</template>

<script lang="ts" setup>
import { shallowRef, onActivated } from 'vue'
import { Cell, CellGroup, Button, Tag, Toast } from 'vant'
import { fullloading, dialog } from '@/utils/vant'
import { useNavigation } from '@/hooks/navigation'
import { useLoginStore, useAccountStore, } from '@/stores'
import { useAuth } from '@/business/auth'
import AppIconfont from '@mobile/components/base/iconfont/index.vue'
import { useBankAccountSign } from '@/business/bank'
import { queryUserAccount } from '@/services/api/account'
import { AuthStatus, getAuthStatusName } from '@/constants/account';

const { router, routerTo } = useNavigation()
const { getUserId, getLoginId, getFirstAccountId } = useLoginStore()
const { getBankAccountList, bankInfo } = useBankAccountSign()
const { logout } = useAuth()
const { accountInfo, freezeMargin, avaiableMoney } = useAccountStore()
const authStatus = shallowRef(AuthStatus.Uncertified) // 实名认证状态
const headerRef = shallowRef<HTMLDivElement>()

const onReady = (el: HTMLDivElement) => {
  // 设置背景图位置
  headerRef.value?.style.setProperty('background-position', `0 -${el.clientHeight}px`)
}

/// 进行出入金操作判断
const doInOutMoney = (tab: string) => {
  if (authStatus.value === AuthStatus.Certified) {
    fullloading((hideLoading) => {
      getBankAccountList().then(() => {
        hideLoading()
        const { signstatus } = bankInfo.value ?? {}
        /// 只有已签约的情况下才可以进行出入金
        if (signstatus && signstatus === 4) {
          router.push({ name: 'bank-wallet', query: { tab } })
        } else {
          dialog('请先添加签约账户信息！', {
            showCancelButton: true,
            confirmButtonText: '去签约'
          }).then(() => {
            router.push({ name: 'bank-sign' })
          })
        }
      }).catch(() => {
        Toast.fail('加载失败')
      })
    }, '正在加载...')
  } else {
    dialog('请先实名认证，再进行该操作！', {
      showCancelButton: true,
      confirmButtonText: '去实名'
    }).then(() => {
      router.push({ name: 'account-certification' })
    })
  }
}

const userLogout = () => {
  dialog('是否退出当前账号？', {
    showCancelButton: true
  }).then(() => {
    logout()
  })
}

onActivated(() => {
  if (authStatus.value !== AuthStatus.Certified) {
    // 获取用户账号信息
    queryUserAccount({
      data: {
        userID: getUserId()
      },
      success: (res) => {
        authStatus.value = res.data.hasauth
      }
    })
  }
})
</script>

<style lang="less">
@import './index.less';
</style>