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

qiyunfeng-create

2 天以前 5f00696dfb25bc90034448ceb634ed1ef256681a

 src/views/personalCenter/myBook.vue

@@ -1,7 +1,319 @@
<template>
  <div class="myBook">
    <div class="myBook_header">
      <div class="myBook_header_title">我的订单</div>
  <div class="personalPage-box">
    <div class="personalPage-title">我的书架</div>
    <div class="personalPage-content">
      <div class="pageBox cartPage" v-loading="isLoading">
        <div class="myCarTopPage" v-if="collectList.length > 0">
          <div
            class="bookone"
            v-for="(item, index) in collectList"
            :key="index"
            @click="goDetail(item)"
          >
            <div class="imgBox">
              <img v-if="item.product.icon" :src="item.product.icon" />
              <img v-else :src="defaultImg" alt="" />
            </div>
            <div class="details">
              <div class="text-flow" v-if="item.product.name">
                {{ item.product.name || "-" }}
              </div>
              <div class="text-flow" :title="item.isbn">
                ISBN：{{ item.isbn.length != 0 ? item.isbn : "-" }}
              </div>
              <div class="text-flow">
                作者：{{ item.author.length != 0 ? item.author : "-" }}
              </div>
              <!-- <div class="text-flow" v-if="item.ExpiryDate">
            截止日期：<span style="color: #dd0000">{{ item.ExpiryDate }}</span>
          </div> -->
            </div>
          </div>
        </div>
        <div class="myCarTopPage" v-else>
          <el-empty description="您还未购买任何图书" :image-size="200" />
        </div>
      </div>
      <div class="pageCon">
        <!-- 分页 -->
        <el-pagination
          background
          :current-page="paginationData.page - 0"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-size="paginationData.limit"
          layout="total, prev, pager, next, slot"
          :total="paginationData.totalCount"
        >
          <div style="display: flex; align-items: center">
            <span class="el-pagination__jump"
              >前往
              <div class="el-input el-pagination__editor is-in-pagination">
                <input
                  type="number"
                  autocomplete="off"
                  min="1"
                  :max="paginationData.totalPage"
                  v-model="inputPage"
                  class="el-input__inner"
                  @keyup.enter="jumpFun($event)"
                />
              </div>
              页
            </span>
            <el-button type="primary" class="toBtn" @click="jumpFun">确定</el-button>
          </div>
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref, onMounted, inject, watch } from "vue";
import { useRouter } from "vue-router";
import defaultImg from "@/assets/images/default-book-img.png";
import { useUserStore } from "@/store";
import tool from "@/assets/js/toolClass";
const MG: any = inject("MG");
const config: any = inject("config");
const router = useRouter();
let collectList = ref([]);
let currentCollect = ref("book");
let isLoading = ref(false);
let pages = reactive({
  page: 1,
  pageSize: 10,
  count: 0,
  loading: false,
});
let linkType = ref("PurchasedProduct");
let paginationData = reactive({
  page: 1,
  limit: 10,
  totalCount: 0,
  totalPage: 0,
});
let inputPage = ref(1);
const loading = ref(false);
const listData = ref([]);
const keyQueryRequests = [
  {
    key: "author",
  },
  {
    key: "isbn",
  },
];

const getData = () => {
  loading.value = true;
  const searchData = [
    {
      keywords: "digitalTextbooks",
      field: "ProductType",
    },
  ];
  const data = {
    Size: paginationData.limit,
    Start: (paginationData.page - 1) * paginationData.limit,
    sort: {
      type: "Desc",
      field: "CreateDate",
    },
    searchList: searchData,
    keyQueryRequests: keyQueryRequests,
  };
  MG.store.getPurchasedProductList(data).then(async (response) => {
    listData.value = handResultsChange(response.datas);
    listData.value.forEach((item) => {
      item.product.icon = tool.getPublicImage(item.product.icon);
    });
    // //当前页面
    paginationData.totalCount = response.totalSize;
    paginationData.totalPage =
      response.totalSize % paginationData.limit === 0
        ? response.totalSize / paginationData.limit
        : Math.floor(response.totalSize / paginationData.limit) + 1;
    loading.value = false;
    collectList.value = response.datas;
  });
};
onMounted(() => {
  getData();
});
// 处理查询结果
const handResultsChange = (data) => {
  let fieldsData = [];
  for (let i = 0; i < data.length; i++) {
    const item = data[i];
    for (const val in keyQueryRequests) {
      fieldsData.push(keyQueryRequests[val].key);
    }
    for (let i = 0; i < fieldsData.length; i++) {
      const field = fieldsData[i];
      item[field] = JSON.parse(item.datas[field]);
      const datas = item[field];
      if (datas.length > 0) {
        if (datas[0].Value) {
          item[field] = datas[0].Value;
        } else if (datas[0].Data) {
          item[field] = datas[0].Data.Value;
        }
      }
    }
  }
  return data;
};

//到图书详情
const goDetail = (item) => {
  router.push({
    path: "/bookdetail",
    query: {
      bookId: item.product.id,
    },
  });
};

//分页
const handleSizeChange = (val) => {
  paginationData.limit = val;
  getData();
};
const handleCurrentChange = (val) => {
  paginationData.page = val;
  inputPage.value = val;
  getData();
};
const jumpFun = (event) => {
  event.target.blur();
  var that = this;
  if (inputPage.value <= 0) {
    inputPage.value = 1;
  }
  if (inputPage.value > paginationData.totalPage) {
    inputPage.value = paginationData.totalPage;
  }
  paginationData.page = inputPage.value;
  getData();
};
</script>
<style scoped>
.pageCon {
  width: 100%;
  float: left;
  margin-top: 20px;
  display: flex;
  justify-content: center;
}
.myCarTopPage {
  display: flex;
  justify-content: flex-start;
  box-sizing: border-box;
  overflow: hidden;
  padding-bottom: 20px;
}
.details div:first-child {
  font-size: 16px;
  color: #2b68cd;
  margin-bottom: 11px;
}

.details div:nth-child(2) {
  font-size: 14px;
  color: #666;
  margin: 15px 0;
}

.details div:nth-child(3) {
  margin-bottom: 11px;
  display: flex;
  align-items: center;
}
.details div:last-child {
  font-size: 14px;
  color: #666666;
}
.resonBox {
  display: flex;
  line-height: 24px;
}
.resonTxt {
  flex: 1;
  overflow: hidden;
  line-height: 24px;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  flex-direction: column;
}

.bookoneTitle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 10px;
  border-bottom: 1px solid #ddd;
}
.bookone {
  display: flex;
  width: 420px;
  min-height: 173px;
  float: left;
  cursor: pointer;
  box-sizing: border-box;
  margin: 20px 0px 0 20px;
  padding: 10px 30px;
  border: 1px solid #ddd;
}
.bookone:hover {
  -moz-box-shadow: 4px 3px 6px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: 4px 3px 6px rgba(0, 0, 0, 0.3);
  box-shadow: 4px 3px 6px rgba(0, 0, 0, 0.3);
}

.bookone .imgBox {
  position: relative;
  width: 120px;
  height: 160px;
  background: #fff;
}
.newBookli .imgBox {
  position: relative;
  width: 105px;
  height: 140px;
}

.imgBox img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

.details {
  flex: 1;
  margin-left: 10px;
  margin-top: 10px;
  overflow: hidden;
}
.pageBox {
  width: 100%;
}
.noDataTxt {
  margin: 50px auto;
  text-align: center;
  font-size: 22px;
  color: #999;
}
.el-pagination button {
  margin-left: 10px;
}
</style>