|
|
@@ -1,76 +1,80 @@
|
|
|
<!-- 我的主页 -->
|
|
|
<template>
|
|
|
<view class="container">
|
|
|
- <custom :bgColor="'bg-linear'" :backColor="'#FFFFFF'" :isBack="false" v-show="isCustom">
|
|
|
- <text slot="content" style="color: #FFFFFF; font-size: 32rpx; font-weight: 600;">我的</text>
|
|
|
- </custom>
|
|
|
-
|
|
|
- <view class="avatar-box">
|
|
|
- <view class="title">我的</view>
|
|
|
- <template v-if="userInfo && userInfo.accountBase">
|
|
|
- <view class="avatar-box-content">
|
|
|
- <view class="flex avatar-box-content-info">
|
|
|
- <img src="@/static/common/logo.png" alt="">
|
|
|
- <view class="avatar-box-content-info-right">
|
|
|
- <view class="abcir-username">{{userInfo.accountBase.accountName}}({{userInfo.accountBase.accountCode}})</view>
|
|
|
- <view class="abcir-address">{{userInfo.accountBase.departmentName}}</view>
|
|
|
- <view class="abcir-job">岗位：{{userInfo.accountBase.roleName}}</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
+ <u-navbar
|
|
|
+ title="我的"
|
|
|
+ bgColor="#ffffff"
|
|
|
+ titleStyle="color: #333333; font-weight: 500;"
|
|
|
+ placeholder
|
|
|
+ v-show="isCustom"
|
|
|
+ leftIcon="">
|
|
|
+ </u-navbar>
|
|
|
+
|
|
|
+ <view class="bg-container"></view>
|
|
|
+
|
|
|
+ <view class="title-container">我的</view>
|
|
|
+
|
|
|
+ <view class="user-container card">
|
|
|
+ <view class="user">
|
|
|
+ <image src="@/static/common/logo.png" mode="aspectFill"></image>
|
|
|
+ <view class="main">
|
|
|
+ <view class="name">张三</view>
|
|
|
+ <view class="real">实名认证</view>
|
|
|
</view>
|
|
|
- <view class="avatar-box-botoom flex">
|
|
|
- <view class="flex">
|
|
|
- <img src="@/static/user/icon_1.png" alt="">
|
|
|
- <view class="text-box">
|
|
|
- <view class="date">{{userInfo.accountInfoMsg.timeLength || 0}}</view>
|
|
|
- <view class="text">学习时长</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="flex">
|
|
|
- <img src="@/static/user/icon_2.png" alt="">
|
|
|
- <view class="text-box">
|
|
|
- <view class="date">{{userInfo.accountInfoMsg.totalAccount || 0}}</view>
|
|
|
- <view class="text">学习资料</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="flex">
|
|
|
- <img src="@/static/user/icon_3.png" alt="">
|
|
|
- <view class="text-box">
|
|
|
- <view class="date">{{userInfo.accountInfoMsg.exchangeScore || 0}}</view>
|
|
|
- <view class="text">可用积分</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
+ </view>
|
|
|
+ <view class="stats">
|
|
|
+ <view class="item" v-for="(item, index) in userStats" :key="index" @tap="$navPage(item.url)">
|
|
|
+ <view class="num">{{item.num}}</view>
|
|
|
+ <view class="text">{{item.name}}</view>
|
|
|
</view>
|
|
|
- </template>
|
|
|
- <u-skeleton v-else :loading="true" avatar rows="4"></u-skeleton>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
|
|
|
- <view class="cell">
|
|
|
- <u-cell-group>
|
|
|
- <view class="cell-item">
|
|
|
- <u-cell class="b-border" size="large" isLink :title="pageList[0].title" :url="pageList[0].url">
|
|
|
- </u-cell>
|
|
|
- <u-cell size="large" isLink :title="pageList[1].title" :url="pageList[1].url"></u-cell>
|
|
|
- </view>
|
|
|
- <view class="cell-item">
|
|
|
- <u-cell class="b-border" size="large" isLink :title="pageList[2].title" :url="pageList[2].url">
|
|
|
- </u-cell>
|
|
|
- <u-cell class="b-border" size="large" isLink :title="pageList[3].title" :url="pageList[3].url">
|
|
|
- </u-cell>
|
|
|
- <u-cell class="b-border" size="large" isLink :title="pageList[4].title" :url="pageList[4].url">
|
|
|
- </u-cell>
|
|
|
- <u-cell size="large" isLink :title="pageList[5].title" :url="pageList[5].url"></u-cell>
|
|
|
+ <view class="stats-container card">
|
|
|
+ <view class="top">
|
|
|
+ <view class="left">我发布的</view>
|
|
|
+ <view class="right">全部<text class="iconfont icon-jinru"></text></view>
|
|
|
+ </view>
|
|
|
+ <view class="stats">
|
|
|
+ <view class="item" v-for="(item, index) in issueStats" :key="index">
|
|
|
+ <view class="icon">
|
|
|
+ <text class="iconfont" :class="item.icon"></text>
|
|
|
+ <u-badge max="99" :value="item.num" :absolute="true" :offset="[-4, -4]"></u-badge>
|
|
|
+ </view>
|
|
|
+ <view class="text">{{item.name}}</view>
|
|
|
</view>
|
|
|
- <view class="cell-item">
|
|
|
- <u-cell size="large" isLink :title="pageList[6].title" :url="pageList[6].url"></u-cell>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="stats-container card">
|
|
|
+ <view class="top">
|
|
|
+ <view class="left">我买到的</view>
|
|
|
+ <view class="right">全部<text class="iconfont icon-jinru"></text></view>
|
|
|
+ </view>
|
|
|
+ <view class="stats">
|
|
|
+ <view class="item" v-for="(item, index) in buyStats" :key="index">
|
|
|
+ <view class="icon">
|
|
|
+ <text class="iconfont" :class="item.icon"></text>
|
|
|
+ <u-badge max="99" :value="item.num" :absolute="true" :offset="[-4, -4]"></u-badge>
|
|
|
+ </view>
|
|
|
+ <view class="text">{{item.name}}</view>
|
|
|
</view>
|
|
|
- <view class="cell-item">
|
|
|
- <u-cell class="b-border" size="large" isLink :title="pageList[7].title" :url="pageList[7].url">
|
|
|
- </u-cell>
|
|
|
- <u-cell size="large" isLink :title="pageList[8].title" :url="pageList[8].url"></u-cell>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="menu-container card">
|
|
|
+ <block v-for="(item, index) in pageList" :key="index">
|
|
|
+ <view class="item" v-if="item.url != 'contact'" @tap="$navPage(item.url)">
|
|
|
+ <view class="name">{{item.name}}</view>
|
|
|
+ <text class="iconfont icon-jinru"></text>
|
|
|
</view>
|
|
|
- </u-cell-group>
|
|
|
+ <button class="item" v-else open-type="contact" :plain="true">
|
|
|
+ <view class="name">{{item.name}}</view>
|
|
|
+ <text class="iconfont icon-jinru"></text>
|
|
|
+ </button>
|
|
|
+ </block>
|
|
|
</view>
|
|
|
+
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
@@ -82,16 +86,28 @@ export default {
|
|
|
isCustom: false, // 是否显示自定义导航
|
|
|
userInfo: uni.getStorageSync('recycle_mobile_user'),
|
|
|
|
|
|
+ userStats: [
|
|
|
+ { name: '我的点赞', num: 0, url: '/pages/mine/myLike' },
|
|
|
+ { name: '我的收藏', num: 0, url: '/pages/mine/myCollection' },
|
|
|
+ { name: '我的收益', num: 0, url: '/pages/mine/myEarnings' },
|
|
|
+ ],
|
|
|
+ issueStats: [
|
|
|
+ { name: '我的发布', icon: 'icon-xiangji', num: 1 },
|
|
|
+ { name: '已卖出', icon: 'icon-xiangji', num: 0 },
|
|
|
+ { name: '已下架', icon: 'icon-xiangji', num: 0 },
|
|
|
+ ],
|
|
|
+ buyStats: [
|
|
|
+ { name: '待付款', icon: 'icon-xiangji', num: 0 },
|
|
|
+ { name: '待发货', icon: 'icon-xiangji', num: 0 },
|
|
|
+ { name: '待收货', icon: 'icon-xiangji', num: 0 },
|
|
|
+ ],
|
|
|
+
|
|
|
pageList: [
|
|
|
- { title: '要学', url: '/pages/profile/study/index' },
|
|
|
- { title: '要考', url: '/pages/profile/examination/index' },
|
|
|
- { title: '我的课程', url: '/pages/profile/lesson/index' },
|
|
|
- { title: '我的专题', url: '/pages/profile/special/index' },
|
|
|
- { title: '其他学习', url: '/pages/profile/other/index' },
|
|
|
- { title: '我的收藏', url: '/pages/profile/collect/index' },
|
|
|
- { title: '我的案例', url: '/pages/profile/case/index' },
|
|
|
- { title: '积分兑换', url: '/pages/profile/shop/index' },
|
|
|
- { title: '我的证书', url: '/pages/profile/certificate/index' }
|
|
|
+ { name: '我的地址', url: '' },
|
|
|
+ { name: '防骗指南', url: '' },
|
|
|
+ { name: '联系客服', url: 'contact' },
|
|
|
+ { name: '隐私政策', url: '' },
|
|
|
+ { name: '用户协议', url: '' },
|
|
|
],
|
|
|
}
|
|
|
},
|
|
|
@@ -125,109 +141,141 @@ export default {
|
|
|
overflow: auto;
|
|
|
}
|
|
|
|
|
|
-.avatar-box {
|
|
|
- position: relative;
|
|
|
- height: 352rpx;
|
|
|
- padding: 0 30rpx;
|
|
|
- margin-bottom: 70rpx;
|
|
|
- background: linear-gradient(-45deg, #6da7ff 0%, #7fdaff 100%);
|
|
|
- .title {
|
|
|
- font-size: 32rpx;
|
|
|
- color: #ffffff;
|
|
|
+.card {
|
|
|
+ background: #ffffff;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ position: relative;
|
|
|
+ margin: 0 30rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.bg-container {
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 750rpx;
|
|
|
+ height: 750rpx;
|
|
|
+ background: linear-gradient(to bottom, $theme-color, #f4f2f2);
|
|
|
+}
|
|
|
+
|
|
|
+.title-container {
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: #ffffff;
|
|
|
+ height: 88rpx;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ font-weight: 600;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+
|
|
|
+.user-container {
|
|
|
+ margin-top: 10rpx;
|
|
|
+ padding: 20rpx 20rpx 40rpx;
|
|
|
+ .user {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ image {
|
|
|
+ width: 88rpx;
|
|
|
height: 88rpx;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- font-weight: 600;
|
|
|
+ border-radius: 50%;
|
|
|
}
|
|
|
- &-content {
|
|
|
- margin-top: 16rpx;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: space-between;
|
|
|
- line-height: 54rpx;
|
|
|
- color: #f7f7f7;
|
|
|
- img {
|
|
|
- width: 120rpx;
|
|
|
- height: 120rpx;
|
|
|
- border-radius: 50%;
|
|
|
- }
|
|
|
- &-info {
|
|
|
- &-right {
|
|
|
- margin-left: 20rpx;
|
|
|
- color: #ffffff;
|
|
|
-
|
|
|
- .abcir- {
|
|
|
- &username {
|
|
|
- font-size: 36rpx;
|
|
|
- }
|
|
|
- &address {
|
|
|
- font-size: 28rpx;
|
|
|
- line-height: 28rpx;
|
|
|
- margin-top: 16rpx;
|
|
|
- }
|
|
|
- &job {
|
|
|
- font-size: 28rpx;
|
|
|
- line-height: 28rpx;
|
|
|
- margin-top: 12rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ .main {
|
|
|
+ margin-left: 20rpx;
|
|
|
+ .name {
|
|
|
+ font-size: 32rpx;
|
|
|
+ }
|
|
|
+ .real {
|
|
|
+ margin-top: 12rpx;
|
|
|
+ background: $theme-color;
|
|
|
+ border-radius: 4rpx;
|
|
|
+ font-size: 20rpx;
|
|
|
+ color: #ffffff;
|
|
|
+ padding: 4rpx 8rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .stats {
|
|
|
+ display: flex;
|
|
|
+ margin-top: 30rpx;
|
|
|
+ .item {
|
|
|
+ flex: 1;
|
|
|
+ text-align: center;
|
|
|
+ .num {
|
|
|
+ font-size: 36rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+ .text {
|
|
|
+ margin-top: 8rpx;
|
|
|
+ font-size: 24rpx;
|
|
|
+ }
|
|
|
}
|
|
|
+ }
|
|
|
+}
|
|
|
|
|
|
- &-botoom {
|
|
|
- height: 140rpx;
|
|
|
- width: 690rpx;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- position: absolute;
|
|
|
- bottom: -70rpx;
|
|
|
- background: #ffffff;
|
|
|
- border-radius: 20rpx;
|
|
|
- padding: 0 30rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- &>view {
|
|
|
- // flex: 1;
|
|
|
- align-items: center;
|
|
|
- }
|
|
|
- img {
|
|
|
- width: 48rpx;
|
|
|
- height: 48rpx;
|
|
|
- }
|
|
|
- .text-box {
|
|
|
- margin-left: 16rpx;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: space-between;
|
|
|
- min-width: 100rpx;
|
|
|
- .date {
|
|
|
- font-size: 32rpx;
|
|
|
- color: var(--assist-color);
|
|
|
- font-weight: 600;
|
|
|
- }
|
|
|
- .text {
|
|
|
- color: #333333;
|
|
|
- font-size: 24rpx;
|
|
|
- margin-top: 4rpx;
|
|
|
- }
|
|
|
+.stats-container {
|
|
|
+ padding: 20rpx 20rpx 40rpx;
|
|
|
+ margin-top: 30rpx;
|
|
|
+ .top {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ .left {
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+ .right {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: $sec-font;
|
|
|
+ text {
|
|
|
+ font-size: 28rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .stats {
|
|
|
+ display: flex;
|
|
|
+ margin-top: 40rpx;
|
|
|
+ .item {
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ .icon {
|
|
|
+ position: relative;
|
|
|
+ .iconfont {
|
|
|
+ font-size: 48rpx;
|
|
|
}
|
|
|
+ }
|
|
|
+ .text {
|
|
|
+ margin-top: 8rpx;
|
|
|
+ font-size: 24rpx;
|
|
|
+ }
|
|
|
}
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
-.cell {
|
|
|
- margin: 100rpx 30rpx 30rpx 30rpx;
|
|
|
+.menu-container {
|
|
|
+ margin-top: 30rpx;
|
|
|
+ .item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ height: 100rpx;
|
|
|
+ padding: 0 30rpx;
|
|
|
+ border: none;
|
|
|
+ border-bottom: 1px solid #f5f5f5;
|
|
|
|
|
|
- ::v-deep .u-cell-group__wrapper .u-line {
|
|
|
- border-bottom: 0 !important;
|
|
|
- }
|
|
|
+ &:last-child {
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
|
|
|
- &-item {
|
|
|
- margin-bottom: 20rpx;
|
|
|
- border-radius: 20rpx;
|
|
|
- background-color: #fff;
|
|
|
- overflow: hidden;
|
|
|
+ .name {
|
|
|
+ font-size: 32rpx;
|
|
|
+ }
|
|
|
|
|
|
- }
|
|
|
+ .iconfont {
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: $sec-font;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
Moss