339 lines
9.3 KiB
Vue
339 lines
9.3 KiB
Vue
<template>
|
|
<view class="mine-container">
|
|
<view class="mine-bg">
|
|
<image class="mine-bg-img" src="https://api.ccttiot.com/mine-bg-1745765736909.png" mode="widthFix" />
|
|
</view>
|
|
<HeaderBar title="我的" text-align="center"/>
|
|
<!-- 用户信息区 -->
|
|
<view class="user-info">
|
|
<image class="avatar" :src="user.avatar || defaultAvatar" mode="aspectFill" />
|
|
<view class="user-meta">
|
|
<view class="nickname">{{ user.nickName || '未登录' }}</view>
|
|
<view class="user-tag" v-if="user.shareLevelName">{{user.shareLevelName}}</view>
|
|
<view class="user-tag" v-if="user.orderLevelName">{{user.orderLevelName}}</view>
|
|
</view>
|
|
<button class="share-btn" open-type="share">
|
|
<image src="https://api.ccttiot.com/share-icon-1748442777724.png" class="share-icon" />
|
|
<text>分享</text>
|
|
</button>
|
|
</view>
|
|
<!-- 积分与奖励入口 -->
|
|
<view class="score-reward-row">
|
|
<view class="score-box" @click="goScore">
|
|
<image class="score-icon" src="https://api.ccttiot.com/Frame%2013-1745765238186.png" />
|
|
<view class="score-content">
|
|
<view class="score">{{ user.balance || 0 }}</view>
|
|
<view class="score-label">我的积分</view>
|
|
</view>
|
|
</view>
|
|
<view class="reward-box" @click="goReward">
|
|
<image class="reward-icon" src="https://api.ccttiot.com/Frame%2014-1745765058888.png" />
|
|
<view class="reward-content">
|
|
<view class="reward-label">立即提现</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 历史任务 -->
|
|
<view class="history-task">
|
|
<view class="task-title-row">
|
|
<view class="title">历史任务</view>
|
|
</view>
|
|
<view class="task-status-row">
|
|
<view class="task-status-item" v-for="item in taskStatusList" :key="item.key" @click="goTaskStatus(item.key)">
|
|
<image :src="item.icon" class="status-icon" />
|
|
<view class="status-label">{{ item.label }}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 其他菜单入口 -->
|
|
<view class="menu-list">
|
|
<view class="menu-item" v-for="item in menuList" :key="item.key" @click="onMenuClick(item)">
|
|
<image :src="item.icon" class="menu-icon" />
|
|
<view class="menu-label">{{ item.label }}</view>
|
|
</view>
|
|
</view>
|
|
<FooterTabBar :active="'/pages/mine/index'"/>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import FooterTabBar from '@/components/FooterTabBar.vue'
|
|
import HeaderBar from '@/components/HeaderBar.vue'
|
|
import { getUserProfile } from '@/api/system/user'
|
|
import { BalanceLogType } from '@/utils/enums'
|
|
export default {
|
|
components: {
|
|
FooterTabBar,
|
|
HeaderBar
|
|
},
|
|
data() {
|
|
return {
|
|
BalanceLogType,
|
|
user: {},
|
|
defaultAvatar: '/static/images/profile.jpg',
|
|
taskStatusList: [
|
|
{ key: '1', label: '已下单', icon: 'https://api.ccttiot.com/Frame%2015-1745765427533.png' },
|
|
{ key: '5', label: '已完成', icon: 'https://api.ccttiot.com/Frame%2017%20(1)-1745765427569.png' },
|
|
{ key: '3', label: '已取消', icon: 'https://api.ccttiot.com/Frame%2016-1745765427552.png' },
|
|
{ key: '4', label: '售后', icon: 'https://api.ccttiot.com/Frame%2017-1745765427585.png' },
|
|
],
|
|
menuList: [
|
|
// { key: 'info', label: '基本信息', icon: 'https://api.ccttiot.com/Frame%2023-1748442074389.png', path: '/pages/mine/info/index' },
|
|
{ key: 'car', label: '车辆管理', icon: 'https://api.ccttiot.com/Frame%20(1)-1748442074317.png', path: '/pages/car/index' },
|
|
// { key: 'address', label: '地址管理', icon: 'https://api.ccttiot.com/%E5%9C%B0%E5%9D%80%20(1)-1748442325178.png', path: '/pages/address/index' },
|
|
{ key: 'help', label: '帮助中心', icon: 'https://api.ccttiot.com/Frame-1748442074654.png', path: '/pages/article/index?type=2' },
|
|
{ key: 'feedback', label: '意见反馈', icon: 'https://api.ccttiot.com/Frame%20(2)-1748442074341.png', path: '/pages/complaint/edit' },
|
|
{ key: 'privacy', label: '隐私协议', icon: 'https://api.ccttiot.com/Frame%20(3)-1748442074366.png', path: '/pages/article/detail?type=4' },
|
|
{ key: 'mch', label: '商家后台', icon: 'https://api.ccttiot.com/%E5%95%86%E5%AE%B6%20(3)-1748442480183.png', path: '/pages/mch/check' },
|
|
]
|
|
}
|
|
},
|
|
onShow() {
|
|
this.fetchUserProfile();
|
|
},
|
|
methods: {
|
|
goScore() {
|
|
uni.navigateTo({ url: `/pages/score/index?type=${BalanceLogType.USER_SCORE}` })
|
|
},
|
|
goReward() {
|
|
// 跳转奖励页面
|
|
uni.navigateTo({ url: '/pages/withdraw/index' })
|
|
},
|
|
goAllTasks() {
|
|
// 跳转全部任务页面
|
|
uni.navigateTo({ url: '/pages/mine/task/index' })
|
|
},
|
|
goTaskStatus(key) {
|
|
// 跳转任务状态页面
|
|
uni.navigateTo({ url: `/pages/task/index?status=${key}` })
|
|
},
|
|
onMenuClick(item) {
|
|
if (item.path) {
|
|
uni.navigateTo({ url: item.path })
|
|
}
|
|
},
|
|
onShareAppMessage() {
|
|
return {
|
|
title: `驰捷修-派单快速度快安全倒计时阶段`,
|
|
path: `/pages/index/index?invitorId=${this.user.userId}`,
|
|
imageUrl: 'https://api.ccttiot.com/64024b0ec02392312a95d75c369308143f64f6cd15b0e9-1KT9Qi_fw1200%201-1747228539523.png'
|
|
}
|
|
},
|
|
fetchUserProfile() {
|
|
getUserProfile().then(res => {
|
|
this.user = res.data || {}
|
|
})
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.mine-container {
|
|
min-height: 100vh;
|
|
background: linear-gradient(135deg, #eaf2ff 0%, #f7faff 100%);
|
|
padding-bottom: 80rpx;
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.mine-bg {
|
|
width: 100%;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
z-index: -1;
|
|
.mine-bg-img {
|
|
width: 100%;
|
|
display: block;
|
|
pointer-events: none;
|
|
user-select: none;
|
|
}
|
|
}
|
|
|
|
.user-info {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 40rpx 32rpx 24rpx 32rpx;
|
|
background: transparent;
|
|
position: relative;
|
|
.avatar {
|
|
width: 104rpx;
|
|
height: 104rpx;
|
|
border-radius: 50%;
|
|
border: 4rpx solid #fff;
|
|
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
|
|
margin-right: 24rpx;
|
|
background: #f5f5f5;
|
|
}
|
|
.user-meta {
|
|
flex: 1;
|
|
.nickname {
|
|
font-size: 36rpx;
|
|
font-weight: 600;
|
|
color: #222;
|
|
margin-bottom: 8rpx;
|
|
}
|
|
.user-tag {
|
|
display: inline-block;
|
|
font-size: 22rpx;
|
|
color: #6a8cff;
|
|
background: #f0f5ff;
|
|
border-radius: 20rpx;
|
|
padding: 4rpx 18rpx;
|
|
}
|
|
}
|
|
.share-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
color: #6a8cff;
|
|
font-size: 24rpx;
|
|
cursor: pointer;
|
|
margin-left: 16rpx;
|
|
background: none;
|
|
border: none;
|
|
padding: 0;
|
|
line-height: 1;
|
|
&::after {
|
|
border: none;
|
|
}
|
|
.share-icon {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
margin-right: 4rpx;
|
|
}
|
|
text {
|
|
margin-left: 4rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.score-reward-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin: 0 32rpx 32rpx 32rpx;
|
|
.score-box, .reward-box {
|
|
flex: 1;
|
|
background: #fff;
|
|
border-radius: 24rpx;
|
|
box-shadow: 0 4rpx 24rpx rgba(106, 140, 255, 0.08);
|
|
padding: 24rpx 0;
|
|
display: flex;
|
|
align-items: center;
|
|
margin-right: 24rpx;
|
|
&:last-child {
|
|
margin-right: 0;
|
|
}
|
|
.score-icon, .reward-icon {
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
margin-left: 24rpx;
|
|
margin-right: 18rpx;
|
|
flex-shrink: 0;
|
|
}
|
|
.score-content, .reward-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
}
|
|
.score {
|
|
font-size: 40rpx;
|
|
font-weight: bold;
|
|
color: #ff7e3f;
|
|
margin-bottom: 8rpx;
|
|
}
|
|
.score-label, .reward-label {
|
|
font-size: 28rpx;
|
|
color: #3a3a3a;
|
|
}
|
|
}
|
|
.score-box {
|
|
background: linear-gradient(183.25deg, #FDA25B -161.91%, #FFFFFF 97.31%);
|
|
border: 1rpx solid #fff3e0;
|
|
}
|
|
.reward-box {
|
|
background: linear-gradient(180deg, rgba(112, 170, 255, 0.5) -158.75%, #FFFFFF 100%);
|
|
border: 1rpx solid #e0eaff;
|
|
}
|
|
}
|
|
|
|
.history-task {
|
|
background: #fff;
|
|
border-radius: 24rpx;
|
|
margin: 0 32rpx 32rpx 32rpx;
|
|
box-shadow: 0 4rpx 24rpx rgba(106, 140, 255, 0.06);
|
|
padding: 24rpx 0 0 0;
|
|
.task-title-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 0 32rpx 16rpx 32rpx;
|
|
.title {
|
|
font-size: 28rpx;
|
|
font-weight: 600;
|
|
color: #222;
|
|
}
|
|
.view-all {
|
|
font-size: 24rpx;
|
|
color: #6a8cff;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
.task-status-row {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
padding: 16rpx 0 24rpx 0;
|
|
.task-status-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
.status-icon {
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
margin-bottom: 8rpx;
|
|
}
|
|
.status-label {
|
|
font-size: 22rpx;
|
|
color: #666;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.menu-list {
|
|
background: #fff;
|
|
border-radius: 24rpx;
|
|
margin: 0 32rpx 32rpx 32rpx;
|
|
box-shadow: 0 4rpx 24rpx rgba(106, 140, 255, 0.06);
|
|
padding: 8rpx 0;
|
|
.menu-item {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 28rpx 32rpx;
|
|
border-bottom: 1rpx solid #f0f0f0;
|
|
&:last-child {
|
|
border-bottom: none;
|
|
}
|
|
.menu-icon {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
margin-right: 24rpx;
|
|
}
|
|
.menu-label {
|
|
font-size: 28rpx;
|
|
color: #222;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* 底部TabBar适配 */
|
|
::v-deep .footer-tab-bar {
|
|
position: fixed;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
z-index: 10;
|
|
}
|
|
</style>
|