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.name
      }}</descriptions-item>
      <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>