新增绑定支付宝页面

+<template>
+  <LayoutApp :show-back="true" title="绑定支付宝">
+    <div class="body" ref="body">
+      <div class="account-form">
+          <p class="form-title">账号</p>
+          <div class="form-input-block">
+            <CubeInput class="account-input" v-model="account" placeholder="请输入您的支付宝账号"></CubeInput>
+          </div>
+          <p class="form-title">姓名</p>
+          <div class="form-input-block">
+            <CubeInput class="account-input" v-model="name" placeholder="请输入支付宝实名认证的姓名"></CubeInput>
+          </div>
+      </div>
+      <div class="account-footer">
+        <CubeButton class="submit-btn" :disabled="canSubmit" @click="submitBind">提交</CubeButton>
+      </div>
+    </div>
+    <myDialog :isShow="dialogShow" :data="{name,account}" @cancel-click="cancel" @confirm-click="confirm"></myDialog>
+  </LayoutApp>
+</template>
+
+<script>
+
+import { createNamespacedHelpers } from 'vuex';
+import {Input, Button, Style} from 'cube-ui';
+import myDialog from './components/bindModel'
+const {mapState, mapActions} = createNamespacedHelpers('home/bindAccount');
+export default {
+    data() {
+      return {
+        account: '',
+        name: '',
+        dialogShow: false
+      }
+    },
+    computed:{
+        ...mapState({
+          incomeData: (state) => state.assetData
+        }),
+        canSubmit() {
+        return !(this.name && this.account);
+        }
+    },
+    created() {
+    },
+
+    methods: {
+      ...mapActions(['fetchAssets']),
+      submitBind() {
+          this.dialogShow = true
+      },
+      cancel() {
+          this.dialogShow = false
+      },
+      confirm() {
+          console.log('确认')
+          this.dialogShow = false
+      }
+    },
+    components: {
+      Style,
+      CubeInput: Input,
+      CubeButton: Button,
+      myDialog
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+.body {
+    position: relative;
+    height: 100%;
+    overflow-y: auto;
+    background-color: white;
+    padding: 0 40px;
+}
+.account-form {
+      margin-top: 40px;
+    }
+
+    .form-title {
+      font-size: 36px;
+      padding-top: 40px;
+      line-height: 1.6;
+      font-weight: 500;
+    }
+
+    .form-input-block {
+      padding-bottom: 16px;
+      border-bottom: 1px solid #eee;
+      position: relative;
+    }
+
+    .account-input {
+      &:after {
+        border: 0;
+      }
+
+      /deep/ .cube-input-field {
+        font-size: 14px;
+        height: 40px;
+        border: none;
+        padding: 0;
+      }
+    }
+.account-footer {
+    position: absolute;
+    padding: 28px 0;
+    left: 40px;
+    right: 40px;
+    bottom: 40px;
+    .submit-btn {
+      height: 88px;
+      line-height: 88px;
+      padding: 0;
+      background: #022c46;
+      border-radius: 44px;
+
+      &:after {
+        border: 0;
+      }
+
+      &.cube-btn_disabled {
+        background: #ccc;
+      }
+    }
+  }
+</style>

+<template>
+  <div v-if="isShow" class="third-bind-wrapper">
+    <div class="bind-dialog">
+        <div class="dialog-title">请确认您的支付宝账号</div>
+        <div class="dialog-content">
+            <div class="input-block">
+            <p class="info-title">账号</p>
+            <p class="info-text">{{data.account}}</p>
+        </div>
+        <div class="input-block">
+            <p class="info-title">姓名</p>
+            <p class="info-text">{{data.name}}</p>
+        </div>
+        <div class="tip">为了保证您的安全，请再次确认您提供的支付宝账号的正确性！</div>
+        </div>
+        <div class="dialog-footer">
+            <div class="btn-cancel" @click="cancel">返回修改</div>
+            <div class="btn-confirm" @click="confirm">我已确认</div>
+        </div>
+    </div>
+  </div>
+</template>
+<script>
+import { createNamespacedHelpers } from 'vuex';
+
+const {mapState, mapActions} = createNamespacedHelpers('home/bindAccount');
+export default {
+    name: 'my-dialog',
+     props: {
+        isShow: {
+            type: Boolean,
+            default: false
+        },
+        data: {
+            type: Object,
+            default: {}
+        }
+    },
+    data() {
+      return {
+      }
+    },
+    computed:{
+    },
+
+    methods: {
+        cancel() {
+            this.$emit('cancel-click')
+        },
+        confirm() {
+            this.$emit('confirm-click')
+        }
+    },
+    components: {
+    }
+};
+</script>
+<style lang="scss" scoped>
+.third-bind-wrapper {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.4);
+  z-index: 99;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.bind-dialog {
+  position: relative;
+  width: 670px;
+  padding: 64px 48px 80px;
+  font-size: 28px;
+  box-sizing: border-box;
+  background-color: #fff;
+}
+.dialog-title {
+    font-size: 28px;
+    text-align: center;
+}
+.dialog-content {
+    padding: 60px 0;
+}
+
+.input-block {
+    margin-bottom: 40px;
+    .info-title {
+        font-size: 24px;
+        color: #999;
+    }
+    .info-text {
+        font-size: 32px;
+        margin-top: 5px;
+    }
+}
+.tip {
+    color: #D0021B;
+    font-size: 24px;
+}
+.dialog-footer {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    left: 0;
+    height: 100px;
+    border-top: solid 1px #eee;
+    font-size: 28px;
+    display: flex;
+    justify-content: center;
+
+    .btn-cancel {
+        flex: 1;
+        color: #999;
+        border-right: solid 1px #eee;
+        text-align: center;
+        line-height: 100px;
+    }
+    .btn-confirm {
+        flex: 1;
+        text-align: center;
+        line-height: 100px;
+    }
+}
+</style>

+export default [{
+  name: 'bindAccount',
+  path: '/xianyu/home/bindAccount.html',
+  component: () => import(/* webpackChunkName: "bindAccount" */ './bindAccount')
+}];

@@ -4,7 +4,7 @@ import Favorite from './favorite';
 import news from './news';
 import Income from './income';
 import Coupon from './coupon';
-
+import BindAccount from './bindAccount';
 export default [
   {
     name: 'IndexPage',
@@ -85,5 +85,6 @@ export default [
   ...Trade,
   ...Favorite,
   ...Income,
-  ...Coupon
+  ...Coupon,
+  ...BindAccount
 ];

@@ -17,7 +17,6 @@ export default {
           type: Object,
           default: {}
       },
-
   },
   data() {
     return {
@@ -33,19 +32,26 @@ export default {
   },
 
   mounted() {
-    let summary = {}
-    for(let key in this.data) {
-      let item = this.data[key];
-      if(item.includes('¥')) {
-        let value = this.data[key].split('¥')[1];
-        summary[key] = value
-      }
+    this.startDraw(this.data);
+  },
+  watch: {
+    data: function(val) {
+      this.startDraw(val)
     }
-    this.drawProgressbg(summary);
-    this.startProgress(summary);
   },
-
   methods: {
+    startDraw(val) {
+      let summary = {}
+    for(let key in val) {
+        let item = val[key];
+        if(item.includes('¥')) {
+          let value = val[key].split('¥')[1];
+          summary[key] = value
+        }
+      }
+    this.drawProgressbg(summary);
+    this.startProgress(summary);
+    },
   // 画progress底部背景
   drawProgressbg: function (summary) {
     let c=document.getElementById("canvasProgressbg");
@@ -61,8 +67,6 @@ export default {
     //设置一个原点(110,110)，半径为100的圆的路径到当前路径
     ctx.arc(120, 120, 100, 0, 2 * Math.PI, false);
     ctx.stroke();
-    //开始绘制
-    // ctx.draw();
   },
 
   // 画progress进度
@@ -77,8 +81,6 @@ export default {
     //参数step 为绘制的圆环周长，从0到2为一周 。 -Math.PI / 2 将起始角设在12点钟位置 ，结束角 通过改变 step 的值确定
     context.arc(120, 120, 100, -Math.PI / 2, step * Math.PI - Math.PI / 2, false);
     context.stroke();
-    //开始绘制
-    // context.draw()
   },
 
   // 开始progress

@@ -6,10 +6,10 @@
               <p class="account-name">范闲</p>
           </div>
           <p class="tip"><i class="cubeic-warn"></i><span>已绑定的支付宝账号暂无法提供系统换绑和解除，如
-需要帮助可致电400-8890-9646联系电话客服</span></p>
+需要帮助可致电<a class="phone" href="tel:400-8890-9646"> 400-8890-9646 </a>联系电话客服</span></p>
       </div>
       <div v-else>
-          <div class="bind-button">设置支付宝账号</div>
+          <div class="bind-button" @click="bindAccount">设置支付宝账号</div>
           <p class="tip"><i class="cubeic-warn"></i><span>请先设置支付宝账号作为货款和补偿款的收款账户</span></p>
       </div>
   </div>
@@ -26,7 +26,9 @@ export default {
   },
   
   methods: {
-    
+    bindAccount() {
+        this.$router.push({ name: 'bindAccount' });
+    }
   },
 };
 </script>
@@ -45,7 +47,10 @@ export default {
     }
 }
 
-
+.phone {
+    text-decoration: underline;
+    color: #65AB85;
+}
 .bind-button {
   width: 100%;
   text-align: center;

 <template>
-  <LayoutApp :show-back="true">
+  <LayoutApp :show-back="true" title="我的收入">
     <div class="body" ref="body">
       <Scroll
           ref="scroll"
@@ -8,8 +8,8 @@
           @pulling-down="onPullingDown"
           @pulling-up="onPullingUp">
       
-      <incomeHeader :data="incomeSum"></incomeHeader>
-      <payAccount isBind></payAccount>
+      <incomeHeader :data="getAssetSummary"></incomeHeader>
+      <payAccount></payAccount>
       <incomeDetail :data="incomeData">
         <template v-for="(item,index) in incomeData.list">
             <incomeItem :data="item" :key="index"></incomeItem>
@@ -32,7 +32,7 @@ import payAccount from './components/payAccount';
 import { createNamespacedHelpers } from 'vuex';
 import {Style, Scroll} from 'cube-ui';
 import scrollMixin from '../../../mixins/scroll';
-const {mapState, mapActions} = createNamespacedHelpers('home/mine');
+const {mapState, mapGetters, mapActions} = createNamespacedHelpers('home/mine');
 export default {
     mixins: [scrollMixin],
     data() {
@@ -41,14 +41,8 @@ export default {
       }
     },
     computed:{
+      ...mapGetters(['getAssetSummary']),
         ...mapState({
-          incomeSum:(state) => {
-            return {
-              goodsIncome: state.assetData.goodsIncome,
-              totalIncome: state.assetData.totalIncome,
-              compensateIncome: state.assetData.compensateIncome
-              }
-          },
           incomeData: (state) => state.assetData
         }),
         

+
+export default function () {
+  return {
+    namespaced: true,
+    state: {
+ 
+    },
+    mutations: {
+     
+    },
+    actions: {
+ 
+    },
+  };
+}

@@ -3,7 +3,7 @@ import channel from './channel';
 import favorite from './favorite';
 import news from './news';
 import coupon from './coupon';
-
+import bindAccount from './bindAccount';
 export default function() {
   return {
     namespaced: true,
@@ -23,7 +23,8 @@ export default function() {
       channel: channel(),
       favorite: favorite(),
       news: news(),
-      coupon: coupon()
+      coupon: coupon(),
+      bindAccount: bindAccount()
     }
   };
 }

@@ -5,7 +5,7 @@ import moment from 'moment';
 import { sellerOrderStatus, ownType } from '../../../constants/order-constants';
 
 // const uid = '600046428';
-const uid = '500031424';
+// const uid = '500031424';
 const MINE_RESOURCE_CODE1 = '11a73219a63b50067d88e75c0fe04d10';
 const MINE_RESOURCE_CODE2 = 'dc2731fbbebcba6329c74a379e9c41ec';
 
@@ -168,6 +168,13 @@ export default function() {
 
         return [yearsData, monthsData];
       },
+      getAssetSummary(state) {
+        return {
+          goodsIncome: state.assetData.goodsIncome,
+          totalIncome: state.assetData.totalIncome,
+          compensateIncome: state.assetData.compensateIncome
+        };
+      }
     },
     mutations: {
       addList(state, { list }) {
@@ -376,7 +383,7 @@ export default function() {
         const result = await this.$api.get('/api/ufo/mine/assets', {
           page,
           limit: pageSize,
-          uid
+          // uid
         });
 
         // commit('assetFetching', {isFetching: false});