✨ 货币规则

components/layouts/pc/footer.vue

@@ -9,6 +9,7 @@
       <el-col :span="12" style="text-align: left;">
         <el-link class="footer-link" rel="nofollow" :underline="false" :href="markdownGuide" style="vertical-align: baseline;"><span>Markdown 教程</span></el-link>
         <el-link class="footer-link" rel="nofollow" :underline="false" :href="rules" style="vertical-align: baseline;"><span>社区规章</span></el-link>
+        <el-link class="footer-link" rel="nofollow" :underline="false" :href="currencyRule" style="vertical-align: baseline;"><span>货币规则</span></el-link>
         <el-link class="footer-link" rel="nofollow" :underline="false" :href="email" style="vertical-align: baseline;"><span>意见反馈</span></el-link>
         <el-link class="footer-link" rel="nofollow" :underline="false" :href="aboutMe" style="vertical-align: baseline;"><span>关于我们</span></el-link>
         <el-link class="footer-link" rel="nofollow" :underline="false" :href="github" style="vertical-align: baseline;"><span>github</span></el-link>
@@ -45,7 +46,8 @@
         rules: '/article/20',
         email: 'mailto:support@rymcu.com',
         aboutMe: '/article/115',
-        github: 'https://github.com/rymcu'
+        github: 'https://github.com/rymcu',
+        currencyRule: '/rules/currency'
       }
     }
   }

pages/rules/currency.vue

@@ -0,0 +1,62 @@
+<template>
+  <el-row class="wrapper">
+    <el-col>
+      <h1>货币规则</h1>
+    </el-col>
+    <el-col>
+      <el-table
+        :data="currencyRules"
+        style="width: 100%">
+        <el-table-column
+          label="名称"
+          width="180"
+          prop="ruleName">
+        </el-table-column>
+        <el-table-column
+          label="描述"
+          width="180"
+          prop="ruleDescription">
+        </el-table-column>
+        <el-table-column
+          label="奖励/消耗"
+          width="180"
+          prop="money">
+        </el-table-column>
+        <el-table-column
+          label="上限"
+          width="180"
+          prop="maximumMoney">
+        </el-table-column>
+        <el-table-column
+          label="重复"
+          width="180"
+          prop="repeatDays">
+        </el-table-column>
+      </el-table>
+    </el-col>
+  </el-row>
+</template>
+
+<script>
+import { mapState } from 'vuex';
+
+export default {
+  name: "currency",
+  fetch({store, params, error}) {
+    return Promise.all([
+      store
+        .dispatch('rule/fetchCurrencyRules', params)
+        .catch(err => error({statusCode: 404}))
+    ])
+  },
+  computed: {
+    ...mapState({
+      currencyRules: state => state.rule.currencyRules.data
+    })
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

store/rule.js

@@ -0,0 +1,38 @@
+export const RULE_API_PATH = '/api/rule'
+
+export const state = () => {
+  return {
+    currencyRules: {
+      fetching: false,
+      data: []
+    }
+  }
+}
+
+export const mutations = {
+  updateCurrencyRulesFetching(state, action) {
+    state.currencyRules.fetching = action
+  },
+  updateCurrencyRulesData(state, action) {
+    state.currencyRules.data = action
+  }
+}
+
+export const actions = {
+  fetchCurrencyRules({commit}, params = {}) {
+    // 清空已有数据
+    commit('updateCurrencyRulesData', [])
+    commit('updateCurrencyRulesFetching', true)
+
+    return this.$axios
+      .$get(`${RULE_API_PATH}/currency/list`)
+      .then(response => {
+        commit('updateCurrencyRulesFetching', false);
+        commit('updateCurrencyRulesData', response);
+      })
+      .catch(error => {
+        console.log(error);
+        commit('updateCurrencyRulesFetching', false);
+      });
+  }
+}