shop-web/src/pages/me/index.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>