pc--vr/src/views/market/index.vue

<script setup>
import { placeholderPic } from "~/utils/util";
import Banner from "~/components/Banner/index.vue";
import { ref, onMounted } from "vue";
import * as jifenApi from "~/api/jifen";
import { useRouter } from "vue-router";
const router = useRouter();
//积分商城列表
const jiList = ref([]);
const total = ref(0);
const __news__ = async () => {
  try {
    const { data } = await jifenApi.list({
      limit: 8,
      page: page.value,
    });
    jiList.value = data.list;
    total.value = data.total;
  } catch (error) {}
};

onMounted(__news__);

const todetails = (id) => {
  router.push({
    path: "/store/pointshoping/:id",
    query: {
      id: id,
    },
  });
};

//第几页

let page = ref(1);
const handleCurrentChange = (val) => {
  page.value = val;
  __news__();
};

// let imgPath = placeholderPic(280, 280);

const conversion = () => {
  router.push({
    name: "conversion",
  });
};
</script>


<template>
  <div class="market-container">
    <Banner type="integral_shop" />

    <div class="market-btns flex-row flex-aic flex-jc-sb">
      <el-button size="large" type="primary">预约拍摄</el-button>
      <el-button size="large" type="primary">设备租赁</el-button>
      <el-button size="large" type="" @click="conversion">兑换记录</el-button>
    </div>

    <!-- main -->
    <div class="market-main">
      <template v-for="(item, idx) in jiList" :key="idx">
        <div class="market-itembox" @click="todetails(item.id)">
          <div class="imgshow">
            <img :src="item.image" alt="" style="width: 279px; height: 279px" />
          </div>
          <p class="market-itembox__desc ellipsis-two">
            {{ item.name }}
          </p>
          <div class="market-itembox__footer flex-row flex-aic flex-jc-sb">
            <div class="counts">
              <span>{{ item.price }}</span
              >积分
            </div>
            <div class="change">兑换</div>
          </div>
        </div>
      </template>
    </div>

    <div class="pagination-container">
      <el-pagination
        :page-size="8"
        @current-change="handleCurrentChange"
        background
        layout="prev, pager, next"
        :total="total"
      />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.market {
  // &-container {}

  &-btns {
    column-gap: 20px;

    .el-button {
      &:nth-child(-n + 2) {
        flex: 1;
      }
    }
  }

  &-main {
    display: flex;
    // grid-template-columns: repeat(4, auto);
    // gap: 20px;
    flex-wrap: wrap;
    padding: 30px 0;
    margin-bottom: 30px;
    column-gap: 16px;
    flex-wrap: wrap;
    // height: 255px;
    overflow: hidden;
  }

  &-itembox {
    background-color: #fff;
    border-radius: 6px;
    overflow: hidden;
    width: 280px;
    cursor: pointer;

    // .imgshow {}

    &__desc {
      font-size: 16px;
      padding: 0 10px;
    }

    &__footer {
      padding: 0 10px 20px;

      .counts {
        font-size: 14px;

        span {
          font-weight: 400;
          color: #00b0b0;
          font-size: 20px;
        }
      }

      .change {
        padding: 6px 12px;
        background: rgba(0, 176, 176, 0.4);
        border-radius: 24px;
        font-weight: 500;
        color: #00b0b0;
        cursor: pointer;
      }
    }
  }
}
</style>