feat(wallet): 钱包明细页面

src/api/wallet.js

@@ -42,7 +42,7 @@ export function postTransform(data) {
 }
 
 /**
- * 发起提现请求
+ * 发起充值请求
  * @author mutoe <[email protected]>
  * @export
  * @param {Object} data
@@ -52,9 +52,21 @@ export function postTransform(data) {
  * @returns
  */
 export function postWalletRecharge(data) {
-  return api.post(
-    "/walletRecharge/orders",
-    { ...data, from: 2 },
-    { validateStatus: s => s === 201 }
-  );
+  const url = "/walletRecharge/orders";
+  data = Object.assing(data, { from: 2 });
+  return api.post(url, data, { validateStatus: s => s === 201 });
+}
+
+/**
+ * 发起提现请求
+ * @author mutoe <[email protected]>
+ * @export
+ * @param {Object} data
+ * @param {number} data.amount
+ * @param {string} data.type
+ * @param {string} data.account
+ * @returns
+ */
+export function postWalletWithdraw(data) {
+  return api.post("/plus-pay/cash", data, { validateStatus: s => s === 201 });
 }

src/page/wallet/WalletWithdraw.vue

@@ -3,12 +3,12 @@
 
     <common-header>
       提现
-      <!-- <router-link
+      <router-link
         slot="right"
         style="width: 4em;"
         to="/wallet/withdraw/detail">
         提现明细
-      </router-link> -->
+      </router-link>
     </common-header>
 
     <main class="m-box-model m-aln-center m-justify-center">
@@ -67,19 +67,29 @@
 
 <script>
 import bus from "@/bus";
+import { mapState } from "vuex";
 
 export default {
   name: "WalletWithdraw",
   data() {
     return {
       form: {
         amount: "",
-        account: ""
+        account: "",
+        type: ""
       },
-      disabled: true,
       loading: false
     };
   },
+  computed: {
+    ...mapState({
+      wallet: "wallet"
+    }),
+    disabled() {
+      const { amount, account, type } = this.form;
+      return !amount || !account || !type;
+    }
+  },
   methods: {
     handleOk() {},
     selectWithdrawType() {

src/page/wallet/WalletWithdrawDetail.vue

@@ -0,0 +1,80 @@
+<template lang="html">
+  <div class="wallet-detail p-wallet-detail">
+
+    <common-header class="header"> 提现明细 </common-header>
+
+    <load-more
+      ref="loadmore"
+      :on-refresh="onRefresh"
+      :on-load-more="onLoadMore"
+      class="m-wallet-list">
+      <wallet-detail-item
+        v-for="item in list"
+        v-if="item.id"
+        :key="item.id"
+        :detail="item"
+        @click="showDetail(item.id)" />
+    </load-more>
+  </div>
+</template>
+
+<script>
+import _ from "lodash";
+import walletDetailItem from "./WalletDetailItem.vue";
+
+export default {
+  name: "WalletWithdrawDetail",
+  components: { walletDetailItem },
+  data() {
+    return {
+      currAction: "out",
+      list: []
+    };
+  },
+  computed: {
+    after() {
+      const len = this.list.length;
+      return len ? this.list[len - 1].id : 0;
+    }
+  },
+  watch: {
+    currAction() {
+      this.list = [];
+      this.$refs.loadmore.beforeRefresh();
+    }
+  },
+  methods: {
+    showDetail(id) {
+      this.$router.push({ path: "/wallet/detail", params: { id } });
+    },
+    async onRefresh() {
+      const data = await this.$store.dispatch("wallet/getWalletOrders", {
+        action: this.currAction
+      });
+
+      if (data.length > 0) this.list = _.unionBy([...data, ...this.list], "id");
+
+      this.$refs.loadmore.topEnd(!(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);
+    }
+  }
+};
+</script>
+
+<style lang="less" scoped>
+.p-wallet-detail {
+  .header {
+    overflow: initial;
+  }
+}
+</style>

src/routers/wallet.js

@@ -7,6 +7,8 @@ const WalletRecharge = () =>
   import(/* webpackChunkName: 'wallet' */ "@/page/wallet/WalletRecharge.vue");
 const WalletWithdraw = () =>
   import(/* webpackChunkName: 'wallet' */ "@/page/wallet/WalletWithdraw.vue");
+const WalletWithdrawDetail = () =>
+  import(/* webpackChunkName: 'wallet' */ "@/page/wallet/WalletWithdrawDetail.vue");
 const WalletDetail = () =>
   import(/* webpackChunkName: 'wallet' */ "@/page/wallet/WalletDetail.vue");
 const WalletInfo = () =>
@@ -35,6 +37,13 @@ export default [
       title: "提现"
     }
   },
+  {
+    path: "/wallet/withdraw/detail",
+    component: WalletWithdrawDetail,
+    meta: {
+      title: "提现明细"
+    }
+  },
   {
     path: "/wallet/detail",
     component: WalletDetail,

src/stores/module/wallet.js

@@ -28,16 +28,25 @@ const mutations = {
 };
 
 const actions = {
+  /**
+   * 获取钱包流水
+   * @author mutoe <[email protected]>
+   * @returns {Promise<Object[]>}
+   */
   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 });
     return data || [];
   },
+
+  /**
+   * 获取钱包配置信息
+   * @author mutoe <[email protected]>
+   */
   async getWalletInfo({ commit }) {
-    let {
-      data: { labels: items, ratio, rule, recharge_type: type }
-    } = await api.getWalletInfo();
+    let { data } = await api.getWalletInfo();
+    const { labels: items, ratio, rule, recharge_type: type } = data;
     commit(TYPES.UPDATE_WALLET, { items, type, ratio, rule });
   },
 
@@ -49,6 +58,16 @@ const actions = {
   async requestRecharge(state, payload) {
     const { data = "" } = await api.postWalletRecharge(payload);
     return data;
+  },
+
+  /**
+   * 发起提现请求
+   * @author mutoe <[email protected]>
+   * @returns
+   */
+  async requestWithdraw(state, payload) {
+    const { data } = await api.postWalletWithdraw(payload);
+    return data;
   }
 };