feat(wallet): 充值页面

src/api/wallet.js

@@ -1,5 +1,15 @@
 import api from "./api.js";
 
+/**
+ * 获取钱包配置信息
+ * @author mutoe <[email protected]>
+ * @export
+ * @returns
+ */
+export function getWalletInfo() {
+  return api.get("/wallet", { validateStatus: s => s === 200 });
+}
+
 /**
  * 获取钱包流水
  * @author mutoe <[email protected]>

src/page/wallet/WalletRecharge.vue

@@ -9,12 +9,12 @@
           <p class="m-pinned-amount-label">选择充值金额</p>
           <div class="m-box m-aln-center ">
             <button
-              v-for="item in items"
+              v-for="item in rechargeItems"
               :key="item"
-              :style="{ width: `${1 / items.length * 100}%` }"
+              :style="{ width: `${1 / rechargeItems.length * 100}%` }"
               :class="{ active: ~~amount === ~~item && !customAmount }"
               class="m-pinned-amount-btn"
-              @click="chooseDefaultAmount(item)">{{ ~~item }}</button>
+              @click="chooseDefaultAmount(item)">{{ item.toFixed(2) }}</button>
           </div>
         </div>
         <div class="m-box m-aln-center m-justify-bet m-bb1 m-bt1 m-pinned-row plr20 m-pinned-amount-customize">
@@ -66,26 +66,53 @@
 
 <script>
 import bus from "@/bus";
+import { mapGetters, mapState } from "vuex";
+
+const supportTypes = [
+  { key: "alipay_wap", title: "支付宝支付" },
+  { key: "wx_wap", title: "微信支付" }
+];
 
 export default {
   name: "WalletRecharge",
   data() {
     return {
-      items: [10, 50, 100],
       customAmount: null,
       amount: 0,
       disabled: true,
       loading: false
     };
   },
+  computed: {
+    ...mapState({ rechargeType: state => state.wallet.type }),
+    ...mapGetters({ rechargeItems: "wallet/rechargeItems" })
+  },
+  mounted() {
+    this.$store.dispatch("wallet/getWalletInfo");
+  },
   methods: {
     chooseDefaultAmount(amount) {
       this.customAmount && (this.customAmount = null);
       this.amount = amount;
     },
     selectRechargeType() {
       const actions = [];
-      bus.$emit("actionSheet", actions, "取消", "当前未支持任何充值方式");
+      supportTypes.forEach(item => {
+        if (this.rechargeType.includes(item.key)) {
+          actions.push({
+            text: item.title,
+            method: () => {
+              console.log(item.title);
+            }
+          });
+        }
+      });
+      bus.$emit(
+        "actionSheet",
+        actions,
+        "取消",
+        actions.length ? undefined : "当前未支持任何充值方式"
+      );
     },
     handleOk() {}
   }

src/stores/module/index.js

@@ -2,9 +2,12 @@ import rank from "./rank/";
 import MESSAGE from "./message";
 import post from "./post";
 import easemob from "./easemob";
+import wallet from "./wallet";
+
 export default {
   rank,
   post,
   MESSAGE,
-  easemob
+  easemob,
+  wallet
 };

src/stores/module/wallet.js

@@ -1,12 +1,19 @@
 import * as api from "@/api/wallet";
 
 const state = {
-  list: []
+  list: [], // 充值纪录
+  items: [], // 充值建议金额
+  ratio: 100, // 充值比率
+  type: [], // 充值类型
+  rule: "" // 充值提现规则
 };
 
 const getters = {
   getWalletById: state => id => {
-    return state.list.filter(wallet => wallet.id === id);
+    return state.list.filter(wallet => wallet.id === id).pop() || {};
+  },
+  rechargeItems: state => {
+    return state.items.map(item => item / state.ratio);
   }
 };
 
@@ -15,13 +22,23 @@ const TYPES = {
 };
 
 const mutations = {
-  [TYPES.UPDATE_WALLET]() {}
+  [TYPES.UPDATE_WALLET](state, payload) {
+    Object.assign(state, payload);
+  }
 };
 
 const actions = {
-  async getWalletOrders(store, params) {
-    const response = await api.getWalletOrders(params);
-    return response.data || [];
+  async getWalletOrders({ commit, state }, params) {
+    let { data } = await api.getWalletOrders(params);
+    if (params.after) data = [...state.list, ...data];
+    commit(TYPES.UPDATE_WALLET, { list: data });
+    return data || [];
+  },
+  async getWalletInfo({ commit }) {
+    let {
+      data: { labels: items, ratio, rule, recharge_type: type }
+    } = await api.getWalletInfo();
+    commit(TYPES.UPDATE_WALLET, { items, type, ratio, rule });
   }
 };