From 3edb55bc6d57b18e0ddf1b99409b65b230c429ee Mon Sep 17 00:00:00 2001
From: mutoe <mutoe@foxmail.com>
Date: Fri, 27 Jul 2018 14:28:15 +0800
Subject: [PATCH] =?UTF-8?q?fix(wallet):=20#456=20=E6=8F=90=E7=8E=B0?=
 =?UTF-8?q?=E6=98=8E=E7=BB=86=E5=86=85=E5=AE=B9=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/filters.js                                |   4 +
 src/page/wallet/WalletWithdrawDetail.vue      |   8 +-
 src/page/wallet/WalletWithdrawInfo.vue        | 112 +++++++++++++++++
 .../components/WalletWithdrawDetailItem.vue   | 114 ++++++++++++++++++
 src/routers/wallet.js                         |   9 ++
 src/stores/module/wallet.js                   |   7 +-
 6 files changed, 249 insertions(+), 5 deletions(-)
 create mode 100644 src/page/wallet/WalletWithdrawInfo.vue
 create mode 100644 src/page/wallet/components/WalletWithdrawDetailItem.vue

diff --git a/src/filters.js b/src/filters.js
index bea62317..8d660f7b 100644
--- a/src/filters.js
+++ b/src/filters.js
@@ -90,6 +90,10 @@ export const time2txt = str => {
  * @returns {number} timezone offset
  */
 export const timeOffset = new Date().getTimezoneOffset() * 60 * 1000;
+export const addTimeOffset = date => {
+  date = new Date(date).getTime() - timeOffset;
+  return new Date(date).toLocaleString("chinese", { hour12: false });
+};
 
 export const time2tips = date => {
   const time = new Date(date);
diff --git a/src/page/wallet/WalletWithdrawDetail.vue b/src/page/wallet/WalletWithdrawDetail.vue
index 0567b3dc..bde364d3 100644
--- a/src/page/wallet/WalletWithdrawDetail.vue
+++ b/src/page/wallet/WalletWithdrawDetail.vue
@@ -8,7 +8,7 @@
       :on-refresh="onRefresh"
       :on-load-more="onLoadMore"
       class="m-wallet-list">
-      <wallet-detail-item
+      <wallet-withdraw-detail-item
         v-for="item in list"
         v-if="item.id"
         :key="item.id"
@@ -20,11 +20,11 @@
 
 <script>
 import _ from "lodash";
-import walletDetailItem from "./WalletDetailItem.vue";
+import walletWithdrawDetailItem from "./components/WalletWithdrawDetailItem.vue";
 
 export default {
   name: "WalletWithdrawDetail",
-  components: { walletDetailItem },
+  components: { walletWithdrawDetailItem },
   data() {
     return {
       currAction: "out",
@@ -45,7 +45,7 @@ export default {
   },
   methods: {
     showDetail(id) {
-      this.$router.push({ path: "/wallet/detail", params: { id } });
+      this.$router.push({ path: `/wallet/withdraw/detail/${id}` });
     },
     async onRefresh() {
       const data = await this.$store.dispatch("wallet/fetchWithdrawList");
diff --git a/src/page/wallet/WalletWithdrawInfo.vue b/src/page/wallet/WalletWithdrawInfo.vue
new file mode 100644
index 00000000..67033f58
--- /dev/null
+++ b/src/page/wallet/WalletWithdrawInfo.vue
@@ -0,0 +1,112 @@
+<template>
+  <div class="p-wallet-info">
+
+    <common-header>账单详情</common-header>
+
+    <header class="wallet-header">
+      <p>{{ statusText }}</p>
+      <h2>-{{ detail.value / 100 | postfix(2) }}</h2>
+    </header>
+
+    <main>
+      <div class="item">
+        <label>交易说明</label>
+        <span> 提现 </span>
+      </div>
+      <div class="item">
+        <label>交易账户</label>
+        <span> {{ detail.type === "alipay" ? "支付宝": '' }} </span>
+      </div>
+      <div class="item">
+        <label>交易时间</label>
+        <span> {{ detail.created_at | addTimeOffset }} </span>
+      </div>
+    </main>
+  </div>
+</template>
+
+<script>
+import { mapState } from "vuex";
+
+export default {
+  name: "WalletWithdrawInfo",
+  filters: {
+    postfix(val, pos) {
+      if (!val) return "0.00";
+      return val.toFixed(pos);
+    }
+  },
+  data() {
+    return {
+      // detail: {}
+    };
+  },
+  computed: {
+    ...mapState({ wallet: "wallet" }),
+    id() {
+      return Number(this.$route.params.id);
+    },
+    detail() {
+      return this.$store.getters["wallet/getCashesById"](this.id);
+    },
+    user() {
+      return this.$store.state.CURRENTUSER;
+    },
+    statusText() {
+      if (this.detail.status === 0) return "审核中";
+      if (this.detail.status === 2) return "审核失败";
+      return "交易成功";
+    }
+  },
+  mounted() {
+    if (!this.wallet.list.length)
+      this.$store.dispatch("wallet/getWalletOrders");
+  },
+  methods: {}
+};
+</script>
+
+<style lang="less" scoped>
+.p-wallet-info {
+  .wallet-header {
+    height: 300px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    background-color: #fff;
+    padding: 40px 20px;
+
+    > p {
+      font-size: 28px;
+      color: #999;
+    }
+
+    > h2 {
+      font-size: 100px;
+    }
+  }
+  main {
+    margin-top: 20px;
+    background: #fff;
+
+    > .item {
+      height: 100px;
+      display: flex;
+      align-items: center;
+      justify-content: flex-start;
+      border-top: 1px solid #ededed;
+
+      &:first-child {
+        border-top: none;
+      }
+
+      label {
+        width: 6em;
+        font-size: 30px;
+        color: #999;
+        padding: 0 1em;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/page/wallet/components/WalletWithdrawDetailItem.vue b/src/page/wallet/components/WalletWithdrawDetailItem.vue
new file mode 100644
index 00000000..3b33e69e
--- /dev/null
+++ b/src/page/wallet/components/WalletWithdrawDetailItem.vue
@@ -0,0 +1,114 @@
+<template>
+  <div class="c-wallet-withdraw-detail-item" @click.stop="showDetail">
+    <div class="time" v-html="created_at"/>
+    <div class="title" >{{ typeText }} 账户提现</div>
+    <div class="amount">
+      <span v-if="detail.status === 0" class="gray">审核中</span>
+      <span v-if="detail.status === 2" class="gray">审核失败</span>
+      <span v-if="detail.status === 1">-{{ (detail.value / 100).toFixed(2) }}</span>
+    </div>
+  </div>
+</template>
+
+<script>
+import { timeOffset } from "@/filters";
+
+const typeMap = {
+  alipay: "支付宝",
+  wx: "微信"
+};
+
+const week = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
+function splitYMD(date) {
+  date = date || new Date();
+  date = new Date(date);
+  const Y = date.getFullYear();
+  const M = date.getMonth() + 1;
+  const D = date.getDate();
+  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 t = h + ":" + m;
+  return { Y, M, D, w, d, t };
+}
+
+export default {
+  name: "WalletWithdrawDetailItem",
+  props: {
+    detail: { type: Object, required: true }
+  },
+  data() {
+    return {};
+  },
+  computed: {
+    created_at() {
+      const now = splitYMD(new Date());
+      let time = new Date(this.detail.created_at).getTime() - timeOffset;
+      time = splitYMD(time);
+      let D;
+      if (time.Y < now.Y) {
+        D = time.d;
+      } else if (time.M < now.M) {
+        D = time.d;
+      } else if (now.D - time.D > 1) {
+        D = time.w;
+      } else if (now.D - time.D === 1) {
+        D = "昨天";
+      } else if (now.D - time.D === 0) {
+        D = "今天";
+      }
+      return `<p>${D}</p><p>${time.t}</p>`;
+    },
+    typeText() {
+      return typeMap[this.detail.type] || "";
+    }
+  },
+  methods: {
+    showDetail() {
+      this.$emit("click");
+    }
+  }
+};
+</script>
+
+<style lang="less" scoped>
+.c-wallet-withdraw-detail-item {
+  padding: 30px;
+  font-size: 30px;
+  line-height: 36px;
+  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 {
+    margin: 0 30px;
+    width: 100%;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  .amount {
+    width: 6em;
+    text-align: right;
+
+    > span {
+      color: #ff9400;
+
+      &.gray {
+        color: #b3b3b3;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/routers/wallet.js b/src/routers/wallet.js
index d4b71ef0..dcf29206 100644
--- a/src/routers/wallet.js
+++ b/src/routers/wallet.js
@@ -9,6 +9,8 @@ const WalletWithdraw = () =>
   import(/* webpackChunkName: 'wallet' */ "@/page/wallet/WalletWithdraw.vue");
 const WalletWithdrawDetail = () =>
   import(/* webpackChunkName: 'wallet' */ "@/page/wallet/WalletWithdrawDetail.vue");
+const WalletWithdrawInfo = () =>
+  import(/* webpackChunkName: 'wallet' */ "@/page/wallet/WalletWithdrawInfo.vue");
 const WalletDetail = () =>
   import(/* webpackChunkName: 'wallet' */ "@/page/wallet/WalletDetail.vue");
 const WalletInfo = () =>
@@ -44,6 +46,13 @@ export default [
       title: "提现明细"
     }
   },
+  {
+    path: "/wallet/withdraw/detail/:id",
+    component: WalletWithdrawInfo,
+    meta: {
+      title: "提现明细"
+    }
+  },
   {
     path: "/wallet/detail",
     component: WalletDetail,
diff --git a/src/stores/module/wallet.js b/src/stores/module/wallet.js
index c57a7bef..4aa6e4e0 100644
--- a/src/stores/module/wallet.js
+++ b/src/stores/module/wallet.js
@@ -2,6 +2,7 @@ import * as api from "@/api/wallet";
 
 const state = {
   list: [], // 充值纪录
+  cashes: [], // 提现记录
   items: [], // 充值建议金额
   ratio: 100, // 充值比率
   type: [], // 充值类型
@@ -12,6 +13,9 @@ const getters = {
   getWalletById: state => id => {
     return state.list.filter(wallet => wallet.id === id).pop() || {};
   },
+  getCashesById: state => id => {
+    return state.cashes.filter(wallet => wallet.id === id).pop() || {};
+  },
   rechargeItems: state => {
     return state.items.map(item => item / 100);
   }
@@ -75,8 +79,9 @@ const actions = {
    * @author mutoe <mutoe@foxmail.com>
    * @returns {Promise<Object[]>}
    */
-  async fetchWithdrawList(state, payload) {
+  async fetchWithdrawList({ commit }, payload) {
     const { data } = await api.getWithdrawList(payload);
+    commit(TYPES.UPDATE_WALLET, { cashes: data });
     return data;
   }
 };