feat(currency): #457 用户充值协议

src/page/currency/CurrencyRecharge.vue

@@ -25,7 +25,7 @@
               :key="item"
               :class="{ active: ~~amount === ~~item && !customAmount }"
               class="m-pinned-amount-btn"
-              @click="chooseDefaultAmount(item)">{{ item.toFixed(2) }}</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">
@@ -54,17 +54,6 @@
         </svg>
       </div>
 
-      <footer>
-        <router-link
-          to="/currency/rule"
-          tag="p">
-          <v-icon
-            style="vertical-align: bottom;"
-            type="wallet-alert-circle"/>
-          用户充值协议
-        </router-link>
-      </footer>
-
       <div
         class="plr20 m-lim-width"
         style="margin-top: 0.6rem">
@@ -82,24 +71,57 @@
           <span v-else>确定</span>
         </button>
       </div>
+
+      <footer>
+        <p @click="popupRule">
+          <v-icon
+            style="vertical-align: bottom;"
+            type="wallet-alert-circle"/>
+          用户充值协议
+        </p>
+      </footer>
+
+      <popup-dialog
+        ref="dialog"
+        title="用户充值协议">
+        <p v-html="rule"/>
+      </popup-dialog>
+
     </main>
   </div>
 </template>
 
 <script>
 import bus from "@/bus";
+import { mapState } from "vuex";
+import PopupDialog from "@/components/PopupDialog.vue";
 
 export default {
   name: "CurrencyRecharge",
+  components: { PopupDialog },
   data() {
     return {
-      items: [0.1, 5, 10, 20, 50, 100],
       customAmount: null,
       amount: 0,
       disabled: true,
       loading: false
     };
   },
+  computed: {
+    ...mapState({
+      currency: "currency"
+    }),
+    items() {
+      return this.currency.recharge.items;
+    },
+    rule() {
+      const rule = this.currency.recharge.rule || "";
+      return rule.replace(/\n/g, "<br>");
+    }
+  },
+  mounted() {
+    if (!this.items.length) this.$store.dispatch("currency/getCurrencyInfo");
+  },
   methods: {
     chooseDefaultAmount(amount) {
       this.customAmount && (this.customAmount = null);
@@ -109,7 +131,10 @@ export default {
       const actions = [];
       bus.$emit("actionSheet", actions, "取消", "当前未支持任何充值方式");
     },
-    handleOk() {}
+    handleOk() {},
+    popupRule() {
+      this.$refs.dialog.show();
+    }
   }
 };
 </script>

src/stores/module/currency.js

@@ -2,15 +2,25 @@ import * as api from "@/api/currency";
 
 const state = {
   list: [], // 充值纪录
-  items: [], // 充值建议金额
-  ratio: 100, // 充值比率
-  type: [], // 充值类型
-  rule: "" // 充值提现规则
+  rule: "", // 充值提现规则
+  recharge: {
+    rule: "",
+    ratio: 1,
+    type: [], // 充值类型
+    items: [], // 充值建议金额
+    min: 100,
+    max: 10000000
+  },
+  cash: {
+    rule: "",
+    min: 100,
+    max: 10000000
+  }
 };
 
 const getters = {
   rechargeItems: state => {
-    return state.items.map(item => item / state.ratio);
+    return state.recharge.items.map(item => item / 100);
   }
 };
 
@@ -26,8 +36,23 @@ const mutations = {
 
 const actions = {
   async getCurrencyInfo({ commit }) {
-    let { data } = await api.getCurrencyInfo();
-    commit(TYPES.UPDATE_CURRENCY, data);
+    const { data } = await api.getCurrencyInfo();
+    commit(TYPES.UPDATE_CURRENCY, {
+      rule: data.rule,
+      recharge: {
+        rule: data["recharge-rule"],
+        type: data["recharge-type"],
+        ratio: data["recharge-ratio"],
+        items: data["recharge-options"].split(",").map(v => ~~v),
+        min: data["recharge-min"],
+        max: data["recharge-max"]
+      },
+      cash: {
+        rule: data["cash-rule"],
+        min: data["cash-min"],
+        max: data["cash-max"]
+      }
+    });
   }
 };