增加用户详情内的多个页面

2023-03-03 17:59:52 +08:00
parent 33b290c61f
commit afcb62b4eb
9 changed files with 1019 additions and 50 deletions
--- a/src/view/dealDetailManage/dealDetailMoney.vue
+++ b/src/view/dealDetailManage/dealDetailMoney.vue
@@ -0,0 +1,151 @@
+
+<script setup>
+// 引入依赖
+import api from '@/api/userManage'
+// import capi from '@/api/course'
+import custom from '@/utils/custom'
+import {formatDate} from '@/utils/format'
+// import _ from 'lodash'
+// import { toSQLLine } from '@/utils/stringFun'
+// import WarningBar from '@/components/warningBar/warningBar.vue'
+// import ckEditor from '@/components/richText/ckEditor5.vue'
+import {ref,onMounted } from 'vue'
+// import { ElMessage, ElMessageBox } from 'element-plus'
+import { useRouter, useRoute } from 'vue-router'
+const router = useRouter()
+const route = useRoute()
+// 变量
+const typeList = custom.getExercisesTypeList()
+const queryParams = ref({
+  page:1,
+  pageSize:10,
+  type:'',
+  deal_time:''
+})
+const tableData = ref([])
+const total = ref(0)
+const dealTypeList = ref([
+  {
+    name:'课程',
+    value:1
+  },{
+    name:'测试',
+    value:2
+  },
+])
+// 生命周期
+onMounted(() => {
+  // getDealMoneyList()
+})
+// 方法
+async function getDealMoneyList() {
+  const res = await api.getDealMoneyList(queryParams.value)
+  if(res.code === 0) {
+    tableData.value = res.data.records
+    total.value = res.data.total
+  }
+}
+function onSubmit() {
+  getDealMoneyList()
+}
+const onReset = () => {
+  queryParams.value = {
+    page:1,
+    pageSize:10,
+    type:'',
+    deal_time:''
+  }
+}
+function handleCurrentChange(val) {
+  queryParams.value.page = val
+  getDealMoneyList()
+}
+function handleSizeChange(val) {
+  queryParams.value.pageSize = val
+  getDealMoneyList()
+}
+</script>
+<template>
+  <div>
+    <!--    搜索框-->
+    <div class="gva-search-box">
+      <el-form ref="searchForm" :inline="true" :model="queryParams">
+        <el-form-item label="交易类别">
+          <el-select v-model="queryParams.subject" clearable placeholder="请选择">
+            <el-option
+              v-for="item in dealTypeList"
+              :key="item.id"
+              :label="item.name"
+              :value="item.name"
+            />
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="交易时间">
+           <el-date-picker class="oi-item" style="margin-left:5px"
+            v-model="queryParams.deal_time"
+            type="date"
+            placeholder="交易时间"
+            format="YYYY-MM-DD"
+            value-format="x"
+           />
+        </el-form-item>
+
+        <el-form-item>
+          <el-button size="small" type="primary" icon="search" @click="onSubmit">查询</el-button>
+          <el-button size="small" icon="refresh" @click="onReset">重置</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+    <!--    表格数据-->
+    <div class="gva-table-box">
+      <!--      数据列表-->
+      <el-table :data="tableData">
+        <el-table-column align="left" label="交易单号" min-width="150" prop="question_id" />
+        <el-table-column align="left" label="类别" min-width="150" prop="name" >
+          <template #default="scope">
+            {{custom.getExercisesTypeName(scope.row.type)}}
+          </template>
+        </el-table-column>
+        <el-table-column align="left" label="交易时间" min-width="150" >
+          <template #default="scope">
+            {{formatDate(scope.row.CreatedAt)}}
+          </template>
+        </el-table-column>
+        <el-table-column align="left" label="交易方式" min-width="150" prop="subject" />
+        <el-table-column align="left" label="交易详情" min-width="150" prop="teacher_id" />
+        <el-table-column align="left" label="交易金额" min-width="150" prop="teacher_id" />
+        <el-table-column align="left" label="资产余额" min-width="150" prop="teacher_id" />
+
+      </el-table>
+      <div class="gva-pagination">
+        <el-pagination
+          :current-page="queryParams.page"
+          :page-size="queryParams.pageSize"
+          :page-sizes="[10, 30, 50, 100]"
+          :total="total"
+          layout="total, sizes, prev, pager, next, jumper"
+          @current-change="handleCurrentChange"
+          @size-change="handleSizeChange"
+        />
+      </div>
+
+    </div>
+  </div>
+</template>
+<style scoped lang="scss">
+  .option-item{
+    display: flex;
+    align-items: center;
+    margin-bottom: 10px;
+  }
+  .button-box {
+    padding: 10px 20px;
+    .el-button {
+      float: right;
+    }
+  }
+  .warning {
+    color: #dc143c;
+  }
+</style>