From ef37c59e055a990ce247b265b27d3fcef430a243 Mon Sep 17 00:00:00 2001
From: 杨磊 <505174330@qq.com>
Date: 星期五, 15 八月 2025 10:19:18 +0800
Subject: [PATCH] first submit
---
src/components/list/data.vue | 284 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 284 insertions(+), 0 deletions(-)
diff --git a/src/components/list/data.vue b/src/components/list/data.vue
new file mode 100644
index 0000000..fe38102
--- /dev/null
+++ b/src/components/list/data.vue
@@ -0,0 +1,284 @@
+<template>
+ <div>
+ <div class="wrap bookList" v-loading="reLoading">
+ <el-empty
+ description="鏆傛棤鏁版嵁"
+ class="empty"
+ :image-size="200"
+ v-if="bookList.length == 0 && !reLoading"
+ ></el-empty>
+ <template v-if="bookList.length > 0 && !reLoading">
+ <div
+ class="bookListItem"
+ v-for="(item, index) in bookList"
+ :key="index"
+ @click="toDetail(item)"
+ >
+ <div class="wrapImg">
+ <img class="autoImg" :src="item.icon" alt="" />
+ </div>
+ <div class="ellipsis" :title="item.name">
+ {{ item.name }}
+ </div>
+ <!-- <p>
+ <span style="font-size: 12px">锟�</span>
+ {{ item.price }}
+ </p> -->
+ <div class="priceBox">
+ <span class="price" v-if="item.price && item.price > 0"
+ >楼
+ <span>{{ tool.toDecimal2(item.price) }}</span>
+ </span>
+ <span class="price" v-else>
+ <span class="freePrice">鍏嶈垂</span>
+ </span>
+ <span class="oldPrice" v-if="item.oldPrice"
+ >鍘熶环锛毬{ tool.toDecimal2(item.oldPrice) }}</span
+ >
+ </div>
+ </div>
+ </template>
+ </div>
+ <!-- 鍒嗛〉 -->
+ <div class="pageinateBox" v-if="bookList.length > 0">
+ <el-pagination
+ @size-change="
+ (val) => {
+ paginationData.limit = val;
+ getData();
+ }
+ "
+ @current-change="
+ (val) => {
+ paginationData.page = val;
+ getData();
+ }
+ "
+ background=""
+ :current-page="paginationData.page - 0"
+ :page-size="paginationData.limit"
+ prev-text="涓婁竴椤�"
+ next-text="涓嬩竴椤�"
+ layout="total, prev, pager, next, slot, jumper"
+ :total="paginationData.totalCount"
+ >
+ </el-pagination>
+ </div>
+ </div>
+</template>
+<script>
+export default {
+ data() {
+ return {
+ reLoading: true,
+ tabLoading: true,
+ paginationData: {
+ page: 1,
+ totalCount: 0,
+ limit: 20,
+ totalPage: 0,
+ },
+ bookList: [],
+ };
+ },
+ props: {
+ channel: {
+ type: String,
+ },
+ selectListKey: {
+ type: Array,
+ defaultValue: [],
+ },
+ searchFields: {
+ type: String,
+ defaultValue: "",
+ },
+ searchValue: {
+ type: String,
+ defaultValue: "",
+ },
+ detailRoute: {
+ type: String,
+ defaultValue: "",
+ },
+ },
+ created() {
+ this.getData();
+ },
+ watch: {
+ searchValue: {
+ handler: function (val, oldVal) {
+ this.paginationData.page = 1;
+ this.getData();
+ },
+ // 娣卞害瑙傚療鐩戝惉
+ deep: true,
+ },
+ channel: {
+ handler: function (val, oldVal) {
+ this.paginationData.page = 1;
+ this.getData();
+ },
+ // 娣卞害瑙傚療鐩戝惉
+ deep: true,
+ },
+ searchFields: {
+ handler: function (val, oldVal) {
+ this.paginationData.page = 1;
+ this.getData();
+ },
+ // 娣卞害瑙傚療鐩戝惉
+ deep: true,
+ },
+ },
+ methods: {
+ toDetail(row) {
+ this.$router.push({
+ name: this.detailRoute,
+ query: { id: row.id, cmsPath: row.rootCmsItemId },
+ });
+ },
+ getData() {
+ this.reLoading = true;
+ let { limit, page } = this.paginationData;
+ let query = {
+ path: this.channel,
+ queryType: this.channel == "*" ? "*" : "",
+ paging: {
+ start: limit * page - limit,
+ size: limit,
+ },
+ fields: {
+ caupress_catalogue: [],
+ caupress_projectTitle: [],
+ caupress_ISBN: [],
+ caupress_author: [],
+ },
+ filterList: {},
+ coverSize: {
+ height: 200,
+ },
+ };
+ // 娣诲姞绛涢�夋潯浠�
+ if (this.selectListKey) {
+ console.log(this.selectListKey[0] == "All", "isTru");
+ if (this.selectListKey[0] != "All") {
+ Object.assign(query.filterList, {
+ "caupress_catalogue*": this.selectListKey[0],
+ });
+ }
+ if (this.selectListKey[1] != "arrangementAll") {
+ if (this.selectListKey[0] != "All") {
+ Object.assign(query.filterList, {
+ "caupress_catalogue*": [
+ this.selectListKey[0],
+ "&" + this.selectListKey[1],
+ ],
+ });
+ } else {
+ Object.assign(query.filterList, {
+ "caupress_catalogue*": [this.selectListKey[1]],
+ });
+ }
+ }
+ if (this.selectListKey[2] != "projectTitleAll") {
+ Object.assign(query.filterList, {
+ "caupress_projectTitle*": [this.selectListKey[2]],
+ });
+ }
+ }
+
+ // 澧炲姞澶撮儴鎼滅储鏉′欢
+ if (this.searchFields) {
+ Object.assign(query.filterList, {
+ [this.searchFields + "*"]: this.searchValue,
+ });
+ }
+ console.log(this.selectListKey, "this.selectListKey");
+
+ console.log(query, "query");
+ this.MG.store.getProductList(query).then((res) => {
+ this.bookList = res.datas;
+ this.paginationData.totalCount = res.total;
+ // 鐖剁粍浠堕渶瑕佽幏鍙栧浘涔︽暟閲忔椂璋冪敤
+ if (this.$listeners["gainTotalCount"]) {
+ this.$emit("gainTotalCount", res.total);
+ }
+ this.reLoading = false;
+ });
+ },
+ },
+};
+</script>
+<style lang="less" scoped>
+.wrap {
+ padding: 20px;
+ margin-bottom: 10px;
+ background-color: #fff;
+}
+
+.bookList {
+ display: grid;
+ grid-template-columns: repeat(5, 150px);
+ grid-column-gap: 100px;
+ min-height: 400px;
+
+ .empty {
+ width: 1160px;
+ margin: 0 auto;
+ }
+
+ .bookListItem {
+ width: 150px;
+ height: 280px;
+ cursor: pointer;
+
+ .wrapImg {
+ width: 150px;
+ height: 200px;
+ position: relative;
+ border: 1px solid #e6e6e6;
+ background: #f2f2f2;
+ }
+
+ .ellipsis {
+ width: 150px;
+ line-height: 40px;
+ color: #333333;
+ font-size: 16px;
+ }
+
+ .priceBox {
+ .oldPrice {
+ font-size: 12px;
+ color: #444444;
+ text-decoration: line-through;
+ margin-left: 6px;
+ }
+
+ .price {
+ font-size: 12px;
+ color: #e50021;
+
+ span {
+ font-weight: bold;
+ font-size: 14px;
+ }
+ }
+ }
+ }
+}
+
+.pageinateBox {
+ text-align: center;
+ margin: 40px 0;
+
+ :deep(.el-pagination.is-background .btn-next) {
+ padding: 0 10px;
+ }
+
+ :deep(.el-pagination.is-background .btn-prev) {
+ padding: 0 10px;
+ }
+}
+</style>
--
Gitblit v1.9.1