mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git
synced 2025-12-12 12:26:44 +08:00
修改我的U币的排版
This commit is contained in:
daihh
@@ -391,7 +391,7 @@
|
||||
border-color: #387DF7;
|
||||
}
|
||||
.home-no-list{
|
||||
margin-top: 156px;
|
||||
margin-top: 120px;
|
||||
text-align: center;
|
||||
.img{
|
||||
width: 148px;
|
||||
|
||||
@@ -270,7 +270,7 @@ export function experienceValue(total) {
|
||||
start:'',
|
||||
end:'',
|
||||
endValue:null,
|
||||
percentage:null,
|
||||
percentage:0,
|
||||
total,
|
||||
}
|
||||
if(total < 300) {
|
||||
|
||||
@@ -1,31 +1,32 @@
|
||||
<template>
|
||||
<div class="u-currency" >
|
||||
<div class="u-currency">
|
||||
<div class="myubi">
|
||||
<div class="ubi-hear">
|
||||
<h6>我的U币:{{uinfo.uCurrency}}</h6><span class="pointer" @click="dialogVisible = true">U币规则 <i class="el-icon-arrow-right"></i> </span>
|
||||
<h6>我的U币:{{uinfo.uCurrency}}</h6><span class="pointer" @click="dialogVisible = true">U币规则 <i
|
||||
class="el-icon-arrow-right"></i> </span>
|
||||
<el-button icon="el-icon-document" @click="exportRecord()">导出记录</el-button>
|
||||
</div>
|
||||
<div style="max-height:600px;overflow-y:auto;padding-right:50px">
|
||||
<div style="max-height:600px;overflow-y:auto;padding-right:30px">
|
||||
<div class="Ubi-hist">
|
||||
<h6>U币历史记录</h6><span>（最多保留近7天的记录）</span>
|
||||
<div style="width:100%;height:290px" ref="chart"></div>
|
||||
<div style="height:290px;min-width: 350px;" ref="chart"></div>
|
||||
</div>
|
||||
<div v-if="uCoinRecord.length > 0">
|
||||
<div class="my-Recording" v-for="(day, index) in uCoinRecord" :key="index">
|
||||
<h3>{{day.dayNmae}}</h3>
|
||||
<div class="Recording-info" v-for="info in day.list">
|
||||
<div class="info-tit">{{info.content}}</div>
|
||||
<div class="info-Gold"><img :src="`${webBaseUrl}/images/Uimg.png`" alt="">{{info.uvalue > 0? '+':''}} {{info.uvalue}}</div>
|
||||
<div class="info-Gold"><img :src="`${webBaseUrl}/images/Uimg.png`" alt="">{{info.uvalue > 0? '+':''}}
|
||||
{{info.uvalue}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else class="home-no-list">
|
||||
<img class="img" style="width:76px;height:76px" :src="`${webBaseUrl}/images/homeWu/u-wu.png`" alt="" srcset="">
|
||||
<img class="img" style="width:76px;height:76px" :src="`${webBaseUrl}/images/homeWu/u-wu.png`" alt=""
|
||||
srcset="">
|
||||
<p class="text">最近7天你可能太忙了，快开始 努力获得U币吧</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="experience">
|
||||
<div class="exp-hear">
|
||||
@@ -52,13 +53,14 @@
|
||||
我的排名 : <span> {{currentUserRankingData.rankingNo}}</span>
|
||||
</div>
|
||||
<div class="myexperience">
|
||||
我的经验值 : <span>{{currentUserRankingData.total || currentUserRankingData.months || currentUserRankingData.years || currentUserRankingData.weeks}}</span>
|
||||
我的经验值 :
|
||||
<span>{{currentUserRankingData.total || currentUserRankingData.months || currentUserRankingData.years || currentUserRankingData.weeks}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="exp-bar">
|
||||
<h6> {{currentUserRankingData.total}}/{{current.endValue}}</h6>
|
||||
<div class="exp-barbox">
|
||||
<el-progress :percentage="current.percentage" color="#387DF7"></el-progress>
|
||||
<el-progress v-if="current.percentage" :percentage="current.percentage*100/current.endValue" color="#387DF7"></el-progress>
|
||||
<!-- <div class="exp-bar-cont"></div> -->
|
||||
</div>
|
||||
<div class="exp-barname">
|
||||
@@ -74,14 +76,19 @@
|
||||
<div class="jy">经验值</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="table-hear" style="margin-top:40px;border-bottom: 1px solid #ddd;padding-bottom:20px" v-for="(ran,index) in rankingData" :key="ran.id">
|
||||
<div class="table-hear" style="margin-top:40px;border-bottom: 1px solid #ddd;padding-bottom:20px"
|
||||
v-for="(ran,index) in rankingData" :key="ran.id">
|
||||
<div class="tab-rank">
|
||||
<img v-if="index == 0" :src="`${webBaseUrl}/images/rank1.png`" alt=""/>
|
||||
<img v-if="index == 1" :src="`${webBaseUrl}/images/rank2.png`" alt=""/>
|
||||
<img v-if="index == 2" :src="`${webBaseUrl}/images/rank3.png`" alt=""/>
|
||||
<div v-if="index > 2" style="line-height: 40px;padding-left:15px;font-size: 16px;color: #333333;">{{index+1}}</div>
|
||||
<img v-if="index == 0" :src="`${webBaseUrl}/images/rank1.png`" alt="" />
|
||||
<img v-if="index == 1" :src="`${webBaseUrl}/images/rank2.png`" alt="" />
|
||||
<img v-if="index == 2" :src="`${webBaseUrl}/images/rank3.png`" alt="" />
|
||||
<div v-if="index > 2" style="line-height: 40px;padding-left:15px;font-size: 16px;color: #333333;">
|
||||
{{index+1}}</div>
|
||||
</div>
|
||||
<div class="tab-name">
|
||||
<author-img :avatar="ran.authorInfo.avatar" :aid="ran.authorInfo.aid" :sex="ran.authorInfo.sex">
|
||||
</author-img> <span>{{ran.authorInfo.name}}</span>
|
||||
</div>
|
||||
<div class="tab-name"><author-img :avatar="ran.authorInfo.avatar" :aid="ran.authorInfo.aid" :sex="ran.authorInfo.sex"></author-img> <span>{{ran.authorInfo.name}}</span> </div>
|
||||
<div class="bm tab-bm" style="margin-left:30px;">{{ran.authorInfo.orgInfo}}</div>
|
||||
<div class="jy tab-jy">
|
||||
<div style="font-size: 18px;color: #333333;font-weight: 600;">{{ran.total}}</div>
|
||||
@@ -89,23 +96,30 @@
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="currentUserRankingData.rankingNo>4" class="omit">
|
||||
<div>.</div> <div>.</div> <div>.</div>
|
||||
<div>.</div>
|
||||
<div>.</div>
|
||||
<div>.</div>
|
||||
</div>
|
||||
<div class="table-hear" style="margin-top:40px;border-bottom: 1px solid #ddd;padding-bottom:20px"
|
||||
v-if="currentUserRankingData.authorInfo && currentUserRankingData.authorInfo.aid && currentUserRankingData.rankingNo>4">
|
||||
<div style="color: #0059FF;line-height: 40px;padding-left:15px;font-size: 16px;" class="tab-rank">
|
||||
{{currentUserRankingData.rankingNo}}</div>
|
||||
<div class="tab-name">
|
||||
<author-img :avatar="currentUserRankingData.authorInfo.avatar" :aid="currentUserRankingData.authorInfo.aid"
|
||||
:sex="currentUserRankingData.authorInfo.sex"></author-img> <span
|
||||
style="color: #0059FF;">{{currentUserRankingData.authorInfo.name}}</span>
|
||||
</div>
|
||||
<div class="bm tab-bm" style="margin-left:30px;color: #0059FF;">{{currentUserRankingData.authorInfo.orgInfo}}
|
||||
</div>
|
||||
<div class="table-hear" style="margin-top:40px;border-bottom: 1px solid #ddd;padding-bottom:20px" v-if="currentUserRankingData.authorInfo && currentUserRankingData.authorInfo.aid && currentUserRankingData.rankingNo>4">
|
||||
<div style="color: #0059FF;line-height: 40px;padding-left:15px;font-size: 16px;" class="tab-rank" >{{currentUserRankingData.rankingNo}}</div>
|
||||
<div class="tab-name"><author-img :avatar="currentUserRankingData.authorInfo.avatar" :aid="currentUserRankingData.authorInfo.aid" :sex="currentUserRankingData.authorInfo.sex"></author-img> <span style="color: #0059FF;">{{currentUserRankingData.authorInfo.name}}</span> </div>
|
||||
<div class="bm tab-bm" style="margin-left:30px;color: #0059FF;">{{currentUserRankingData.authorInfo.orgInfo}}</div>
|
||||
<div class="jy tab-jy">
|
||||
<div style="font-size: 18px;color: #333333;font-weight: 600;color: #0059FF;">{{currentUserRankingData.total}}</div>
|
||||
<div style="font-size: 18px;color: #333333;font-weight: 600;color: #0059FF;">
|
||||
{{currentUserRankingData.total}}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<el-dialog
|
||||
:visible.sync="dialogVisible"
|
||||
:show-close="false"
|
||||
width="716px">
|
||||
<el-dialog :visible.sync="dialogVisible" :show-close="false" width="716px">
|
||||
<div class="dialog-box">
|
||||
<div class="box-top">
|
||||
<p style="font-size: 26px;font-weight: 600;margin-bottom: 4px;">U币规则</p>
|
||||
@@ -114,64 +128,41 @@
|
||||
<div style="max-height:420px;overflow-y: auto;">
|
||||
<div class="box-table">
|
||||
<p class="table-title portal-title-tow"><span></span>学习</p>
|
||||
<el-table
|
||||
:data="tableData"
|
||||
style="width: 100%">
|
||||
<el-table-column
|
||||
prop="name"
|
||||
label="分类"
|
||||
width="180">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="name"
|
||||
label="描述"
|
||||
width="180">
|
||||
<el-table :data="tableData" style="">
|
||||
<el-table-column prop="name" label="分类" width="180"></el-table-column>
|
||||
<el-table-column prop="name" label="描述" width="180">
|
||||
<template slot-scope="scope">
|
||||
<p v-for="(rem,index) in scope.row.hear" :key="index">{{rem}}</p>
|
||||
<p style="font-size:12px;color: #999999;" v-if="scope.row.label">{{scope.row.label}}</p>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
align="right"
|
||||
label="经验值/U币">
|
||||
<el-table-column align="right" label="经验值/U币">
|
||||
<template slot-scope="scope">
|
||||
<p style="font-size:16px;color: #999999;" v-for="(val,index) in scope.row.value" :key="index">{{val}}</p>
|
||||
<p style="font-size:16px;color: #999999;" v-for="(val,index) in scope.row.value" :key="index">{{val}}
|
||||
</p>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="upperlimit" align="right"
|
||||
label="每日上限">
|
||||
<el-table-column prop="upperlimit" align="right" label="每日上限">
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<div class="box-table">
|
||||
<p class="table-title portal-title-tow"><span></span>知识贡献</p>
|
||||
<el-table
|
||||
:data="tableList"
|
||||
style="width: 100%">
|
||||
<el-table-column
|
||||
prop="name"
|
||||
label="分类"
|
||||
width="180">
|
||||
<el-table :data="tableList" style="">
|
||||
<el-table-column prop="name" label="分类" width="180">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="name"
|
||||
label="描述"
|
||||
width="180">
|
||||
<el-table-column prop="name" label="描述" width="180">
|
||||
<template slot-scope="scope">
|
||||
<p v-for="(rem,index) in scope.row.hear" :key="index">{{rem}}</p>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
align="right"
|
||||
label="经验值/U币">
|
||||
<el-table-column align="right" label="经验值/U币">
|
||||
<template slot-scope="scope">
|
||||
<p style="font-size:16px;color: #333333;font-weight: 600;" v-for="(val,index) in scope.row.value" :key="index">{{val}}</p>
|
||||
<p style="font-size:16px;color: #333333;font-weight: 600;" v-for="(val,index) in scope.row.value"
|
||||
:key="index">{{val}}</p>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="upperlimit" align="right"
|
||||
label="每日上限">
|
||||
<el-table-column prop="upperlimit" align="right" label="每日上限">
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
@@ -183,51 +174,108 @@
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import apiStat from '@/api/phase2/stat.js';
|
||||
import { mapGetters } from 'vuex';
|
||||
import {getUType} from '@/utils/tools.js'
|
||||
import {
|
||||
mapGetters
|
||||
} from 'vuex';
|
||||
import {
|
||||
getUType
|
||||
} from '@/utils/tools.js'
|
||||
import authorImg from '@/components/Portal/authorImg.vue';
|
||||
import author from '@/components/Portal/authorInfo.vue';
|
||||
import apiUser from "@/api/system/user.js";
|
||||
import * as echarts from 'echarts'
|
||||
import {translate,experienceValue} from "@/utils/tools.js";
|
||||
export default{
|
||||
import {
|
||||
translate,
|
||||
experienceValue
|
||||
} from "@/utils/tools.js";
|
||||
export default {
|
||||
computed: {
|
||||
...mapGetters(['userInfo']),
|
||||
|
||||
},
|
||||
components: {authorImg,author},
|
||||
data(){
|
||||
return{
|
||||
current:{},
|
||||
components: {
|
||||
authorImg,
|
||||
author
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
current: {
|
||||
percentage: 0
|
||||
},
|
||||
experienceValue,
|
||||
translate,
|
||||
cycle:'total',
|
||||
name:'累计',
|
||||
cycle: 'total',
|
||||
name: '累计',
|
||||
getUType,
|
||||
dialogVisible:false,
|
||||
tableData:[
|
||||
{name:'试听学习',hear:['每日累计学习10分钟','每日累计学习20分钟','每日累计学习30分钟','每日累计学习45分钟','每日累计学习60分钟',],value:['+10','+20','+30','+40',"+50"],upperlimit:50},
|
||||
{name:'案例学习',hear:['完成一个案例的阅读',],value:['+5'],upperlimit:30,label:'（最低3分钟）'},
|
||||
{name:'文章学习',hear:['完成一个文章的阅读',],value:['+5'],upperlimit:30,label:'（最低2分钟）'},
|
||||
dialogVisible: false,
|
||||
tableData: [{
|
||||
name: '试听学习',
|
||||
hear: ['每日累计学习10分钟', '每日累计学习20分钟', '每日累计学习30分钟', '每日累计学习45分钟', '每日累计学习60分钟', ],
|
||||
value: ['+10', '+20', '+30', '+40', "+50"],
|
||||
upperlimit: 50
|
||||
},
|
||||
{
|
||||
name: '案例学习',
|
||||
hear: ['完成一个案例的阅读', ],
|
||||
value: ['+5'],
|
||||
upperlimit: 30,
|
||||
label: '（最低3分钟）'
|
||||
},
|
||||
{
|
||||
name: '文章学习',
|
||||
hear: ['完成一个文章的阅读', ],
|
||||
value: ['+5'],
|
||||
upperlimit: 30,
|
||||
label: '（最低2分钟）'
|
||||
},
|
||||
],
|
||||
tableList:[
|
||||
{name:'发布音视频课程',hear:['完成一个案音视频课',],value:['+60'],upperlimit:null},
|
||||
{name:'面授课记录',hear:['有一个完成的面授课记录（<4h）','有一个完成的面授课记录（>=4h）'],value:['+40','+60'],upperlimit:null},
|
||||
{name:'发布文章',hear:['每发布1篇文章',],value:['+40'],upperlimit:null},
|
||||
{name:'发布案例',hear:['每发布1篇案例',],value:['+50'],upperlimit:null},
|
||||
{name:'发布笔记',hear:['每发布公开笔记1篇',],value:["+5"],upperlimit:30},
|
||||
{name:'发表评论',hear:['在课程，问答，案例中发表1个评论',],value:['+2'],upperlimit:20},
|
||||
tableList: [{
|
||||
name: '发布音视频课程',
|
||||
hear: ['完成一个案音视频课', ],
|
||||
value: ['+60'],
|
||||
upperlimit: null
|
||||
},
|
||||
{
|
||||
name: '面授课记录',
|
||||
hear: ['有一个完成的面授课记录（<4h）', '有一个完成的面授课记录（>=4h）'],
|
||||
value: ['+40', '+60'],
|
||||
upperlimit: null
|
||||
},
|
||||
{
|
||||
name: '发布文章',
|
||||
hear: ['每发布1篇文章', ],
|
||||
value: ['+40'],
|
||||
upperlimit: null
|
||||
},
|
||||
{
|
||||
name: '发布案例',
|
||||
hear: ['每发布1篇案例', ],
|
||||
value: ['+50'],
|
||||
upperlimit: null
|
||||
},
|
||||
{
|
||||
name: '发布笔记',
|
||||
hear: ['每发布公开笔记1篇', ],
|
||||
value: ["+5"],
|
||||
upperlimit: 30
|
||||
},
|
||||
{
|
||||
name: '发表评论',
|
||||
hear: ['在课程，问答，案例中发表1个评论', ],
|
||||
value: ['+2'],
|
||||
upperlimit: 20
|
||||
},
|
||||
],
|
||||
uCoinRecord:[],
|
||||
chart:null,
|
||||
currentUserRankingData:{},
|
||||
rankingData:[],
|
||||
uinfo:{
|
||||
uCurrency:0 // 用户累计U币
|
||||
uCoinRecord: [],
|
||||
chart: null,
|
||||
currentUserRankingData: {},
|
||||
rankingData: [],
|
||||
uinfo: {
|
||||
uCurrency: 0 // 用户累计U币
|
||||
},
|
||||
}
|
||||
},
|
||||
@@ -236,7 +284,7 @@
|
||||
this.getRanking();
|
||||
this.getLevel();
|
||||
},
|
||||
methods:{
|
||||
methods: {
|
||||
|
||||
handleCommand(e) {
|
||||
this.cycle = e;
|
||||
@@ -245,34 +293,45 @@
|
||||
},
|
||||
getRanking() {
|
||||
let data = {
|
||||
aid:this.userInfo.aid,// #用户id
|
||||
statType:20, // #统计类型 10学习时长 11 学习天数 20表经验值 30表u币 40表获取天数
|
||||
field:this.cycle,// #统计周期 todays-当天,weeks-周,months-月,years-年 total-总计
|
||||
num:4,// #显示的条数
|
||||
aid: this.userInfo.aid, // #用户id
|
||||
statType: 20, // #统计类型 10学习时长 11 学习天数 20表经验值 30表u币 40表获取天数
|
||||
field: this.cycle, // #统计周期 todays-当天,weeks-周,months-月,years-年 total-总计
|
||||
num: 4, // #显示的条数
|
||||
}
|
||||
apiStat.getRanking(data).then(res=>{
|
||||
if(res.status==200){
|
||||
if(res.result.currentUserRankingData) {
|
||||
res.result.currentUserRankingData.authorInfo={
|
||||
apiStat.getRanking(data).then(res => {
|
||||
if (res.status == 200) {
|
||||
if (res.result.currentUserRankingData) {
|
||||
res.result.currentUserRankingData.authorInfo = {
|
||||
aid: "",
|
||||
name: "",
|
||||
orgInfo: "",
|
||||
avatar: "",
|
||||
sex: null
|
||||
}
|
||||
this.getUserData([res.result.currentUserRankingData.aid],[res.result.currentUserRankingData])
|
||||
if(res.result.currentUserRankingData.weeks == undefined){res.result.currentUserRankingData.weeks = 0;}
|
||||
if(res.result.currentUserRankingData.months == undefined){res.result.currentUserRankingData.months = 0;}
|
||||
if(res.result.currentUserRankingData.years == undefined){res.result.currentUserRankingData.years = 0;}
|
||||
this.currentUserRankingData = res.result.currentUserRankingData;
|
||||
if(res.result.currentUserRankingData.total>=0) {this.current = this.experienceValue(res.result.currentUserRankingData.total);}
|
||||
else if(res.result.currentUserRankingData.weeks>=0) {this.current = this.experienceValue(res.result.currentUserRankingData.weeks);}
|
||||
else if(res.result.currentUserRankingData.months>=0) {this.current = this.experienceValue(res.result.currentUserRankingData.months);}
|
||||
else if(res.result.currentUserRankingData.years>=0) {this.current = this.experienceValue(res.result.currentUserRankingData.years);}
|
||||
this.getUserData([res.result.currentUserRankingData.aid], [res.result.currentUserRankingData])
|
||||
if (res.result.currentUserRankingData.weeks == undefined) {
|
||||
res.result.currentUserRankingData.weeks = 0;
|
||||
}
|
||||
if (res.result.currentUserRankingData.months == undefined) {
|
||||
res.result.currentUserRankingData.months = 0;
|
||||
}
|
||||
if (res.result.currentUserRankingData.years == undefined) {
|
||||
res.result.currentUserRankingData.years = 0;
|
||||
}
|
||||
this.currentUserRankingData = res.result.currentUserRankingData; console.log()
|
||||
if (res.result.currentUserRankingData.total >= 0) {
|
||||
this.current = this.experienceValue(res.result.currentUserRankingData.total);
|
||||
} else if (res.result.currentUserRankingData.weeks >= 0) {
|
||||
this.current = this.experienceValue(res.result.currentUserRankingData.weeks);
|
||||
} else if (res.result.currentUserRankingData.months >= 0) {
|
||||
this.current = this.experienceValue(res.result.currentUserRankingData.months);
|
||||
} else if (res.result.currentUserRankingData.years >= 0) {
|
||||
this.current = this.experienceValue(res.result.currentUserRankingData.years);
|
||||
}
|
||||
}
|
||||
|
||||
const ids= [];
|
||||
res.result.rankingData.forEach(item=>{
|
||||
const ids = [];
|
||||
res.result.rankingData.forEach(item => {
|
||||
ids.push(item.aid)
|
||||
item.authorInfo = {
|
||||
aid: "",
|
||||
@@ -282,12 +341,12 @@
|
||||
sex: null
|
||||
}
|
||||
})
|
||||
this.getUserData(ids,res.result.rankingData)
|
||||
this.getUserData(ids, res.result.rankingData)
|
||||
this.rankingData = res.result.rankingData;
|
||||
}
|
||||
})
|
||||
},
|
||||
getUserData(ids,list) {
|
||||
getUserData(ids, list) {
|
||||
const noReapetIds = [...new Set(ids)];
|
||||
apiUser.getByIds(noReapetIds).then(res => {
|
||||
if (res.status == 200) {
|
||||
@@ -307,8 +366,8 @@
|
||||
});
|
||||
},
|
||||
exportRecord() {
|
||||
let urlPre=window.location.protocol+'//'+window.location.host;
|
||||
window.open(urlPre + '/xboe/m/stat/usercoinrecord/export?aid='+this.userInfo.aid)
|
||||
let urlPre = window.location.protocol + '//' + window.location.host;
|
||||
window.open(urlPre + '/xboe/m/stat/usercoinrecord/export?aid=' + this.userInfo.aid)
|
||||
},
|
||||
initChat(chatData) {
|
||||
this.chart = echarts.init(this.$refs.chart);
|
||||
@@ -318,40 +377,39 @@
|
||||
},
|
||||
legend: {
|
||||
top: 'center',
|
||||
right:100,
|
||||
orient:'vertical',
|
||||
itemWidth:8,
|
||||
itemHeight:8,
|
||||
borderRadius:'50%',
|
||||
itemGap:26,
|
||||
formatter:function(name) {
|
||||
let data =option.series[0].data;
|
||||
right: 100,
|
||||
orient: 'vertical',
|
||||
itemWidth: 8,
|
||||
itemHeight: 8,
|
||||
borderRadius: '50%',
|
||||
itemGap: 26,
|
||||
formatter: function(name) {
|
||||
let data = option.series[0].data;
|
||||
let total = 0;
|
||||
let tarValue = 0;//每一项值
|
||||
for(let i = 0;i < data.length;i++){
|
||||
let tarValue = 0; //每一项值
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
total += data[i].value;
|
||||
if(data[i].name == name) {
|
||||
if (data[i].name == name) {
|
||||
tarValue = data[i].value;
|
||||
}
|
||||
}
|
||||
let p =total!= 0?Math.round((tarValue/total)*100)+'%':0 +'%';
|
||||
let p = total != 0 ? Math.round((tarValue / total) * 100) + '%' : 0 + '%';
|
||||
return ` ${p} ${name}`
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
series: [{
|
||||
// name: 'name',
|
||||
type: 'pie',
|
||||
radius: ['50%', '40%'],
|
||||
avoidLabelOverlap: false,
|
||||
center: ['32%','50%'],
|
||||
center: ['32%', '50%'],
|
||||
itemStyle: {
|
||||
borderRadius: 0,
|
||||
borderColor: '#fff',
|
||||
borderWidth: 2,
|
||||
normal: {
|
||||
color: function (colors) {
|
||||
let colorList = ['#5bb9fe','#f7b36b','#72e5d5','#e1e1f9'];
|
||||
color: function(colors) {
|
||||
let colorList = ['#5bb9fe', '#f7b36b', '#72e5d5', '#e1e1f9'];
|
||||
return colorList[colors.dataIndex];
|
||||
},
|
||||
}
|
||||
@@ -364,36 +422,35 @@
|
||||
show: false
|
||||
},
|
||||
data: chatData,
|
||||
}
|
||||
]
|
||||
}]
|
||||
};
|
||||
this.chart.setOption(option);
|
||||
},
|
||||
getList() {
|
||||
apiStat.userCoinList(this.userInfo.aid,7).then(res=>{
|
||||
if(res.status == 200) {
|
||||
apiStat.userCoinList(this.userInfo.aid, 7).then(res => {
|
||||
if (res.status == 200) {
|
||||
this.uCoinRecord = [];
|
||||
for(let key in res.result.uCoinRecord){
|
||||
for (let key in res.result.uCoinRecord) {
|
||||
this.uCoinRecord.push({
|
||||
dayNmae: key,
|
||||
list:res.result.uCoinRecord[key]
|
||||
list: res.result.uCoinRecord[key]
|
||||
})
|
||||
}
|
||||
let chatData = [];
|
||||
|
||||
for(let key in res.result.chatData){
|
||||
for (let key in res.result.chatData) {
|
||||
chatData.push({
|
||||
value:res.result.chatData[key],
|
||||
name:this.getUType(key)
|
||||
value: res.result.chatData[key],
|
||||
name: this.getUType(key)
|
||||
})
|
||||
}
|
||||
this.initChat(chatData);
|
||||
}
|
||||
})
|
||||
},
|
||||
getLevel(){//获取用户累计U币
|
||||
apiStat.getUserStatTotalInfo(this.userInfo.aid).then(res=>{
|
||||
if(res.status == 200) {
|
||||
getLevel() { //获取用户累计U币
|
||||
apiStat.getUserStatTotalInfo(this.userInfo.aid).then(res => {
|
||||
if (res.status == 200) {
|
||||
this.uinfo.uCurrency = res.result.uvalue;
|
||||
}
|
||||
});
|
||||
@@ -402,47 +459,66 @@
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
::v-deep .el-dialog{
|
||||
.u-currency {
|
||||
padding: 10px 18px;
|
||||
display: flex;
|
||||
justify-content: space-between; overflow-x: auto;
|
||||
}
|
||||
|
||||
.experience {
|
||||
font-size: 16px;
|
||||
min-width: 480px;
|
||||
font-weight: 600;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.myubi {
|
||||
flex: 1;
|
||||
padding-right: 30px;
|
||||
}
|
||||
|
||||
::v-deep .el-dialog {
|
||||
border-radius: 8px;
|
||||
::v-deep .el-dialog__header{
|
||||
|
||||
}
|
||||
|
||||
::v-deep .el-dialog__header {
|
||||
::v-deep .el-dialog__body{
|
||||
display: none;
|
||||
}
|
||||
|
||||
::v-deep .el-dialog__body {
|
||||
padding: 0;
|
||||
// ::v-deep .el-table td.el-table__cell{
|
||||
// font-size: 14px;
|
||||
// color: #333333;
|
||||
::v-deep .el-table__body-wrapper{
|
||||
// }
|
||||
}
|
||||
|
||||
::v-deep .el-table__body-wrapper {
|
||||
font-size: 14px;
|
||||
.experience{
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #333333;
|
||||
}
|
||||
.dialog-box{
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.dialog-close{
|
||||
.dialog-box {
|
||||
position: relative;
|
||||
.dialog-close {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translate(-50%);
|
||||
.box-top{
|
||||
bottom: -127px;
|
||||
}
|
||||
|
||||
.box-top {
|
||||
color: #FBA511;
|
||||
padding: 26px 212px 17px 61px;
|
||||
.box-table{
|
||||
background: url('../../../public/images/homeWu/u-bg.png') no-repeat;
|
||||
}
|
||||
|
||||
.table-title{
|
||||
.box-table {
|
||||
padding: 26px 14px 40px 66px;
|
||||
|
||||
span{
|
||||
.table-title {
|
||||
margin-bottom: 18px;
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
@@ -453,69 +529,74 @@
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
.Recording-info{
|
||||
}
|
||||
}
|
||||
|
||||
.Recording-info {
|
||||
margin-top: 12px;
|
||||
.info-tit{
|
||||
height: 45px;
|
||||
border-bottom: 1px solid #ddd;
|
||||
|
||||
.info-tit {
|
||||
float: left;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
.info-Gold{
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
.info-Gold {
|
||||
float: right;
|
||||
font-size: 18px;
|
||||
color: #333333;
|
||||
img{
|
||||
font-weight: 400;
|
||||
line-height: 40px;
|
||||
|
||||
img {
|
||||
width: 54px;
|
||||
height: 32px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.Ubi-hist{
|
||||
}
|
||||
}
|
||||
|
||||
h6{
|
||||
.Ubi-hist {
|
||||
margin-top: 15px;
|
||||
|
||||
h6 {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #333333;
|
||||
margin: 0;
|
||||
span{
|
||||
float: left;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #999999;
|
||||
.u-currency{
|
||||
padding:26px 40px;
|
||||
display:flex;
|
||||
overflow-x: auto;
|
||||
}
|
||||
}
|
||||
.ubi-hear{
|
||||
}
|
||||
|
||||
|
||||
button{
|
||||
.ubi-hear {
|
||||
height: 40px;
|
||||
|
||||
button {
|
||||
margin-right:30px;
|
||||
width: 140px;
|
||||
height: 40px;
|
||||
border: 1px solid rgba(153,153,153,0.35);
|
||||
margin-right: 30px;
|
||||
border-radius: 2px;
|
||||
border: 1px solid rgba(153, 153, 153, 0.35);
|
||||
float: right;
|
||||
span{
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
h6{
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
h6 {
|
||||
margin: 0;
|
||||
@@ -525,35 +606,38 @@
|
||||
color: #333333;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
.myubi{
|
||||
flex: 1;
|
||||
margin-right: 84px;
|
||||
}
|
||||
.omit{
|
||||
}
|
||||
}
|
||||
|
||||
div{
|
||||
.omit {
|
||||
padding-left: 20px;
|
||||
|
||||
div {
|
||||
font-size: 30px;
|
||||
line-height: 10px;
|
||||
}
|
||||
.exp-table{
|
||||
width: 100%;
|
||||
color: #D8D8D8;
|
||||
}
|
||||
}
|
||||
|
||||
.exp-table {
|
||||
//width: 100%;
|
||||
.table-hear{
|
||||
padding-left: 25px;
|
||||
padding-right: 20px;
|
||||
|
||||
div{
|
||||
.table-hear {
|
||||
display: flex;
|
||||
|
||||
div {
|
||||
min-width: 90px;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
.bm{
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.bm {
|
||||
flex: 1;
|
||||
.jy{
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.jy {
|
||||
margin-left: auto;
|
||||
@@ -563,40 +647,47 @@
|
||||
}
|
||||
}
|
||||
|
||||
.myselftext{
|
||||
|
||||
}
|
||||
|
||||
.myselftext {
|
||||
width: 100%;
|
||||
height: 75px;
|
||||
padding: 0 25px;
|
||||
.myranking{
|
||||
//width: 100%;
|
||||
display: flex;
|
||||
|
||||
.myranking {
|
||||
flex: 1;
|
||||
line-height: 75px;
|
||||
font-size: 14px;
|
||||
span{
|
||||
font-weight: 400;
|
||||
color: #666666;
|
||||
|
||||
span {
|
||||
color: #333;
|
||||
font-weight: 600;
|
||||
font-size: 18px;
|
||||
.myexperience{
|
||||
}
|
||||
}
|
||||
|
||||
.myexperience {
|
||||
text-align: right;
|
||||
line-height: 75px;
|
||||
margin-left: auto;
|
||||
font-size: 14px;
|
||||
span{
|
||||
font-weight: 400;
|
||||
color: #666666;
|
||||
|
||||
span {
|
||||
color: #333;
|
||||
font-weight: 600;
|
||||
font-size: 18px;
|
||||
}
|
||||
.tab-jy{
|
||||
}
|
||||
}
|
||||
|
||||
div{
|
||||
.tab-jy {
|
||||
padding-top: 10px;
|
||||
|
||||
div {
|
||||
line-height: 28px;
|
||||
@@ -607,21 +698,26 @@
|
||||
font-weight: 600;
|
||||
height: 28px;
|
||||
background: #F7F8FA;
|
||||
}
|
||||
.tab-bm{
|
||||
border-radius: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.tab-name{
|
||||
.tab-bm {
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
::v-deep .item-author{
|
||||
.tab-name {
|
||||
display: flex;
|
||||
min-width:98px;
|
||||
::v-deep .item-author {
|
||||
img{
|
||||
min-width: 50px !important;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
span{
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
span {
|
||||
display: block;
|
||||
@@ -629,23 +725,27 @@
|
||||
color: #333333;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.tab-rank{
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.tab-rank {
|
||||
img{
|
||||
|
||||
|
||||
img {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
.experience{
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.exp-hear{
|
||||
width: 100%;
|
||||
.experience {
|
||||
flex: 1;
|
||||
|
||||
.exp-hear {
|
||||
//width: 100%;
|
||||
.exp-hear-text{
|
||||
height: 65px;
|
||||
background: url('../../../public/images/expbg.png') no-repeat 100% / 100%;
|
||||
|
||||
.exp-hear-text {
|
||||
float: left;
|
||||
@@ -654,7 +754,8 @@
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #333333;
|
||||
.exp-hear-textbor{
|
||||
position: relative;
|
||||
z-index: 888;
|
||||
|
||||
.exp-hear-textbor {
|
||||
width: 108px;
|
||||
@@ -666,7 +767,8 @@
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
top: 60%;
|
||||
.exp-hear-xiala{
|
||||
}
|
||||
}
|
||||
|
||||
.exp-hear-xiala {
|
||||
line-height: 65px;
|
||||
@@ -674,25 +776,29 @@
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
.exp-bar{
|
||||
width: 100%;
|
||||
h6{
|
||||
}
|
||||
|
||||
.exp-bar {
|
||||
|
||||
//width: 100%;
|
||||
h6 {
|
||||
font-size: 14px;
|
||||
color: #666666;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
.exp-barname{
|
||||
width: 100%;
|
||||
margin-left: 50px;
|
||||
}
|
||||
|
||||
.exp-barname {
|
||||
//width: 100%;
|
||||
span{
|
||||
padding: 20px 35px;
|
||||
display: flex;
|
||||
|
||||
span {
|
||||
flex: 1;
|
||||
.exp-barbox{
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.exp-barbox {
|
||||
//width: 100%;
|
||||
height: 8px;
|
||||
@@ -700,10 +806,12 @@
|
||||
border-radius: 6px;
|
||||
margin-left: 25px;
|
||||
margin-top: 3px;
|
||||
::v-deep .el-progress__text{
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
||||
::v-deep .el-progress__text {
|
||||
.exp-bar-cont{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.exp-bar-cont {
|
||||
width: 230px;
|
||||
@@ -716,7 +824,5 @@
|
||||
z-index: 999;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div style="padding:26px 40px;display:flex;overflow-x: auto;">
|
||||
<div style="padding:26px 20px;display:flex;overflow-x: auto;">
|
||||
<div class="experience" style="margin-right:72px">
|
||||
<div class="exp-hear">
|
||||
<div class="exp-hear-text">
|
||||
@@ -27,7 +27,6 @@
|
||||
</div>
|
||||
<div class="myexperience">
|
||||
我的经验值 : <span>{{experience.data.total || experience.data.months || experience.data.years || experience.data.weeks}}</span>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="exp-bar">
|
||||
@@ -572,7 +571,6 @@ export default {
|
||||
}
|
||||
.experience{
|
||||
min-width: 400px;
|
||||
|
||||
.exp-hear{
|
||||
width: 100%;
|
||||
height: 65px;
|
||||
|
||||
Reference in New Issue
Block a user