充值管理

src/components/apass-table.vue

@@ -296,7 +296,7 @@ export default {
       default: () => 50,
     },
     height: {
-      type: Number,
+      type: [Number,String],
       default: null,
     },
     rowClassName: {

src/pages/authority/user/money.vue

 <template>
   <div class="users_list">
+    <div class="apass_breadcrumb">
       <el-breadcrumb separator="/" slot="breadcrumb">
         <el-breadcrumb-item to="/authority">权限管理</el-breadcrumb-item>
         <el-breadcrumb-item to="/authority/users">用户管理</el-breadcrumb-item>
         <el-breadcrumb-item>充值</el-breadcrumb-item>
       </el-breadcrumb>
     </div>
+    <div class="out_title">
+      <div class="title_text">
+        <span></span><span>充值</span>
+        <el-tooltip
+          class="tool_item"
+          effect="dark"
+          content="充值后，金币将直接充值到普通用户账户余额中，用于在平台内进行消费。"
+          placement="top-start"
+          offset="5"
+        >
+          <img src="../../../assets/imgs/tool_ic_tips.png" alt="" />
+        </el-tooltip>
+      </div>
+      <div class="give_form">
+        <span>充值金币</span
+        ><el-input
+          v-model="money_num"
+          placeholder="请输入充值金币数"
+        ></el-input>
+        <div class="give_money" @click="give_money">充值</div>
+      </div>
+    </div>
+
+    <div class="out_title" style="margin-top:10px;margin-bottom:20px;min-height:calc(100% - 230px);display: flex;flex-direction: column;justify-content: flex-start;">
+      <div class="title_text">
+        <span></span><span>充值记录</span>
+        <el-date-picker
+          v-model="search_date"
+          type="daterange"
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          value-format="yyyy-MM-dd"
+          @change="change_date"
+        >
+        </el-date-picker>
+      </div>
+      <div class="money_table">
+        <apass-table
+          class="apa_table"
+          ref="outtreetable"
+          style="min-height:calc(100% - 50px);flex-grow: 1;"
+          :data="tableData"
+          :header="table_header"
+        ></apass-table>
+        <list-pagination
+          :total="total_list"
+          :page-sizes="[50, 20, 10]"
+          :page-size="currentlimit"
+          :current-page="currentPage"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+        ></list-pagination>
+      </div>
+    </div>
+
+    <apass-dialog
+      ref="dialog"
+      width="570px"
+      title="充值确认"
+      @cancel="cancelAction"
+      @submit="submitAction"
+    >
+        <div class="log_content" slot="content">
+            <p>即将充值 <span>{{money_num}}</span> 金币到以下账号：</p>
+            <div class="give_money_content">
+                <p>用户账号：<span>{{user_info1.user_id}}</span> </p>
+                <p>业务系统：<span>{{user_info1.system_name}}</span></p>
+                <p>所属机构：<span>{{user_info1.department}}</span></p>
+            </div>
+            <p><span>确定进行</span> 本次充值吗？充值后金币不可退回。</p>
+        </div>
+    </apass-dialog>
+  </div>
 </template>
 
 <script>
 import apassDialog from "@/components/apass-dialog";
+import apassTable from "@/components/apass-table";
+import listPagination from "@/components/comments-pagination";
+import helper from "@/services/helper.js";
 export default {
   props: [],
   components: {
-        apassDialog
+    apassDialog,
+    apassTable,
+    listPagination,
   },
   data() {
     return {
-
+      money_num: "",
+      search_date: "",
+      tableData: [],
+      table_header: [],
+      total_list: 0,
+      currentPage: 1,
+      currentlimit: 10,
+      user_info1:{},
     };
   },
-    watch: {
-
-    },
-    computed: {
-
-    },
+  watch: {},
+  computed: {},
   created() {
-
+      this.refreshData()
+      this.user_info()
   },
   mounted() {
-
+    this.table_header = [
+      {
+        prop: "serial_number",
+        label: "充值流水ID",
+        align: "center",
+      },
+      {
+        prop: "amount",
+        label: "充值金额（金币/个）",
+        align: "center",
+      },
+      {
+        prop: "user_name",
+        label: "操作人",
+        align: "center",
+      },
+      {
+        prop: "created",
+        label: "充值时间",
+        align: "center",
+        type: "html",
+        getHtml: (str) => {
+          return `<span>${helper.dateStringTransform(str.created)}</span>`;
+        },
+      },
+    ];
   },
   methods: {
+    give_money(){
+        if(this.money_num){
+            var reg = /^\d{1,}$/
+            if(reg.test(this.money_num)){
+                this.$refs.dialog.show();
+            }else{
+                this.$message.error('请填入正整数')
+            }
             
+        }else{
+            this.$message.error('请填入充值金额')
+        }
+    },
+    cancelAction() {
+      this.$refs.dialog.hide();
+    },
+    submitAction() {
+        this.post_money()
+    },
+    handleSizeChange(val) {
+      this.currentPage = 1
+      this.currentlimit = val;
+      this.refreshData();
+    },
+    handleCurrentChange(val) {
+      this.currentPage = val;
+      this.refreshData();
+    },
+    change_date(){
+        this.currentPage = 1
+        this.refreshData();
+    },
+    post_money(){
+        this.$http
+        .post(
+          `/apaas/backmgt/user/recharge`,{
+              "user_id":this.user_info1.user_id,
+              "num":parseInt(this.money_num)
+          }
+        ).then((res)=>{
+          if(res.data.success){
+            this.$refs.dialog.hide();
+            this.$message.success('充值成功')
+          }else{
+            this.$message.error(res.data.errMsg)
+          }
+        })
+    },
+    refreshData(){
+        this.$http
+        .get(
+          `/apaas/backmgt/user/rechargeRecords?start=${this.search_date[0]||''}&end=${this.search_date[1]||''}&limit=${this.currentlimit}&page=${this.currentPage}`
+        ).then((res)=>{
+          if(res.data.success){
+            console.log(res.data.data);
+            this.tableData = res.data.data
+          }
+        })
+    },
+    user_info(){
+        this.$http
+        .get(
+          `/apaas/backmgt/user/detail/${this.$route.params.id}`
+        ).then((res)=>{
+          if(res.data.success){
+            console.log(res.data.data);
+            this.user_info1 = res.data.data
+          }
+        })
+    },
   },
 };
 </script>
 
 <style scoped>
-.users_list{
-    padding: 15px 20px;
+.users_list {
+  height: calc(100% - 20px);
+  padding: 0px 20px;
+}
+.out_title {
+  width: 100%;
+  background-color: #ffffff;
+  box-shadow: 0px 3px 6px 0px #f4f7fc;
+  border-radius: 12px;
+}
+.title_text {
+  width: 100%;
+  height: 63px;
+  border-bottom: 1px solid #edf0ff;
+  line-height: 63px;
+  font-size: 16px;
+  font-weight: 600;
+  padding: 0 20px;
+  box-sizing: border-box;
+  color: #1d1e20;
+}
+.title_text span {
+  margin-right: 10px;
+}
+.title_text span:nth-of-type(1) {
+  display: inline-block;
+  width: 4px;
+  height: 16px;
+  background-color: #515fe7;
+  border-radius: 2px;
+}
+.title_text span:nth-of-type(2) {
+  vertical-align: 2px;
+}
+.give_form {
+  height: 104px;
+  line-height: 104px;
+  padding: 0 40px;
+  box-sizing: border-box;
+}
+.give_form span {
+  font-size: 14px;
+  font-weight: 600;
+  color: #242c43;
+  margin-right: 10px;
+}
+.give_form .give_money {
+  width: 124px;
+  height: 44px;
+  line-height: 44px;
+  text-align: center;
+  display: inline-block;
+  background-color: #e56600;
+  border-radius: 8px;
+  font-size: 16px;
+  color: #fcefd6;
+  margin-left: 10px;
+  cursor: pointer;
+}
+.give_form .el-input {
+  display: inline-block;
+  width: 360px;
+}
+.title_text .el-range-editor {
+  float: right;
+  margin-top: 12px;
+}
+.money_table{
+    flex-grow: 1;
+    display: flex;
+    justify-content: flex-start;
+    flex-direction: column;
+    padding: 0 20px;
+}
+.log_content p{
+    font-size: 14px;
+	color: #242c43;
+    line-height: 40px;
+    text-align: left;
+    padding-left: 15px;
+}
+.log_content p span{
+    color: #e56600;
+}
+.give_money_content{
+    background-color: #f8f9fd;
+	border-radius: 8px;
+    padding: 10px 0;
+}
+.give_money_content p{
+    color: #8890a7;
+    line-height: 30px;
+}
+.give_money_content p span{
+    color: #242c43;
+}
+</style>
+
+<style>
+.give_form .el-input__inner {
+  width: 360px;
+  height: 44px;
+  line-height: 44px;
+}
+.title_text .el-date-editor.el-input,
+.title_text .el-date-editor.el-input__inner {
+  width: 245px;
+}
+.title_text .el-date-editor .el-range-separator {
+  line-height: 32px;
 }
 </style>