From 4e1859708f3c00c9a7b79a3489ac9a6640f8f7b7 Mon Sep 17 00:00:00 2001
From: litian <2804272236@qq.com>
Date: 星期二, 28 五月 2024 18:18:39 +0800
Subject: [PATCH] yuedu
---
src/views/bookshelfList/list.vue | 226 ++++++++++++++++++++++++++++++++++++++++++++++++++++----
1 files changed, 208 insertions(+), 18 deletions(-)
diff --git a/src/views/bookshelfList/list.vue b/src/views/bookshelfList/list.vue
index ce7dc23..1f1f6b4 100644
--- a/src/views/bookshelfList/list.vue
+++ b/src/views/bookshelfList/list.vue
@@ -14,26 +14,167 @@
</el-input>
</div>
<div class="manageBox">
- <div class="manageItem"><img :src="jihe" /><div class="label">婵�娲�</div></div>
- <div class="manageItem"><img :src="jihe" /><div class="label">绠＄悊</div></div>
- <div class="manageItem"><img :src="jihe" /><div class="label">鏇村鏁欐潗</div></div>
+ <div class="manageItem hover" @click="activateShow">
+ <img :src="jihe" />
+ <div class="label">婵�娲�</div>
+ </div>
+ <div class="manageItem">
+ <img :src="jihe" />
+ <div class="label">绠＄悊</div>
+ </div>
+ <div class="manageItem">
+ <img :src="jihe" />
+ <div class="label">鏇村鏁欐潗</div>
+ </div>
</div>
</div>
- <div class="contentBox"></div>
+ <div class="content">
+ <div class="list-box" v-loading="pages.loading">
+ <el-row :gutter="20" v-if="dataList.length > 0">
+ <el-col :span="6" v-for="(item, index) in dataList" :key="index">
+ <div
+ class="textbook-body-box hover"
+ @click="goBookDetails(item)"
+ >
+ <div class="book-img">
+ <img :src="getPublicImage(item.product.icon, '', '')" alt="" />
+ </div>
+ <div class="books-info">
+ <p class="book-title" :title="item.product.name">{{ item.product.name }}</p>
+ <p class="flex jc-sb">
+ <!-- <span class="author" :title="item.author">{{ item.author }}</span>
+ <span class="price" v-if="item.price == 0">鍏嶈垂</span>
+ <span class="price" v-else>锟{ item.price.toFixed(2) }}</span> -->
+ </p>
+ </div>
+ </div>
+ </el-col>
+ </el-row>
+ <div v-if="dataList.length == 0 && !pages.loading" class="noData">
+ <el-empty :image-size="200" description="鏆傛棤鏁版嵁" />
+ </div>
+ </div>
+ </div>
</div>
+ <el-dialog
+ title="婵�娲绘暀鏉�"
+ align-center
+ v-model="activateData.dialog"
+ :before-close="activateClose"
+ width="400"
+ class="activateDialog"
+ >
+ <div class="formBox">
+ <span class="label">婵�娲荤爜</span>
+ <el-input v-model="activateData.code" placeholder="璇疯緭鍏ユ縺娲荤爜"></el-input>
+ </div>
+ <template #footer>
+ <span class="dialog-footer">
+ <el-button @click="activateClose">鍙� 娑�</el-button>
+ <el-button type="primary" @click="userActiveCodeGet" :loading="activateData.loading"
+ >纭� 瀹�</el-button
+ >
+ </span>
+ </template>
+ </el-dialog>
</template>
<script setup lang="ts">
import { useRouter, onBeforeRouteUpdate } from 'vue-router'
-import { ref, onMounted,inject } from 'vue'
+import { ref, onMounted, inject, reactive } from 'vue'
+import { getPublicImage } from '@/assets/js/middleGround/tool.js'
const router = useRouter()
const MG: any = inject('MG')
import jihe from '@/assets/images/menu/jihe.png'
const searchText = ref('')
-onMounted(() => {})
+let dataList = ref([])
+let pages = reactive({
+ page: 1,
+ pageSize: 10,
+ count: 0,
+ loading: false
+})
+onMounted(() => {
+ getDataList()
+})
const searchBook = () => {}
+
+const getDataList = () => {
+ pages.loading = true
+ const searchData = [
+ {
+ keywords: 'jsek_digitalTextbooks',
+ field: 'ProductType'
+ }
+ ]
+ const data = {
+ Size: pages.pageSize,
+ Start: pages.pageSize * pages.page - pages.pageSize,
+ sort: {
+ type: 'Desc',
+ field: 'CreateDate'
+ },
+ searchList: searchData
+ }
+ MG.store.getPurchasedProductList(data).then((res) => {
+ dataList.value = res.datas
+ pages.count = res.totalSize
+ pages.loading = false
+ })
+}
+
+// 璺宠浆涔︽湰璇︽儏
+const goBookDetails = (item) => {
+ console.log(item)
+ router.push({
+ name: 'home',
+ query: {
+ bookId: item.refCode,
+ }
+ })
+ // window.open(config.textReaderUrl+ '?bookId=' + item.product.refCode + "&token=" + localStorage.getItem('jsek-token'))
+}
+
+//.銆傛縺娲诲晢鍝�
+const activateData = reactive({
+ loading:false,
+ dialog: false,
+ code:"",
+})
+const activateShow =()=>{
+ activateData.dialog = true
+}
+const activateClose =()=>{
+ activateData.dialog = false
+}
+// 浣跨敤婵�娲荤爜
+const userActiveCodeGet = () => {
+ let lock = true;
+ if (activateData.code == "") {
+ ElMessage({
+ type: "error",
+ message: "璇疯緭鍏ユ縺娲荤爜锛�",
+ });
+ } else {
+ if (lock) {
+ lock = false;
+ MG.store
+ .userActiveCode({
+ code: activateData.code,
+ })
+ .then((res) => {
+ ElMessage({
+ type: res == "婵�娲绘垚鍔�" ? "success" : "error",
+ message: res,
+ });
+ getDataList();
+ lock = true;
+ });
+ }
+ }
+}
</script>
<style lang="less">
@@ -44,30 +185,79 @@
.topBox {
display: flex;
.searchBox {
- padding: 0 20px;
- .el-input .el-input__wrapper{
- border-radius:20px !important;
- height:34px;
- background: #FFFFFF;
-
+ padding: 0 40px;
+ .el-input .el-input__wrapper {
+ width:220px;
+ border-radius: 20px !important;
+ height: 34px;
+ background: #ffffff;
}
}
.manageBox {
display: flex;
.manageItem {
margin: 0 15px;
- display:flex;
+ display: flex;
align-items: center;
justify-content: center;
- img{
- width:24px;
- height:24px;
+ img {
+ width: 24px;
+ height: 24px;
}
- .label{
- padding-left:10px;
+ .label {
+ min-width: 40px;
+ padding-left: 10px;
}
}
}
}
+ .content {
+ padding: 40px;
+ min-width:1200px;
+ .textbook-body-box {
+ display: flex;
+ .book-img {
+ width: 130px;
+ height: 180px;
+ box-shadow: 0px 0px 20px 1px #ccc;
+ position: relative;
+
+ img {
+ width: 100%;
+ height: 100%;
+ object-fit: contain;
+ }
+ }
+
+ .books-info {
+ padding: 15px;
+ flex:1;
+ .book-title {
+ 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;
+ }
+ }
+ }
+ }
+ .noData {
+ margin: 100px auto;
+ }
+}
+.activateDialog{
+ .formBox{
+ display:flex;
+ align-items: center;
+ .label{
+ width:80px;
+ }
+ }
+
}
</style>
--
Gitblit v1.9.1