<template>
|
<view class="center">
|
<view class="userInfo" @click="gotoSetting">
|
<view v-if="userStore.username">
|
<image :src="userStore.avatarUrl"
|
class="w-16 h-16 rounded-full" />
|
<view class="center">
|
<text class="uer-name">{{ userStore.username }}</text>
|
</view>
|
</view>
|
<view v-else>
|
<image :src="defaultAvatar" class="w-16 h-16 rounded-full" />
|
<view class="center">
|
<text class="uer-name">未登录</text>
|
</view>
|
</view>
|
|
</view>
|
<uni-list class="center-list">
|
<uni-list-item :title="ucenterList[0].title" link clickable=true :to="ucenterList[0].to" show-extra-icon="true"
|
:extraIcon="{type:ucenterList[0].icon,color:'#999'}">
|
</uni-list-item>
|
<uni-list-item :title="ucenterList[1].title" link clickable=true :to="ucenterList[1].to" show-extra-icon="true"
|
:extraIcon="{type:ucenterList[1].icon,color:'#999'}">
|
</uni-list-item>
|
<uni-list-item :title="ucenterList[2].title" link clickable=true :to="ucenterList[2].to" show-extra-icon="true"
|
:extraIcon="{type:ucenterList[2].icon,color:'#999'}">
|
</uni-list-item>
|
<uni-list-item :title="ucenterList[3].title" link clickable=true @click="callServiceNumber" show-extra-icon="true"
|
:extraIcon="{type:ucenterList[3].icon,color:'#999'}">
|
</uni-list-item>
|
<!--</uni-list>
|
<uni-list class="center-list">-->
|
<uni-list-item :title="ucenterList[4].title" link clickable=true @click="gotoSetting" show-extra-icon="true"
|
:extraIcon="{type:ucenterList[4].icon,color:'#999'}">
|
</uni-list-item>
|
</uni-list>
|
</view>
|
</template>
|
|
<script setup>
|
import {
|
useUserStore
|
} from '@/stores/user'
|
|
const userStore = useUserStore()
|
|
const defaultAvatar = "https://farm.evcc.top/Uploads/yuanboyuan/avatars/user.png"
|
const ucenterList = [{
|
"title": '我的预约',
|
"to": '/pages/ucenter/my-booking',
|
"icon": "compose"
|
},
|
{
|
"title": '我的投诉建议',
|
"to": '/pages/ucenter/my-advice',
|
"icon": "compose"
|
},
|
{
|
"title": 'WIFI服务',
|
"to": '/pages/index/wifi',
|
"icon": "star"
|
},
|
{
|
"title": '咨询电话',
|
"event": 'callServiceNumber',
|
"icon": "flag"
|
},
|
{
|
"title": '设置',
|
"to": '/pages/ucenter/settings',
|
"icon": "settings"
|
}
|
];
|
|
function callServiceNumber() {
|
uni.makePhoneCall({
|
phoneNumber: "0724-6033555"
|
});
|
}
|
|
function gotoSetting() {
|
uni.navigateTo({
|
url: '/pages/ucenter/settings'
|
})
|
}
|
/**
|
* 个人中心项目列表点击事件
|
*/
|
function ucenterListClick(item) {
|
if (!item.to && item.event) {
|
this[item.event]();
|
}
|
}
|
</script>
|
|
<style>
|
/* 居中容器 */
|
.center {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
}
|
|
/* 用户信息 */
|
.userInfo {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
margin-top: 1rem;
|
cursor: pointer;
|
}
|
|
/* 头像 */
|
.w-16 {
|
width: 4rem;
|
}
|
|
.h-16 {
|
height: 4rem;
|
}
|
|
.rounded-full {
|
border-radius: 9999px;
|
}
|
|
/* 用户名 */
|
.uer-name {
|
margin-top: 0.5rem;
|
font-size: 1rem;
|
color: #000000;
|
}
|
|
/* 列表容器 */
|
.center-list {
|
width: 100%;
|
margin-top: 1rem;
|
}
|
|
/* uni-list-item 内 footer 自定义 */
|
.item-footer {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
padding-top: 0.5rem;
|
}
|
|
.item-footer-text {
|
font-size: 0.875rem;
|
color: #666666;
|
}
|
|
.item-footer-badge {
|
width: 0.75rem;
|
height: 0.75rem;
|
background-color: red;
|
border-radius: 50%;
|
}
|
</style>
|
