个人中心静态界面0.5
This commit is contained in:
minimaxagent1
parent
b0c7b6a1ae
commit
28de154766
|
|
@ -14,5 +14,12 @@ export const commonEnum = {
|
|||
LEASE_BACKGROUND: 'https://api.ccttiot.com/image-1755063111406.png',
|
||||
FIRE: 'https://api.ccttiot.com/image-1755063906561.png',
|
||||
DOWN_ARROW: 'https://api.ccttiot.com/image-1755068355306.png',
|
||||
FIRE_BACKGROUND: 'https://api.ccttiot.com/image-1755070666020.png',
|
||||
COIN_BACKGROUND: 'https://api.ccttiot.com/image-1755070887001.png',
|
||||
REQUEST_AGENT: 'https://api.ccttiot.com/image-1755071317260.png',
|
||||
AGENCY_INTERESTS: 'https://api.ccttiot.com/image-1755071348347.png',
|
||||
ONLINE_CUSTOMER_SERVICE: 'https://api.ccttiot.com/image-1755071362176.png',
|
||||
SET: 'https://api.ccttiot.com/image-1755071734792.png',
|
||||
GIFT: 'https://api.ccttiot.com/image-1755071830648.png',
|
||||
}
|
||||
export default commonEnum
|
||||
|
|
|
|||
|
|
@ -1,364 +1,453 @@
|
|||
<template>
|
||||
<view class="profile-page">
|
||||
<!-- 状态栏 -->
|
||||
<view class="status-bar">
|
||||
<text class="time">9:41</text>
|
||||
<view class="status-icons">
|
||||
<text class="signal">📶</text>
|
||||
<text class="wifi">📶</text>
|
||||
<text class="battery">🔋</text>
|
||||
</view>
|
||||
|
||||
|
||||
<!-- 页面标题 -->
|
||||
<view class="page-title">
|
||||
<text class="title-text">个人中心</text>
|
||||
</view>
|
||||
|
||||
<!-- 头部用户信息 -->
|
||||
<view class="user-header">
|
||||
<view class="user-info">
|
||||
<view class="avatar">
|
||||
<text class="avatar-text">张</text>
|
||||
<text class="avatar-text">昵</text>
|
||||
</view>
|
||||
<view class="user-details">
|
||||
<text class="user-name">张珊珊</text>
|
||||
<text class="user-phone">138****8888</text>
|
||||
<text class="user-name">昵称</text>
|
||||
<text class="user-id">123****8912</text>
|
||||
</view>
|
||||
<view class="settings-icon">
|
||||
<image :src="commonEnum.SET" class="settings-img" mode="aspectFit"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="edit-btn">
|
||||
<text class="edit-icon">✏️</text>
|
||||
<view class="share-btn">
|
||||
<image :src="commonEnum.GIFT" class="share-img" mode="aspectFit"></image>
|
||||
<text class="share-text">分享推广</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 统计信息 -->
|
||||
<view class="stats-section">
|
||||
<view class="stat-item">
|
||||
<text class="stat-number">2</text>
|
||||
<text class="stat-label">租赁设备</text>
|
||||
<!-- 财务摘要 -->
|
||||
<view class="financial-summary">
|
||||
<image :src="commonEnum.COIN_BACKGROUND" class="coin-background" mode="aspectFill"></image>
|
||||
<view class="main-amount">
|
||||
<text class="amount-number">18079.29</text>
|
||||
<text class="amount-label">可提现(元)</text>
|
||||
</view>
|
||||
<view class="stat-item">
|
||||
<text class="stat-number">¥200.20</text>
|
||||
<text class="stat-label">累计租金</text>
|
||||
</view>
|
||||
<view class="stat-item">
|
||||
<text class="stat-number">365</text>
|
||||
<text class="stat-label">租赁天数</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 功能菜单 -->
|
||||
<view class="menu-section">
|
||||
<view class="menu-group">
|
||||
<view class="menu-item" @click="goToMyLeases">
|
||||
<view class="menu-left">
|
||||
<text class="menu-icon">📋</text>
|
||||
<text class="menu-title">我的租赁</text>
|
||||
</view>
|
||||
<text class="menu-arrow">></text>
|
||||
<view class="action-buttons">
|
||||
<view class="action-btn">
|
||||
<text class="btn-text">收支明细 ></text>
|
||||
</view>
|
||||
|
||||
<view class="menu-item" @click="goToPayments">
|
||||
<view class="menu-left">
|
||||
<text class="menu-icon">💰</text>
|
||||
<text class="menu-title">支付记录</text>
|
||||
</view>
|
||||
<text class="menu-arrow">></text>
|
||||
</view>
|
||||
|
||||
<view class="menu-item" @click="goToAddress">
|
||||
<view class="menu-left">
|
||||
<text class="menu-icon">📍</text>
|
||||
<text class="menu-title">收货地址</text>
|
||||
</view>
|
||||
<text class="menu-arrow">></text>
|
||||
<view class="action-btn">
|
||||
<text class="btn-text">立即提现 ></text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="menu-group">
|
||||
<view class="menu-item" @click="goToSettings">
|
||||
<view class="menu-left">
|
||||
<text class="menu-icon">⚙️</text>
|
||||
<text class="menu-title">设置</text>
|
||||
</view>
|
||||
<text class="menu-arrow">></text>
|
||||
<view class="financial-stats">
|
||||
<view class="stat-item">
|
||||
<text class="stat-number">399.59</text>
|
||||
<text class="stat-label">待入账(元)</text>
|
||||
</view>
|
||||
|
||||
<view class="menu-item" @click="goToHelp">
|
||||
<view class="menu-left">
|
||||
<text class="menu-icon">❓</text>
|
||||
<text class="menu-title">帮助中心</text>
|
||||
</view>
|
||||
<text class="menu-arrow">></text>
|
||||
<view class="stat-item">
|
||||
<text class="stat-number">9.59</text>
|
||||
<text class="stat-label">提现中(元)</text>
|
||||
</view>
|
||||
|
||||
<view class="menu-item" @click="goToAbout">
|
||||
<view class="menu-left">
|
||||
<text class="menu-icon">ℹ️</text>
|
||||
<text class="menu-title">关于我们</text>
|
||||
</view>
|
||||
<text class="menu-arrow">></text>
|
||||
<view class="stat-item">
|
||||
<text class="stat-number">999.59</text>
|
||||
<text class="stat-label">已提现(元)</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 退出登录 -->
|
||||
<view class="logout-section">
|
||||
<button class="logout-btn" @click="handleLogout">退出登录</button>
|
||||
<!-- 我的用户 -->
|
||||
<view class="my-users-section">
|
||||
<view class="section-header">
|
||||
<text class="section-title">我的用户</text>
|
||||
<view class="view-details">
|
||||
<text class="details-text">查看详情 ></text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="user-stats">
|
||||
<view class="stat-item">
|
||||
<text class="stat-number">30</text>
|
||||
<text class="stat-label">名下用户(个)</text>
|
||||
</view>
|
||||
<view class="stat-item">
|
||||
<text class="stat-number">30</text>
|
||||
<text class="stat-label">租赁数量(个)</text>
|
||||
</view>
|
||||
<view class="stat-item">
|
||||
<text class="stat-number">3000</text>
|
||||
<text class="stat-label">租赁金额(元)</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 其他功能 -->
|
||||
<view class="other-functions">
|
||||
<view class="section-header">
|
||||
<text class="section-title">其他功能</text>
|
||||
</view>
|
||||
<view class="function-grid">
|
||||
<view class="function-item" @click="goToAgentApply">
|
||||
<view class="function-icon">
|
||||
<image :src="commonEnum.REQUEST_AGENT" class="function-img" mode="aspectFit"></image>
|
||||
</view>
|
||||
<text class="function-text">申请代理</text>
|
||||
</view>
|
||||
<view class="function-item" @click="goToAgentBenefits">
|
||||
<view class="function-icon">
|
||||
<image :src="commonEnum.AGENCY_INTERESTS" class="function-img" mode="aspectFit"></image>
|
||||
</view>
|
||||
<text class="function-text">代理权益</text>
|
||||
</view>
|
||||
<view class="function-item" @click="goToCustomerService">
|
||||
<view class="function-icon">
|
||||
<image
|
||||
:src="commonEnum.ONLINE_CUSTOMER_SERVICE"
|
||||
class="function-img"
|
||||
mode="aspectFit"
|
||||
></image>
|
||||
</view>
|
||||
<text class="function-text">在线客服</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { commonEnum } from '@/enum/commonEnum.js'
|
||||
|
||||
export default {
|
||||
name: 'ProfilePage',
|
||||
data() {
|
||||
return {
|
||||
commonEnum,
|
||||
userInfo: {
|
||||
name: '张珊珊',
|
||||
phone: '138****8888',
|
||||
avatar: '张'
|
||||
name: '昵称',
|
||||
id: '123****8912',
|
||||
},
|
||||
financialData: {
|
||||
withdrawable: '18079.29',
|
||||
pending: '399.59',
|
||||
withdrawing: '9.59',
|
||||
withdrawn: '999.59',
|
||||
},
|
||||
userStats: {
|
||||
users: 30,
|
||||
leases: 30,
|
||||
amount: 3000,
|
||||
},
|
||||
stats: {
|
||||
leaseCount: 2,
|
||||
totalRent: '¥200.20',
|
||||
leaseDays: 365
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
goToMyLeases() {
|
||||
goToAgentApply() {
|
||||
uni.showToast({
|
||||
title: '我的租赁',
|
||||
icon: 'none'
|
||||
title: '申请代理',
|
||||
icon: 'none',
|
||||
})
|
||||
},
|
||||
goToPayments() {
|
||||
goToAgentBenefits() {
|
||||
uni.showToast({
|
||||
title: '支付记录',
|
||||
icon: 'none'
|
||||
title: '代理权益',
|
||||
icon: 'none',
|
||||
})
|
||||
},
|
||||
goToAddress() {
|
||||
goToCustomerService() {
|
||||
uni.showToast({
|
||||
title: '收货地址',
|
||||
icon: 'none'
|
||||
title: '在线客服',
|
||||
icon: 'none',
|
||||
})
|
||||
},
|
||||
goToSettings() {
|
||||
uni.showToast({
|
||||
title: '设置',
|
||||
icon: 'none'
|
||||
})
|
||||
},
|
||||
goToHelp() {
|
||||
uni.showToast({
|
||||
title: '帮助中心',
|
||||
icon: 'none'
|
||||
})
|
||||
},
|
||||
goToAbout() {
|
||||
uni.showToast({
|
||||
title: '关于我们',
|
||||
icon: 'none'
|
||||
})
|
||||
},
|
||||
handleLogout() {
|
||||
uni.showModal({
|
||||
title: '确认退出',
|
||||
content: '确定要退出登录吗？',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
uni.showToast({
|
||||
title: '已退出登录',
|
||||
icon: 'success'
|
||||
})
|
||||
// 跳转到登录页
|
||||
setTimeout(() => {
|
||||
uni.reLaunch({
|
||||
url: '/pages/login/login'
|
||||
})
|
||||
}, 1500)
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.profile-page {
|
||||
min-height: 100vh;
|
||||
background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
|
||||
padding-bottom: 120rpx; /* 为tabBar留出空间 */
|
||||
background: #f5f5f5;
|
||||
padding-bottom: 120rpx;
|
||||
}
|
||||
|
||||
// 状态栏
|
||||
.status-bar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 20rpx 40rpx;
|
||||
color: #fff;
|
||||
font-size: 28rpx;
|
||||
// 页面标题
|
||||
.page-title {
|
||||
text-align: center;
|
||||
padding: 40rpx 0 20rpx 0;
|
||||
|
||||
.status-icons {
|
||||
display: flex;
|
||||
gap: 10rpx;
|
||||
.title-text {
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
// 用户头部
|
||||
.user-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
|
||||
padding: 40rpx;
|
||||
color: #fff;
|
||||
|
||||
margin: 20rpx;
|
||||
border-radius: 20rpx;
|
||||
position: relative;
|
||||
|
||||
.user-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
margin-bottom: 30rpx;
|
||||
|
||||
.avatar {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 30rpx;
|
||||
|
||||
|
||||
.avatar-text {
|
||||
font-size: 48rpx;
|
||||
font-size: 40rpx;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.user-details {
|
||||
flex: 1;
|
||||
|
||||
.user-name {
|
||||
display: block;
|
||||
font-size: 36rpx;
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.user-phone {
|
||||
|
||||
.user-id {
|
||||
font-size: 28rpx;
|
||||
opacity: 0.8;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.edit-btn {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.edit-icon {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 统计信息
|
||||
.stats-section {
|
||||
background: #fff;
|
||||
margin: 0 40rpx;
|
||||
border-radius: 20rpx;
|
||||
padding: 40rpx;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.1);
|
||||
|
||||
.stat-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
.stat-number {
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
color: #ff9a9e;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 菜单区域
|
||||
.menu-section {
|
||||
margin: 40rpx;
|
||||
|
||||
.menu-group {
|
||||
background: #fff;
|
||||
border-radius: 20rpx;
|
||||
margin-bottom: 30rpx;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 5rpx 20rpx rgba(0, 0, 0, 0.05);
|
||||
|
||||
.menu-item {
|
||||
.settings-icon {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 30rpx 40rpx;
|
||||
border-bottom: 2rpx solid #f5f5f5;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.menu-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.menu-icon {
|
||||
font-size: 40rpx;
|
||||
margin-right: 30rpx;
|
||||
}
|
||||
|
||||
.menu-title {
|
||||
font-size: 32rpx;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-arrow {
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: #f8f9fa;
|
||||
justify-content: center;
|
||||
|
||||
.settings-img {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 退出登录
|
||||
.logout-section {
|
||||
margin: 40rpx;
|
||||
|
||||
.logout-btn {
|
||||
width: 100%;
|
||||
height: 100rpx;
|
||||
background: #fff;
|
||||
color: #ff4757;
|
||||
border: 2rpx solid #ff4757;
|
||||
border-radius: 50rpx;
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
|
||||
&:active {
|
||||
background: #ff4757;
|
||||
.share-btn {
|
||||
position: absolute;
|
||||
top: 40rpx;
|
||||
right: 40rpx;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
padding: 20rpx 30rpx;
|
||||
border-radius: 30rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.share-img {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
.share-text {
|
||||
font-size: 24rpx;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
// 财务摘要
|
||||
.financial-summary {
|
||||
background: #f15a04;
|
||||
margin: 20rpx;
|
||||
border-radius: 20rpx;
|
||||
padding: 40rpx;
|
||||
color: #fff;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
.coin-background {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0.1;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.main-amount {
|
||||
text-align: center;
|
||||
margin-bottom: 40rpx;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
|
||||
.amount-number {
|
||||
display: block;
|
||||
font-size: 60rpx;
|
||||
font-weight: bold;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.amount-label {
|
||||
font-size: 28rpx;
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
position: absolute;
|
||||
top: 40rpx;
|
||||
right: 40rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20rpx;
|
||||
z-index: 2;
|
||||
|
||||
.action-btn {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
padding: 15rpx 25rpx;
|
||||
border-radius: 20rpx;
|
||||
|
||||
.btn-text {
|
||||
font-size: 24rpx;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.financial-stats {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
|
||||
.stat-item {
|
||||
text-align: center;
|
||||
|
||||
.stat-number {
|
||||
display: block;
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
margin-bottom: 5rpx;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 24rpx;
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 我的用户
|
||||
.my-users-section {
|
||||
background: #fff;
|
||||
margin: 20rpx;
|
||||
border-radius: 20rpx;
|
||||
padding: 40rpx;
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 30rpx;
|
||||
|
||||
.section-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.view-details {
|
||||
.details-text {
|
||||
font-size: 28rpx;
|
||||
color: #f15a04;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.user-stats {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
|
||||
.stat-item {
|
||||
text-align: center;
|
||||
|
||||
.stat-number {
|
||||
display: block;
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
color: #f15a04;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 其他功能
|
||||
.other-functions {
|
||||
background: #fff;
|
||||
margin: 20rpx;
|
||||
border-radius: 20rpx;
|
||||
padding: 40rpx;
|
||||
|
||||
.section-header {
|
||||
margin-bottom: 30rpx;
|
||||
|
||||
.section-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.function-grid {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
|
||||
.function-item {
|
||||
text-align: center;
|
||||
flex: 1;
|
||||
|
||||
.function-icon {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
background: #f5f5f5;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 auto 20rpx;
|
||||
|
||||
.function-img {
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.function-text {
|
||||
font-size: 24rpx;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user