shop-web/src/pages/me/index.vue

<script setup lang="ts">
import { useRouter, useRoute } from 'vue-router'
import { useWxStore } from '@/pinia/stores/wx'
import { useAb98UserStore } from '@/pinia/stores/ab98-user'
import { storeToRefs } from 'pinia'
import { publicPath } from "@/common/utils/path"
import { showConfirmDialog } from 'vant'
import BindHBYCloud from '@/common/components/BindHBYCloud.vue'

const router = useRouter();
const route = useRoute();
const wxStore = useWxStore();
const ab98UserStore = useAb98UserStore();

const { balance, useBalance, balanceLimit, name: qyName, ab98User } = storeToRefs(wxStore);
const { name: userName, sex: userSex, face_img } = storeToRefs(ab98UserStore);

const name = computed(() => {
  return userName.value || qyName.value || '未知用户'
})

const userAvatar = face_img.value ? face_img.value : `${publicPath}img/1.jpg`;

const ab98BalanceInYuan = computed(() => {
  if (ab98User.value && ab98User.value.ab98Balance !== undefined) {
    return (ab98User.value.ab98Balance / 100).toFixed(2);
  }
  return '0.00';
});

const handleLogout = () => {
  showConfirmDialog({
    title: '退出登录',
    message: '确定要退出当前账号吗？',
  }).then(() => {
    ab98UserStore.clearUserInfo();
    router.push('/ab98');
  }).catch(() => {
    // 取消操作
  });
};

const showBindDialog = ref(false);

const handleBindSuccess = () => {
  // 绑定成功后的处理逻辑
  console.log('绑定汇邦云成功');
};

wxStore.refreshBalance();
</script>

<template>
  <div>
    <div class="user-card flex items-start p-4 bg-white rounded-lg shadow-sm">
      <div class="flex items-center pl-2">
        <van-image round width="40" height="40" :src="userAvatar" class="mr-3" @click="handleLogout" />
        <div class="flex-1">
          <div class="text-sm font-medium mb-1">{{ name }}</div>
          <van-tag type="primary">{{ userSex }}</van-tag>
        </div>
      </div>

      <!-- 功能按钮区域 -->
      <div class="func-buttons flex flex-wrap justify-between">
        <div v-for="(item, index) in [
          { icon: 'idcard', text: '身份证', color: 'transparent' },
          { icon: 'phone-o', text: '手机号', color: 'transparent' },
          { icon: 'wechat', text: '微信', color: 'transparent' },
          { icon: 'card', text: '银行卡', color: 'transparent' }
        ]" :key="index" class="flex flex-col items-center w-1/6 mb-12px">
          <van-icon :name="item.icon" size="26px" :style="{ background: item.color }"
            class="un-p-8px un-rounded-full un-text-white" />
          <div class="un-mt-8px un-text-12px un-color-hex-666">{{ item.text }}</div>
        </div>
      </div>
    </div>


    <!-- 余额区域 -->
    <div class="balance-card flex flex-wrap justify-between items-center p-4 bg-white rounded-lg shadow-sm un-mt-16px">
      <van-icon name="gold-coin" size="28px" class="un-mr-8px un-color-#ffb300! mr-2" />
      <div class="flex-1 ml-1">
        <div class="text-sm text-gray-700">借呗总额</div>
        <div class="text-lg font-bold text-primary">{{ balanceLimit }}</div>
      </div>      
      <div class="flex-1 ml-1">
        <div class="text-sm text-gray-700">未还借呗</div>
        <div class="text-lg font-bold text-primary">{{ useBalance }}</div>
      </div>      
      <div class="flex-1 ml-1">
        <div class="text-sm text-gray-700">剩余借呗</div>
        <div class="text-lg font-bold text-primary">{{ balance }}</div>
      </div>
      <!-- <div class="flex-1 ml-1">
        <div class="text-sm text-gray-700">余额</div>
        <div class="text-lg font-bold text-primary">{{ ab98BalanceInYuan }}</div>
      </div> -->
    </div>

    <!-- 个人中心按钮 -->
    <van-row gutter="12" class="button-group p-4 bg-white rounded-lg shadow-sm un-mt-16px">
      <van-col span="24">
        <div class="section-title text-sm font-bold pb-2">个人中心</div>
      </van-col>
      <!-- <van-col span="8">
        <div class="custom-btn" @click="router.push('/order-list')">
          <van-icon name="orders-o" size="20px" />
          <span>订单列表</span>
        </div>
      </van-col>
      <van-col span="8">
        <div class="custom-btn" @click="router.push('/rental-list')">
          <van-icon name="orders-o" size="20px" />
          <span>我的柜子</span>
        </div>
      </van-col> -->
      <van-col span="8">
        <div class="custom-btn" @click="showBindDialog = true">
          <van-icon name="friends-o" size="20px" />
          <span>代绑汇邦云</span>
        </div>
      </van-col>
      <!-- <van-col span="6">
        <div v-if="wxStore.isCabinetAdmin" class="custom-btn" @click="router.push('/manage/goods')">
          <van-icon name="comment-o" size="20px" />
          <span>商品管理</span>
        </div>
      </van-col> -->
      <!-- <van-col span="8">
        <div v-if="wxStore.isCabinetAdmin" class="custom-btn" @click="router.push('/cabinet')">
          <van-icon name="manager-o" size="20px" />
          <span>柜机管理</span>
        </div>
      </van-col>
      <van-col span="8">
        <div v-if="wxStore.isCabinetAdmin" class="custom-btn" @click="router.push('/approval/list')">
          <van-icon name="comment-o" size="20px" />
          <span>审批中心</span>
        </div>
      </van-col> -->
      <van-col span="8">
        <div v-if="wxStore.isCabinetAdmin" class="custom-btn" @click="router.push('/approvalAsset/list')">
          <van-icon name="comment-o" size="20px" />
          <span>耗材核销</span>
        </div>
      </van-col>
      <van-col span="8"></van-col>
    </van-row>
  </div>

  <!-- 代绑汇邦云弹窗 -->
  <BindHBYCloud
    v-model:show="showBindDialog"
    @success="handleBindSuccess"
  />
</template>

<style lang="scss" scoped>
.func-buttons {
  background-color: #fff;
  padding: 0px;
  margin-top: 12px;
  width: 100%;
}

.user-card {
  margin: 12px;
  flex-direction: column;
}


.balance-card {
  margin: 12px;
  flex-direction: row;
}

.button-group {
  margin: 12px;
}

.custom-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 70px;
  padding: 0;
  margin: 0 0 12px;
  background: #1989fa;
  border: 1px solid #1989fa;
  border-radius: 4px;
  color: white;
  cursor: pointer;

  span {
    margin-top: 8px;
    font-size: 12px;
  }
}
</style>