关于我们-理念与品牌文化

QYF-GitLab1

20 小时以前 cf7e71c6d0fb64eeb6b5deac540da843b4bb465c

 src/views/personalCenter/myCollection.vue

@@ -1,3 +1,299 @@
<template>
  <div>我的收藏</div>
  <!-- <page> -->
  <div class="personalPage-box">
    <div class="personalPage-title">我的收藏</div>
    <div class="personalPage-content">
      <div class="cartClass">
        <el-tabs v-model="currentCollect" type="capsule" @tab-click="tabCart">
          <el-tab-pane label="数字教材" name="textBooks"></el-tab-pane>
        </el-tabs>
      </div>
      <div class="myCarTopPage">
        <div class="list-box" v-loading="pages.loading">
          <div
            :class="
              currentCollect == 'book' || currentCollect == 'textBooks'
                ? 'bookCartContent cartContent'
                : currentCollect == 'course'
                  ? 'courseCartContent cartContent'
                  : 'cartContent'
            "
          >
            <div
              class="collectList flex jc-sb clear"
              v-if="collectList.length > 0 && !pages.loading"
            >
              <div v-for="(item, index) in collectList" :key="index" class="collectList-item fl">
                <div class="cover" @click="goBookDetails(item.id, item.name)">
                  <img :src="item.icon" alt="" />
                </div>
                <div class="info" @click="goBookDetails(item.id, item.name)">
                  <span>{{ item.name }}</span>
                </div>
                <div class="currentBtn hover" @click="setCoolect(item)">
                  <img src="@/assets/images/personalCenter/collect-click.png" alt="star" />
                </div>
              </div>
            </div>
            <div v-if="collectList.length == 0 && !pages.loading">
              <el-empty :image-size="200" description="暂无数据" />
            </div>
          </div>
          <div class="pagination-box">
            <el-pagination
              v-model:current-page="pages.page"
              v-model:page-size="pages.pageSize"
              :disabled="disabled"
              :background="background"
              layout="total, prev, pager, next"
              :total="pages.count"
              @current-change="handleCurrentChange"
              v-if="collectList.length > 0 && !pages.loading"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- </page> -->
</template>

<script setup lang="ts">
import { reactive, ref, onMounted, inject, watch } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useUserStore } from '@/store'
import { useRouter } from 'vue-router'
const userStore = useUserStore()
const router = useRouter()
const MG: any = inject('MG')
const config: any = inject('config')
let currentCollect = ref('textBooks')
let collectList = ref([])
const background = ref(false)
const disabled = ref(false)
let pages = reactive({
  page: 1,
  pageSize: 10,
  count: 0,
  loading: false,
})
let linkType = ref('FavoriteBookCity')

const tabCart = (event: Event) => {
  pages.page = 1
  pages.loading = true
  collectList.value = []
  currentCollect.value = event.props.name
  if (currentCollect.value == 'textBooks') {
    linkType.value = 'FavoriteBookCity'
  }
  getDataList()
}

function getDataList() {
  pages.loading = true
  MG.store
    .getProductList({
      handelEBooK: true,
      queryType: 'AppUserProductLink',
      linkType: linkType.value,
      paging: {
        start: pages.pageSize * pages.page - pages.pageSize,
        size: pages.pageSize,
      },
    })
    .then((res) => {
      collectList.value = res.datas
      pages.count = res.total
      pages.loading = false
    })
    .catch(() => {
      pages.loading = false
    })
}
onMounted(() => {
  getDataList()
})

// watch(
//   () => userStore.token,
//   () => {
//     getDataList()
//   }
// )

const handleCurrentChange = (val: number) => {
  pages.page = val
  getDataList()
}

const setCoolect = (item) => {
  ElMessageBox.confirm('确定要取消收藏吗？', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    autofocus: false,
    type: 'warning',
  })
    .then(() => {
      MG.store
        .delProductLink({
          productIds: [item.id],
          linkType: linkType.value,
        })
        .then(() => {
          ElMessage({
            message: '收藏已取消！',
            type: 'success',
          })
          pages.page = 1
          getDataList()
        })
    })
    .catch(() => {})
}
// 跳转书本详情
const goBookDetails = (id: number, name: string) => {
  router.push({
    path: '/bookdetail',
    query: {
      bookId: id,
    },
  })
}
</script>
<style lang="less" scoped>
.cartClass {
  ::v-deep .el-tabs__nav-wrap::after {
    background-color: #019e58;
    height: 1px;
  }

  ::v-deep .el-tabs__item {
    width: 100px;
    padding: 0;
    color: #545c63;
  }

  ::v-deep .is-active {
    background-color: #019e58;
    color: #fff;
    border-radius: 3px 3px 0 0;
  }
}

.collectList {
  // overflow: hidden;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.bookCartContent {
  .collectList-item {
    width: 130px;
    cursor: pointer;
    box-sizing: border-box;
    float: left;
    position: relative;
    margin-right: 38px;

    .cover {
      width: 100%;
      height: 180px;
      box-shadow: 0px 0px 20px 1px #ccc;

      img {
        width: 100%;
        height: 100%;
        object-fit: contain;
      }
    }

    .info {
      height: 90px;
      padding: 15px 0;
      width: 100%;

      span {
        font-weight: bold;
        height: 45px;
        line-height: 22px;
        display: -webkit-box;
        margin-bottom: 5px;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }

  .collectList-item:nth-child(5),
  :nth-child(10) {
    margin-right: 0;
  }
}

.courseCartContent {
  .collectList-item {
    width: 28%;
    cursor: pointer;
    box-sizing: border-box;
    float: left;
    margin-right: 5%;
    box-shadow: 0px 0px 20px 1px #ccc;
    position: relative;

    .cover {
      width: 100%;
      height: 130px;

      img {
        width: 100%;
        height: 100%;
        object-fit: contain;
      }
    }

    .info {
      height: 70px;
      padding: 15px;
      width: 100%;

      span {
        font-weight: bold;
        height: 45px;
        line-height: 22px;
        display: -webkit-box;
        margin-bottom: 5px;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }
}

.currentBtn {
  width: 20px;
  height: 20px;
  padding: 2px;
  background-color: #fff;
  position: absolute;
  top: 5px;
  right: 2px;

  img {
    height: 20px;
  }
}

.cartContent {
  min-height: 495px;
}

.pagination-box {
  display: flex;
  justify-content: center;
}
</style>