课程评论回复

src/views/ucurrency/Index.vue

@@ -3,41 +3,22 @@
        <div class="myubi">
            <div class="ubi-hear">
                <h6>我的U币:367</h6><span class="cursor-pointer" @click="dialogVisible = true">U币规则 <i class="el-icon-arrow-right"></i> </span>
-                <el-button>导出记录</el-button>
+                <el-button @click="exportRecord()">导出记录</el-button>
            </div>
-           <div class="Ubi-hist">
-               <h6>U币历史记录</h6><span>（最多保留近7天的记录）</span>
+           <div style="max-height:600px;overflow-y:auto;padding-right:50px">
+                <div class="Ubi-hist">
+                    <h6>U币历史记录</h6><span>（最多保留近7天的记录）</span>
+                    <div style="width:100%;height:290px" ref="chart"></div>
+                </div>
+                <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">{{getUType(info.eventKey)}}</div>
+                        <div class="info-Gold"><img src="../../../public/images/Uimg.png" alt="">{{info.uvalue > 0? '+':''}} {{info.uvalue}}</div>
+                    </div>
+                </div>
            </div>
-          <div class="my-Recording">
-            <h3>5月31日</h3>
-            <div class="Recording-info">
-              <div class="info-tit">发布笔记</div>
-              <div class="info-Gold"><img src="../../../public/images/Uimg.png" alt=""> +5</div>
-            </div>
-              <div class="Recording-info">
-              <div class="info-tit">回答问题</div>
-              <div class="info-Gold"><img src="../../../public/images/Uimg.png" alt=""> +5</div>
-            </div>
-              <div class="Recording-info">
-              <div class="info-tit">意见反馈</div>
-              <div class="info-Gold"><img src="../../../public/images/Uimg.png" alt=""> +5</div>
-            </div>
-          </div>
-           <div class="my-Recording">
-            <h3>5月29日</h3>
-            <div class="Recording-info">
-              <div class="info-tit">发布笔记</div>
-              <div class="info-Gold"><img src="../../../public/images/Uimg.png" alt=""> +5</div>
-            </div>
-              <div class="Recording-info">
-              <div class="info-tit">回答问题</div>
-              <div class="info-Gold"><img src="../../../public/images/Uimg.png" alt=""> +5</div>
-            </div>
-              <div class="Recording-info">
-              <div class="info-tit">意见反馈</div>
-              <div class="info-Gold"><img src="../../../public/images/Uimg.png" alt=""> +5</div>
-            </div>
-          </div>
+           
        </div>
         <div class="experience">
           <div class="exp-hear">
@@ -51,11 +32,10 @@
                     累计<i class="el-icon-arrow-down el-icon--right"></i>
                 </span>
                 <el-dropdown-menu slot="dropdown">
-                    <el-dropdown-item>黄金糕</el-dropdown-item>
-                    <el-dropdown-item>狮子头</el-dropdown-item>
-                    <el-dropdown-item>螺蛳粉</el-dropdown-item>
-                    <el-dropdown-item disabled>双皮奶</el-dropdown-item>
-                    <el-dropdown-item divided>蚵仔煎</el-dropdown-item>
+                    <el-dropdown-item>累计</el-dropdown-item>
+                    <el-dropdown-item>本周</el-dropdown-item>
+                    <el-dropdown-item>本月</el-dropdown-item>
+                    <el-dropdown-item disabled>本年</el-dropdown-item>
                 </el-dropdown-menu>
                 </el-dropdown> 
               </div>
@@ -186,6 +166,8 @@
 <script>
     import apiStat from '@/api/phase2/stat.js';
     import { mapGetters } from 'vuex';
+    import {getUType} from '@/utils/tools.js'
+    import * as echarts from 'echarts'
       export default{
           computed: {
           ...mapGetters(['userInfo']),
@@ -194,15 +176,102 @@
           components: {},
           data(){
               return{
+                getUType,
                 dialogVisible:false,
-                tableData:[]
+                tableData:[],
+                uCoinRecord:[],
+                chart:null,
               }
           },
           mounted() {
-             
+             this.getList();
           },
         methods:{
-      
+            exportRecord() {
+                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);
+               const option = {
+                    tooltip: {
+                        trigger: 'item'
+                    },
+                    legend: {
+                        top: 'center',
+                        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++){
+                                total += data[i].value;
+                                if(data[i].name == name) {
+                                    tarValue = data[i].value;
+                                }
+                            }
+                            let p =Math.round((tarValue/total)*100)+'%';
+                            return ` ${p}  ${name}`
+                        }
+                    },
+                    series: [
+                        {
+                        // name: 'name',
+                        type: 'pie',
+                        radius: ['50%', '40%'],
+                        avoidLabelOverlap: false,
+                        center: ['32%','50%'],
+                        itemStyle: {
+                            borderRadius: 0,
+                            borderColor: '#fff',
+                            borderWidth: 2,
+                            normal: {
+                                color: function (colors) {
+                                    let colorList = ['#5bb9fe','#f7b36b','#72e5d5','#e1e1f9'];
+                                    return colorList[colors.dataIndex];
+                                },
+                            }
+                        },
+                        label: {
+                            show: false,
+                            position: 'center',
+                        },
+                        labelLine: {
+                            show: false
+                        },
+                        data: chatData,
+                        }
+                    ]
+                    };
+                    this.chart.setOption(option);
+            },
+           getList() {
+            apiStat.userCoinList(this.userInfo.aid,7).then(res=>{
+                if(res.status == 200) {
+                   this.uCoinRecord = [];
+                    for(let key in res.result.uCoinRecord){
+                        this.uCoinRecord.push({
+                        dayNmae: key,
+                        list:res.result.uCoinRecord[key]
+                        })
+                    }
+                    let chatData = [];
+                    
+                    for(let key in res.result.chatData){
+                        chatData.push({
+                            value:res.result.chatData[key],
+                            name:this.getUType(key)
+                        })
+                    }
+                    this.initChat(chatData);
+                }
+            })
+           }
         }
       }
 </script>
@@ -314,7 +383,7 @@
     }
     .myubi{
       flex: 1;
-      margin-right: 107px;
+      margin-right: 84px;
     }
     .omit{
         padding-left: 20px;