164 lines
3.3 KiB
Vue
164 lines
3.3 KiB
Vue
<template>
|
|
<view class="container">
|
|
<!-- 用户信息区域 -->
|
|
<view class="user-info padding">
|
|
<view class="user-avatar">
|
|
<image :src="`${imgPath}static/userui/tx.png`" mode="aspectFill"></image><!-- 头像 -->
|
|
</view>
|
|
<view class="user-details">
|
|
<view class="nickname">昵称</view>
|
|
<view class="phone-number">182****7183</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 账户明细区域 -->
|
|
<view class="cu-list menu card-menu margin-top-xl margin-bottom-xl shadow-lg radius">
|
|
<view v-for="(item, index) in menuItems" :key="index" class="cu-item arrow" @click="navigateTo(item.link)">
|
|
<view class="content flex">
|
|
<view class="icon-container">
|
|
<image class="icon-size" :src="item.icon"></image>
|
|
</view>
|
|
<text class="text-black">{{ item.label }}</text>
|
|
</view>
|
|
</view>
|
|
<view class=" flex flex-direction">
|
|
<button style="height: 45px;" class="cu-btn bg-white margin-tb-sm lg text-red text-bold">退出登录</button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {
|
|
ref
|
|
} from 'vue';
|
|
import config from '@/utils/config';
|
|
const imgPath = config.imgPath;
|
|
|
|
|
|
|
|
const menuItems = ref([{
|
|
icon: `${imgPath}static/userui/icon/zhhanghu.png`,
|
|
label: '账户明细',
|
|
link: '/pages/user/login/AccountDetails'
|
|
},
|
|
{
|
|
icon: `${imgPath}static/userui/icon/baoxiujilu.png`,
|
|
label: '故障反馈',
|
|
link: '/pages/user/login/TroubleReportUser?bikeCode=250306001002&orderCode=12039219893712864'
|
|
},
|
|
{
|
|
icon: `${imgPath}static/userui/icon/baoxiujilu.png`,
|
|
label: '报修记录',
|
|
link: '/pages/user/login/RepairReport'
|
|
},
|
|
{
|
|
icon: `${imgPath}static/userui/icon/shiminrenzheng.png`,
|
|
label: '微信登录',
|
|
link: '/pages/user/login/wx_login'
|
|
},
|
|
{
|
|
icon: `${imgPath}static/userui/icon/jilu.png`,
|
|
label: '申请换车记录',
|
|
link: '/pages/user/login/return-point-records'
|
|
},
|
|
{
|
|
icon: `${imgPath}static/userui/icon/helpinfo.png`,
|
|
label: '帮助中心',
|
|
link: '/pages/user/HelpPage/HelpPage'
|
|
},
|
|
{
|
|
icon: `${imgPath}static/userui/icon/loginout.png`,
|
|
label: '账号注销',
|
|
link: '/pages/user/login/userLogout'
|
|
}
|
|
]);
|
|
|
|
const navigateTo = (link) => {
|
|
|
|
if (link == "") return;
|
|
uni.navigateTo({
|
|
url: link
|
|
});
|
|
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
/* 容器 */
|
|
.container {
|
|
background-color: rgb(248, 248, 248);
|
|
height: 100vh;
|
|
/* 给容器添加内边距 */
|
|
}
|
|
|
|
/* 用户信息部分 */
|
|
.user-info {
|
|
display: flex;
|
|
margin-bottom: 20px;
|
|
/* 用户信息区域底部间距 */
|
|
align-items: center;
|
|
}
|
|
|
|
/* 用户头像 */
|
|
.user-avatar {
|
|
margin-right: 15px;
|
|
/* 头像与其他信息之间的间距 */
|
|
}
|
|
|
|
.user-avatar image {
|
|
width: 50px;
|
|
height: 50px;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
/* 用户信息 */
|
|
.user-details {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.nickname {
|
|
font-weight: bold;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.phone-number {
|
|
color: #888;
|
|
font-size: 14px;
|
|
}
|
|
|
|
/* 账户明细部分 */
|
|
.account-details {
|
|
background-color: #f5f5f5;
|
|
padding: 15px;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.account-details .flex {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.icon {
|
|
width: 30px;
|
|
height: 30px;
|
|
background-color: #ddd;
|
|
border-radius: 50%;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.account-info {
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.icon-container {
|
|
margin-right: 15px;
|
|
}
|
|
|
|
.icon-size {
|
|
width: 15px;
|
|
height: 15px;
|
|
}
|
|
</style> |