fix(wallet): #456 钱包流水页面不能正常显示提现的问题

slimkit · Jul 27, 2018 · 3092cee · 3092cee
1 parent 417377c
commit 3092cee
Show file tree

Hide file tree

Showing 5 changed files with 63 additions and 48 deletions.
diff --git a/src/page/wallet/WalletDetail.vue b/src/page/wallet/WalletDetail.vue
@@ -48,8 +48,8 @@ export default {
   },
   computed: {
     after() {
-      const len = this.list.length;
-      return len ? this.list[len - 1].id : 0;
+      const last = _.last(this.list);
+      return last.id || 0;
     }
   },
   watch: {
@@ -65,28 +65,22 @@ export default {
         meta: { data: val }
       });
     },
-    onRefresh() {
-      this.$store
-        .dispatch("wallet/getWalletOrders", { action: this.currAction })
-        .then(data => {
-          if (data.length > 0)
-            this.list = _.unionBy([...data, ...this.list], "id");
+    async onRefresh() {
+      const data = await this.$store.dispatch("wallet/getWalletOrders", {
+        action: this.currAction
+      });
+
+      if (data.length > 0) this.list = data;
 
-          this.$refs.loadmore.topEnd(!(data.length < 15));
-        });
+      this.$refs.loadmore.topEnd(data.length < 15);
     },
-    onLoadMore() {
-      this.$store
-        .dispatch("wallet/getWalletOrders", {
-          action: this.currAction,
-          after: this.after
-        })
-        .then(data => {
-          if (data.length > 0) {
-            this.list = [...this.list, ...data];
-          }
-          this.$refs.loadmore.bottomEnd(!(data.length < 15));
-        });
+    async onLoadMore() {
+      const data = await this.$store.dispatch("wallet/getWalletOrders", {
+        action: this.currAction,
+        after: this.after
+      });
+      if (data.length > 0) this.list = [...this.list, ...data];
+      this.$refs.loadmore.bottomEnd(data.length < 15);
     }
   }
 };

diff --git a/src/page/wallet/WalletInfo.vue b/src/page/wallet/WalletInfo.vue
@@ -4,21 +4,22 @@
     <common-header>账单详情</common-header>
 
     <header class="wallet-header">
-      <p>交易{{ detail.state > 0 ? '成功' : '失败' }}</p>
+      <p v-if="detail.state === 0">审核中</p>
+      <p v-else>交易{{ detail.state === 1 ? '成功' : '失败' }}</p>
       <h2>{{ detail.type > 0 ? '+' : '-' }}{{ detail.amount / 100 | postfix(2) }}</h2>
     </header>
 
     <main>
-      <div v-if="detail.target_type==='s'" class="item">
+      <!-- <div v-if="detail.owner_id" class="item">
         <label>{{ detail.type > 0 ? '收款人' : '付款人' }}</label>
-        <span>
-          <avatar :user="user" size="small"/>
+        <span class="user-avatar">
+          <avatar :user="user"/>
           {{ user.name }}
         </span>
-      </div>
+      </div> -->
       <div class="item">
         <label>交易说明</label>
-        <span> {{ detail.body }} </span>
+        <span> {{ detail.body || detail.title }} </span>
       </div>
       <div v-if="detail.target_type==='s'" class="item">
         <label>交易账户</label>
@@ -108,6 +109,12 @@ export default {
         color: #999;
         padding: 0 1em;
       }
+
+      .user-avatar {
+        display: flex;
+        align-items: center;
+        height: 80%;
+      }
     }
   }
 }

diff --git a/src/page/wallet/components/WalletDetailItem.vue b/src/page/wallet/components/WalletDetailItem.vue
@@ -1,13 +1,10 @@
 <template>
-  <div
-    class="m-box m-bb1 m-aln-center m-justify-bet m-main m-wallet-detail"
-    @click.stop="showDetail">
-    <div
-      class="m-wallet-detail-time"
-      v-html="created_at"/>
-    <div class="m-wallet-detail-title" >{{ detail.body }}</div>
-    <div class="m-wallet-detail-amount">
-      {{ detail.type > 0 ? '+' : '-' }}{{ (detail.amount / 100).toFixed(2) }}
+  <div class="c-wallet-detail-item" @click.stop="showDetail">
+    <div class="time" v-html="created_at"/>
+    <div class="title" >{{ detail.body || detail.title }}</div>
+    <div class="amount">
+      <span v-if="detail.state === 0" class="gray">审核中</span>
+      <span v-if="detail.state === 1">{{ detail.type > 0 ? '+' : '-' }}{{ (detail.amount / 100).toFixed(2) }}</span>
     </div>
   </div>
 </template>
@@ -25,7 +22,7 @@ function splitYMD(date) {
   const w = week[date.getDay()];
   const h = (date.getHours() + "").padStart(2, 0);
   const m = (date.getMinutes() + "").padStart(2, 0);
-  const d = (M + "").padStart(2, 0) + "/" + (D + "").padStart(2, 0);
+  const d = (M + "").padStart(2, 0) + "." + (D + "").padStart(2, 0);
   const t = h + ":" + m;
   return { Y, M, D, w, d, t };
 }
@@ -55,7 +52,7 @@ export default {
       } else if (now.D - time.D === 0) {
         D = "今天";
       }
-      return `<p>${D}</p><p>${time.t}</p>`;
+      return `<p>${D}</p><p>${time.d}</p>`;
     }
   },
   methods: {
@@ -67,25 +64,41 @@ export default {
 </script>
 
 <style lang="less" scoped>
-.m-wallet-detail {
+.c-wallet-detail-item {
   padding: 30px;
   font-size: 30px;
   line-height: 36px;
-  &-time {
+  border-bottom: 1px solid #ededed;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background-color: #fff;
+
+  .time {
     color: #b3b3b3;
     font-size: 24px;
     text-align: center;
     line-height: 1;
   }
-  &-title {
+
+  .title {
     margin: 0 30px;
     width: 100%;
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
   }
-  &-amount {
-    color: #ff9400;
+
+  .amount {
+    width: 5em;
+    text-align: right;
+
+    span {
+      color: #ff9400;
+      &.gray {
+        color: #b3b3b3;
+      }
+    }
   }
 }
 </style>
diff --git a/src/page/wallet/components/WalletWithdrawDetailItem.vue b/src/page/wallet/components/WalletWithdrawDetailItem.vue
@@ -28,7 +28,7 @@ function splitYMD(date) {
   const w = week[date.getDay()];
   const h = (date.getHours() + "").padStart(2, 0);
   const m = (date.getMinutes() + "").padStart(2, 0);
-  const d = (M + "").padStart(2, 0) + "/" + (D + "").padStart(2, 0);
+  const d = (M + "").padStart(2, 0) + "." + (D + "").padStart(2, 0);
   const t = h + ":" + m;
   return { Y, M, D, w, d, t };
 }
@@ -58,7 +58,7 @@ export default {
       } else if (now.D - time.D === 0) {
         D = "今天";
       }
-      return `<p>${D}</p><p>${time.t}</p>`;
+      return `<p>${D}</p><p>${time.d}</p>`;
     },
     typeText() {
       return typeMap[this.detail.type] || "";

diff --git a/src/stores/module/wallet.js b/src/stores/module/wallet.js
@@ -1,4 +1,5 @@
 import * as api from "@/api/wallet";
+import _ from "lodash";
 
 const state = {
   list: [], // 充值纪录
@@ -39,8 +40,8 @@ const actions = {
    */
   async getWalletOrders({ commit, state }, params) {
     let { data } = await api.getWalletOrders(params);
-    if (params && params.after) data = [...state.list, ...data];
-    commit(TYPES.UPDATE_WALLET, { list: data });
+    const unionList = _.unionBy([...state.list, ...data], "id");
+    commit(TYPES.UPDATE_WALLET, { list: unionList });
     return data || [];
   },