volunteer-pc/src/views/volunteer/integralConversion/index.vue

<template>
  <div class="app-container" ref="main">
    <div class="search" ref="search">
      <MyInput v-model="queryParams.name" @clickSearch="handleSearch" />
    </div>
    <!-- <div class="convert-content" v-loading="loading">
      <div class="integral-lists">
        <div class="list" v-for="(item,index) in certificateList" :key="index">
          <div class="list-top" :style="{'background-image': 'url(' + basicUrl + item.cover + ')'}"></div>
          <div class="list-bottom">
            <span class="bottom-left">{{ item.name }}</span>
            <span class="bottom-right" @click="
            (item)">兑换</span> -->

    <ul class="book-main" :style="listStyle">
      <li
        v-for="(item, index) in certificatesList"
        :key="item.id"
        :style="{ marginBottom: isLastRow(index) ? '0px' : '' }"
      >
        <div class="integral-num">积分：50</div>
        <el-image
          style="width: 100%; height: 87%"
          :src="baseUrl + item.cover"
          fit="fill"
        >
        </el-image>
        <div class="operate">
          <div class="integral">
            {{ item.name }}
          </div>
          <div class="operate-child">
            <div class="exchange-btn" @click="conversion(item)">兑 换</div>
          </div>
        </div>
      </li>
    </ul>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
import { listCertificates } from "@/api/volunteer/gxhzs/gxhzsgl/index.js";
export default {
  data() {
    return {
      listStyle: {
        height: 0,
        overflowY: "auto",
      },
      baseUrl: process.env.VUE_APP_BASE_API,
      certificatesList: [],
      loading: false,
      tableData: [],
      total: 0,
      queryParams: {
        name: undefined,
        pageNum: 1,
        pageSize: 10,
      },
      form: {},
      rules: {},
    };
  },
  created() {
    // //给表格一个固定值
    this.$nextTick(() => {
      this.listStyle.height =
        this.$refs.main.offsetHeight -
        40 -
        this.$refs.search.offsetHeight -
        42 +
        "px";
      this.getList();
    });
  },
  methods: {
    isLastRow(index) {
      const rowCount = Math.ceil(this.certificatesList.length / 5);
      const row = Math.floor(index / 5);
      return row === rowCount - 1;
    },
    /**兑换 */
    conversion(item) {
      console.log(item);
    },
    /**搜索 */
    handleSearch(keyWord) {
      this.queryParams = {
        name: keyWord,
        pageNum: 1,
        pageSize: 10,
      };
      this.getList();
    },
    /** 查询证书管理列表 */
    getList() {
      this.loading = true;
      listCertificates(this.queryParams).then((response) => {
        this.certificatesList = response.rows;
        this.total = response.total;
        
        this.loading = false;
      });
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        name: null,
        type: null,
        cover: null,
        content: null,
        datetime: null,
        serviceDuration: null,
        createId: null,
        createBy: null,
        createTime: null,
        updateId: null,
        updateBy: null,
        updateTime: null,
        remark: null,
        userId: null,
        deptId: null,
      };
      this.resetForm("form");
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
  },
};
</script>
<style lang="scss" scoped>
@import "@/assets/styles/myTable.scss";
</style>