dy-admin-manager/src/views/studentManager/modals/recordDetail.vue

<template>
  <div>
    <!-- <el-alert title="基础信息" :closable="false" class="alert" type="info" /> -->
    <descriptions :column="3" style="margin-bottom: 20px;">
      <descriptions-item label="云教练单位">{{ detail.period | memberEnumType }}</descriptions-item>
      <descriptions-item label="周期数">{{ detail.memberNum }}</descriptions-item>
      <descriptions-item label="缴费金额(元)">{{ detail.actualAmount | moneyFormat(true) }}</descriptions-item>
      <descriptions-item label="已缴费人数/总人数">{{ detail.paymentUserNum }}/{{ detail.userNum }}</descriptions-item>
      <descriptions-item label="创建人">{{ detail.operatorName }}</descriptions-item>
      <descriptions-item label="创建时间">{{ detail.createTime }}</descriptions-item>
      <descriptions-item :span="3" label="备注">{{ detail.remark }}</descriptions-item>
    </descriptions>

    <!-- <el-alert title="订单详情" :closable="false" class="alert" style="margin-top: 20px;" type="info" /> -->
    <el-table
        :data="tableList"
        :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
      >
      <el-table-column align="center" prop="userId" label="学员编号">
      </el-table-column>
      <el-table-column align="center" label="学员姓名" prop="username">
      </el-table-column>
      <el-table-column align="center" label="手机号" prop="phone">
      </el-table-column>
      <el-table-column align="center" label="缴费状态">
        <template slot-scope="scope">
          {{ scope.row.paymentStatus == 1 ? '已缴费' : '未缴费' }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="缴费时间" prop="createTime">
      </el-table-column>
    </el-table>
    <pagination
        sync
        save-key="recordDetail"
        :total.sync="rules.total"
        :page.sync="rules.page"
        :limit.sync="rules.limit"
        :page-sizes="rules.page_size"
        @pagination="getList"
      />
  </div>
</template>

<script>
import pagination from "@/components/Pagination/index";
import { cloudQueryPage } from '../api'
export default {
  props: ['detail'],
  components: { pagination },
  data() {
    return {
      tableList: [],
      rules: {
        // 分页规则
        limit: 10, // 限制显示条数
        page: 1, // 当前页
        total: 0, // 总条数
        page_size: [10, 20, 40, 50], // 选择限制显示条数
      },
    }
  },
  mounted() {
    console.log(this.detail)
    this.getList()
  },
  methods: {
    async getList() {
      try {
        const res = await cloudQueryPage({
          paymentId: this.detail.id,
          page: this.rules.page,
          rows: this.rules.limit,
        });
        console.log(res)
        this.rules.total = res.data.total;
        this.tableList = res.data.rows;
      } catch (e) {
        console.log(e)
      }
    },
  }
}
</script>

<style lang="less" scoped>
.alert {
  margin-bottom: 10px;
}
::v-deep .description-title {
  margin-bottom: 0;
}
.description-label {
  width: 120px !important;
}
</style>