90 lines
2.8 KiB
Vue
90 lines
2.8 KiB
Vue
<script setup lang="ts">
|
|
import { useRouter } 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"
|
|
|
|
const router = useRouter()
|
|
const wxStore = useWxStore()
|
|
const ab98UserStore = useAb98UserStore()
|
|
|
|
const { balance } = storeToRefs(wxStore)
|
|
const { name: userName, sex: userSex, face_img } = storeToRefs(ab98UserStore)
|
|
|
|
const userAvatar = face_img.value ? face_img.value : `${publicPath}img/1.jpg`
|
|
</script>
|
|
|
|
<template>
|
|
<div un-py-16px>
|
|
<van-cell-group class="user-card">
|
|
<van-cell :border="false">
|
|
<template #title>
|
|
<div class="flex items-center p-4">
|
|
<van-image
|
|
round
|
|
width="80"
|
|
height="80"
|
|
:src="userAvatar"
|
|
class="mr-4"
|
|
/>
|
|
<div>
|
|
<div class="text-lg font-bold mb-2">{{ userName }}</div>
|
|
<van-tag type="primary" class="mr-2">{{ userSex }}</van-tag>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</van-cell>
|
|
</van-cell-group>
|
|
|
|
<!-- 功能按钮区域 -->
|
|
<van-grid :column-num="4" :gutter="12" class="func-buttons un-mt-20px">
|
|
<van-grid-item
|
|
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"
|
|
>
|
|
<van-icon
|
|
:name="item.icon"
|
|
size="28px"
|
|
: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>
|
|
</van-grid-item>
|
|
</van-grid>
|
|
|
|
<!-- 余额区域 -->
|
|
<van-cell
|
|
title="账户余额"
|
|
:value="`¥${balance}`"
|
|
class="un-mt-16px! un-rounded-8px!"
|
|
title-class="un-text-14px! un-color-hex-333!"
|
|
value-class="un-text-16px! un-fw-600! un-color-primary!"
|
|
>
|
|
<template #icon>
|
|
<van-icon
|
|
name="gold-coin"
|
|
size="20px"
|
|
class="un-mr-8px un-color-#ffb300!"
|
|
/>
|
|
</template>
|
|
</van-cell>
|
|
|
|
<!-- 个人中心按钮 -->
|
|
<van-cell-group>
|
|
<van-cell title="订单列表" is-link @click="router.push('/order-list')" />
|
|
<van-cell title="柜机管理" is-link @click="router.push('/cabinet')" v-if="wxStore.isCabinetAdmin"/>
|
|
<van-cell title="审批中心" is-link @click="router.push('/approval/list')" v-if="wxStore.isCabinetAdmin"/>
|
|
</van-cell-group>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
/* 移除了已迁移到组件的样式 */
|
|
</style>
|