Merge branch 'master' of http://182.92.203.7:2001/r/xiehe_website

qiyunfeng-create

2 天以前 5f00696dfb25bc90034448ceb634ed1ef256681a

 src/views/personalCenter/myCollection.vue

@@ -1,3 +1,307 @@
<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("book");
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("FavoriteTextBooks");

const tabCart = (event: Event) => {
  pages.page = 1;
  pages.loading = true;
  collectList.value = [];
  currentCollect.value = event.props.name;
  if (currentCollect.value == "textBooks") {
    linkType.value = "FavoriteTextBooks";
  }
  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: 10px;
  right: 10px;

  img {
    width: 16px;
    height: 16px;
  }
}

.cartContent {
  min-height: 495px;
}

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