✨ 积分系统基础功能实现

components/layouts/pc/header.vue

@@ -66,6 +66,7 @@
                   <el-dropdown-item v-if="hasPermissions" command="admin-dashboard">系统管理</el-dropdown-item>
                   <el-dropdown-item command="user">个人中心</el-dropdown-item>
                   <el-dropdown-item command="drafts">我的草稿</el-dropdown-item>
+                  <el-dropdown-item command="wallet">我的钱包</el-dropdown-item>
                   <el-dropdown-item command="user-info">设置</el-dropdown-item>
                   <el-dropdown-item command="logout" divided>退出登录</el-dropdown-item>
                 </el-dropdown-menu>

config/api.config.js

@@ -12,8 +12,8 @@ const apisMap = {
   production: {
     FE: 'https://rymcu.com',
     BASE: 'https://rymcu.com',
-    CDN: 'https://cdn.rymcu.com',
+    CDN: 'https://static.rymcu.com',
-    PROXY: 'https://cdn.rymcu.com/proxy',
+    PROXY: 'https://static.rymcu.com/proxy',
     SOCKET: 'https://rymcu.com',
     GRAVATAR: 'https://static.rymcu.com/avatar'
   }

pages/admin.vue

@@ -23,9 +23,17 @@
             <span slot="title">专题管理</span>
           </el-menu-item>
           <el-menu-item index="admin-tags">
-            <i class="el-icon-postcard"></i>
+            <i class="el-icon-price-tag"></i>
             <span slot="title">标签管理</span>
           </el-menu-item>
+          <el-menu-item index="admin-banks">
+            <i class="el-icon-office-building"></i>
+            <span slot="title">银行管理</span>
+          </el-menu-item>
+          <el-menu-item index="admin-bank-accounts">
+            <i class="el-icon-bank-card"></i>
+            <span slot="title">银行卡管理</span>
+          </el-menu-item>
         </el-menu>
       </el-col>
       <el-col :span="20">

pages/admin/bank-accounts.vue

@@ -0,0 +1,115 @@
+<template>
+  <el-row>
+    <el-col style="margin-bottom: 1rem;">
+      <el-breadcrumb separator-class="el-icon-arrow-right">
+        <el-breadcrumb-item :to="{ path: '/admin/dashboard' }">首页</el-breadcrumb-item>
+        <el-breadcrumb-item>银行账户管理</el-breadcrumb-item>
+      </el-breadcrumb>
+    </el-col>
+    <el-col>
+      <el-table
+        :data="bankAccounts"
+        style="width: 100%">
+        <el-table-column
+          label="#"
+          width="40"
+          prop="idBankAccount">
+        </el-table-column>
+        <el-table-column
+          label="开户银行"
+          width="180"
+          prop="bankName">
+        </el-table-column>
+        <el-table-column
+          label="账户所有者"
+          width="180"
+          prop="accountOwnerName">
+        </el-table-column>
+        <el-table-column
+          label="银行账户"
+          width="180"
+          prop="bankAccount">
+        </el-table-column>
+        <el-table-column
+          label="账户余额 (巴旦木)"
+          width="180"
+          prop="accountBalance">
+        </el-table-column>
+        <el-table-column
+          label="创建时间"
+          width="180"
+          prop="createdTime">
+        </el-table-column>
+      </el-table>
+    </el-col>
+    <el-col>
+      <el-pagination
+        :hide-on-single-page="true"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :current-page="pagination.currentPage"
+        :page-sizes="[10, 20, 50, 100]"
+        :page-size="pagination.pageSize"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="pagination.total">
+      </el-pagination>
+    </el-col>
+  </el-row>
+</template>
+
+<script>
+import {mapState} from 'vuex';
+
+export default {
+  name: "bank-accounts",
+  fetch({store, params, error}) {
+    return Promise.all([
+      store
+        .dispatch('bank-account/fetchList', params)
+        .catch(err => error({statusCode: 404}))
+    ])
+  },
+  computed: {
+    ...mapState({
+      bankAccounts: state => state["bank-account"].list.data.bankAccounts,
+      pagination: state => state["bank-account"].list.data.pagination
+    })
+  },
+  data() {
+    return {
+      order: 'desc',
+      idRole: 0,
+      idUser: 0,
+      dialogVisible: false
+    }
+  },
+  methods: {
+    onRouter(name, data) {
+      this.$router.push({
+        path: `/${name}/${data}`
+      })
+    },
+    handleSizeChange(pageSize) {
+      let _ts = this;
+      _ts.$store.dispatch('bank-account/fetchList', {
+        page: _ts.pagination.currentPage,
+        rows: pageSize
+      })
+    },
+    handleCurrentChange(page) {
+      let _ts = this;
+      _ts.$store.dispatch('bank-account/fetchList', {
+        page: page,
+        rows: _ts.pagination.pageSize
+      })
+    }
+  },
+  mounted() {
+    this.$store.commit("setActiveMenu", "admin-bank-accounts");
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

pages/admin/banks.vue

@@ -0,0 +1,168 @@
+<template>
+  <el-row>
+    <el-col style="margin-bottom: 1rem;">
+      <el-breadcrumb separator-class="el-icon-arrow-right">
+        <el-breadcrumb-item :to="{ path: '/admin/dashboard' }">首页</el-breadcrumb-item>
+        <el-breadcrumb-item>银行管理</el-breadcrumb-item>
+      </el-breadcrumb>
+    </el-col>
+    <el-col>
+      <el-table
+        :data="banks"
+        style="width: 100%">
+        <el-table-column
+          label="#"
+          width="40"
+          prop="idBank">
+        </el-table-column>
+        <el-table-column
+          label="银行名称"
+          width="180"
+          prop="bankName">
+        </el-table-column>
+        <el-table-column
+          label="银行账户"
+          width="180"
+          prop="bankAccount">
+        </el-table-column>
+        <el-table-column
+          label="账户余额 (巴旦木)"
+          width="180"
+          prop="accountBalance">
+        </el-table-column>
+        <el-table-column
+          label="创建时间"
+          width="180"
+          prop="createdTime">
+        </el-table-column>
+        <el-table-column
+          label="描述"
+          width="180"
+          prop="bankDescription">
+        </el-table-column>
+        <el-table-column label="操作">
+          <template slot-scope="scope">
+            <el-button size="mini" @click="showTransfer(scope.$index, scope.row)" plain>划转</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-col>
+    <el-col>
+      <el-pagination
+        :hide-on-single-page="true"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :current-page="pagination.currentPage"
+        :page-sizes="[10, 20, 50, 100]"
+        :page-size="pagination.pageSize"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="pagination.total">
+      </el-pagination>
+    </el-col>
+    <el-col>
+      <el-dialog :visible.sync="dialogVisible">
+        <el-form label-width="180px">
+          <el-form-item label="转账账户">
+            <el-input v-model="toBankAccount" style="width: 300px;"></el-input>
+          </el-form-item>
+          <el-form-item label="转账金额">
+            <el-input-number v-model="money" :min="1" :step="1" :step-strictly="true" style="width: 300px;"></el-input-number>
+          </el-form-item>
+          <el-form-item label="款项">
+            <el-input v-model="funds" style="width: 300px;"></el-input>
+          </el-form-item>
+        </el-form>
+        <div slot="footer" class="dialog-footer">
+          <el-button @click="dialogVisible = false">取 消</el-button>
+          <el-button v-if="money && toBankAccount" type="primary" @click="transfer">确 定</el-button>
+          <el-button v-else type="primary" :disabled="true">确 定</el-button>
+        </div>
+      </el-dialog>
+    </el-col>
+  </el-row>
+</template>
+
+<script>
+import {mapState} from 'vuex';
+
+export default {
+  name: "banks",
+  fetch({store, params, error}) {
+    return Promise.all([
+      store
+        .dispatch('bank/fetchList', params)
+        .catch(err => error({statusCode: 404}))
+    ])
+  },
+  computed: {
+    ...mapState({
+      banks: state => state.bank.list.data.banks,
+      pagination: state => state.bank.list.data.pagination
+    })
+  },
+  data() {
+    return {
+      order: 'desc',
+      formBankAccount: '',
+      toBankAccount: '',
+      money: 1,
+      dialogVisible: false,
+      funds: '财政划拨',
+      transactionType: '0'
+    }
+  },
+  methods: {
+    onRouter(name, data) {
+      this.$router.push({
+        path: `/${name}/${data}`
+      })
+    },
+    handleSizeChange(pageSize) {
+      let _ts = this;
+      _ts.$store.dispatch('bank/fetchList', {
+        page: _ts.pagination.currentPage,
+        rows: pageSize
+      })
+    },
+    handleCurrentChange(page) {
+      let _ts = this;
+      _ts.$store.dispatch('bank/fetchList', {
+        page: page,
+        rows: _ts.pagination.pageSize
+      })
+    },
+    showTransfer(index, bank) {
+      let _ts = this;
+      _ts.$set(_ts, 'formBankAccount', bank.bankAccount);
+      _ts.$set(_ts, 'dialogVisible', true);
+    },
+    transfer() {
+      let _ts = this;
+      _ts.$axios.$post("/api/transaction/transfer", {
+        formBankAccount: _ts.formBankAccount,
+        toBankAccount: _ts.toBankAccount,
+        money: _ts.money,
+        funds: _ts.funds
+      }).then(function (res) {
+        if (res) {
+          if (res.idTransactionRecord) {
+            _ts.$message({
+              type: 'success',
+              message: '划转成功!'
+            });
+            _ts.$set(_ts, 'dialogVisible', false);
+            _ts.handleCurrentChange(1);
+          }
+        }
+      })
+    }
+  },
+  mounted() {
+    this.$store.commit("setActiveMenu", "admin-banks");
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

pages/admin/users.vue

@@ -29,8 +29,8 @@
           width="180"
           prop="nickname">
           <template slot-scope="scope">
-            <el-link rel="nofollow" type="primary" @click="onRouter('user', scope.row.nickname)" :underline="false">{{
+            <el-link rel="nofollow" type="primary" @click="onRouter('user', scope.row.nickname)" :underline="false">
-              scope.row.nickname }}
+              {{ scope.row.nickname }}
             </el-link>
           </template>
         </el-table-column>
@@ -55,7 +55,7 @@
           prop="status">
           <template slot-scope="scope">
             <el-tag type="primary" disable-transitions>
-              {{scope.row.status === '0' ? '正常' : '禁用'}}
+              {{ scope.row.status === '0' ? '正常' : '禁用' }}
             </el-tag>
           </template>
         </el-table-column>
@@ -65,7 +65,8 @@
             <el-button v-if="scope.row.status == 1" size="mini" type="primary"
                        @click="toggleStatus(scope.$index, scope.row)" plain>启用
             </el-button>
-            <el-button v-else size="mini" type="danger" @click="toggleStatus(scope.$index, scope.row)" plain>禁用</el-button>
+            <el-button v-else size="mini" type="danger" @click="toggleStatus(scope.$index, scope.row)" plain>禁用
+            </el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -101,9 +102,9 @@
 </template>
 
 <script>
-  import {mapState} from 'vuex';
+import {mapState} from 'vuex';
 
-  export default {
+export default {
   name: "users",
   fetch({store, params, error}) {
     return Promise.all([
@@ -215,9 +216,9 @@
     }
   },
   mounted() {
-      this.$store.commit("setActiveMenu", "admin-user");
+    this.$store.commit("setActiveMenu", "admin-users");
-    }
   }
+}
 </script>
 
 <style scoped>

pages/drafts.vue

@@ -28,6 +28,9 @@
         articles: state => state.draft.list.data,
         user: state => state.oauth
       })
+    },
+    mounted() {
+      this.$store.commit('setActiveMenu', 'drafts');
     }
   }
 </script>

pages/notification.vue

@@ -36,6 +36,9 @@
           page: page
         })
       }
+    },
+    mounted() {
+      this.$store.commit('setActiveMenu', 'notification');
     }
   }
 </script>

pages/user/_nickname.vue

@@ -157,7 +157,7 @@ export default {
   },
   mounted() {
     let _ts = this;
-    this.$store.commit('setActiveMenu', 'user')
+    this.$store.commit('setActiveMenu', 'user');
     if (_ts.oauth) {
       _ts.$axios.$get('/api/follow/is-follow', {
         params: {

pages/wallet.vue

@@ -0,0 +1,79 @@
+<template>
+  <el-row class="wrapper">
+    <el-col>
+      <h1>账户信息</h1>
+    </el-col>
+    <el-col class="bank-account-item">
+      <span style="font-size: 24px;"> 余额:</span> <span style="color: red;">{{ bankAccount.accountBalance }}</span> <span style="font-size: 24px;">巴旦木</span>
+    </el-col>
+    <el-col>
+      <h1>交易记录</h1>
+    </el-col>
+    <el-col>
+      <el-table
+        :data="transactionRecords"
+        style="width: 100%">
+        <el-table-column
+          label="#"
+          width="40"
+          prop="idTransactionRecord">
+        </el-table-column>
+        <el-table-column
+          label="款项"
+          width="180"
+          prop="funds">
+        </el-table-column>
+        <el-table-column
+          label="交易时间"
+          width="180"
+          prop="transactionTime">
+        </el-table-column>
+        <el-table-column
+          label="金额 (巴旦木)"
+          width="180">
+          <template slot-scope="scope">
+            <span v-if="scope.row.formBankAccount === bankAccount.bankAccount" style="color: red;font-weight: bold;">
+              - {{ scope.row.money }}
+            </span>
+            <span v-else style="color: springgreen;font-weight: bold;"> + {{ scope.row.money }}</span>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-col>
+  </el-row>
+</template>
+
+<script>
+import {mapState} from 'vuex';
+
+export default {
+  name: "wallet",
+  fetch({store, error}) {
+    return Promise.all([
+      store
+        .dispatch('wallet/fetchDetail', {idUser: store.state.oauth.idUser})
+        .catch(err => error({statusCode: 404}))
+    ])
+  },
+  computed: {
+    ...mapState({
+      bankAccount: state => state.wallet.detail.data,
+      transactionRecords: state => state.wallet.detail.data.transactionRecords,
+    })
+  },
+  data() {
+    return {
+    }
+  },
+  mounted() {
+    this.$store.commit('setActiveMenu', 'wallet');
+  }
+}
+</script>
+
+<style scoped>
+.bank-account-item {
+  font-size: 32px;
+  padding-left: 15vw;
+}
+</style>

store/bank-account.js

@@ -0,0 +1,51 @@
+export const BANK_ACCOUNT_API_PATH = '/api/admin/bank-account'
+
+const getDefaultListData = () => {
+  return {
+    bankAccounts: [],
+    pagination: {}
+  }
+}
+
+export const state = () => {
+  return {
+    list: {
+      fetching: false,
+      data: getDefaultListData()
+    }
+  }
+}
+
+export const mutations = {
+  updateListFetching(state, action) {
+    state.list.fetching = action
+  },
+  updateListData(state, action) {
+    state.list.data = action
+  }
+}
+
+export const actions = {
+  fetchList({commit}, params = {}) {
+    // 清空已有数据
+    commit('updateListData', getDefaultListData())
+    commit('updateListFetching', true)
+    let data = {
+      page: params.page || 1
+    }
+
+    return this.$axios
+      .$get(`${BANK_ACCOUNT_API_PATH}/list`, {
+        params: data
+      })
+      .then(response => {
+        commit('updateListFetching', false);
+        commit('updateListData', response);
+      })
+      .catch(error => {
+        console.log(error);
+        commit('updateListFetching', false);
+      });
+  }
+}
+

store/bank.js

@@ -0,0 +1,51 @@
+export const BANK_API_PATH = '/api/admin/bank'
+
+const getDefaultListData = () => {
+  return {
+    banks: [],
+    pagination: {}
+  }
+}
+
+export const state = () => {
+  return {
+    list: {
+      fetching: false,
+      data: getDefaultListData()
+    }
+  }
+}
+
+export const mutations = {
+  updateListFetching(state, action) {
+    state.list.fetching = action
+  },
+  updateListData(state, action) {
+    state.list.data = action
+  }
+}
+
+export const actions = {
+  fetchList({commit}, params = {}) {
+    // 清空已有数据
+    commit('updateListData', getDefaultListData())
+    commit('updateListFetching', true)
+    let data = {
+      page: params.page || 1
+    }
+
+    return this.$axios
+      .$get(`${BANK_API_PATH}/list`, {
+        params: data
+      })
+      .then(response => {
+        commit('updateListFetching', false);
+        commit('updateListData', response);
+      })
+      .catch(error => {
+        console.log(error);
+        commit('updateListFetching', false);
+      });
+  }
+}
+

store/wallet.js

@@ -0,0 +1,88 @@
+export const BANK_ACCOUNT_API_PATH = '/api/admin/bank-account'
+
+const getDefaultListData = () => {
+  return {
+    records: [],
+    pagination: {}
+  }
+}
+
+export const state = () => {
+  return {
+    list: {
+      fetching: false,
+      data: getDefaultListData()
+    },
+    detail: {
+      fetching: false,
+      data: {}
+    }
+  }
+}
+
+export const mutations = {
+  // 消费记录列表
+  updateListFetching(state, action) {
+    state.list.fetching = action
+  },
+  updateListData(state, action) {
+    state.list.data = action
+  },
+  // 账户详情
+  updateDetailFetching(state, action) {
+    state.detail.fetching = action
+  },
+  updateDetailData(state, action) {
+    state.detail.data = action
+  }
+}
+
+export const actions = {
+  // 获取消息列表
+  fetchList({commit}, params = {}) {
+    // 清空已有数据
+    commit('updateListData', getDefaultListData())
+    commit('updateListFetching', true)
+    let data = {
+      page: params.page || 1
+    }
+
+    return this.$axios
+      .$get(`${BANK_ACCOUNT_API_PATH}/drafts`, {
+        params: data
+      })
+      .then(response => {
+        commit('updateListFetching', false);
+        commit('updateListData', response);
+      })
+      .catch(error => {
+        console.log(error);
+        commit('updateListFetching', false);
+      });
+  },
+  // 获取账户详情
+  fetchDetail({ commit }, params = {}) {
+    commit('updateDetailFetching', true)
+    console.log(params)
+    return this.$axios
+      .$get(`${BANK_ACCOUNT_API_PATH}/${params.idUser}`, {
+        params: {
+          type: 3
+        }
+      })
+      .then(response => {
+        return new Promise(resolve => {
+          commit('updateDetailData', response)
+          commit('updateDetailFetching', false)
+          resolve(response)
+          // delay(() => {
+          //   resolve(response)
+          // })
+        })
+      })
+      .catch(error => {
+        commit('updateDetailFetching', false)
+        return Promise.reject(error)
+      })
+  }
+}