You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
308 lines
8.2 KiB
308 lines
8.2 KiB
<template>
|
|
<view class="lending-container">
|
|
<!-- 固定只有两个 tab -->
|
|
<view class="tab-sticky">
|
|
<my-tabs
|
|
:tabData="tabData"
|
|
:defaultIndex="currentIndex"
|
|
:config="{ textColor: '#333' }"
|
|
@tabClick="tabClick"
|
|
/>
|
|
</view>
|
|
|
|
<swiper
|
|
class="swiper"
|
|
:current="currentIndex"
|
|
:style="{ height: currentSwiperHeight + 'px' }"
|
|
@animationfinish="onSwiperEnd"
|
|
@change="onSwiperChange"
|
|
>
|
|
<!-- 在借中 -->
|
|
<swiper-item>
|
|
<view class="list-wrapper">
|
|
<uni-load-more status="loading" v-if="loadingLending" />
|
|
|
|
<view class="empty" v-else-if="lendingList.length === 0">
|
|
<uni-icons style="margin-left: 20px;" custom-prefix="iconfont" type="icon-kongshuju" size="80"></uni-icons>
|
|
<text style="margin-top: 20px;">暂无在借记录</text>
|
|
</view>
|
|
|
|
<lending-list-item
|
|
class="list-item-lending"
|
|
v-for="(item, index) in lendingList"
|
|
:key="index"
|
|
:data="item"
|
|
:is-lending="true"
|
|
/>
|
|
</view>
|
|
</swiper-item>
|
|
|
|
<!-- 全部（历史借阅） -->
|
|
<swiper-item>
|
|
<view class="list-wrapper">
|
|
<uni-load-more status="loading" v-if="loadingAll" />
|
|
|
|
<view class="empty" v-else-if="allList.length === 0">
|
|
<uni-icons style="margin-left: 20px;" custom-prefix="iconfont" type="icon-kongshuju" size="80"></uni-icons>
|
|
<text style="margin-top: 20px;">暂无历史借阅记录</text>
|
|
</view>
|
|
|
|
<lending-list-item
|
|
class="list-item-all"
|
|
v-for="(item, index) in allList"
|
|
:key="index"
|
|
:data="item"
|
|
:is-lending="false"
|
|
/>
|
|
|
|
<uni-load-more
|
|
v-if="allList.length > 0 && hasMoreAll"
|
|
:status="loadMoreStatusAll"
|
|
/>
|
|
</view>
|
|
</swiper-item>
|
|
</swiper>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { FetchInitScreenSetting } from '@/api/user';
|
|
import { FetchHistoryloan, FetchRdloanlist, FetchCoverByISBN } from '@/api/book';
|
|
import myTabs from "@/components/my-tabs/my-tabs.vue";
|
|
import lendingListItem from "@/components/lending-list-item/lending-list-item.vue";
|
|
import { getCurrentReaderCard } from '@/utils/storage';
|
|
import config from '@/utils/config';
|
|
|
|
export default {
|
|
components: { myTabs, lendingListItem },
|
|
data() {
|
|
return {
|
|
screenConfig: {},
|
|
tabData: [
|
|
{ label: '在借中', status: 'lending' },
|
|
{ label: '历史借阅', status: 'all' },
|
|
],
|
|
currentIndex: 0,
|
|
|
|
// 全部（历史）独立数据
|
|
allList: [],
|
|
loadingAll: false,
|
|
pageAll: 1,
|
|
hasMoreAll: true,
|
|
loadMoreStatusAll: '',
|
|
|
|
// 在借中 独立数据
|
|
lendingList: [],
|
|
loadingLending: false,
|
|
|
|
swiperHeightData: {},
|
|
currentSwiperHeight: 400,
|
|
};
|
|
},
|
|
|
|
onLoad() {
|
|
this.getScreenSetting();
|
|
},
|
|
|
|
onShow() {
|
|
const tabIndex = uni.getStorageSync('switch_tab_index');
|
|
if (tabIndex !== '') {
|
|
this.currentIndex = Number(tabIndex);
|
|
uni.removeStorageSync('switch_tab_index');
|
|
}
|
|
},
|
|
|
|
onPullDownRefresh() {
|
|
if (this.currentIndex === 0) {
|
|
this.getLendingList();
|
|
} else {
|
|
this.getAllList(true);
|
|
}
|
|
},
|
|
|
|
onReachBottom() {
|
|
if (this.currentIndex === 0) {
|
|
this.getLendingList();
|
|
} else if (this.currentIndex === 1 && this.hasMoreAll) {
|
|
this.getAllList();
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
// 获取封面（你要的格式）
|
|
async getBookListWithCovers(bookList) {
|
|
const bookWithCovers = await Promise.all(
|
|
bookList.map(async (item) => {
|
|
if (!item.isbn) return { ...item, cover: '' };
|
|
|
|
const isbn = item.isbn.replace(/\-/g, '').trim();
|
|
try {
|
|
const coverRes = await FetchCoverByISBN({ isbn });
|
|
return { ...item, cover: coverRes || '' };
|
|
} catch (e) {
|
|
console.error(`获取ISBN:${isbn}封面失败`, e);
|
|
return { ...item, cover: '' };
|
|
}
|
|
})
|
|
);
|
|
return bookWithCovers;
|
|
},
|
|
|
|
async getScreenSetting() {
|
|
try {
|
|
const res = await FetchInitScreenSetting({ libcode: config.LIB_CODE });
|
|
const data = res.data;
|
|
this.screenConfig = {
|
|
thirdUrl: data.open_lib_http?.context || '',
|
|
thirdAppid: data.open_lib_appId?.context || '',
|
|
thirdSecret: data.open_lib_secret?.context || '',
|
|
sm4Key: data.sm4_key?.context || ''
|
|
};
|
|
|
|
// 默认加载第一个 tab
|
|
this.getLendingList(true);
|
|
} catch (err) {}
|
|
},
|
|
|
|
async getAllList(isRefresh = false) {
|
|
if (this.loadingAll) return;
|
|
this.loadingAll = true;
|
|
|
|
if (isRefresh) {
|
|
this.pageAll = 1;
|
|
this.allList = [];
|
|
this.hasMoreAll = true;
|
|
this.loadMoreStatusAll = '';
|
|
}
|
|
|
|
try {
|
|
// 使用带缓存降级的函数获取读者证
|
|
const currentReaderCard = await getCurrentReaderCard();
|
|
|
|
const params = {
|
|
...this.screenConfig,
|
|
rdid: currentReaderCard.bindValue,
|
|
logtype: '30002',
|
|
page: this.pageAll,
|
|
rows: 10,
|
|
};
|
|
|
|
const res = await FetchHistoryloan(params);
|
|
const result = typeof res.data === 'string' ? JSON.parse(res.data) : res.data;
|
|
let list = result.hloanlist || [];
|
|
|
|
// 插入封面
|
|
// list = await this.getBookListWithCovers(list);
|
|
|
|
this.allList = [...this.allList, ...list];
|
|
this.hasMoreAll = list.length === 10;
|
|
this.loadMoreStatusAll = this.hasMoreAll ? '' : 'no-more';
|
|
|
|
if (this.hasMoreAll) this.pageAll++;
|
|
} catch (err) {
|
|
} finally {
|
|
this.loadingAll = false;
|
|
uni.stopPullDownRefresh();
|
|
setTimeout(() => {
|
|
this.calcHeight('all');
|
|
}, 100);
|
|
}
|
|
},
|
|
|
|
async getLendingList() {
|
|
this.loadingLending = true;
|
|
try {
|
|
// 使用带缓存降级的函数获取读者证
|
|
const currentReaderCard = await getCurrentReaderCard();
|
|
|
|
const params = {
|
|
...this.screenConfig,
|
|
rdid: currentReaderCard.bindValue,
|
|
};
|
|
const res = await FetchRdloanlist(params);
|
|
const result = typeof res.data === 'string' ? JSON.parse(res.data) : res.data;
|
|
let list = result.loanlist || [];
|
|
|
|
// 插入封面
|
|
// list = await this.getBookListWithCovers(list);
|
|
|
|
this.lendingList = list.map(item => ({
|
|
...item,
|
|
loantime: item.loandate || '',
|
|
returntime: item.returndate || '',
|
|
}));
|
|
} catch (err) {
|
|
} finally {
|
|
this.loadingLending = false;
|
|
uni.stopPullDownRefresh();
|
|
setTimeout(() => {
|
|
this.calcHeight('lending');
|
|
}, 100);
|
|
}
|
|
},
|
|
|
|
// 高度自适应（修复版）
|
|
calcHeight(type) {
|
|
const selector = `.list-item-${type}`;
|
|
const query = uni.createSelectorQuery().in(this);
|
|
|
|
query.selectAll(selector).boundingClientRect((res) => {
|
|
let totalHeight = 200;
|
|
if (res && res.length > 0) {
|
|
totalHeight = res.reduce((sum, rect) => sum + rect.height, 0);
|
|
totalHeight += res.length * 10 + 40;
|
|
}
|
|
this.swiperHeightData[type] = totalHeight;
|
|
this.currentSwiperHeight = totalHeight + 20;
|
|
}).exec();
|
|
},
|
|
|
|
tabClick(index) {
|
|
this.currentIndex = index;
|
|
if (index === 0) {
|
|
if (this.lendingList.length === 0) {
|
|
this.getLendingList();
|
|
} else {
|
|
this.currentSwiperHeight = this.swiperHeightData.lending || 600;
|
|
}
|
|
} else {
|
|
if (this.allList.length === 0) {
|
|
this.getAllList(true);
|
|
} else {
|
|
this.currentSwiperHeight = this.swiperHeightData.all || 600;
|
|
}
|
|
}
|
|
},
|
|
|
|
onSwiperChange(e) {
|
|
if (e.detail.source === 'touch') this.currentIndex = e.detail.current;
|
|
},
|
|
|
|
onSwiperEnd() {
|
|
this.tabClick(this.currentIndex);
|
|
},
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.lending-container {
|
|
background: #f5f5f5;
|
|
min-height: 100vh;
|
|
}
|
|
.tab-sticky {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 99;
|
|
background: #fff;
|
|
}
|
|
.swiper {
|
|
width: 100%;
|
|
transition: height 0.2s ease;
|
|
}
|
|
.list-wrapper {
|
|
padding: 10px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
</style>
|