交易收入页面布局

+<template>
+  <div class="progress-box">
+      <!-- 绘制圆环背景 -->
+      <canvas class="progress-bg" id="canvasProgressbg" />
+      <!-- 绘制加载中圆弧 -->
+      <canvas class="progress-canvas" id="canvasProgress" /> 
+  </div>
+</template>
+
+<script>
+import incomeItem from './incomeItem'
+export default {
+  name: 'income-detail',
+  props: {
+      data: {
+          type: Array,
+          default: []
+      }
+  },
+  data() {
+    return {
+     
+    };
+  },
+  methods: {
+        /**
+  * 画progress底部背景
+  */
+  drawProgressbg: function (summary) {
+    var c=document.getElementById("canvasProgressbg");
+    var cxt=c.getContext("2d");
+    // 设置圆环的宽度
+    ctx.setLineWidth(28 * radio);
+    // 设置圆环的颜色
+    let strokeColor = '#E0E0E0'
+    if (summary && summary.totalIncome > 0) {
+      strokeColor = '#65AB85';
+    }
+    ctx.setStrokeStyle(strokeColor);
+    // 设置圆环端点的形状
+    ctx.setLineCap('round')
+    //开始一个新的路径
+    ctx.beginPath();
+    //设置一个原点(110,110)，半径为100的圆的路径到当前路径
+    console.log("起始点：" + Math.PI)
+    ctx.arc(120 * radio, 120 * radio, 100 * radio, 0, 2 * Math.PI, false);
+    //对当前路径进行描边
+    ctx.stroke();
+    //开始绘制
+    ctx.draw();
+  },
+
+  /**
+   * 画progress进度
+   */
+  drawCircle: function (step) {
+    // 使用 wx.createContext 获取绘图上下文 context
+    var context = wx.createCanvasContext('canvasProgress');
+    // 设置圆环的宽度
+    context.setLineWidth(28 * radio);
+    // 设置圆环的颜色
+    let strokeColor = '#002B47'
+    // if (this.data.summary.totalIncome <= 0){
+    //   strokeColor = '#E0E0E0';
+    // }
+    context.setStrokeStyle(strokeColor);
+    // 设置圆环端点的形状
+    context.setLineCap('round')
+    //开始一个新的路径
+    context.beginPath();
+    //参数step 为绘制的圆环周长，从0到2为一周 。 -Math.PI / 2 将起始角设在12点钟位置 ，结束角 通过改变 step 的值确定
+    context.arc(120 * radio, 120 * radio, 100 * radio, -Math.PI / 2, step * Math.PI - Math.PI / 2, false);
+    //对当前路径进行描边
+    context.stroke();
+    //开始绘制
+    context.draw()
+  },
+
+  /**
+   * 开始progress
+   */
+  startProgress: function (summary) {
+
+    // 设置倒计时 定时器 每100毫秒执行一次，计数器count+1 ,耗时6秒绘一圈
+    if (summary && summary.totalIncome > 0) {
+      // this.countTimer = setInterval(() => {
+
+        // if (this.data.count <= 60) {
+          /* 绘制彩色圆环进度条
+          注意此处 传参 step 取值范围是0到2，
+          所以 计数器 最大值 60 对应 2 做处理，计数器count=60的时候step=2
+          */
+          this.drawCircle(summary.goodsIncome / (summary.totalIncome / 2))
+          // if()
+          // this.data.count++;
+        // }
+        // else {
+        //   clearInterval(this.countTimer);
+        //   this.startProgress();
+        // }
+      // }, 100)
+    }
+  },
+  },
+    components: {
+        incomeItem
+    }
+
+};
+</script>
+
+<style lang="scss" scoped>
+.total-income {
+  font-size: 36px;
+  padding: 15px;
+  border-bottom: solid 1px #eee;
+}
+.no-data {
+      color: #ccc;
+      font-weight: bold;
+      text-align: center;
+      font-size: 42px;
+      padding: 100px 0;
+  }
+</style>

+<template>
+  <div class="income-detail-header">
+     <p class="total-income">收入明细</p>
+     <div v-if="data.length === 0" class="no-data">暂无收入明细</div>
+     <div v-else>
+       <incomeItem :data="data"></incomeItem>
+     </div>
+  </div>
+</template>
+
+<script>
+import incomeItem from './incomeItem'
+export default {
+  name: 'income-detail',
+  props: {
+      data: {
+          type: Array,
+          default: []
+      }
+  },
+  data() {
+    return {
+     
+    };
+  },
+    components: {
+        incomeItem
+    }
+
+};
+</script>
+
+<style lang="scss" scoped>
+.total-income {
+  font-size: 36px;
+  padding: 15px;
+  border-bottom: solid 1px #eee;
+}
+.no-data {
+      color: #ccc;
+      font-weight: bold;
+      text-align: center;
+      font-size: 42px;
+      padding: 100px 0;
+  }
+</style>

+<template>
+  <div class="income-header">
+     <p class="total-income">收入: {{data.totalIncome}}</p>
+     <div class="income">
+       <span class="dot1"></span>
+       <span class="income-name">货款收入</span>
+       <span class="income-num">{{data.goodsIncome}}</span>
+     </div>
+     <div class="income">
+       <span class="dot2"></span>
+       <span class="income-name">补偿收入</span>
+       <span class="income-num">{{data.compensateIncome}}</span>
+     </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'income-header',
+  props: {
+      data: {
+          type: Object,
+          default: {}
+      }
+  },
+  data() {
+    return {
+     
+    };
+  },
+
+
+};
+</script>
+
+<style lang="scss" scoped>
+.income-header {
+  margin: 50px 0;
+}
+.total-income {
+  font-size: 36px;
+  margin-bottom: 40px;
+}
+.income {
+  margin-bottom: 15px;
+  font-size: 24px;
+  .dot1,.dot2 {
+    display: inline-block;
+    width: 16px;
+    height: 16px;
+    border-radius: 16px;
+  }
+  .dot1 {
+    background-color: #002B47;
+  }
+  .dot2 {
+    background-color: #65AB85;
+  }
+  .income-name {
+    color: #999;
+  }
+}
+</style>

+<template>
+  <div class="assets-record-container">
+  <div class='assets-record-info-detail-view'>
+    <div class='assets-record-left-view'>
+      <img class='assets-record-image-style' :src='data.tradeType == 2 ?"" : ""' />
+      <div class='assets-record-middle-view'>
+        <span class='assets-record-code-txt'>{{data.tradeTypeDesc}}(订单号：{{data.orderCode}})</span>
+        <span class='assets-record-time-txt'>{{data.createTime}}</span>
+      </div>
+    </div>
+    <div class='assets-record-right-view'>
+      <span class='assets-record-income-txt'>+{{data.amount}}</span>
+      <span class='assets-record-income-tip-txt' v-if="!data.normalFlag">打款失败</span>
+    </div>
+  </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'income-item',
+  props: {
+      data: {
+          type: Object,
+          default: {}
+      }
+  },
+  data() {
+    return {
+     
+    };
+  },
+
+
+};
+</script>
+
+<style lang="scss" scoped>
+  .assets-record-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  border-bottom: solid 1px #E0E0E0;
+  /* background: #ee00dd; */
+  /* position: fixed; */
+}
+
+.assets-record-info-detail-view {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  padding-top: 30px;
+  padding-bottom: 30px;
+}
+.assets-record-left-view {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+
+}
+.assets-record-middle-view {
+  display: flex;
+  flex-direction: column;
+  margin-left: 20px;
+}
+.assets-record-right-view {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.assets-record-image-style {
+  width: 48px;
+  height: 48px;
+  /* background: #00ff */
+}
+.assets-record-code-txt {
+  font-family: PingFang-SC-Regular;
+  font-size: 28px;
+  color: #000000;
+}
+.assets-record-time-txt {
+  font-family: SFProText-Regular;
+  font-size: 24px;
+  color: #999999;
+  margin-top: 12px;
+}
+.assets-record-income-txt {
+  font-family: SFProText-Medium;
+  font-weight: bold;
+  font-size: 28px;
+  color: #000000;
+}
+.assets-record-income-tip-txt {
+  font-family: PingFang-SC-Regular;
+  font-size: 20px;
+  color: #D0021B;
+}
+</style>

 <template>
 <template>
   <LayoutApp :show-back="true">
   <LayoutApp :show-back="true">
     <div class="body" ref="body">
     <div class="body" ref="body">
-      <h2>trade</h2>
+      <h1>我的收入</h1>
+      <incomeHeader :data="incomeSum"></incomeHeader>
+      <incomeDetail></incomeDetail>
     </div>
     </div>
   </LayoutApp>
   </LayoutApp>
 </template>
 </template>
 
 
 <script>
 <script>
-// import tabItem from './components/tabItem';
-
+import incomeHeader from './components/incomeHeader';
+import incomeDetail from './components/incomeDetail';
 import { createNamespacedHelpers } from 'vuex';
 import { createNamespacedHelpers } from 'vuex';
 
 
-const {mapGetters, mapActions} = createNamespacedHelpers('home/mine');
+const {mapState, mapActions} = createNamespacedHelpers('home/mine');
 export default {
 export default {
     data() {
     data() {
       return {
       return {
@@ -19,6 +21,16 @@ export default {
       }
       }
     },
     },
     computed:{
     computed:{
+        ...mapState({
+          incomeSum:(state) => {
+            return {
+              goodsIncome: state.assetData.goodsIncome,
+              totalIncome: state.assetData.totalIncome,
+              compensateIncome: state.assetData.compensateIncome
+              }
+          },
+          incomeData: (state) => state.assetData
+        }),
         
         
     },
     },
     created() {
     created() {
@@ -30,7 +42,8 @@ export default {
       ...mapActions(['fetchAssets'])
       ...mapActions(['fetchAssets'])
     },
     },
     components: {
     components: {
-
+      incomeHeader,
+      incomeDetail
     }
     }
 };
 };
 </script>
 </script>

@@ -25,9 +25,9 @@ export default function() {
         list: [],
         list: [],
         currentPage: 1,
         currentPage: 1,
         endReached: false,
         endReached: false,
-        compensateIncome: 0,
-        goodsIncome: 0,
-        totalIncome: 0
+        compensateIncome: '￥0.00',
+        goodsIncome: '￥0.00',
+        totalIncome: '￥0.00'
       },
       },
       resource1: {},
       resource1: {},
       resource2: {}
       resource2: {}
@@ -115,6 +115,8 @@ export default function() {
       },
       },
       addAssets(state, assetData) {
       addAssets(state, assetData) {
         assetData.totalIncome = formatNumber(assetData.totalIncome);
         assetData.totalIncome = formatNumber(assetData.totalIncome);
+        assetData.compensateIncome = formatNumber(assetData.compensateIncome);
+        assetData.goodsIncome = formatNumber(assetData.goodsIncome);
         state.assetData = Object.assign({}, state.assetData, assetData);
         state.assetData = Object.assign({}, state.assetData, assetData);
       },
       },