@@ -10,7 +10,8 @@
< view class = "profile" >
<!-- < image-preview v-if = "user_info.imageAddr" class="img_100" :src="user_info.imageAddr" > < / image -preview > -- >
< image v-if = "user_info.imagePath" class="img_100" :src="user_info.imagePath" > < / image >
< image -preview v-else-if = "user_info.imageAddr" class="img_100" :src="user_info.imageAddr" > < / image -preview >
< image -preview v-else-if = "user_info.imageAddr" class="img_100"
:src = "user_info.imageAddr" > < / image-preview >
< image v-else class = "img_100" src = "/static/images/me/default_user_avatar.png" > < / image >
< / view >
< view class = "personal_information_data" >
@@ -19,8 +20,10 @@
{ { user _info . userName } }
< / view >
< view class = "sex" >
< image v-if = "user_info.gender === 'f'" class="img_100" src="/static/images/me/wuman.png" > < / image >
< image v-if = "user_info.gender === 'm'" class="img_100" src= "/static/images/me/man.png"> < / image >
< image v-if = "user_info.gender === 'f'" class="img_100"
src = "/static/images/me/wu man.png" > < / image >
< image v-if = "user_info.gender === 'm'" class="img_100" src="/static/images/me/man.png" >
< / image >
< / view >
< / view >
< view class = "work_number_div" > 工号 : { { user _info . userId } } < / view >
@@ -32,31 +35,25 @@
< view class = "item" >
< view class = "top" > 累计学习时长 < / view >
< view class = "bottom" >
< uv-count-to
:start Val = "statistics_data['startAccmPoint'] "
:endVal = "statistics_data['accmPoint']"
:useEasing = "true"
:decimals = "1"
ref = "accmPointRef"
> < / uv-count-to >
h
< uv-count-to :startVal = "statistics_data['startStdtTmLen']"
:end Val = "statistics_data['stdtTmLen']" :useEasing = "true" :decimals = "1 "
ref = "stdtTmLenRef" > < / uv-count-to > h
< / view >
< / view >
< view class = "item" >
< view class = "top" > 累计完成任务 < / view >
< view class = "bottom" >
< uv-count-to
:start Val = "statistics_data['startA ccmTaskCnt']"
:endVal = "statistics_data['accmTaskCnt']"
:useEasing = "true"
ref = "accmTaskCntRef"
> < / uv-count-to >
< uv-count-to :startVal = "statistics_data['startAccmTaskCnt']"
:end Val = "statistics_data['a ccmTaskCnt']" :useEasing = "true"
ref = "accmTaskCntRef" > < / uv-count-to >
< / view >
< / view >
< view class = "item" >
< view class = "top" > 累计获得积分 < / view >
< view class = "bottom" >
< uv-count-to :startVal = "statistics_data['startStdtTmLen']" :endVal = "statistics_data['stdtTmLen']" :useEasing = "true" ref = "stdtTmLenRef" > < / uv-count-to >
< uv-count-to :startVal = "statistics_data['startAccmPoint']"
:endVal = "statistics_data['accmPoint']" :useEasing = "true"
ref = "accmPointRef" > < / uv-count-to >
< / view >
< / view >
< / view >
@@ -95,7 +92,8 @@
< uv-cell-group :border = "false" >
< uv-cell title = "设置" :isLink = "true" @click ="common.navigateTo('/pages/setting/index')" > < / uv -cell >
< uv-cell title = "客服" :isLink = "true" @click ="goTest" > < / uv -cell >
< uv-cell title = "退出登录" :isLink = "true" :clickable = "false" :border = "false" @click ="click_loginout()" > < / uv -cell >
< uv-cell title = "退出登录" :isLink = "true" :clickable = "false" :border = "false"
@click ="click_loginout()" > < / uv -cell >
< / uv-cell-group >
< / view >
< tabbar-shadow > < / tabbar-shadow >
@@ -103,308 +101,325 @@
< / template >
< script setup >
import { ref , computed , reactive } from 'vue' ;
import { onShow } from '@dcloudio/uni-app' ;
import common from '@/common/common' ;
import { getUserInfo } from '@/common/common' ;
import { onPullDownRefresh } from '@dcloudio/uni-app ';
import { loginOut } from '@/api/login.js' ;
import { queryTraStdyStatisticsSelf } from '@/api/user.js' ;
import { useSocketStore } from "@/store/socket.js"
const socketStore = useSocketStore ( )
import {
ref ,
computed ,
reactive
} from 'vue ';
import {
onShow
} from '@dcloudio/uni-app' ;
import common from '@/common/common' ;
import {
getUserInfo
} from '@/common/common' ;
import {
onPullDownRefresh
} from '@dcloudio/uni-app' ;
import {
loginOut
} from '@/api/login.js' ;
import {
queryTraStdyStatisticsSelf
} from '@/api/user.js' ;
import {
useSocketStore
} from "@/store/socket.js"
const socketStore = useSocketStore ( )
const accmTaskCntRef = ref ( null ) ;
const accmPointRef = ref ( null ) ;
const stdtTmLenRef = ref ( null ) ;
const statistics _data = reactive ( {
stdtTmLen : 0 , // 累计学习时长
accmTaskCnt : 0 , // 累计完成任务
accmPoint : 0 , // 累计获得积分
startStdtTmLen : 0 , // 起始累计学习时长
startAccmTaskCnt : 0 , // 起始累计完成任务
startAccmPoint : 0 , // 起始累计获得积分
request _time : 0 , // 上次请求时间
init : function ( ) {
// 初始化统计数据
const me _statistics _data = common . getValue ( 'me_statistics_data' ) ; // 获取缓存
if ( me _statistics _data ) {
this . stdtTmLen = me _statistics _data . stdtTmLen ;
this . accmTaskCnt = me _statistics _data . accmTaskCnt ;
this . accmPoint = me _statistics _data . accmPoint ;
}
} ,
get _statistics _data : async function ( ) {
try {
const time _now = Date . now ( ) ;
if ( time _now - this . request _time > 300 ) {
this . request _time = time _now ;
// 获取最新数据
const res = await queryTraStdyStatisticsSelf ( ) ;
common . setValue ( 'me_statistics_data' , res . body ) ;
const accmPoint = res . body . accmPoint ;
const accmTaskCnt = res . body . accmTaskCnt ;
const stdtTmLen = res . body . stdtTmLen ;
if ( accmPoint != this . accmPoint ) {
// 不相等就执行
this . startAccmPoint = this . accmPoint ;
this . accmPoint = accmPoint ;
accmPointRef . value . start ( ) ;
const accmTaskCntRef = ref ( null ) ;
const accmPointRef = ref ( null ) ;
const stdtTmLenRef = ref ( null ) ;
const statistics _data = reactive ( {
stdtTmLen : 0 , // 累计学习时长
accmTaskCnt : 0 , // 累计完成任务
accmPoint : 0 , // 累计获得积分
startStdtTmLen : 0 , // 起始累计学习时长
startAccmTaskCnt : 0 , // 起始累计完成任务
startAccmPoint : 0 , // 起始累计获得积分
request _time : 0 , // 上次请求时间
init : function ( ) {
// 初始化统计数据
const me _statistics _data = common . getValue ( 'me_statistics_data' ) ; // 获取缓存
if ( me _statistics _data ) {
this . stdtTmLen = me _statistics _data . stdtTmLen ;
this . accmTaskCnt = me _statistics _data . accmTaskCnt ;
this . accmPoint = me _statistics _data . accmPoint ;
}
} ,
get _statistics _data : async function ( ) {
try {
const time _now = Date . now ( ) ;
if ( time _now - this . request _time > 300 ) {
this . request _time = time _now ;
// 获取最新数据
const res = await queryTraStdyStatisticsSelf ( ) ;
common . setValue ( 'me_statistics_data' , res . body ) ;
const accmPoint = res . body . accmPoint ;
const accmTaskCnt = res . body . accmTaskCnt ;
const stdtTmLen = res . body . stdtTmLen ;
if ( accmPoint != this . accmPoint ) {
// 不相等就执行
this . startAccmPoint = this . accmPoint ;
this . accmPoint = accmPoint ;
accmPointRef . value . start ( ) ;
}
if ( accmTaskCnt != this . accmTaskCnt ) {
// 不相等就执行
this . startAccmTaskCnt = this . accmTaskCnt ;
this . accmTaskCnt = accmTaskCnt ;
accmTaskCntRef . value . start ( ) ;
}
if ( stdtTmLen != this . stdtTmLen ) {
// 不相等就执行
this . startStdtTmLen = this . stdtTmLen ;
this . stdtTmLen = stdtTmLen ;
stdtTmLenRef . value . start ( ) ;
}
console . log ( '统计数据已更新' ) ;
} else {
console . log ( '时间没到无需更新' ) ;
}
if ( accmTaskCnt != this . accmTaskCnt ) {
// 不相等就执行
this . startAccmTaskCnt = this . accmTaskCnt ;
this . accmTaskCnt = accmTaskCnt ;
accmTaskCntRef . value . start ( ) ;
}
if ( stdtTmLen != this . stdtTmLen ) {
// 不相等就执行
this . startStdtTmLen = this . stdtTmLen ;
this . stdtTmLen = stdtTmLen ;
stdtTmLenRef . value . start ( ) ;
}
console . log ( '统计数据已更新' ) ;
} else {
console . log ( '时间没到无需更新' ) ;
} catch ( error ) {
console . error ( '获取统计数据失败:' , error ) ;
}
} catch ( error ) {
console . error ( '获取统计数据失败:' , error ) ;
}
}
} ) ;
const user _info = reactive ( {
userName : '' ,
userId : '' ,
imageAddr : '' ,
} ) ;
const goTest = ( ) => {
const now = Date . now ( ) ;
if ( now - lastClickTime . value > 500 ) {
clickCount . value = 0 ;
}
clickCount . value ++ ;
lastClickTime . value = now ;
if ( clickCount . value == 6 ) {
common . navigateTo ( '/pages/test/index' ) ;
clickCount . value = 0 ;
}
} ;
const click _loginout = ( ) => {
common . show ( '确定退出登录?' ) . then ( async ( res ) => {
console . log ( res ) ;
if ( ! res ) return ;
try {
common . loading ( '正在退出登录' ) ;
socketStore . closeSocket ( )
await loginOut ( ) ;
} catch ( e ) { }
common . hideLoading ( ) ;
// 主动退出登录后,再次登录应该进首页
common . reLaunch ( '/pages/login/login' ) ;
} ) ;
} ;
onShow ( ( ) => {
const user _info _cache = getUserInfo ( ) ;
Object . assign ( user _info , user _info _cache ) ;
console . log ( 'user_info' , user _info ) ;
statistics _data [ 'get_statistics_data' ] ( ) ; // 获取统计数据
} ) ;
onPullDownRefresh ( ( ) => {
console . log ( '下拉刷新' ) ;
uni . stopPullDownRefresh ( ) ;
} ) ;
const user _info = reactive ( {
userName : '' ,
userId : '' ,
imageAddr : '' ,
} ) ;
const goTest = ( ) => {
const now = Date . now ( ) ;
if ( now - lastClickTime . value > 500 ) {
clickCount . value = 0 ;
}
clickCount . value ++ ;
lastClickTime . value = now ;
if ( clickCount . value == 6 ) {
common . navigateTo ( '/pages/test/index' ) ;
clickCount . value = 0 ;
}
} ;
const click _loginout = ( ) => {
common . show ( '确定退出登录?' ) . then ( async ( res ) => {
console . log ( res ) ;
if ( ! res ) return ;
try {
common . loading ( '正在退出登录' ) ;
socketStore . closeSocket ( )
await loginOut ( ) ;
} catch ( e ) { }
common . hideLoading ( ) ;
// 主动退出登录后,再次登录应该进首页
common . reLaunch ( '/pages/login/login' ) ;
} ) ;
} ;
onShow ( ( ) => {
const user _info _cache = getUserInfo ( ) ;
Object . assign ( user _info , user _info _cache ) ;
console . log ( 'user_info' , user _info ) ;
statistics _data [ 'get_statistics_data' ] ( ) ; // 获取统计数据
} ) ;
onPullDownRefresh ( ( ) => {
console . log ( '下拉刷新' ) ;
uni . stopPullDownRefresh ( ) ;
} ) ;
< / script >
< style scoped lang = "scss" >
$bg - margin - left : 50 rpx ;
$bg - margin - left : 50 rpx ;
// 下方单元格
. cell _div {
margin : 30 rpx $bg - margin - left 0 $bg - margin - left ;
background : # ffffff ;
border - radius : 15 rpx ;
z - index : 101 ;
overflow : hidden ;
// 下方单元格
. cell _div {
margin : 30 rpx $bg - margin - left 0 $bg - margin - left ;
background : # ffffff ;
border - radius : 15 rpx ;
z - index : 101 ;
overflow : hidden ;
// 为了让线缩进来24单位
: deep ( . uv - line ) {
width : calc ( 100 % - 48 rpx ) ! important ;
margin : 0 24 rpx ! important ;
// 为了让线缩进来24单位
: deep ( . uv - line ) {
width : calc ( 100 % - 48 rpx ) ! important ;
margin : 0 24 rpx ! important ;
}
: deep ( . uv - cell _ _body ) {
padding : 12 px 15 px ;
}
}
: deep ( . uv - cell _ _body ) {
padding : 12 px 15 px ;
}
}
// 快捷导航栏
. navigation _div {
margin : 30 rpx $bg - margin - left 0 $bg - margin - left ;
padding : 24 rpx 0 20 rpx 0 ;
background - color : # ffffff ;
border - radius : 23 rpx ;
display : flex ;
flex - direction : column ;
justify - content : space - around ;
z - index : 101 ;
. group {
display : flex ;
justify - content : space - around ;
}
. item {
// 快捷导航栏
. navigation _div {
margin : 30 rpx $bg - margin - left 0 $bg - margin - left ;
padding : 24 rpx 0 20 rpx 0 ;
background - color : # ffffff ;
border - radius : 23 rpx ;
display : flex ;
flex - direction : column ;
justify - content : center ;
align - items : center ;
justify - content : space - around ;
z - index : 101 ;
// background-color: red;
. icon {
width : 88 rpx ;
height : 86 rpx ;
}
. title {
margin - top : 10 rpx ;
font - family : PingFangSC , PingFang SC ;
font - weight : 400 ;
font - size : 25 rpx ;
color : # 323 e57 ;
line - height : 35 rpx ;
text - align : left ;
font - style : normal ;
}
}
}
. bg _div {
display : flex ;
flex - direction : column ;
position : relative ;
padding : 0 $bg - margin - left ;
z - index : 50 ;
. bg _img {
position : absolute ;
top : 0 ;
left : 0 ;
width : 100 % ;
z - index : - 1 ;
height : 858 rpx ;
}
// 个人信息
. user _data _div {
margin - top : 158 rpx ;
background : linear - gradient ( 180 deg , rgba ( 241 , 245 , 255 , 0.5 ) 0 % , # f6f9fe 50 % , # ffffff 100 % ) ;
border - radius : 14 rpx ;
border : 2 rpx solid # ffffff ;
box - shadow : # f6f8ff 0 0 2 rpx ;
. personal _information {
padding : 20 rpx 18 rpx 0 26 rpx ;
display : flex ;
// 个人头像框框
. profile {
border - radius : 100 % ;
border : 2 px solid # ffffff ;
width : 108 rpx ;
height : 108 rpx ;
overflow : hidden ;
}
// 头像右边的信息
. personal _information _data {
flex : 1 ;
display : flex ;
flex - direction : column ;
margin - left : 26 rpx ;
overflow : hidden ;
// 上边的姓名性别盒子
. name _sex _div {
display : flex ;
margin - top : 6 rpx ;
. name {
font - family : PingFangSC ;
font - weight : 600 ;
font - size : 28 rpx ;
color : # 000000 ;
line - height : 40 rpx ;
}
. sex {
margin - left : 10 rpx ;
width : 30 rpx ;
height : 30 rpx ;
}
}
. work _number _div {
font - family : PingFangSC ;
font - weight : 400 ;
font - size : 25 rpx ;
color : # 666666 ;
line - height : 38 rpx ;
text - align : left ;
font - style : normal ;
white - space : nowrap ;
text - overflow : ellipsis ;
}
}
}
. study _information {
. group {
display : flex ;
justify - content : space - around ;
z - index : 20 ;
margin : 30 rpx 50 rpx ;
}
. item {
flex : 1 ;
. item {
display : flex ;
flex - direction : column ;
justify - content : center ;
align - items : center ;
// background-color: red;
. icon {
width : 88 rpx ;
height : 86 rpx ;
}
. title {
margin - top : 10 rpx ;
font - family : PingFangSC , PingFang SC ;
font - weight : 400 ;
font - size : 25 rpx ;
color : # 323 e57 ;
line - height : 35 rpx ;
text - align : left ;
font - style : normal ;
}
}
}
. bg _div {
display : flex ;
flex - direction : column ;
position : relative ;
padding : 0 $bg - margin - left ;
z - index : 50 ;
. bg _img {
position : absolute ;
top : 0 ;
left : 0 ;
width : 100 % ;
z - index : - 1 ;
height : 858 rpx ;
}
// 个人信息
. user _data _div {
margin - top : 158 rpx ;
background : linear - gradient ( 180 deg , rgba ( 241 , 245 , 255 , 0.5 ) 0 % , # f6f9fe 50 % , # ffffff 100 % ) ;
border - radius : 14 rpx ;
border : 2 rpx solid # ffffff ;
box - shadow : # f6f8ff 0 0 2 rpx ;
. personal _information {
padding : 20 rpx 18 rpx 0 26 rpx ;
display : flex ;
flex - direction : column ;
justify - content : center ;
. top {
font - family : PingFangSC , PingFang SC ;
font - weight : 400 ;
font - size : 25 rpx ;
color : # 666666 ;
line - height : 35 rpx ;
text - align : center ;
font - style : normal ;
// 个人头像框框
. profile {
border - radius : 100 % ;
border : 2 px solid # ffffff ;
width : 108 rpx ;
height : 108 rpx ;
overflow : hidden ;
}
. bottom {
margin - top : 5 % ;
font - weight : bold ;
font - size : 50 rpx ;
color : # 000000 ;
line - height : 58 rpx ;
text - align : left ;
font - style : normal ;
text - align : center ;
// 头像右边的信息
. personal _information _data {
flex : 1 ;
display : flex ;
flex - direction : column ;
margin - left : 26 rpx ;
overflow : hidden ;
// 数字滚动组件
: deep ( . uv - count - num ) {
font - weight : bold ! important ;
font - size : 50 rpx ! important ;
color : # 000000 ! important ;
// 上边的姓名性别盒子
. name _sex _div {
display : flex ;
margin - top : 6 rpx ;
. name {
font - family : PingFangSC ;
font - weight : 600 ;
font - size : 28 rpx ;
color : # 000000 ;
line - height : 40 rpx ;
}
. sex {
margin - left : 10 rpx ;
width : 30 rpx ;
height : 30 rpx ;
}
}
. work _number _div {
font - family : PingFangSC ;
font - weight : 400 ;
font - size : 25 rpx ;
color : # 666666 ;
line - height : 38 rpx ;
text - align : left ;
font - style : normal ;
white - space : nowrap ;
text - overflow : ellipsis ;
}
}
}
. study _information {
display : flex ;
justify - content : space - around ;
z - index : 20 ;
margin : 30 rpx 50 rpx ;
. item {
flex : 1 ;
display : flex ;
flex - direction : column ;
justify - content : center ;
. top {
font - family : PingFangSC , PingFang SC ;
font - weight : 400 ;
font - size : 25 rpx ;
color : # 666666 ;
line - height : 35 rpx ;
text - align : center ;
font - style : normal ;
}
. bottom {
margin - top : 5 % ;
font - weight : bold ;
font - size : 50 rpx ;
color : # 000000 ;
line - height : 58 rpx ;
text - align : left ;
font - style : normal ;
text - align : center ;
// 数字滚动组件
: deep ( . uv - count - num ) {
font - weight : bold ! important ;
font - size : 50 rpx ! important ;
color : # 000000 ! important ;
}
}
}
}
}
}
}
. main _div {
display : flex ;
flex - direction : column ;
background - color : # f6f8ff ;
}
< / style >
. main _div {
display : flex ;
flex - direction : column ;
background - color : # f6f8ff ;
}
< / style >