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">
              <span>{{ getUserId() }}</span>
              <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 }}</span>
          </div>
          <div class="bank-item">
            <span>冻结</span>
            <span>{{ accountInfo.freezemargin }}</span>
          </div>
          <div class="bank-item">
            <span>可用</span>
            <span>{{ accountInfo.usedmargin }}</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="routerTo('bank-wallet')" round>提现</Button>
          <Button type="primary" size="small" color="#00577C" @click="routerTo('bank-wallet')" round>充值</Button>
        </div>
      </div>
    </div>
    <div class="home-mine__iconbar">
      <ul>
        <li @click="routerTo('mine-generalize')" style="align-items:flex-start">
          <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' }">
          <template #title>
            <app-iconfont icon="icon-shimingrenzheng">实名认证</app-iconfont>
          </template>
        </Cell>
        <Cell is-link :to="{ name: 'bank-sign' }">
          <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 } from 'vue'
import { Cell, CellGroup, Button } from 'vant'
import { 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'

const { routerTo } = useNavigation()
const { getLoginId, getUserId, getFirstAccountId } = useLoginStore()
const { logout } = useAuth()
const { accountInfo } = useAccountStore()
const headerRef = shallowRef<HTMLDivElement>()

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

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

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