|
|
@@ -1,150 +1,292 @@
|
|
|
<template>
|
|
|
- <view class="tabPage" :style="{'min-height':h+'px', 'padding-top':mt+'px'}">
|
|
|
- <cus-header title='我的' bgColor="transparent" :showback="false"></cus-header>
|
|
|
+ <view class="tab_page" :style="{'height':h+'px', 'padding-top':mt+'px'}">
|
|
|
+ <up-navbar title=" " bgColor="transparent">
|
|
|
+ <template #left></template>
|
|
|
+ </up-navbar>
|
|
|
+ <image src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/09/17/9043fbbe-2e5d-4adb-ba36-039d33a9b694.png" class="top_bg_img" mode="widthFix"></image>
|
|
|
<div class="info">
|
|
|
- <div class="i_top adfac">
|
|
|
- <image src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/06/16/0bdaa978-db1a-4edb-8a41-fc45b096380f.png"></image>
|
|
|
- <div class="it_texts">
|
|
|
- <p>{{userName||''}}</p>
|
|
|
- <p>{{mobile||''}}</p>
|
|
|
+ <div class="info-top adfacjb">
|
|
|
+ <div class="info-top-left adfac">
|
|
|
+ <image class="avatar" :src="userInfo?userInfo.avatar:'https://transcend.ringzle.com/xiaozhi-app/profile/2025/09/17/6db27a79-235b-4595-87f2-89ff09fc66a5.png'"></image>
|
|
|
+ <div class="text">
|
|
|
+ <div class="text-top">{{userInfo?userInfo.name:'未登录'}}</div>
|
|
|
+ <div class="text-bottom" v-if="userInfo"></div>
|
|
|
+ <div class="text-bottom" v-else @tap="showLogin">去登录注册 >></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="info-top-right">
|
|
|
+ <image src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/09/17/d0319d8d-1445-47d6-94fa-cb934e022ab8.png"></image>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="info-tip">
|
|
|
+ <div class="info-tip-pre adfacjb">
|
|
|
+ <div class="left">家庭公益名称：{{userInfo?userInfo.xxx:'暂无'}}</div>
|
|
|
+ <div class="right">
|
|
|
+ <image src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/09/17/79079542-4711-44e8-9246-9cd1b8ea4e39.png"></image>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="info-tip-pre adfacjb">
|
|
|
+ <div class="left">家庭公益口号：{{userInfo?userInfo.xxx:'暂无'}}</div>
|
|
|
+ <div class="right">
|
|
|
+ <image src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/09/17/79079542-4711-44e8-9246-9cd1b8ea4e39.png"></image>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="i_tips">
|
|
|
- <p>所属公司：{{enterpriseName||''}}</p>
|
|
|
- <p>所属团队：{{teamName||''}}</p>
|
|
|
+ </div>
|
|
|
+ <div class="box" style="margin-top: 40rpx;">
|
|
|
+ <div class="box-title">公益记录</div>
|
|
|
+ <div class="box-card adfacjb">
|
|
|
+ <div class="box-card-pre adffcac red">
|
|
|
+ <image class="top" src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/09/18/4e6e3db8-127f-433d-9644-66f1451a6d72.png"></image>
|
|
|
+ <div class="num">{{(heartNum||0).toFixed(2)}}</div>
|
|
|
+ <div class="text adf">
|
|
|
+ <text>我的爱心值</text>
|
|
|
+ <image src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/09/18/35df3e58-7b8c-4d3c-8f09-41f252cb3805.png"></image>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="box-card-pre adffcac purple">
|
|
|
+ <image class="top" src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/09/18/dc26c6af-2617-47b7-ab38-9ccbf2016c5c.png"></image>
|
|
|
+ <div class="num">{{(fileNum||0).toFixed(2)}}</div>
|
|
|
+ <div class="text adf">
|
|
|
+ <text>我的档案</text>
|
|
|
+ <image src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/09/18/51adb43e-acdd-475e-9e3d-64cbeedd4fe4.png"></image>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="box-card-pre adffcac orange">
|
|
|
+ <image class="top" src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/09/18/c5048d96-826e-4bbf-a133-dd2115162746.png"></image>
|
|
|
+ <div class="num">{{(hourNum||0).toFixed(2)}}</div>
|
|
|
+ <div class="text adf">
|
|
|
+ <text>义工时长(h)</text>
|
|
|
+ <image src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/09/18/9bdc2845-e4bc-4215-82d0-9582066b710f.png"></image>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="box">
|
|
|
- <div class="b_pre adfacjb">
|
|
|
- <div class="bp_l adfac">
|
|
|
- <image src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/06/16/ecb80887-6d86-420c-b797-7f12c5916871.png"></image>
|
|
|
- <text>版本</text>
|
|
|
+ <div class="box-title">我的成就</div>
|
|
|
+ <div class="box-achievement adfacjb">
|
|
|
+ <div class="box-achievement-left">收获<span>{{achievement}}</span>项成就</div>
|
|
|
+ <div class="box-achievement-right adfacjb">
|
|
|
+ <div class="imgs"></div>
|
|
|
+ <div class="jt">
|
|
|
+ <image src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/09/17/79079542-4711-44e8-9246-9cd1b8ea4e39.png"></image>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div class="bp_r">1.0.0</div>
|
|
|
</div>
|
|
|
- <div class="b_pre adfacjb" @tap="exitLogin">
|
|
|
- <div class="bp_l adfac">
|
|
|
- <image src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/06/16/4d10c9ef-8a13-4502-adfd-d388628446ab.png"></image>
|
|
|
- <text>退出登录</text>
|
|
|
+ </div>
|
|
|
+ <div class="box">
|
|
|
+ <div class="box-title">其他功能</div>
|
|
|
+ <div class="box-other adfacjb">
|
|
|
+ <div class="box-other-pre adffcac">
|
|
|
+ <image src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/09/18/53fb5a7a-e7fb-4e5d-b902-f434cfc6d786.png"></image>
|
|
|
+ <text>申领社会实践记录</text>
|
|
|
</div>
|
|
|
- <div class="bp_r">
|
|
|
- <u-icon name="arrow-right" color="#D3D2D2" size="32"></u-icon>
|
|
|
+ <div class="box-other-pre adffcac">
|
|
|
+ <image src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/09/18/06acc5f2-45e8-43ea-96a3-c17e79a190bc.png"></image>
|
|
|
+ <text>家庭成员</text>
|
|
|
+ </div>
|
|
|
+ <div class="box-other-pre adffcac">
|
|
|
+ <image src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/09/18/7746f429-615d-4e1b-8564-c943f07882be.png"></image>
|
|
|
+ <text>我的专享卷</text>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <Tabbar :tabbarIndex="1"></Tabbar>
|
|
|
+ <CusTabbar :tabbarIndex="2"></CusTabbar>
|
|
|
+ <login-register></login-register>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
-<script>
|
|
|
- import Tabbar from '@/components/CusTabbar/index.vue'
|
|
|
- export default {
|
|
|
- components:{ Tabbar },
|
|
|
- data(){
|
|
|
- return {
|
|
|
- userName:'',
|
|
|
- mobile:'',
|
|
|
- enterpriseName:'',
|
|
|
- teamName:''
|
|
|
- }
|
|
|
- },
|
|
|
- onLoad() {
|
|
|
- if(uni.getStorageSync('userInfo')){
|
|
|
- this.userName = JSON.parse(uni.getStorageSync('userInfo')).realName||'';
|
|
|
- this.mobile = JSON.parse(uni.getStorageSync('userInfo')).mobile||'';
|
|
|
- this.enterpriseName = JSON.parse(uni.getStorageSync('userInfo')).enterpriseName||'';
|
|
|
- this.teamName = JSON.parse(uni.getStorageSync('userInfo')).teamName||'';
|
|
|
- if(this.mobile) this.mobile = this.mobile.replace(this.mobile.substr(3,4),' **** ')
|
|
|
- }
|
|
|
- },
|
|
|
- methods:{
|
|
|
- exitLogin(){
|
|
|
- uni.clearStorageSync();
|
|
|
- uni.reLaunch({
|
|
|
- url:'/pages/login'
|
|
|
- })
|
|
|
- }
|
|
|
- }
|
|
|
+<script setup name="">
|
|
|
+ import CusTabbar from '@/components/CusTabbar/index.vue'
|
|
|
+ import { ref } from 'vue'
|
|
|
+ import { useUserStore } from '@/common/stores/user';
|
|
|
+ const userStore = useUserStore();
|
|
|
+
|
|
|
+ const userInfo = ref(null)
|
|
|
+ const heartNum = ref(0)
|
|
|
+ const fileNum = ref(0)
|
|
|
+ const hourNum = ref(0)
|
|
|
+ const achievement = ref(0)
|
|
|
+
|
|
|
+ const showLogin = () => {
|
|
|
+ userStore.openLoginModal();
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
-<style scoped lang="less">
|
|
|
- .tabPage{
|
|
|
- background: linear-gradient( 270deg, #EEEFF8 0%, #F6ECF4 100%, #F6ECF4 100%);
|
|
|
- padding: 0 0 172rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
+<style scoped lang="scss">
|
|
|
+ .tab_page{
|
|
|
.info{
|
|
|
- padding: 54rpx 40rpx;
|
|
|
- .i_top{
|
|
|
- image{
|
|
|
- width: 188rpx;
|
|
|
- height: 188rpx;
|
|
|
+ margin-top: 40rpx;
|
|
|
+ position: relative;
|
|
|
+ padding: 0 24rpx 0 16rpx;
|
|
|
+ &-top{
|
|
|
+ &-left{
|
|
|
+ .avatar{
|
|
|
+ width: 148rpx;
|
|
|
+ height: 148rpx;
|
|
|
+ }
|
|
|
+ .text{
|
|
|
+ margin-left: 24rpx;
|
|
|
+ &-top{
|
|
|
+ font-family: PingFang-SC, PingFang-SC;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 40rpx;
|
|
|
+ color: #151B29;
|
|
|
+ line-height: 40rpx;
|
|
|
+ }
|
|
|
+ &-bottom{
|
|
|
+ font-family: PingFangSC, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #151B29;
|
|
|
+ line-height: 26rpx;
|
|
|
+ margin-top: 26rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &-right{
|
|
|
+ image{
|
|
|
+ width: 48rpx;
|
|
|
+ height: 48rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &-tip{
|
|
|
+ margin-top: 4rpx;
|
|
|
+ &-pre{
|
|
|
+ margin-top: 36rpx;
|
|
|
+ .left{
|
|
|
+ font-family: PingFangSC, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #252525;
|
|
|
+ line-height: 28rpx;
|
|
|
+ }
|
|
|
+ .right{
|
|
|
+ image{
|
|
|
+ width: 32rpx;
|
|
|
+ height: 32rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
- .it_texts{
|
|
|
- padding-left: 30rpx;
|
|
|
- p{
|
|
|
- font-family: PingFang-SC, PingFang-SC;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .box{
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 24rpx;
|
|
|
+ padding: 40rpx 24rpx 36rpx;
|
|
|
+ margin-top: 20rpx;
|
|
|
+ position: relative;
|
|
|
+ &-title{
|
|
|
+ font-family: PingFang-SC, PingFang-SC;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 36rpx;
|
|
|
+ color: #151B29;
|
|
|
+ line-height: 40rpx;
|
|
|
+ }
|
|
|
+ &-card{
|
|
|
+ margin-top: 72rpx;
|
|
|
+ &-pre{
|
|
|
+ width: calc(100% / 3 - 8rpx);
|
|
|
+ height: 200rpx;
|
|
|
+ position: relative;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ .top{
|
|
|
+ width: 82rpx;
|
|
|
+ height: 82rpx;
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ margin-left: -41rpx;
|
|
|
+ top: -32rpx;
|
|
|
+ }
|
|
|
+ .num{
|
|
|
+ font-family: DINAlternate, DINAlternate;
|
|
|
font-weight: bold;
|
|
|
font-size: 40rpx;
|
|
|
- color: #252525;
|
|
|
line-height: 40rpx;
|
|
|
- &:last-child{
|
|
|
- font-family: PingFang-SC, PingFang-SC;
|
|
|
- font-weight: bold;
|
|
|
- font-size: 32rpx;
|
|
|
- color: #646464;
|
|
|
- line-height: 32rpx;
|
|
|
- margin-top: 36rpx;
|
|
|
+ text-align: center;
|
|
|
+ margin-top: 86rpx;
|
|
|
+ }
|
|
|
+ .text{
|
|
|
+ margin-top: 20rpx;
|
|
|
+ text{
|
|
|
+ font-family: PingFangSC, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 24rpx;
|
|
|
+ line-height: 24rpx;
|
|
|
+ }
|
|
|
+ image{
|
|
|
+ width: 26rpx;
|
|
|
+ height: 26rpx;
|
|
|
+ margin-left: 6rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &.red{
|
|
|
+ background-image: url('https://transcend.ringzle.com/xiaozhi-app/profile/2025/09/18/0b81f526-1698-459f-9428-f875c91c9e23.png');
|
|
|
+ .num,.text text{
|
|
|
+ color: #FC5768;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &.purple{
|
|
|
+ background-image: url('https://transcend.ringzle.com/xiaozhi-app/profile/2025/09/18/cca2576e-318c-4cbc-8e42-67c27b6882e4.png');
|
|
|
+ .num,.text text{
|
|
|
+ color: #8360E8;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &.orange{
|
|
|
+ background-image: url('https://transcend.ringzle.com/xiaozhi-app/profile/2025/09/18/ce8e6415-4490-41e9-b04c-292e6344f9ed.png');
|
|
|
+ .num,.text text{
|
|
|
+ color: #FF8200;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- .i_tips{
|
|
|
- margin-top: 48rpx;
|
|
|
- overflow: hidden;
|
|
|
- p{
|
|
|
- margin-top: 40rpx;
|
|
|
+ &-achievement{
|
|
|
+ margin-top: 24rpx;
|
|
|
+ &-left{
|
|
|
+ width: 210rpx;
|
|
|
font-family: PingFangSC, PingFang SC;
|
|
|
font-weight: 400;
|
|
|
- font-size: 28rpx;
|
|
|
- color: #6B7280;
|
|
|
- line-height: 28rpx;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #676775;
|
|
|
+ line-height: 24rpx;
|
|
|
+ label{
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: #EA3044;
|
|
|
+ line-height: 32rpx;
|
|
|
+ margin: 0 7rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &-right{
|
|
|
+ width: calc(100% - 210rpx);
|
|
|
+ .jt{
|
|
|
+ image{
|
|
|
+ width: 32rpx;
|
|
|
+ height: 32rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
- .box{
|
|
|
- padding: 30rpx;
|
|
|
- background: #FFFFFF;
|
|
|
- flex: 1;
|
|
|
- .b_pre{
|
|
|
- background: #FFFFFF;
|
|
|
- box-shadow: inset 0rpx -1rpx 0rpx 0rpx #ECECEC;
|
|
|
- border-radius: 16rpx 16rpx 0rpx 0rpx;
|
|
|
- padding: 39rpx 0;
|
|
|
- .bp_l{
|
|
|
+ &-other{
|
|
|
+ margin-top: 39rpx;
|
|
|
+ &-pre{
|
|
|
+ width: calc(100% / 3);
|
|
|
image{
|
|
|
- width: 36rpx;
|
|
|
- height: 36rpx;
|
|
|
+ width: 48rpx;
|
|
|
+ height: 48rpx;
|
|
|
}
|
|
|
text{
|
|
|
font-family: PingFangSC, PingFang SC;
|
|
|
font-weight: 400;
|
|
|
- font-size: 30rpx;
|
|
|
- color: #111111;
|
|
|
- line-height: 32rpx;
|
|
|
- margin-left: 30rpx;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #151B29;
|
|
|
+ line-height: 33rpx;
|
|
|
+ text-align: center;
|
|
|
+ margin-top: 16rpx;
|
|
|
}
|
|
|
}
|
|
|
- .bp_r{
|
|
|
- font-family: PingFang-SC, PingFang-SC;
|
|
|
- font-weight: bold;
|
|
|
- font-size: 30rpx;
|
|
|
- color: #111111;
|
|
|
- line-height: 32rpx;
|
|
|
- text-align: right;
|
|
|
- }
|
|
|
}
|
|
|
}
|
|
|
}
|
