Authored by baoss

交易收入页面优化

1 <template> 1 <template>
2 <div class="progress-box"> 2 <div class="progress-box">
3 <!-- 绘制圆环背景 --> 3 <!-- 绘制圆环背景 -->
4 - <canvas ref="canvasProgressbg" class="progress-bg" id="canvasProgressbg" width="280" height="280" /> 4 + <canvas ref="canvasProgressbg" class="progress-bg" id="canvasProgressbg" width="240" height="240" />
5 <!-- 绘制加载中圆弧 --> 5 <!-- 绘制加载中圆弧 -->
6 - <canvas ref ="canvasProgress" class="progress-canvas" id="canvasProgress" width="280" height="280" /> 6 + <canvas ref ="canvasProgress" class="progress-canvas" id="canvasProgress" width="240" height="240" />
7 </div> 7 </div>
8 </template> 8 </template>
9 9
@@ -16,7 +16,8 @@ export default { @@ -16,7 +16,8 @@ export default {
16 data: { 16 data: {
17 type: Object, 17 type: Object,
18 default: {} 18 default: {}
19 - } 19 + },
  20 +
20 }, 21 },
21 data() { 22 data() {
22 return { 23 return {
@@ -25,32 +26,21 @@ export default { @@ -25,32 +26,21 @@ export default {
25 }, 26 },
26 computed: { 27 computed: {
27 ...mapState({ 28 ...mapState({
28 - radio: (state) => {  
29 - return (state.yoho.window.clientWidth/750).toFixed(2); 29 + clientWidth: (state) => {
  30 + return state.yoho.window.clientWidth;
30 }, 31 },
31 - // summary:(state) => {  
32 - // return {  
33 - // goodsIncome: state.home.mine.assetData.goodsIncome,  
34 - // totalIncome: state.home.mine.assetData.totalIncome,  
35 - // compensateIncome: state.home.mine.assetData.compensateIncome  
36 - // }  
37 - // },  
38 }) 32 })
39 }, 33 },
40 34
41 mounted() { 35 mounted() {
42 - // console.log(typeof this.data.compensateIncome)  
43 -  
44 -  
45 let summary = {} 36 let summary = {}
46 - // console.log(this.goodsIncome)  
47 - // console.log(summary)  
48 - // console.log('---------')  
49 - // console.log(this.data)  
50 - summary.compensateIncome = '299.26';  
51 - summary.goodsIncome = '955.78';  
52 - summary.totalIncome = '1255.04';  
53 - 37 + for(let key in this.data) {
  38 + let item = this.data[key];
  39 + if(item.includes('¥')) {
  40 + let value = this.data[key].split('¥')[1];
  41 + summary[key] = value
  42 + }
  43 + }
54 this.drawProgressbg(summary); 44 this.drawProgressbg(summary);
55 this.startProgress(summary); 45 this.startProgress(summary);
56 }, 46 },
@@ -58,8 +48,8 @@ export default { @@ -58,8 +48,8 @@ export default {
58 methods: { 48 methods: {
59 // 画progress底部背景 49 // 画progress底部背景
60 drawProgressbg: function (summary) { 50 drawProgressbg: function (summary) {
61 - var c=document.getElementById("canvasProgressbg");  
62 - var ctx=c.getContext("2d"); 51 + let c=document.getElementById("canvasProgressbg");
  52 + let ctx=c.getContext("2d");
63 ctx.lineWidth= 28 ; 53 ctx.lineWidth= 28 ;
64 let strokeStyle = '#E0E0E0' 54 let strokeStyle = '#E0E0E0'
65 if (summary && summary.totalIncome > 0) { 55 if (summary && summary.totalIncome > 0) {
@@ -69,7 +59,6 @@ export default { @@ -69,7 +59,6 @@ export default {
69 ctx.lineCap='round' 59 ctx.lineCap='round'
70 ctx.beginPath(); 60 ctx.beginPath();
71 //设置一个原点(110,110),半径为100的圆的路径到当前路径 61 //设置一个原点(110,110),半径为100的圆的路径到当前路径
72 - console.log("起始点:" + Math.PI)  
73 ctx.arc(120, 120, 100, 0, 2 * Math.PI, false); 62 ctx.arc(120, 120, 100, 0, 2 * Math.PI, false);
74 ctx.stroke(); 63 ctx.stroke();
75 //开始绘制 64 //开始绘制
@@ -78,8 +67,8 @@ export default { @@ -78,8 +67,8 @@ export default {
78 67
79 // 画progress进度 68 // 画progress进度
80 drawCircle: function (step) { 69 drawCircle: function (step) {
81 - var c=document.getElementById("canvasProgress");  
82 - var context=c.getContext("2d"); 70 + let c=document.getElementById("canvasProgress");
  71 + let context=c.getContext("2d");
83 context.lineWidth=28; 72 context.lineWidth=28;
84 let strokeColor = '#002B47' 73 let strokeColor = '#002B47'
85 context.strokeStyle=strokeColor; 74 context.strokeStyle=strokeColor;
@@ -29,7 +29,7 @@ import incomeItem from './components/incomeItem'; @@ -29,7 +29,7 @@ import incomeItem from './components/incomeItem';
29 import pullDown from './components/pullDown'; 29 import pullDown from './components/pullDown';
30 import { createNamespacedHelpers } from 'vuex'; 30 import { createNamespacedHelpers } from 'vuex';
31 import {Style, Scroll} from 'cube-ui'; 31 import {Style, Scroll} from 'cube-ui';
32 -import scrollMixin from '../../../mixins/scroll' 32 +import scrollMixin from '../../../mixins/scroll';
33 const {mapState, mapActions} = createNamespacedHelpers('home/mine'); 33 const {mapState, mapActions} = createNamespacedHelpers('home/mine');
34 export default { 34 export default {
35 mixins: [scrollMixin], 35 mixins: [scrollMixin],
@@ -51,7 +51,7 @@ export default { @@ -51,7 +51,7 @@ export default {
51 }), 51 }),
52 52
53 }, 53 },
54 - mounted() { 54 + created() {
55 this.fetchAssets(true) 55 this.fetchAssets(true)
56 }, 56 },
57 methods: { 57 methods: {
@@ -28,9 +28,9 @@ export default function() { @@ -28,9 +28,9 @@ export default function() {
28 currentPage: 1, 28 currentPage: 1,
29 pageSize: 20, 29 pageSize: 20,
30 endReached: false, 30 endReached: false,
31 - compensateIncome: '¥0.00',  
32 - goodsIncome: '¥0.00',  
33 - totalIncome: '¥0.00' 31 + compensateIncome: '¥0.00',
  32 + goodsIncome: '¥0.00',
  33 + totalIncome: '¥0.00'
34 }, 34 },
35 resource1: {}, 35 resource1: {},
36 resource2: {} 36 resource2: {}
@@ -207,17 +207,16 @@ export default function() { @@ -207,17 +207,16 @@ export default function() {
207 } 207 }
208 let oldList = isRefresh ? [] : list; 208 let oldList = isRefresh ? [] : list;
209 209
210 - commit('assetFetching', {isFetching: true}); 210 + // commit('assetFetching', {isFetching: true});
211 let page = isRefresh ? 1 : currentPage + 1; 211 let page = isRefresh ? 1 : currentPage + 1;
212 const result = await this.$api.get('/api/ufo/mine/assets', {page, limit: pageSize, uid}); 212 const result = await this.$api.get('/api/ufo/mine/assets', {page, limit: pageSize, uid});
213 213
214 - commit('assetFetching', {isFetching: false}); 214 + // commit('assetFetching', {isFetching: false});
215 if (result.code === 200) { 215 if (result.code === 200) {
216 let assetData = parseAssetList(result.data); 216 let assetData = parseAssetList(result.data);
217 let newList = [...oldList, ...assetData.list]; 217 let newList = [...oldList, ...assetData.list];
218 218
219 assetData.list = newList; 219 assetData.list = newList;
220 - console.log(assetData)  
221 if (typeof assetData.totalIncome !== 'undefined') { 220 if (typeof assetData.totalIncome !== 'undefined') {
222 commit('addAssets', assetData); 221 commit('addAssets', assetData);
223 } 222 }