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

<!--
 * @Descripttion: 
 * @version: 
 * @Author: JC9527
 * @Date: 2023-09-18 10:08:30
 * @LastEditors: JC9527
 * @LastEditTime: 2023-09-22 09:31:54
-->
<template>
  <div class="mainBox">
    <div class="convert-topBox">
      <my-input @changeInput="changeInput"></my-input>
    </div>
    <div class="convert-content" v-loading="loading">
      <div class="integral-lists">
        <div class="list" v-for="item in certificateList">
          <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="conversion(item)">兑换</span>
          </div>
        </div>
      </div>
      <div class="pagination">
        <my-pagination :total="total" @pagesChange="pagesChange"></my-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import myInput from "@/views/components/myInput/index.vue"
import myPagination from "@/views/components/myPagination/index.vue"
import { listCertificates } from "@/api/volunteer/gxhzs/gxhzsgl/index.js";
export default {
  data() {
    return {
      total:0,
      certificateList:[
        {
          type:2,
        },{
          type:1,
        },{
          type:0,
        },{
          type:2,
        },{
          type:1,
        },{
          type:0,
        },{
          type:2,
        },{
          type:1,
        }
      ],
      basicUrl:process.env.VUE_APP_BASE_API,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      loading:false,
    };
  },
  components: {
    myInput,myPagination
  },
  mounted() {
    this.getList()
  },
  methods: {
    // 页码切换
    pagesChange(pages){
      this.queryParams = pages;
      this.getList()
    },
    // 点击搜索输入框的值
    changeInput(e){

    },
    // 点击兑换
    conversion(item){
      console.log(item)
    },
    getList(){
      this.loading = true;
      listCertificates(this.queryParams).then((response) => {
        this.certificateList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    }
  },
};
</script>
<style lang="scss" scoped>
.mainBox {
  height: 100%;
  width: 100%;
  border-radius: 10px 10px 0 0;
  background-color: #fff;
  padding: 0 20px 10px 20px;
  box-shadow: 0px 0px 15px 0px rgba(229,212,212,0.58);
  .convert-topBox {
    padding: 20px 0 0 0;
  }
  .convert-content {
    .integral-lists {
      // display: flex;
      // flex-wrap: wrap;
      margin-top: 30px;
      display: grid;
      grid-template-columns: repeat(5, 230px);
      grid-column-gap: 25px;
      grid-row-gap: 25px;
      height: 491px;
      .list {
        width: 230px;
        height: 233.2px;
        // background: linear-gradient(0deg, #EFE6D9, #DDC9AC);
        box-shadow: 0px 3px 15px 0px rgba(184,184,184,0.22);
        border-radius: 10px;
        .list-top {
          // background: url('../../../assets/images/icon1.png') no-repeat center center;
          background-size: 100% 100%;
          height: 188px;
          width: 100%;
        }
        // .top-two {
        //   background: url('../../../assets/images/icon2.png') no-repeat center center;
        //   background-size: 100% 100%;
        // }
        // .top-three {
        //   background: url('../../../assets/images/icon3.png') no-repeat center center;
        //   background-size: 100% 100%;
        // }
        .list-bottom {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 10px 20px;
          .bottom-left {
            font-size: 16px;
            font-family: FZDaBiaoSong-B06S;
            font-weight: 400;
            color: #4D4949;
          }
          .bottom-right {
            padding: 3px 15px;
            border-radius: 4px;
            background-color: rgba(249,86,95,0.1);
            font-size: 14px;
            font-family: 'Alibaba PuHuiTi';
            font-weight: 400;
            color: #F8414D;
            cursor: pointer;
          }
        }
      }
    }
    .pagination {
      margin-top: 10px;
    }
  }
}
</style>