14 changed files with 0 additions and 3460 deletions
-
6pages.json
-
273pages/lendCar/lendCar copy.vue
-
324pages/login/login copy 2.vue
-
252pages/login/login copy.vue
-
297pages/login/login-no-clear.vue
-
269pages/login/login-pay.vue
-
157subpkg/pages/activity-list/activity-list copy.vue
-
317subpkg/pages/collect-list/collect-list3.vue
-
335subpkg/pages/myLending/myLending copy.vue
-
480subpkg/pages/myLending/myLending-addpage.vue
-
225subpkg/pages/myLending/myLending-old.vue
-
246subpkg/pages/myLending/myLending-old2.vue
-
151subpkg/pages/reader-card/reader-card copy.vue
-
128subpkg/pages/scan-book/scan-book.vue
@ -1,273 +0,0 @@ |
|||||
<template> |
|
||||
<view class="item-container"> |
|
||||
<!-- 图书数量 + 右侧设置按钮 --> |
|
||||
<view class="count-text"> |
|
||||
<text>图书数量 ({{ bookList.length }})</text> |
|
||||
<text class="edit-btn" @click="toggleEdit">{{ editMode ? "完成" : "管理" }}</text> |
|
||||
</view> |
|
||||
|
|
||||
<checkbox-group @change="checkboxChange"> |
|
||||
<view class="car-list" v-for="item in bookList" :key="item.isbn"> |
|
||||
<checkbox :value="item.isbn" :checked="item.checked" /> |
|
||||
<view class="book-item-box"> |
|
||||
<view class="item-box-left"> |
|
||||
<image class="img-item" :src="defaultCover" mode="aspectFill" /> |
|
||||
</view> |
|
||||
<view class="item-box-right"> |
|
||||
<view class="item-title line-clamp-2">{{ item.title || '暂无标题' }}</view> |
|
||||
<view class="tag-box"> |
|
||||
<text class="item-author">{{ item.author || '佚名' }}</text> |
|
||||
</view> |
|
||||
<view class="item-desc"> |
|
||||
应还时间：{{ item.returndate || '暂无' }} |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
</checkbox-group> |
|
||||
|
|
||||
<view class="bottom-placeholder"></view> |
|
||||
|
|
||||
<view class="car-bottom"> |
|
||||
<!-- 全选 --> |
|
||||
<view class="all-check" @click="handleAllCheck"> |
|
||||
<checkbox :checked="isAllChecked" /> |
|
||||
<text style="margin-left:6px">全选</text> |
|
||||
</view> |
|
||||
|
|
||||
<!-- 根据编辑状态切换按钮：续借 / 删除 --> |
|
||||
<button |
|
||||
class="join-btn" |
|
||||
@click="editMode ? handleDelete() : handleRenew()" |
|
||||
:disabled="!hasChecked" |
|
||||
> |
|
||||
{{ editMode ? "删除选中" : "一键续借" }} |
|
||||
</button> |
|
||||
</view> |
|
||||
</view> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import { FetchInitScreenSetting } from '@/api/user'; |
|
||||
import { FetchRdloanlist, FetchRenewbook } from '@/api/book'; |
|
||||
|
|
||||
export default { |
|
||||
data() { |
|
||||
return { |
|
||||
editMode: false, |
|
||||
bookList: [], |
|
||||
defaultCover: 'https://qiniu.aiyxlib.com/1606124577077', |
|
||||
screenConfig: {}, |
|
||||
// 用数组维护选中项（更稳定） |
|
||||
checkedValues: [] |
|
||||
}; |
|
||||
}, |
|
||||
onLoad() { |
|
||||
this.getConfigAndList(); |
|
||||
}, |
|
||||
computed: { |
|
||||
isAllChecked() { |
|
||||
return this.bookList.length > 0 && this.checkedValues.length === this.bookList.length; |
|
||||
}, |
|
||||
hasChecked() { |
|
||||
return this.checkedValues.length > 0; |
|
||||
} |
|
||||
}, |
|
||||
methods: { |
|
||||
async getConfigAndList() { |
|
||||
try { |
|
||||
const res = await FetchInitScreenSetting({ libcode: '1201' }); |
|
||||
this.screenConfig = { |
|
||||
thirdUrl: res.data.open_lib_http?.context || '', |
|
||||
thirdAppid: res.data.open_lib_appId?.context || '', |
|
||||
thirdSecret: res.data.open_lib_secret?.context || '', |
|
||||
sm4Key: res.data.sm4_key?.context || '' |
|
||||
}; |
|
||||
this.getLendingList(); |
|
||||
} catch (err) {} |
|
||||
}, |
|
||||
|
|
||||
async getLendingList() { |
|
||||
try { |
|
||||
const params = { |
|
||||
...this.screenConfig, |
|
||||
rdid: uni.getStorageSync('currentReaderCard'), |
|
||||
}; |
|
||||
const res = await FetchRdloanlist(params); |
|
||||
const result = typeof res.data === 'string' ? JSON.parse(res.data) : res.data; |
|
||||
this.bookList = result.loanlist || []; |
|
||||
// 切换列表时清空选中 |
|
||||
this.checkedValues = []; |
|
||||
} catch (err) { |
|
||||
uni.showToast({ title: '加载失败', icon: 'none' }); |
|
||||
} |
|
||||
}, |
|
||||
|
|
||||
toggleEdit() { |
|
||||
this.editMode = !this.editMode; |
|
||||
if (!this.editMode) { |
|
||||
this.checkedValues = []; |
|
||||
} |
|
||||
}, |
|
||||
|
|
||||
// ✅ 修复2：稳定的 checkbox 变更 |
|
||||
checkboxChange(e) { |
|
||||
// 直接保存数组（字符串类型） |
|
||||
this.checkedValues = e.detail.value; |
|
||||
}, |
|
||||
|
|
||||
handleAllCheck() { |
|
||||
if (this.isAllChecked) { |
|
||||
// 取消全选 |
|
||||
this.checkedValues = []; |
|
||||
} else { |
|
||||
// 全选：把所有 isbn 转字符串放进数组 |
|
||||
this.checkedValues = this.bookList.map(item => String(item.isbn)); |
|
||||
} |
|
||||
}, |
|
||||
|
|
||||
async handleRenew() { |
|
||||
// 从 checkedValues 过滤出对应图书 |
|
||||
const checkedBooks = this.bookList.filter(item => |
|
||||
this.checkedValues.includes(String(item.isbn)) |
|
||||
); |
|
||||
|
|
||||
if (checkedBooks.length === 0) { |
|
||||
uni.showToast({ title: '请选择要续借的图书', icon: 'none' }); |
|
||||
return; |
|
||||
} |
|
||||
|
|
||||
const barcodes = checkedBooks.map(item => item.barcode).join('|'); |
|
||||
uni.showLoading({ title: '续借中...' }); |
|
||||
|
|
||||
try { |
|
||||
const params = { |
|
||||
...this.screenConfig, |
|
||||
rdid: uni.getStorageSync('currentReaderCard'), |
|
||||
barcode: barcodes, |
|
||||
logtype: '30007' |
|
||||
}; |
|
||||
console.log('续借参数', params); |
|
||||
await FetchRenewbook(params); |
|
||||
|
|
||||
uni.hideLoading(); |
|
||||
uni.showToast({ |
|
||||
title: `成功续借 ${checkedBooks.length} 本`, |
|
||||
icon: 'success' |
|
||||
}); |
|
||||
this.getLendingList(); |
|
||||
} catch (err) { |
|
||||
uni.hideLoading(); |
|
||||
uni.showToast({ title: '续借失败', icon: 'none' }); |
|
||||
} |
|
||||
}, |
|
||||
|
|
||||
handleDelete() { |
|
||||
// 只保留未选中的 |
|
||||
this.bookList = this.bookList.filter(item => |
|
||||
!this.checkedValues.includes(String(item.isbn)) |
|
||||
); |
|
||||
uni.showToast({ |
|
||||
title: `已删除 ${this.checkedValues.length} 本`, |
|
||||
icon: "success" |
|
||||
}); |
|
||||
this.checkedValues = []; |
|
||||
this.editMode = false; |
|
||||
} |
|
||||
} |
|
||||
}; |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scss> |
|
||||
.item-container { |
|
||||
padding: 10px; |
|
||||
background: #f5f6f7; |
|
||||
min-height: 100vh; |
|
||||
} |
|
||||
.count-text { |
|
||||
margin-bottom: 10px; |
|
||||
display: flex; |
|
||||
justify-content: space-between; |
|
||||
align-items: center; |
|
||||
} |
|
||||
.edit-btn { |
|
||||
color: #01a4fe; |
|
||||
font-size: 14px; |
|
||||
} |
|
||||
.car-list { |
|
||||
display: flex; |
|
||||
align-items: flex-start; |
|
||||
margin-bottom: 10px; |
|
||||
checkbox { |
|
||||
margin-top: 15px; |
|
||||
padding: 0 10px; |
|
||||
} |
|
||||
} |
|
||||
.book-item-box { |
|
||||
flex: 1; |
|
||||
background: #fff; |
|
||||
border-radius: 8px; |
|
||||
padding: 12px; |
|
||||
display: flex; |
|
||||
.item-box-left { |
|
||||
margin-right: 12px; |
|
||||
.img-item { |
|
||||
width: 64px; |
|
||||
height: 90px; |
|
||||
border-radius: 6px; |
|
||||
} |
|
||||
} |
|
||||
.item-box-right { |
|
||||
flex: 1; |
|
||||
} |
|
||||
.item-title { |
|
||||
font-weight: bold; |
|
||||
margin-bottom: 4px; |
|
||||
} |
|
||||
.item-author { |
|
||||
font-size: 12px; |
|
||||
background: #f4f6fc; |
|
||||
padding: 2px 6px; |
|
||||
border-radius: 4px; |
|
||||
margin-right: 6px; |
|
||||
} |
|
||||
.item-desc { |
|
||||
font-size: 12px; |
|
||||
color: #999; |
|
||||
margin-top: 6px; |
|
||||
} |
|
||||
} |
|
||||
.bottom-placeholder { |
|
||||
height: 60px; |
|
||||
} |
|
||||
.car-bottom { |
|
||||
position: fixed; |
|
||||
left: 0; |
|
||||
bottom: 0; |
|
||||
right: 0; |
|
||||
background: #fff; |
|
||||
padding: 12px 15px; |
|
||||
display: flex; |
|
||||
justify-content: space-between; |
|
||||
align-items: center; |
|
||||
box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.05); |
|
||||
} |
|
||||
.all-check { |
|
||||
display: flex; |
|
||||
align-items: center; |
|
||||
} |
|
||||
.join-btn { |
|
||||
font-size: 14px; |
|
||||
color: #fff; |
|
||||
margin: 0 !important; |
|
||||
background-color: #01a4fe !important; |
|
||||
border-radius: 23px; |
|
||||
padding: 0 30px; |
|
||||
&::after{ |
|
||||
border: none !important; |
|
||||
} |
|
||||
&[disabled] { |
|
||||
background: #ccc !important; |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,324 +0,0 @@ |
|||||
<template> |
|
||||
<view style="background-color: #fff; height: calc(100vh);"> |
|
||||
<view class="user-info-section"> |
|
||||
<!-- 点击获取头像 --> |
|
||||
<button open-type="chooseAvatar" @chooseavatar="onChooseAvatar" class="avatar-btn"> |
|
||||
<image v-if="avatarUrl" :src="avatarUrl" class="avatar-img"></image> |
|
||||
<image v-else src="@/static/images/avatar.png" class="avatar-img"></image> |
|
||||
<text class="tip-text">点击选择头像</text> |
|
||||
</button> |
|
||||
</view> |
|
||||
|
|
||||
<view class="form-box"> |
|
||||
<view class="item"> |
|
||||
<uni-icons class="form-icon" type="person" size="24"></uni-icons> |
|
||||
<view class="uni-input-wrapper"> |
|
||||
<input |
|
||||
class="input" |
|
||||
type="nickname" |
|
||||
v-model="nickName" |
|
||||
placeholder="请输入昵称" |
|
||||
@input="handleInput('nickName')" |
|
||||
/> |
|
||||
<uni-icons |
|
||||
class="clear-icon" |
|
||||
v-if="clearIconStatus.nickName" |
|
||||
@click="clearInput('nickName')" |
|
||||
type="close" |
|
||||
size="20" |
|
||||
></uni-icons> |
|
||||
</view> |
|
||||
</view> |
|
||||
|
|
||||
<view class="item"> |
|
||||
<uni-icons class="form-icon" custom-prefix="iconfont" type="icon-duzhezheng" size="24"></uni-icons> |
|
||||
<view class="uni-input-wrapper"> |
|
||||
<input |
|
||||
class="input" |
|
||||
placeholder="请输入读者证号" |
|
||||
v-model="queryvalue" |
|
||||
@input="handleInput('queryvalue')" |
|
||||
/> |
|
||||
<uni-icons |
|
||||
class="clear-icon" |
|
||||
v-if="clearIconStatus.queryvalue" |
|
||||
@click="clearInput('queryvalue')" |
|
||||
type="close" |
|
||||
size="20" |
|
||||
></uni-icons> |
|
||||
</view> |
|
||||
</view> |
|
||||
|
|
||||
<view class="item"> |
|
||||
<uni-icons class="form-icon" type="locked" size="24"></uni-icons> |
|
||||
<input class="input" placeholder="请输入密码" :password="!showPwd" v-model="rdpasswd" /> |
|
||||
<uni-icons class="form-right-icon" :type="showPwd ? 'eye-slash' : 'eye'" size="20" |
|
||||
@click="togglePwd"></uni-icons> |
|
||||
</view> |
|
||||
|
|
||||
<button class="login-btn" type="primary" @click="submit">绑定</button> |
|
||||
</view> |
|
||||
|
|
||||
<view class="tips"> |
|
||||
温馨提示：<br /> |
|
||||
1、密码默认为 <text style="color:#e74c3c">身份证后6位</text>，如果身份证号最后一位为“X”，“X”需要大写; |
|
||||
</view> |
|
||||
</view> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import { FetchInitScreenSetting, FetchReaderList } from '@/api/user'; |
|
||||
|
|
||||
const TOKEN_KEY = 'token'; |
|
||||
const USER_KEY = 'user-info'; |
|
||||
|
|
||||
export default { |
|
||||
data() { |
|
||||
return { |
|
||||
queryvalue: '', |
|
||||
rdpasswd: '', |
|
||||
showPwd: false, |
|
||||
screenConfig: {}, |
|
||||
avatarUrl: '', |
|
||||
nickName: '', |
|
||||
// 清空按钮状态（支持多输入框） |
|
||||
clearIconStatus: { |
|
||||
nickName: false, |
|
||||
queryvalue: false |
|
||||
} |
|
||||
}; |
|
||||
}, |
|
||||
|
|
||||
onLoad() { |
|
||||
this.getScreenSetting(); |
|
||||
}, |
|
||||
|
|
||||
methods: { |
|
||||
// 获取微信头像 |
|
||||
onChooseAvatar(e) { |
|
||||
console.log('获取微信头像',e) |
|
||||
this.avatarUrl = e.detail.avatarUrl; |
|
||||
}, |
|
||||
|
|
||||
// 统一监听输入（自动控制清空按钮显示隐藏） |
|
||||
handleInput(field) { |
|
||||
this.clearIconStatus[field] = this[field].trim().length > 0 |
|
||||
}, |
|
||||
|
|
||||
// 统一清空输入框内容 |
|
||||
clearInput(field) { |
|
||||
this[field] = '' |
|
||||
this.clearIconStatus[field] = false |
|
||||
}, |
|
||||
|
|
||||
// 切换密码显隐 |
|
||||
togglePwd() { |
|
||||
this.showPwd = !this.showPwd; |
|
||||
}, |
|
||||
|
|
||||
async getScreenSetting() { |
|
||||
try { |
|
||||
const res = await FetchInitScreenSetting({ libcode: '1201' }); |
|
||||
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 || '' |
|
||||
}; |
|
||||
} catch (err) { |
|
||||
console.error('获取配置失败：', err); |
|
||||
} |
|
||||
}, |
|
||||
|
|
||||
async submit() { |
|
||||
// 去除首尾空格 |
|
||||
this.nickName = this.nickName.trim() |
|
||||
this.queryvalue = this.queryvalue.trim() |
|
||||
|
|
||||
if (!this.queryvalue || !this.rdpasswd) { |
|
||||
uni.showToast({ title: '请输入读者证号和密码', icon: 'none' }); |
|
||||
return; |
|
||||
} |
|
||||
|
|
||||
uni.showLoading({ title: '绑定中...' }); |
|
||||
|
|
||||
try { |
|
||||
const params = { |
|
||||
...this.screenConfig, |
|
||||
selecttype: 'rdid', |
|
||||
queryvalue: this.queryvalue, |
|
||||
rdpasswd: this.rdpasswd, |
|
||||
}; |
|
||||
|
|
||||
// {"code":200,"message":"操作成功","data":"{\"messagelist\":[{\"code\":\"R00138\",\"message\":\"未找到符合条件的读者！\"}],\"success\":false}","timestamp":1778154499544} |
|
||||
|
|
||||
// {"code":200,"message":"操作成功","data":"{\"success\":true,\"pagedata\":[{\"rdClusterCode\":null,\"rdlib\":\"GD\",\"rdid\":\"420105198509200438\",\"rdcfstate\":1}]}","timestamp":1778154647854} |
|
||||
|
|
||||
// {"code":200,"message":"操作成功","data":"{\"messageList\":[{\"R00131\":\"认证失败，系统存在该读者，密码不匹配！\"}],\"success\":true,\"pagedata\":\"\"}","timestamp":1778155520501} |
|
||||
|
|
||||
|
|
||||
const res = await FetchReaderList(params); |
|
||||
|
|
||||
let result = {}; |
|
||||
try { |
|
||||
result = JSON.parse(res.data); |
|
||||
} catch (e) { |
|
||||
uni.hideLoading(); |
|
||||
uni.showToast({ title: '数据解析失败', icon: 'none' }); |
|
||||
return; |
|
||||
} |
|
||||
|
|
||||
// 统一提取错误信息 |
|
||||
let errMsg = ''; |
|
||||
if (result.messagelist?.length) { |
|
||||
const item = result.messagelist[0]; |
|
||||
errMsg = item.message || Object.values(item)[0] || '认证失败'; |
|
||||
} |
|
||||
if (result.messageList?.length) { |
|
||||
const item = result.messageList[0]; |
|
||||
errMsg = item.message || Object.values(item)[0] || '认证失败'; |
|
||||
} |
|
||||
|
|
||||
// 成功判断 |
|
||||
const realSuccess = result.success === true && result.pagedata?.length > 0; |
|
||||
|
|
||||
if (realSuccess) { |
|
||||
const loginRes = { |
|
||||
token: 'reader-token-' + Date.now(), |
|
||||
user: { |
|
||||
nickName: this.nickName || '小图', |
|
||||
avatarUrl: this.avatarUrl, |
|
||||
cardNo: this.queryvalue |
|
||||
} |
|
||||
}; |
|
||||
|
|
||||
// uni.setStorageSync(TOKEN_KEY, loginRes.token); |
|
||||
// uni.setStorageSync(USER_KEY, loginRes.user); |
|
||||
|
|
||||
// uni.hideLoading(); |
|
||||
// uni.showToast({ title: '认证成功', icon: 'success' }); |
|
||||
const openId = uni.getStorageSync("wx_login_code"); |
|
||||
|
|
||||
const bindParams = { |
|
||||
...this.screenConfig, |
|
||||
openid: openId, |
|
||||
bindValue: this.queryvalue, |
|
||||
bindType: 'rdid', |
|
||||
libcode: '1201', |
|
||||
} |
|
||||
const bindRes = await FetchBindReadCard(params); |
|
||||
|
|
||||
setTimeout(() => { |
|
||||
uni.navigateBack(); |
|
||||
}, 1500); |
|
||||
} else { |
|
||||
uni.hideLoading(); |
|
||||
uni.showToast({ |
|
||||
title: errMsg || '读者证或密码错误', |
|
||||
icon: 'none' |
|
||||
}); |
|
||||
} |
|
||||
} catch (err) { |
|
||||
uni.hideLoading(); |
|
||||
uni.showToast({ title: '网络异常', icon: 'none' }); |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
}; |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
.user-info-section { |
|
||||
display: flex; |
|
||||
flex-direction: column; |
|
||||
align-items: center; |
|
||||
padding: 30px 0 0 0; |
|
||||
|
|
||||
.avatar-btn { |
|
||||
background: transparent; |
|
||||
display: flex; |
|
||||
flex-direction: column; |
|
||||
align-items: center; |
|
||||
|
|
||||
&::after{ |
|
||||
border: none !important; |
|
||||
} |
|
||||
|
|
||||
.avatar-img { |
|
||||
width: 60px; |
|
||||
height: 60px; |
|
||||
border-radius: 50%; |
|
||||
} |
|
||||
|
|
||||
.tip-text { |
|
||||
font-size: 12px; |
|
||||
color: #999; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.form-box { |
|
||||
padding: 20px 15px; |
|
||||
|
|
||||
.item { |
|
||||
width: 100%; |
|
||||
min-height: 44px; |
|
||||
border-radius: 22px; |
|
||||
background-color: #f7f7f7; |
|
||||
display: flex; |
|
||||
align-items: center; |
|
||||
margin-bottom: 15px; |
|
||||
.input { |
|
||||
flex: 1; |
|
||||
padding: 10px; |
|
||||
font-size: 14px; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.uni-input-wrapper{ |
|
||||
flex: 1; |
|
||||
display: flex; |
|
||||
align-items: center; |
|
||||
|
|
||||
.input { |
|
||||
flex: 1; |
|
||||
padding: 10px; |
|
||||
font-size: 14px; |
|
||||
} |
|
||||
.clear-icon{ |
|
||||
padding: 0 12px; |
|
||||
color: #ccc; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.login-btn { |
|
||||
margin-top: 10px; |
|
||||
background-color: #01a4fe !important; |
|
||||
border-radius: 22px; |
|
||||
font-size: 16px; |
|
||||
height: 44px; |
|
||||
line-height: 44px; |
|
||||
} |
|
||||
|
|
||||
.tips { |
|
||||
margin: 30px 20px; |
|
||||
font-size: 12px; |
|
||||
color: #333; |
|
||||
line-height: 20px; |
|
||||
} |
|
||||
|
|
||||
.form-icon { |
|
||||
::v-deep .uni-icons { |
|
||||
margin-left: 10px; |
|
||||
color: #01a4fe !important; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.form-right-icon { |
|
||||
::v-deep .uni-icons { |
|
||||
margin-right: 10px; |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,252 +0,0 @@ |
|||||
<template> |
|
||||
<view style="background-color: #fff; height: calc(100vh);"> |
|
||||
<view class="top-bar"> |
|
||||
<image class="top-bar-bg" src="@/static/images/mingqi-beij@2x.png" mode="aspectFill"></image> |
|
||||
<view class="library-info"> |
|
||||
<image class="avatar" src="@/static/images/avatar.png" mode="aspectFill"></image> |
|
||||
<view class="library-name">葛店经济技术开发区图书馆</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
|
|
||||
<view class="form-box"> |
|
||||
<view class="item"> |
|
||||
<uni-icons class="form-icon" type="person" size="24"></uni-icons> |
|
||||
<input class="input" placeholder="请输入读者证号" v-model="queryvalue" /> |
|
||||
</view> |
|
||||
<view class="item"> |
|
||||
<uni-icons class="form-icon" type="locked" size="24"></uni-icons> |
|
||||
<input class="input" placeholder="请输入密码" :password="!showPwd" v-model="rdpasswd" /> |
|
||||
<uni-icons class="form-right-icon" :type="showPwd ? 'eye-slash' : 'eye'" size="20" |
|
||||
@click="togglePwd"></uni-icons> |
|
||||
</view> |
|
||||
<button class="login-btn" type="primary" @click="submit">绑定</button> |
|
||||
</view> |
|
||||
|
|
||||
<view class="tips"> |
|
||||
温馨提示：<br /> |
|
||||
1、密码默认为 <text style="color:#e74c3c">身份证后6位</text>，如果身份证号最后一位为“X”，“X”需要大写; |
|
||||
</view> |
|
||||
</view> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import { FetchInitScreenSetting, FetchReaderList } from '@/api/user'; |
|
||||
|
|
||||
const TOKEN_KEY = 'token'; |
|
||||
const USER_KEY = 'user-info'; |
|
||||
|
|
||||
export default { |
|
||||
data() { |
|
||||
return { |
|
||||
queryvalue: '', |
|
||||
rdpasswd: '', |
|
||||
showPwd: false, |
|
||||
screenConfig: {} |
|
||||
}; |
|
||||
}, |
|
||||
|
|
||||
onLoad() { |
|
||||
this.getScreenSetting(); |
|
||||
}, |
|
||||
|
|
||||
methods: { |
|
||||
// 切换密码显隐 |
|
||||
togglePwd() { |
|
||||
this.showPwd = !this.showPwd; |
|
||||
}, |
|
||||
// 1: 页面加载时先获取大屏配置 |
|
||||
async getScreenSetting() { |
|
||||
try { |
|
||||
const res = await FetchInitScreenSetting({ libcode: '1201' }); |
|
||||
const data = res.data; |
|
||||
|
|
||||
// 自动取出 4 个必须参数 |
|
||||
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 || '' |
|
||||
}; |
|
||||
|
|
||||
console.log('已获取第三方配置：', this.screenConfig); |
|
||||
} catch (err) { |
|
||||
console.error('获取配置失败：', err); |
|
||||
} |
|
||||
}, |
|
||||
|
|
||||
// {"code":200,"message":"操作成功","data":"{\"messagelist\":[{\"code\":\"R00138\",\"message\":\"未找到符合条件的读者！\"}],\"success\":false}","timestamp":1778154499544} |
|
||||
|
|
||||
// {"code":200,"message":"操作成功","data":"{\"success\":true,\"pagedata\":[{\"rdClusterCode\":null,\"rdlib\":\"GD\",\"rdid\":\"420105198509200438\",\"rdcfstate\":1}]}","timestamp":1778154647854} |
|
||||
|
|
||||
// {"code":200,"message":"操作成功","data":"{\"messageList\":[{\"R00131\":\"认证失败，系统存在该读者，密码不匹配！\"}],\"success\":true,\"pagedata\":\"\"}","timestamp":1778155520501} |
|
||||
|
|
||||
// 2：点击绑定 → 调用读者登录接口 |
|
||||
async submit() { |
|
||||
if (!this.queryvalue || !this.rdpasswd) { |
|
||||
uni.showToast({ title: '请输入读者证号和密码', icon: 'none' }); |
|
||||
return; |
|
||||
} |
|
||||
|
|
||||
if (!this.screenConfig.thirdUrl) { |
|
||||
uni.showToast({ title: '图书馆配置加载中，请稍候重试', icon: 'none' }); |
|
||||
return; |
|
||||
} |
|
||||
|
|
||||
uni.showLoading({ title: '绑定中...' }); |
|
||||
|
|
||||
try { |
|
||||
const params = { |
|
||||
...this.screenConfig, |
|
||||
selecttype: 'rdid', |
|
||||
queryvalue: this.queryvalue, |
|
||||
rdpasswd: this.rdpasswd, |
|
||||
havecluster: '' |
|
||||
}; |
|
||||
|
|
||||
const res = await FetchReaderList(params); |
|
||||
|
|
||||
// 1. 解析返回的JSON字符串 |
|
||||
let result = {}; |
|
||||
try { |
|
||||
result = JSON.parse(res.data); |
|
||||
} catch (e) { |
|
||||
uni.hideLoading(); |
|
||||
uni.showToast({ title: '数据解析失败', icon: 'none' }); |
|
||||
return; |
|
||||
} |
|
||||
|
|
||||
// 2. 统一提取错误信息（兼容大小写、各种格式） |
|
||||
let errMsg = ''; |
|
||||
// 兼容小写 messagelist |
|
||||
if (result.messagelist && result.messagelist.length > 0) { |
|
||||
const item = result.messagelist[0]; |
|
||||
errMsg = item.message || Object.values(item)[0] || '绑定失败'; |
|
||||
} |
|
||||
// 兼容大写 messageList |
|
||||
if (result.messageList && result.messageList.length > 0) { |
|
||||
const item = result.messageList[0]; |
|
||||
errMsg = item.message || Object.values(item)[0] || '绑定失败'; |
|
||||
} |
|
||||
|
|
||||
// 3. 真正的成功判断：必须 success=true 并且 pagedata 有值 |
|
||||
const realSuccess = result.success === true && result.pagedata && result.pagedata.length > 0; |
|
||||
|
|
||||
if (realSuccess) { |
|
||||
const wxUser = uni.getStorageSync('wxUserInfo') || {}; |
|
||||
const loginRes = { |
|
||||
token: 'reader-token-' + Date.now(), |
|
||||
user: { |
|
||||
nickName: wxUser.nickName || '读者', |
|
||||
avatarUrl: wxUser.avatarUrl || '', |
|
||||
cardNo: this.queryvalue |
|
||||
} |
|
||||
}; |
|
||||
|
|
||||
uni.setStorageSync('token', loginRes.token); |
|
||||
uni.setStorageSync('user-info', loginRes.user); |
|
||||
|
|
||||
uni.hideLoading(); |
|
||||
uni.showToast({ title: '绑定成功', icon: 'success' }); |
|
||||
|
|
||||
setTimeout(() => { |
|
||||
uni.navigateBack(); |
|
||||
}, 1500); |
|
||||
|
|
||||
} else { |
|
||||
uni.hideLoading(); |
|
||||
uni.showToast({ |
|
||||
title: errMsg || '读者证或密码错误', |
|
||||
icon: 'none' |
|
||||
}); |
|
||||
} |
|
||||
|
|
||||
} catch (err) { |
|
||||
uni.hideLoading(); |
|
||||
console.error('绑定异常：', err); |
|
||||
uni.showToast({ title: '网络异常，请稍后重试', icon: 'none' }); |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
}; |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
.top-bar { |
|
||||
position: relative; |
|
||||
width: 100%; |
|
||||
height: 220rpx; |
|
||||
|
|
||||
.top-bar-bg { |
|
||||
position: absolute; |
|
||||
width: 100%; |
|
||||
height: 100%; |
|
||||
} |
|
||||
|
|
||||
.library-info { |
|
||||
position: relative; |
|
||||
display: flex; |
|
||||
flex-direction: column; |
|
||||
align-items: center; |
|
||||
padding-top: 30rpx; |
|
||||
|
|
||||
.avatar { |
|
||||
width: 100rpx; |
|
||||
height: 100rpx; |
|
||||
border-radius: 50%; |
|
||||
} |
|
||||
|
|
||||
.library-name { |
|
||||
margin-top: 10rpx; |
|
||||
color: #fff; |
|
||||
font-size: 30rpx; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.form-box { |
|
||||
padding: 40rpx 30rpx; |
|
||||
|
|
||||
.item { |
|
||||
width: 100%; |
|
||||
min-height: 80rpx; |
|
||||
border-radius: 40rpx; |
|
||||
background-color: #f7f7f7; |
|
||||
display: flex; |
|
||||
align-items: center; |
|
||||
margin-bottom: 30rpx; |
|
||||
|
|
||||
.input { |
|
||||
flex: 1; |
|
||||
padding: 20rpx 20rpx; |
|
||||
font-size: 28rpx; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.login-btn { |
|
||||
margin-top: 20rpx; |
|
||||
background-color: #01a4fe !important; |
|
||||
border-radius: 40rpx; |
|
||||
font-size: 30rpx; |
|
||||
} |
|
||||
|
|
||||
.tips { |
|
||||
margin: 60rpx 40rpx; |
|
||||
font-size: 24rpx; |
|
||||
color: #333; |
|
||||
line-height: 40rpx; |
|
||||
} |
|
||||
|
|
||||
.form-icon { |
|
||||
::v-deep .uni-icons { |
|
||||
margin-left: 20rpx; |
|
||||
color: #01a4fe !important; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.form-right-icon { |
|
||||
::v-deep .uni-icons { |
|
||||
margin-right: 20rpx; |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,297 +0,0 @@ |
|||||
<template> |
|
||||
<view style="background-color: #fff; height: calc(100vh);"> |
|
||||
<view class="user-info-section"> |
|
||||
<!-- 点击获取头像 --> |
|
||||
<button open-type="chooseAvatar" @chooseavatar="onChooseAvatar" class="avatar-btn"> |
|
||||
<image v-if="avatarUrl" :src="avatarUrl" class="avatar-img"></image> |
|
||||
<image v-else src="@/static/images/avatar.png" class="avatar-img"></image> |
|
||||
<text class="tip-text">点击选择头像</text> |
|
||||
</button> |
|
||||
</view> |
|
||||
|
|
||||
<view class="form-box"> |
|
||||
<view class="item"> |
|
||||
<uni-icons class="form-icon" type="person" size="24"></uni-icons> |
|
||||
<view class="uni-input-wrapper"> |
|
||||
<input class="input" type="nickname" v-model="nickName" @blur="onNicknameBlur" placeholder="请输入昵称" @input="clearInput" /> |
|
||||
<uni-icons class="clear-icon" v-if="showClearIcon" @click="clearIcon" type="close" size="20"></uni-icons> |
|
||||
</view> |
|
||||
</view> |
|
||||
<view class="item"> |
|
||||
<uni-icons class="form-icon" custom-prefix="iconfont" type="icon-duzhezheng" size="24"></uni-icons> |
|
||||
<view class="uni-input-wrapper"> |
|
||||
<input class="input" placeholder="请输入读者证号" v-model="queryvalue" @input="clearInput" /> |
|
||||
<uni-icons class="clear-icon" v-if="showClearIcon" @click="clearIcon" type="close" size="20"></uni-icons> |
|
||||
</view> |
|
||||
</view> |
|
||||
<view class="item"> |
|
||||
<uni-icons class="form-icon" type="locked" size="24"></uni-icons> |
|
||||
<input class="input" placeholder="请输入密码" :password="!showPwd" v-model="rdpasswd" /> |
|
||||
<uni-icons class="form-right-icon" :type="showPwd ? 'eye-slash' : 'eye'" size="20" |
|
||||
@click="togglePwd"></uni-icons> |
|
||||
</view> |
|
||||
<button class="login-btn" type="primary" @click="submit">绑定</button> |
|
||||
</view> |
|
||||
|
|
||||
<view class="tips"> |
|
||||
温馨提示：<br /> |
|
||||
1、密码默认为 <text style="color:#e74c3c">身份证后6位</text>，如果身份证号最后一位为“X”，“X”需要大写; |
|
||||
</view> |
|
||||
</view> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import { FetchInitScreenSetting, FetchReaderList } from '@/api/user'; |
|
||||
|
|
||||
const TOKEN_KEY = 'token'; |
|
||||
const USER_KEY = 'user-info'; |
|
||||
|
|
||||
export default { |
|
||||
data() { |
|
||||
return { |
|
||||
queryvalue: '', |
|
||||
rdpasswd: '', |
|
||||
showPwd: false, |
|
||||
screenConfig: {}, |
|
||||
avatarUrl: '', |
|
||||
nickName: '', |
|
||||
showClearIcon: false, |
|
||||
}; |
|
||||
}, |
|
||||
|
|
||||
onLoad() { |
|
||||
this.getScreenSetting(); |
|
||||
}, |
|
||||
|
|
||||
methods: { |
|
||||
// 获取微信头像 |
|
||||
onChooseAvatar(e) { |
|
||||
console.log('获取微信头像',e) |
|
||||
this.avatarUrl = e.detail.avatarUrl; |
|
||||
}, |
|
||||
onNicknameBlur(e) { |
|
||||
this.nickName = e.detail.value.trim() |
|
||||
}, |
|
||||
clearInput(event) { |
|
||||
this.queryvalue = event.detail.value; |
|
||||
if (event.detail.value.length > 0) { |
|
||||
this.showClearIcon = true; |
|
||||
} else { |
|
||||
this.showClearIcon = false; |
|
||||
} |
|
||||
}, |
|
||||
clearIcon() { |
|
||||
this.queryvalue = ''; |
|
||||
this.showClearIcon = false; |
|
||||
}, |
|
||||
|
|
||||
// 切换密码显隐 |
|
||||
togglePwd() { |
|
||||
this.showPwd = !this.showPwd; |
|
||||
}, |
|
||||
|
|
||||
async getScreenSetting() { |
|
||||
try { |
|
||||
const res = await FetchInitScreenSetting({ libcode: '1201' }); |
|
||||
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 || '' |
|
||||
}; |
|
||||
} catch (err) { |
|
||||
console.error('获取配置失败：', err); |
|
||||
} |
|
||||
}, |
|
||||
|
|
||||
async submit() { |
|
||||
// if (!this.avatarUrl) { |
|
||||
// uni.showToast({ title: '请选择头像', icon: 'none' }); |
|
||||
// return; |
|
||||
// } |
|
||||
// if (!this.nickName) { |
|
||||
// uni.showToast({ title: '请输入昵称', icon: 'none' }); |
|
||||
// return; |
|
||||
// } |
|
||||
if (!this.queryvalue || !this.rdpasswd) { |
|
||||
uni.showToast({ title: '请输入读者证号和密码', icon: 'none' }); |
|
||||
return; |
|
||||
} |
|
||||
uni.showLoading({ title: '绑定中...' }); |
|
||||
|
|
||||
try { |
|
||||
const params = { |
|
||||
...this.screenConfig, |
|
||||
selecttype: 'rdid', |
|
||||
queryvalue: this.queryvalue, |
|
||||
rdpasswd: this.rdpasswd, |
|
||||
}; |
|
||||
|
|
||||
const res = await FetchReaderList(params); |
|
||||
|
|
||||
let result = {}; |
|
||||
try { |
|
||||
result = JSON.parse(res.data); |
|
||||
} catch (e) { |
|
||||
uni.hideLoading(); |
|
||||
uni.showToast({ title: '数据解析失败', icon: 'none' }); |
|
||||
return; |
|
||||
} |
|
||||
|
|
||||
// 2. 统一提取错误信息（兼容大小写、各种格式） |
|
||||
let errMsg = ''; |
|
||||
// 兼容小写 messagelist |
|
||||
if (result.messagelist && result.messagelist.length > 0) { |
|
||||
const item = result.messagelist[0]; |
|
||||
errMsg = item.message || Object.values(item)[0] || '绑定失败'; |
|
||||
} |
|
||||
// 兼容大写 messageList |
|
||||
if (result.messageList && result.messageList.length > 0) { |
|
||||
const item = result.messageList[0]; |
|
||||
errMsg = item.message || Object.values(item)[0] || '绑定失败'; |
|
||||
} |
|
||||
|
|
||||
// 3. 真正的成功判断：必须 success=true 并且 pagedata 有值 |
|
||||
const realSuccess = result.success === true && result.pagedata && result.pagedata.length > 0; |
|
||||
console.log('this.avatarUrl',this.avatarUrl) |
|
||||
|
|
||||
if (realSuccess) { |
|
||||
const loginRes = { |
|
||||
token: 'reader-token-' + Date.now(), |
|
||||
user: { |
|
||||
nickName: this.nickName || '小图', |
|
||||
avatarUrl: this.avatarUrl, |
|
||||
cardNo: this.queryvalue |
|
||||
} |
|
||||
}; |
|
||||
|
|
||||
uni.setStorageSync(TOKEN_KEY, loginRes.token); |
|
||||
uni.setStorageSync(USER_KEY, loginRes.user); |
|
||||
|
|
||||
uni.hideLoading(); |
|
||||
uni.showToast({ title: '绑定成功', icon: 'success' }); |
|
||||
|
|
||||
setTimeout(() => { |
|
||||
uni.navigateBack(); |
|
||||
}, 1500); |
|
||||
} else { |
|
||||
uni.hideLoading(); |
|
||||
uni.showToast({ |
|
||||
title: errMsg || '读者证或密码错误', |
|
||||
icon: 'none' |
|
||||
}); |
|
||||
} |
|
||||
} catch (err) { |
|
||||
uni.hideLoading(); |
|
||||
uni.showToast({ title: '网络异常', icon: 'none' }); |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
}; |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
.user-info-section { |
|
||||
display: flex; |
|
||||
flex-direction: column; |
|
||||
align-items: center; |
|
||||
padding: 30px 0 0 0; |
|
||||
|
|
||||
.avatar-btn { |
|
||||
background: transparent; |
|
||||
|
|
||||
display: flex; |
|
||||
flex-direction: column; |
|
||||
align-items: center; |
|
||||
&::after{ |
|
||||
border: none !important; |
|
||||
} |
|
||||
|
|
||||
.avatar-img { |
|
||||
width: 60px; |
|
||||
height: 60px; |
|
||||
border-radius: 50%; |
|
||||
} |
|
||||
|
|
||||
.tip-text { |
|
||||
font-size: 12px; |
|
||||
color: #999; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
// .nickname-box { |
|
||||
// width: 80%; |
|
||||
// margin-top: 10px; |
|
||||
|
|
||||
// .nickname-input { |
|
||||
// width: 100%; |
|
||||
// padding: 10px 0; |
|
||||
// border-bottom: 1px solid #eee; |
|
||||
// text-align: center; |
|
||||
// font-size: 14px; |
|
||||
// } |
|
||||
// } |
|
||||
} |
|
||||
|
|
||||
.form-box { |
|
||||
padding: 20px 15px; |
|
||||
|
|
||||
.item { |
|
||||
width: 100%; |
|
||||
min-height: 40px; |
|
||||
border-radius: 20px; |
|
||||
background-color: #f7f7f7; |
|
||||
display: flex; |
|
||||
align-items: center; |
|
||||
margin-bottom: 15px; |
|
||||
|
|
||||
.input { |
|
||||
flex: 1; |
|
||||
padding: 10px; |
|
||||
font-size: 14px; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
|
|
||||
.uni-input-wrapper{ |
|
||||
flex: 1; |
|
||||
display: flex; |
|
||||
align-items: center; |
|
||||
.input { |
|
||||
flex: 1; |
|
||||
} |
|
||||
.clear-icon{ |
|
||||
padding: 0 10px; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
} |
|
||||
|
|
||||
.login-btn { |
|
||||
margin-top: 10px; |
|
||||
background-color: #01a4fe !important; |
|
||||
border-radius: 20px; |
|
||||
font-size: 16px; |
|
||||
} |
|
||||
|
|
||||
.tips { |
|
||||
margin: 30px 20px; |
|
||||
font-size: 12px; |
|
||||
color: #333; |
|
||||
line-height: 20px; |
|
||||
} |
|
||||
|
|
||||
.form-icon { |
|
||||
::v-deep .uni-icons { |
|
||||
margin-left: 10px; |
|
||||
color: #01a4fe !important; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.form-right-icon { |
|
||||
::v-deep .uni-icons { |
|
||||
margin-right: 10px; |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,269 +0,0 @@ |
|||||
<template> |
|
||||
<view style="background-color: #fff; height: calc(100vh);"> |
|
||||
<view class="top-bar"> |
|
||||
<image class="top-bar-bg" src="@/static/images/mingqi-beij@2x.png" mode="aspectFill"></image> |
|
||||
<view class="library-info"> |
|
||||
<image class="avatar" src="@/static/images/avatar.png" mode="aspectFill"></image> |
|
||||
<view class="library-name">葛店经济技术开发区图书馆</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
|
|
||||
<!-- 支付分状态展示 --> |
|
||||
<view class="pay-score-box" v-if="payScore"> |
|
||||
<view class="score-item"> |
|
||||
<uni-icons type="info" size="24" color="#01a4fe"></uni-icons> |
|
||||
<view class="score-text"> |
|
||||
微信支付分：<text style="color:#e74c3c; font-size:16px; font-weight:bold;">{{ payScore }}</text> 分 |
|
||||
</view> |
|
||||
</view> |
|
||||
<view class="score-desc" :style="{color: payScore >= 550 ? '#07c160' : '#e74c3c'}"> |
|
||||
{{ payScore >= 550 ? '✅ 符合办证条件（≥550分）' : '❌ 支付分不足，暂无法办证' }} |
|
||||
</view> |
|
||||
</view> |
|
||||
|
|
||||
<!-- 未获取支付分时显示授权按钮 --> |
|
||||
<view class="auth-box" v-else> |
|
||||
<button class="auth-btn" @click="getPayScore"> |
|
||||
授权查询微信支付分（办证必备） |
|
||||
</button> |
|
||||
</view> |
|
||||
|
|
||||
<!-- 表单：只有支付分达标才显示 --> |
|
||||
<view class="form-box" v-if="payScore && payScore >= 550"> |
|
||||
<view class="item"> |
|
||||
<uni-icons class="form-icon" type="person" size="24"></uni-icons> |
|
||||
<input class="input" placeholder="请输入读者证号" v-model="cardNo" /> |
|
||||
</view> |
|
||||
<view class="item"> |
|
||||
<uni-icons class="form-icon" type="locked" size="24"></uni-icons> |
|
||||
<input class="input" placeholder="请输入密码" :password="!showPwd" v-model="password" /> |
|
||||
<uni-icons class="form-right-icon" :type="showPwd ? 'eye-slash' : 'eye'" size="20" @click="togglePwd"></uni-icons> |
|
||||
</view> |
|
||||
<button class="login-btn" type="primary" @click="submit">绑定</button> |
|
||||
</view> |
|
||||
|
|
||||
<view class="tips"> |
|
||||
温馨提示：<br /> |
|
||||
1、密码默认为<text style="color:#e74c3c">身份证后6位</text>，X大写；<br /> |
|
||||
2、微信支付分≥550分方可办理读者证。 |
|
||||
</view> |
|
||||
</view> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
const TOKEN_KEY = 'token'; |
|
||||
const USER_KEY = 'user-info'; |
|
||||
|
|
||||
export default { |
|
||||
data() { |
|
||||
return { |
|
||||
cardNo: '', |
|
||||
password: '', |
|
||||
showPwd: false, |
|
||||
payScore: null, // 微信支付分 |
|
||||
serviceId: '你的支付分service_id' // 微信支付分后台获取 |
|
||||
} |
|
||||
}, |
|
||||
onLoad() { |
|
||||
// 页面加载可自动查支付分（也可用户点击） |
|
||||
// this.getPayScore() |
|
||||
}, |
|
||||
methods: { |
|
||||
togglePwd() { |
|
||||
this.showPwd = !this.showPwd |
|
||||
}, |
|
||||
|
|
||||
// 1. 获取微信支付分（核心） |
|
||||
async getPayScore() { |
|
||||
const _this = this |
|
||||
uni.showLoading({ title: '获取支付分中...' }) |
|
||||
|
|
||||
// 1) 后端获取支付分授权参数（必须后端签名） |
|
||||
uni.request({ |
|
||||
url: 'https://你的后端.com/api/pay-score/auth', |
|
||||
method: 'POST', |
|
||||
data: { |
|
||||
openid: uni.getStorageSync('wxSignature') || '', // 用户openid |
|
||||
service_id: this.serviceId |
|
||||
}, |
|
||||
success: (res) => { |
|
||||
if (res.data.code !== 200) { |
|
||||
uni.showToast({ title: res.data.msg || '获取失败', icon: 'none' }) |
|
||||
return |
|
||||
} |
|
||||
const { package: packageStr, out_order_no } = res.data.data |
|
||||
|
|
||||
// 2) 前端拉起支付分授权（微信原生API） |
|
||||
uni.requestPayment({ |
|
||||
provider: 'wxpay', |
|
||||
type: 'payScore', |
|
||||
timeStamp: String(Date.now()), |
|
||||
package: packageStr, |
|
||||
// 以下由后端返回 |
|
||||
signType: 'HMAC-SHA256', |
|
||||
paySign: res.data.data.paySign, |
|
||||
nonceStr: res.data.data.nonceStr, |
|
||||
|
|
||||
success: () => { |
|
||||
// 3) 授权成功 → 查询分数 |
|
||||
_this.queryPayScore(out_order_no) |
|
||||
}, |
|
||||
fail: (err) => { |
|
||||
console.log('支付分授权失败', err) |
|
||||
uni.showToast({ title: '授权取消或失败', icon: 'none' }) |
|
||||
}, |
|
||||
complete: () => { |
|
||||
uni.hideLoading() |
|
||||
} |
|
||||
}) |
|
||||
}, |
|
||||
fail: () => { |
|
||||
uni.hideLoading() |
|
||||
uni.showToast({ title: '网络异常', icon: 'none' }) |
|
||||
} |
|
||||
}) |
|
||||
}, |
|
||||
|
|
||||
// 2. 查询支付分分数（后端接口） |
|
||||
async queryPayScore(outOrderNo) { |
|
||||
uni.showLoading({ title: '查询分数...' }) |
|
||||
uni.request({ |
|
||||
url: 'https://你的后端.com/api/pay-score/query', |
|
||||
method: 'POST', |
|
||||
data: { out_order_no: outOrderNo }, |
|
||||
success: (res) => { |
|
||||
uni.hideLoading() |
|
||||
if (res.data.code === 200) { |
|
||||
this.payScore = res.data.data.score // 例如 680 |
|
||||
} else { |
|
||||
uni.showToast({ title: '查询失败', icon: 'none' }) |
|
||||
} |
|
||||
}, |
|
||||
fail: () => { |
|
||||
uni.hideLoading() |
|
||||
uni.showToast({ title: '查询失败', icon: 'none' }) |
|
||||
} |
|
||||
}) |
|
||||
}, |
|
||||
|
|
||||
// 3. 原绑定逻辑（增加支付分判断） |
|
||||
async submit() { |
|
||||
// 先判断支付分 |
|
||||
if (!this.payScore || this.payScore < 550) { |
|
||||
uni.showToast({ title: '支付分不足550，无法办证', icon: 'none' }) |
|
||||
return |
|
||||
} |
|
||||
if (!this.cardNo || !this.password) { |
|
||||
uni.showToast({ title: '请输入读者证号和密码', icon: 'none' }) |
|
||||
return |
|
||||
} |
|
||||
|
|
||||
// 以下为原登录逻辑（略） |
|
||||
uni.showLoading({ title: '绑定中...' }) |
|
||||
setTimeout(() => { |
|
||||
const res = { |
|
||||
token: 'login-token-' + Date.now(), |
|
||||
user: { |
|
||||
nickName: '读者', |
|
||||
cardNo: this.cardNo, |
|
||||
payScore: this.payScore // 可一并保存 |
|
||||
} |
|
||||
} |
|
||||
uni.setStorageSync(TOKEN_KEY, res.token) |
|
||||
uni.setStorageSync(USER_KEY, res.user) |
|
||||
uni.hideLoading() |
|
||||
uni.showToast({ title: '绑定成功', icon: 'success' }) |
|
||||
uni.navigateBack() |
|
||||
}, 800) |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
.page { |
|
||||
padding: 40px 20px; |
|
||||
} |
|
||||
.form-box { |
|
||||
padding: 20px; |
|
||||
.item { |
|
||||
width: 100%; |
|
||||
min-height: 42px; |
|
||||
border-radius: 23px; |
|
||||
background-color: #f7f7f7; |
|
||||
border: 1px solid #f4f4f4; |
|
||||
display: flex; |
|
||||
flex-direction: row; |
|
||||
align-items: center; |
|
||||
justify-content: flex-start; |
|
||||
margin-bottom: 20px; |
|
||||
overflow: hidden; |
|
||||
.t-right-icon{ |
|
||||
margin-right: 15px; |
|
||||
margin-left: 0; |
|
||||
} |
|
||||
.input { |
|
||||
flex: 1; |
|
||||
border-radius: 8px; |
|
||||
padding: 12px 15px; |
|
||||
font-size: 13px; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
|
|
||||
.login-btn { |
|
||||
margin-top: 20px; |
|
||||
background-color: #01a4fe; |
|
||||
border-radius: 23px; |
|
||||
} |
|
||||
.tips { |
|
||||
margin: 50px 30px; |
|
||||
font-size: 11px; |
|
||||
color: #000; |
|
||||
line-height: 22px; |
|
||||
} |
|
||||
.form-icon { |
|
||||
::v-deep .uni-icons{ |
|
||||
margin-left: 10px; |
|
||||
color: #01a4fe !important; |
|
||||
} |
|
||||
} |
|
||||
.form-right-icon{ |
|
||||
::v-deep .uni-icons{ |
|
||||
margin-right: 10px; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
/* 新增支付分样式 */ |
|
||||
.pay-score-box { |
|
||||
padding: 20px; |
|
||||
margin: 10px 20px; |
|
||||
background: #f7f9ff; |
|
||||
border-radius: 12px; |
|
||||
} |
|
||||
.score-item { |
|
||||
display: flex; |
|
||||
align-items: center; |
|
||||
margin-bottom: 8px; |
|
||||
} |
|
||||
.score-text { |
|
||||
margin-left: 10px; |
|
||||
font-size: 15px; |
|
||||
} |
|
||||
.score-desc { |
|
||||
font-size: 13px; |
|
||||
padding-left: 34px; |
|
||||
} |
|
||||
.auth-box { |
|
||||
padding: 40px 20px; |
|
||||
text-align: center; |
|
||||
} |
|
||||
.auth-btn { |
|
||||
background: #01a4fe; |
|
||||
color: #fff; |
|
||||
border-radius: 23px; |
|
||||
padding: 12px 30px; |
|
||||
border: none; |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,157 +0,0 @@ |
|||||
<template> |
|
||||
<view class="activity-list"> |
|
||||
<!-- 下拉刷新区域 --> |
|
||||
<scroll-view |
|
||||
scroll-y |
|
||||
refresher-enabled |
|
||||
:refresher-triggered="refreshing" |
|
||||
@refresherrefresh="onRefresh" |
|
||||
@scrolltolower="onLoadMore" |
|
||||
lower-threshold="100" |
|
||||
> |
|
||||
<view class="activity-item" v-for="(item, index) in activityList" @click="toActivityDetail(item)" :key="index"> |
|
||||
<image class="activity-img" :src="item.imgUrl"></image> |
|
||||
<view class="activity-info"> |
|
||||
<view class="activity-info-left"> |
|
||||
<text class="title">{{ item.title }}</text> |
|
||||
<view class="time"> |
|
||||
<uni-icons class="time-icon" custom-prefix="iconfont" type="icon-shijian" size="15"></uni-icons> |
|
||||
<text>{{ item.time }}</text> |
|
||||
</view> |
|
||||
</view> |
|
||||
<button |
|
||||
class="activity-btn" |
|
||||
:class="item.status === 0 ? 'disabled-btn' : ''" |
|
||||
type="primary" |
|
||||
:disabled="item.status === 0" |
|
||||
> |
|
||||
{{ item.status === 1 ? '立即参加' : '活动结束' }} |
|
||||
</button> |
|
||||
</view> |
|
||||
</view> |
|
||||
|
|
||||
<!-- 加载提示 --> |
|
||||
<view class="load-tip" v-if="loading"> |
|
||||
<text>加载中...</text> |
|
||||
</view> |
|
||||
<view class="load-tip" v-if="noMore"> |
|
||||
<text>没有更多数据了</text> |
|
||||
</view> |
|
||||
</scroll-view> |
|
||||
</view> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
export default { |
|
||||
data() { |
|
||||
return { |
|
||||
activityList: [], // 活动列表数据 |
|
||||
refreshing: false, // 下拉刷新状态 |
|
||||
loading: false, // 加载中 |
|
||||
noMore: false, // 是否没有更多数据 |
|
||||
page: 1, // 当前页码 |
|
||||
pageSize: 5, // 每页条数 |
|
||||
total: 20, // 模拟总数据量 |
|
||||
}; |
|
||||
}, |
|
||||
onLoad() { |
|
||||
// 页面加载时获取第一页数据 |
|
||||
this.getActivityList(); |
|
||||
}, |
|
||||
methods: { |
|
||||
/** |
|
||||
* 模拟请求活动列表接口 |
|
||||
* @param {Number} page 页码 |
|
||||
* @param {Number} pageSize 每页条数 |
|
||||
*/ |
|
||||
getActivityList() { |
|
||||
this.loading = true; |
|
||||
|
|
||||
// 模拟网络请求延迟 |
|
||||
setTimeout(() => { |
|
||||
// 生成模拟数据 |
|
||||
const list = this.mockData(this.page, this.pageSize); |
|
||||
|
|
||||
// 下拉刷新：直接替换数据 |
|
||||
if (this.refreshing) { |
|
||||
this.activityList = list; |
|
||||
this.refreshing = false; |
|
||||
} else { |
|
||||
// 上拉加载：追加数据 |
|
||||
this.activityList = [...this.activityList, ...list]; |
|
||||
} |
|
||||
|
|
||||
// 判断是否还有更多数据 |
|
||||
if (this.activityList.length >= this.total) { |
|
||||
this.noMore = true; |
|
||||
} else { |
|
||||
this.noMore = false; |
|
||||
} |
|
||||
|
|
||||
this.loading = false; |
|
||||
}, 1000); |
|
||||
}, |
|
||||
|
|
||||
/** |
|
||||
* 模拟生成活动数据 |
|
||||
*/ |
|
||||
mockData(page, pageSize) { |
|
||||
let arr = []; |
|
||||
for (let i = 0; i < pageSize; i++) { |
|
||||
const num = (page - 1) * pageSize + i + 1; |
|
||||
arr.push({ |
|
||||
imgUrl: "https://qiniu.aiyxlib.com/1605060269830", |
|
||||
title: `活动标题${num}`, |
|
||||
time: "2025-11-03 00:00 ~2025-11-09 00:00", |
|
||||
status: num % 3 === 0 ? 0 : 1, // 0=结束 1=可参加 |
|
||||
}); |
|
||||
} |
|
||||
return arr; |
|
||||
}, |
|
||||
|
|
||||
/** |
|
||||
* 下拉刷新 |
|
||||
*/ |
|
||||
onRefresh() { |
|
||||
// 重置状态 |
|
||||
this.page = 1; |
|
||||
this.noMore = false; |
|
||||
this.refreshing = true; |
|
||||
this.getActivityList(); |
|
||||
}, |
|
||||
|
|
||||
/** |
|
||||
* 上拉加载更多 |
|
||||
*/ |
|
||||
onLoadMore() { |
|
||||
if (this.loading || this.noMore) return; |
|
||||
this.page++; |
|
||||
this.getActivityList(); |
|
||||
}, |
|
||||
toActivityDetail(item){ |
|
||||
uni.navigateTo({ |
|
||||
url: "/subpkg/pages/activity-detail/activity-detail?title=" + item.title |
|
||||
}) |
|
||||
} |
|
||||
}, |
|
||||
}; |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
.activity-list { |
|
||||
padding: 20px; |
|
||||
height: 100vh; |
|
||||
box-sizing: border-box; |
|
||||
} |
|
||||
|
|
||||
scroll-view { |
|
||||
height: 100%; |
|
||||
} |
|
||||
|
|
||||
.load-tip { |
|
||||
text-align: center; |
|
||||
padding: 20px; |
|
||||
color: #999; |
|
||||
font-size: 14px; |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,317 +0,0 @@ |
|||||
<template> |
|
||||
<view class="collection-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 v-for="(tabItem, idx) in tabData" :key="idx"> |
|
||||
<view class="list-wrapper"> |
|
||||
<!-- 加载中 --> |
|
||||
<uni-load-more status="loading" v-if="loadingMap[tabItem.status]" /> |
|
||||
|
|
||||
<!-- 空数据 --> |
|
||||
<view class="empty" v-else-if="!listData[tabItem.status] || listData[tabItem.status].length === 0"> |
|
||||
暂无{{ tabItem.label }}收藏 |
|
||||
</view> |
|
||||
|
|
||||
<!-- 列表 --> |
|
||||
<block v-else> |
|
||||
<!-- 图书收藏 --> |
|
||||
<view class="recommendation-list"> |
|
||||
<view |
|
||||
class="book-item" |
|
||||
v-for="(item, index) in listData.book" |
|
||||
:key="index" |
|
||||
@click="goToBookDetail(item)" |
|
||||
v-if="tabItem.status === 'book'" |
|
||||
> |
|
||||
<image class="book-cover" :src="item.cover"></image> |
|
||||
<view class="book-title">{{ item.title }}</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
|
|
||||
<!-- 活动收藏 --> |
|
||||
<view |
|
||||
class="activity-item" |
|
||||
v-for="(item, index) in listData.activity" |
|
||||
:key="index" |
|
||||
@click="toActivityDetail(item)" |
|
||||
v-if="tabItem.status === 'activity'" |
|
||||
> |
|
||||
<image class="activity-img" :src="item.imgUrl"></image> |
|
||||
<view class="activity-info"> |
|
||||
<view class="activity-info-left"> |
|
||||
<text class="title">{{ item.title }}</text> |
|
||||
<view class="time"> |
|
||||
<uni-icons class="time-icon" custom-prefix="iconfont" type="time" size="15"></uni-icons> |
|
||||
<text>{{ item.time }}</text> |
|
||||
</view> |
|
||||
</view> |
|
||||
<button |
|
||||
class="activity-btn" |
|
||||
:class="item.status === 0 ? 'disabled-btn' : ''" |
|
||||
type="primary" |
|
||||
:disabled="item.status === 0" |
|
||||
> |
|
||||
{{ item.status === 1 ? '立即参加' : '活动结束' }} |
|
||||
</button> |
|
||||
</view> |
|
||||
</view> |
|
||||
</block> |
|
||||
|
|
||||
<!-- 加载更多 --> |
|
||||
<uni-load-more |
|
||||
v-if="listData[tabItem.status] && listData[tabItem.status].length > 0 && !loadingMap[tabItem.status]" |
|
||||
:status="loadMoreStatusMap[tabItem.status]" |
|
||||
/> |
|
||||
</view> |
|
||||
</swiper-item> |
|
||||
</swiper> |
|
||||
</view> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import myTabs from "@/components/my-tabs/my-tabs.vue"; |
|
||||
|
|
||||
export default { |
|
||||
components: { myTabs }, |
|
||||
data() { |
|
||||
return { |
|
||||
tabData: [ |
|
||||
{ label: "图书收藏", status: "book" }, |
|
||||
{ label: "活动收藏", status: "activity" }, |
|
||||
], |
|
||||
currentIndex: 0, |
|
||||
|
|
||||
// 数据结构完全和借阅页一致 |
|
||||
listData: {}, |
|
||||
loadingMap: {}, |
|
||||
loadMoreStatusMap: {}, |
|
||||
pageMap: {}, |
|
||||
sizeMap: {}, |
|
||||
hasMoreMap: {}, |
|
||||
|
|
||||
swiperHeightData: {}, |
|
||||
currentSwiperHeight: 400, |
|
||||
currentPageScrollTop: 0, |
|
||||
isRefreshing: false, |
|
||||
}; |
|
||||
}, |
|
||||
|
|
||||
onLoad() { |
|
||||
this.initDataStructure(); |
|
||||
const firstTab = this.getCurrentTab(); |
|
||||
this.getListData(firstTab.status); |
|
||||
}, |
|
||||
|
|
||||
onShow() { |
|
||||
const tabIndex = uni.getStorageSync("switch_tab_index"); |
|
||||
if (tabIndex !== "") { |
|
||||
this.currentIndex = Number(tabIndex); |
|
||||
const currentTab = this.getCurrentTab(); |
|
||||
this.getListData(currentTab.status); |
|
||||
uni.removeStorageSync("switch_tab_index"); |
|
||||
} |
|
||||
}, |
|
||||
|
|
||||
onPullDownRefresh() { |
|
||||
this.isRefreshing = true; |
|
||||
const currentTab = this.getCurrentTab(); |
|
||||
this.refreshList(currentTab.status); |
|
||||
}, |
|
||||
|
|
||||
onReachBottom() { |
|
||||
const currentTab = this.getCurrentTab(); |
|
||||
this.loadMoreList(currentTab.status); |
|
||||
}, |
|
||||
|
|
||||
onPageScroll(res) { |
|
||||
this.currentPageScrollTop = res.scrollTop; |
|
||||
}, |
|
||||
|
|
||||
methods: { |
|
||||
initDataStructure() { |
|
||||
this.tabData.forEach((tab) => { |
|
||||
const key = tab.status; |
|
||||
this.$set(this.listData, key, []); |
|
||||
this.$set(this.loadingMap, key, true); |
|
||||
this.$set(this.loadMoreStatusMap, key, ""); |
|
||||
this.$set(this.pageMap, key, 1); |
|
||||
this.$set(this.sizeMap, key, 10); |
|
||||
this.$set(this.hasMoreMap, key, true); |
|
||||
}); |
|
||||
}, |
|
||||
|
|
||||
getCurrentTab() { |
|
||||
return this.tabData[this.currentIndex]; |
|
||||
}, |
|
||||
|
|
||||
// 获取列表 |
|
||||
async getListData(statusKey, isRefresh = false) { |
|
||||
if (!isRefresh && this.listData[statusKey]?.length > 0) { |
|
||||
this.loadingMap[statusKey] = false; |
|
||||
return; |
|
||||
} |
|
||||
|
|
||||
this.loadingMap[statusKey] = true; |
|
||||
this.pageMap[statusKey] = 1; |
|
||||
|
|
||||
try { |
|
||||
const res = await this.getCollectData(statusKey); |
|
||||
this.listData[statusKey] = res; |
|
||||
this.hasMoreMap[statusKey] = res.length === this.sizeMap[statusKey]; |
|
||||
this.loadMoreStatusMap[statusKey] = this.hasMoreMap[statusKey] ? "" : "no-more"; |
|
||||
} catch (err) { |
|
||||
this.listData[statusKey] = []; |
|
||||
} finally { |
|
||||
this.loadingMap[statusKey] = false; |
|
||||
this.isRefreshing = false; |
|
||||
uni.stopPullDownRefresh(); |
|
||||
setTimeout(() => this.calcSwiperHeight(statusKey), 0); |
|
||||
} |
|
||||
}, |
|
||||
|
|
||||
// 加载更多 |
|
||||
async loadMoreList(statusKey) { |
|
||||
if (this.loadingMap[statusKey] || !this.hasMoreMap[statusKey] || this.isRefreshing) return; |
|
||||
|
|
||||
this.loadMoreStatusMap[statusKey] = "loading"; |
|
||||
this.pageMap[statusKey] += 1; |
|
||||
|
|
||||
try { |
|
||||
const newData = await this.getCollectData(statusKey); |
|
||||
if (newData.length > 0) { |
|
||||
this.listData[statusKey] = [...this.listData[statusKey], ...newData]; |
|
||||
this.hasMoreMap[statusKey] = newData.length === this.sizeMap[statusKey]; |
|
||||
this.loadMoreStatusMap[statusKey] = this.hasMoreMap[statusKey] ? "" : "no-more"; |
|
||||
} else { |
|
||||
this.hasMoreMap[statusKey] = false; |
|
||||
this.loadMoreStatusMap[statusKey] = "no-more"; |
|
||||
} |
|
||||
} catch (err) { |
|
||||
this.loadMoreStatusMap[statusKey] = ""; |
|
||||
} |
|
||||
setTimeout(() => this.calcSwiperHeight(statusKey), 0); |
|
||||
}, |
|
||||
|
|
||||
// 模拟接口（图书/活动收藏） |
|
||||
getCollectData(type) { |
|
||||
return new Promise((resolve) => { |
|
||||
setTimeout(() => { |
|
||||
if (type === "book") { |
|
||||
resolve([ |
|
||||
{ isbn: "1", title: "JavaScript高级程序设计", cover: "https://qiniu.aiyxlib.com/1606124577077" }, |
|
||||
{ isbn: "2", title: "Vue3实战", cover: "https://qiniu.aiyxlib.com/1606124577077" }, |
|
||||
{ isbn: "3", title: "深入理解计算机系统", cover: "https://qiniu.aiyxlib.com/1606124577077" }, |
|
||||
{ isbn: "1", title: "JavaScript高级程序设计", cover: "https://qiniu.aiyxlib.com/1606124577077" } |
|
||||
]); |
|
||||
} else { |
|
||||
resolve([ |
|
||||
{ imgUrl: "https://qiniu.aiyxlib.com/1605060269830", title: "读书分享会", time: "2025-11-03", status: 1 }, |
|
||||
{ imgUrl: "https://qiniu.aiyxlib.com/1605060269830", title: "作者见面会", time: "2025-10-01", status: 0 }, |
|
||||
]); |
|
||||
} |
|
||||
}, 300); |
|
||||
}); |
|
||||
}, |
|
||||
|
|
||||
refreshList(statusKey) { |
|
||||
this.getListData(statusKey, true); |
|
||||
}, |
|
||||
|
|
||||
// 计算swiper高度 |
|
||||
calcSwiperHeight(statusKey) { |
|
||||
const selector = statusKey === "book" ? ".book-item" : ".activity-item"; |
|
||||
const query = uni.createSelectorQuery().in(this); |
|
||||
query.selectAll(selector).boundingClientRect((res) => { |
|
||||
let total = 200; |
|
||||
if (res?.length) total = res.reduce((t, h) => t + h.height + 10, 0); |
|
||||
this.swiperHeightData[statusKey] = total; |
|
||||
this.currentSwiperHeight = total; |
|
||||
}).exec(); |
|
||||
}, |
|
||||
|
|
||||
tabClick(index) { |
|
||||
this.currentIndex = index; |
|
||||
const tab = this.getCurrentTab(); |
|
||||
if (this.currentPageScrollTop > 100) uni.pageScrollTo({ scrollTop: 0, duration: 100 }); |
|
||||
if (!this.listData[tab.status]?.length) this.getListData(tab.status); |
|
||||
else this.currentSwiperHeight = this.swiperHeightData[tab.status] || 400; |
|
||||
}, |
|
||||
|
|
||||
onSwiperChange(e) { |
|
||||
if (e.detail.source === "touch") this.currentIndex = e.detail.current; |
|
||||
}, |
|
||||
|
|
||||
onSwiperEnd() { |
|
||||
const tab = this.getCurrentTab(); |
|
||||
if (!this.listData[tab.status]?.length) this.getListData(tab.status); |
|
||||
else this.currentSwiperHeight = this.swiperHeightData[tab.status] || 400; |
|
||||
}, |
|
||||
|
|
||||
goToBookDetail(item) { |
|
||||
uni.navigateTo({ url: `/subpkg/pages/book-detail/book-detail?isbn=${item.isbn}` }); |
|
||||
}, |
|
||||
|
|
||||
toActivityDetail(item) { |
|
||||
uni.navigateTo({ url: `/subpkg/pages/activity-detail/activity-detail?title=${item.title}` }); |
|
||||
}, |
|
||||
}, |
|
||||
}; |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
.collection-container { |
|
||||
background-color: #f5f5f5; |
|
||||
min-height: 100vh; |
|
||||
|
|
||||
.tab-sticky { |
|
||||
position: sticky; |
|
||||
top: 0; |
|
||||
z-index: 99; |
|
||||
background: #fff; |
|
||||
} |
|
||||
|
|
||||
.swiper { |
|
||||
width: 100%; |
|
||||
min-height: 300px; |
|
||||
} |
|
||||
|
|
||||
.list-wrapper { |
|
||||
padding: 10px; |
|
||||
} |
|
||||
|
|
||||
.empty { |
|
||||
text-align: center; |
|
||||
padding: 100px 0; |
|
||||
color: #999; |
|
||||
font-size: 14px; |
|
||||
} |
|
||||
.recommendation-list{ |
|
||||
flex-wrap: wrap; |
|
||||
justify-content: flex-start; |
|
||||
.book-item { |
|
||||
margin-bottom: 16px; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
} |
|
||||
|
|
||||
::v-deep .uni-load-more { |
|
||||
height: auto !important; |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,335 +0,0 @@ |
|||||
<template> |
|
||||
<view class="lending-container"> |
|
||||
<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 v-for="(tabItem, idx) in tabData" :key="idx"> |
|
||||
<view class="list-wrapper"> |
|
||||
<!-- 首次加载 --> |
|
||||
<uni-load-more status="loading" v-if="loadingMap[tabItem.status]" /> |
|
||||
|
|
||||
<!-- 空数据 --> |
|
||||
<view class="empty" v-else-if="!listData[tabItem.status] || listData[tabItem.status].length === 0"> |
|
||||
暂无{{ tabItem.label }}记录 |
|
||||
</view> |
|
||||
|
|
||||
<!-- 列表 --> |
|
||||
<block v-else> |
|
||||
<lending-list-item |
|
||||
:class="'list-item-' + tabItem.status" |
|
||||
v-for="(item, index) in listData[tabItem.status]" |
|
||||
:key="index" |
|
||||
:data="item" |
|
||||
:ranking="index + 1" |
|
||||
/> |
|
||||
</block> |
|
||||
|
|
||||
<!-- 上拉加载更多 --> |
|
||||
<uni-load-more |
|
||||
v-if="listData[tabItem.status] && listData[tabItem.status].length > 0 && !loadingMap[tabItem.status]" |
|
||||
:status="loadMoreStatusMap[tabItem.status]" |
|
||||
/> |
|
||||
</view> |
|
||||
</swiper-item> |
|
||||
</swiper> |
|
||||
</view> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import { FetchInitScreenSetting } from '@/api/user'; |
|
||||
import { FetchHistoryloan, FetchRdloanlist } from '@/api/book'; |
|
||||
import myTabs from "@/components/my-tabs/my-tabs.vue"; |
|
||||
import lendingListItem from "@/components/lending-list-item/lending-list-item.vue"; |
|
||||
|
|
||||
export default { |
|
||||
components: { myTabs, lendingListItem }, |
|
||||
data() { |
|
||||
return { |
|
||||
screenConfig: {}, |
|
||||
tabData: [ |
|
||||
{ label: "全部", status: "all", apiStatus: -1 }, |
|
||||
{ label: "在借中", status: "lending", apiStatus: 0 }, |
|
||||
// { label: "将过期", status: "expiring", apiStatus: 1 }, |
|
||||
// { label: "已过期", status: "expired", apiStatus: 2 }, |
|
||||
], |
|
||||
currentIndex: 0, |
|
||||
listData: {}, |
|
||||
loadingMap: {}, |
|
||||
loadMoreStatusMap: {}, |
|
||||
pageMap: {}, |
|
||||
sizeMap: {}, |
|
||||
hasMoreMap: {}, |
|
||||
|
|
||||
swiperHeightData: {}, |
|
||||
currentSwiperHeight: 400, |
|
||||
currentPageScrollTop: 0, |
|
||||
isRefreshing: false |
|
||||
}; |
|
||||
}, |
|
||||
|
|
||||
onLoad() { |
|
||||
this.getScreenSetting(); |
|
||||
this.initDataStructure(); |
|
||||
}, |
|
||||
|
|
||||
onShow() { |
|
||||
const tabIndex = uni.getStorageSync('switch_tab_index'); |
|
||||
if (tabIndex !== undefined && tabIndex !== '') { |
|
||||
this.currentIndex = Number(tabIndex); |
|
||||
uni.removeStorageSync('switch_tab_index'); |
|
||||
} |
|
||||
}, |
|
||||
|
|
||||
onPullDownRefresh() { |
|
||||
this.isRefreshing = true; |
|
||||
const currentTab = this.getCurrentTab(); |
|
||||
this.refreshList(currentTab.status); |
|
||||
}, |
|
||||
|
|
||||
onReachBottom() { |
|
||||
const currentTab = this.getCurrentTab(); |
|
||||
this.loadMoreList(currentTab.status); |
|
||||
}, |
|
||||
|
|
||||
onPageScroll(res) { |
|
||||
this.currentPageScrollTop = res.scrollTop; |
|
||||
}, |
|
||||
|
|
||||
methods: { |
|
||||
async getScreenSetting() { |
|
||||
try { |
|
||||
const res = await FetchInitScreenSetting({ libcode: '1201' }); |
|
||||
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 || '' |
|
||||
}; |
|
||||
} catch (err) { |
|
||||
console.error('获取配置失败：', err); |
|
||||
} |
|
||||
}, |
|
||||
|
|
||||
// 获取 在借中 列表（字段已对齐） |
|
||||
async getRealBorrowList(statusKey) { |
|
||||
this.loadingMap[statusKey] = true; |
|
||||
try { |
|
||||
const rdid = uni.getStorageSync('currentReaderCard'); |
|
||||
const params = { ...this.screenConfig, rdid }; |
|
||||
const res = await FetchRdloanlist(params); |
|
||||
|
|
||||
const result = typeof res.data === 'string' ? JSON.parse(res.data) : res.data; |
|
||||
let loanList = result.loanlist || []; |
|
||||
|
|
||||
// 对齐字段：loandate → loantime，returndate → returntime |
|
||||
loanList = loanList.map(item => { |
|
||||
const loantime = item.loandate || ''; |
|
||||
const returntime = item.returndate || ''; |
|
||||
|
|
||||
const now = new Date(); |
|
||||
const returnDate = new Date(returntime); |
|
||||
const diffDay = Math.ceil((returnDate - now) / (1000 * 3600 * 24)); |
|
||||
|
|
||||
let returnBook = 0; |
|
||||
if (diffDay < 0) { |
|
||||
returnBook = 3; |
|
||||
} else if (diffDay <= 3) { |
|
||||
returnBook = 1; |
|
||||
} else { |
|
||||
returnBook = 0; |
|
||||
} |
|
||||
|
|
||||
return { |
|
||||
...item, |
|
||||
loantime, |
|
||||
returntime, |
|
||||
startTime: loantime, |
|
||||
returnTime: returntime, |
|
||||
returnBook |
|
||||
}; |
|
||||
}); |
|
||||
console.log('当前借阅', loanList); |
|
||||
this.listData['lending'] = loanList; |
|
||||
this.listData['expiring'] = loanList.filter(i => i.returnBook === 1); |
|
||||
this.listData['expired'] = loanList.filter(i => i.returnBook === 3); |
|
||||
|
|
||||
this.hasMoreMap[statusKey] = false; |
|
||||
this.loadMoreStatusMap[statusKey] = "no-more"; |
|
||||
|
|
||||
} catch (err) { |
|
||||
console.error('获取在借列表失败', err); |
|
||||
this.listData[statusKey] = []; |
|
||||
} finally { |
|
||||
this.loadingMap[statusKey] = false; |
|
||||
this.isRefreshing = false; |
|
||||
uni.stopPullDownRefresh(); |
|
||||
setTimeout(() => this.calcSwiperHeight(statusKey), 0); |
|
||||
} |
|
||||
}, |
|
||||
|
|
||||
// 获取 全部/历史 列表 |
|
||||
async getHistoryList(statusKey) { |
|
||||
this.loadingMap[statusKey] = true; |
|
||||
try { |
|
||||
const rdid = uni.getStorageSync('currentReaderCard'); |
|
||||
const params = { ...this.screenConfig, rdid, logtype:'30002' }; |
|
||||
const res = await FetchHistoryloan(params); |
|
||||
|
|
||||
const result = typeof res.data === 'string' ? JSON.parse(res.data) : res.data; |
|
||||
let loanList = result.hloanlist || []; |
|
||||
|
|
||||
loanList = loanList.map(item => { |
|
||||
return { |
|
||||
...item, |
|
||||
returnTime: item.returntime || '', |
|
||||
startTime: item.loantime || item.optime || '', |
|
||||
returnBook: 2 |
|
||||
}; |
|
||||
}); |
|
||||
console.log('历史借阅', loanList); |
|
||||
this.listData[statusKey] = loanList; |
|
||||
this.hasMoreMap[statusKey] = false; |
|
||||
this.loadMoreStatusMap[statusKey] = "no-more"; |
|
||||
|
|
||||
} catch (err) { |
|
||||
console.error('获取历史列表失败', err); |
|
||||
this.listData[statusKey] = []; |
|
||||
} finally { |
|
||||
this.loadingMap[statusKey] = false; |
|
||||
this.isRefreshing = false; |
|
||||
uni.stopPullDownRefresh(); |
|
||||
setTimeout(() => this.calcSwiperHeight(statusKey), 0); |
|
||||
} |
|
||||
}, |
|
||||
|
|
||||
initDataStructure() { |
|
||||
this.tabData.forEach(tab => { |
|
||||
const key = tab.status; |
|
||||
this.$set(this.listData, key, []); |
|
||||
this.$set(this.loadingMap, key, true); |
|
||||
this.$set(this.loadMoreStatusMap, key, ""); |
|
||||
this.$set(this.pageMap, key, 1); |
|
||||
this.$set(this.sizeMap, key, 10); |
|
||||
this.$set(this.hasMoreMap, key, true); |
|
||||
}); |
|
||||
}, |
|
||||
|
|
||||
getCurrentTab() { |
|
||||
return this.tabData[this.currentIndex]; |
|
||||
}, |
|
||||
|
|
||||
async getListData(statusKey) { |
|
||||
if (statusKey === 'all') { |
|
||||
await this.getHistoryList(statusKey); |
|
||||
} |
|
||||
if (statusKey === 'lending') { |
|
||||
await this.getRealBorrowList(statusKey); |
|
||||
} |
|
||||
if (statusKey === 'expiring' || statusKey === 'expired') { |
|
||||
await this.getRealBorrowList('lending'); |
|
||||
this.loadingMap[statusKey] = false; |
|
||||
} |
|
||||
}, |
|
||||
|
|
||||
loadMoreList(statusKey) { |
|
||||
this.loadMoreStatusMap[statusKey] = "no-more"; |
|
||||
}, |
|
||||
|
|
||||
refreshList(statusKey) { |
|
||||
this.getListData(statusKey); |
|
||||
}, |
|
||||
|
|
||||
calcSwiperHeight(statusKey) { |
|
||||
const selector = `.list-item-${statusKey}`; |
|
||||
const query = uni.createSelectorQuery().in(this); |
|
||||
query.selectAll(selector).boundingClientRect((res) => { |
|
||||
let total = 200; |
|
||||
if (res?.length) { |
|
||||
total = res.reduce((t, h) => t + h.height + 8, 0); |
|
||||
} |
|
||||
this.swiperHeightData[statusKey] = total; |
|
||||
this.currentSwiperHeight = total; |
|
||||
}).exec(); |
|
||||
}, |
|
||||
|
|
||||
tabClick(index) { |
|
||||
this.currentIndex = index; |
|
||||
const tab = this.getCurrentTab(); |
|
||||
if (this.currentPageScrollTop > 100) { |
|
||||
uni.pageScrollTo({ scrollTop: 0, duration: 100 }); |
|
||||
} |
|
||||
this.getListData(tab.status); |
|
||||
}, |
|
||||
|
|
||||
onSwiperChange(e) { |
|
||||
if (e.detail.source === "touch") { |
|
||||
this.currentIndex = e.detail.current; |
|
||||
} |
|
||||
}, |
|
||||
|
|
||||
onSwiperEnd() { |
|
||||
const tab = this.getCurrentTab(); |
|
||||
this.getListData(tab.status); |
|
||||
}, |
|
||||
|
|
||||
goToDetail(item) { |
|
||||
uni.navigateTo({ |
|
||||
url: `/subpkg/pages/book-detail/book-detail?isbn=${item.isbn}` |
|
||||
}); |
|
||||
} |
|
||||
} |
|
||||
}; |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
.lending-container { |
|
||||
background-color: #f5f5f5; |
|
||||
min-height: 100vh; |
|
||||
|
|
||||
.tab-sticky { |
|
||||
position: sticky; |
|
||||
top: 0; |
|
||||
z-index: 99; |
|
||||
background: #fff; |
|
||||
} |
|
||||
|
|
||||
.swiper { |
|
||||
width: 100%; |
|
||||
min-height: 300px; |
|
||||
} |
|
||||
|
|
||||
.swiper-item { |
|
||||
width: 100%; |
|
||||
height: 100%; |
|
||||
} |
|
||||
|
|
||||
.list-wrapper { |
|
||||
padding: 10px; |
|
||||
box-sizing: border-box; |
|
||||
} |
|
||||
|
|
||||
.empty { |
|
||||
text-align: center; |
|
||||
padding: 100px 0; |
|
||||
color: #999; |
|
||||
font-size: 14px; |
|
||||
} |
|
||||
} |
|
||||
::v-deep .uni-load-more{ |
|
||||
height: auto !important; |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,480 +0,0 @@ |
|||||
<template> |
|
||||
<view class="lending-container"> |
|
||||
<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 v-for="(tabItem, idx) in tabData" :key="idx"> |
|
||||
<view class="list-wrapper"> |
|
||||
<!-- 首次加载 --> |
|
||||
<uni-load-more status="loading" v-if="loadingMap[tabItem.status]" /> |
|
||||
|
|
||||
<!-- 空数据 --> |
|
||||
<view class="empty" v-else-if="!listData[tabItem.status] || listData[tabItem.status].length === 0"> |
|
||||
暂无{{ tabItem.label }}记录 |
|
||||
</view> |
|
||||
|
|
||||
<!-- 列表 --> |
|
||||
<block v-else> |
|
||||
<!-- @click="goToDetail(item)" --> |
|
||||
<lending-list-item |
|
||||
:class="'list-item-' + tabItem.status" |
|
||||
v-for="(item, index) in listData[tabItem.status]" |
|
||||
:key="index" |
|
||||
:data="item" |
|
||||
:ranking="index + 1" |
|
||||
/> |
|
||||
</block> |
|
||||
|
|
||||
<!-- 上拉加载更多 --> |
|
||||
<uni-load-more |
|
||||
v-if="listData[tabItem.status] && listData[tabItem.status].length > 0 && !loadingMap[tabItem.status]" |
|
||||
:status="loadMoreStatusMap[tabItem.status]" |
|
||||
/> |
|
||||
</view> |
|
||||
</swiper-item> |
|
||||
</swiper> |
|
||||
</view> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import myTabs from "@/components/my-tabs/my-tabs.vue"; |
|
||||
import lendingListItem from "@/components/lending-list-item/lending-list-item.vue"; |
|
||||
|
|
||||
export default { |
|
||||
components: { myTabs, lendingListItem }, |
|
||||
data() { |
|
||||
return { |
|
||||
tabData: [ |
|
||||
{ label: "全部", status: "all", apiStatus: -1 }, |
|
||||
{ label: "在借中", status: "lending", apiStatus: 0 }, |
|
||||
{ label: "将过期", status: "expiring", apiStatus: 1 }, |
|
||||
{ label: "已过期", status: "expired", apiStatus: 2 }, |
|
||||
], |
|
||||
currentIndex: 0, |
|
||||
listData: {}, |
|
||||
loadingMap: {}, // 首次加载/刷新 loading |
|
||||
loadMoreStatusMap: {}, // 加载更多状态：loading / no-more / "" |
|
||||
pageMap: {}, // 分页页码 |
|
||||
sizeMap: {}, // 每页条数 |
|
||||
hasMoreMap: {}, // 是否还有更多 |
|
||||
|
|
||||
swiperHeightData: {}, |
|
||||
currentSwiperHeight: 400, |
|
||||
currentPageScrollTop: 0, |
|
||||
isRefreshing: false // 是否正在下拉刷新 |
|
||||
}; |
|
||||
}, |
|
||||
|
|
||||
onLoad() { |
|
||||
this.initDataStructure(); |
|
||||
// 加载第一个tab的数据 |
|
||||
const firstTab = this.getCurrentTab(); |
|
||||
if (firstTab) { |
|
||||
this.loadingMap[firstTab.status] = true; |
|
||||
this.getListData(firstTab.status); |
|
||||
} |
|
||||
}, |
|
||||
|
|
||||
onShow() { |
|
||||
// 读取要切换的 tabIndex |
|
||||
const tabIndex = uni.getStorageSync('switch_tab_index'); |
|
||||
|
|
||||
if (tabIndex !== undefined && tabIndex !== '') { |
|
||||
this.currentIndex = Number(tabIndex); |
|
||||
|
|
||||
// 加载对应 tab 数据 |
|
||||
const currentTab = this.getCurrentTab(); |
|
||||
if (currentTab) { |
|
||||
this.loadingMap[currentTab.status] = true; |
|
||||
this.getListData(currentTab.status); |
|
||||
} |
|
||||
|
|
||||
// 用完清除，防止下次进来重复触发 |
|
||||
uni.removeStorageSync('switch_tab_index'); |
|
||||
} |
|
||||
}, |
|
||||
|
|
||||
// 下拉刷新 |
|
||||
onPullDownRefresh() { |
|
||||
this.isRefreshing = true; |
|
||||
const currentTab = this.getCurrentTab(); |
|
||||
this.refreshList(currentTab.status); |
|
||||
}, |
|
||||
|
|
||||
// 上拉加载更多 |
|
||||
onReachBottom() { |
|
||||
const currentTab = this.getCurrentTab(); |
|
||||
this.loadMoreList(currentTab.status); |
|
||||
}, |
|
||||
|
|
||||
onPageScroll(res) { |
|
||||
this.currentPageScrollTop = res.scrollTop; |
|
||||
}, |
|
||||
|
|
||||
methods: { |
|
||||
// 初始化所有状态 |
|
||||
initDataStructure() { |
|
||||
this.tabData.forEach(tab => { |
|
||||
const key = tab.status; |
|
||||
this.$set(this.listData, key, []); |
|
||||
this.$set(this.loadingMap, key, false); |
|
||||
this.$set(this.loadMoreStatusMap, key, ""); |
|
||||
this.$set(this.pageMap, key, 1); |
|
||||
// 在借中每页4条，其他tab每页10条 |
|
||||
this.$set(this.sizeMap, key, key === 'lending' ? 4 : 10); |
|
||||
this.$set(this.hasMoreMap, key, true); |
|
||||
}); |
|
||||
}, |
|
||||
|
|
||||
getCurrentTab() { |
|
||||
return this.tabData[this.currentIndex]; |
|
||||
}, |
|
||||
|
|
||||
// 处理借阅数据 |
|
||||
processBorrowData(list) { |
|
||||
return list.map(item => { |
|
||||
// 已归还 |
|
||||
if (item.realityTime) { |
|
||||
if (new Date(item.realityTime) <= new Date(item.returnTime)) { |
|
||||
item.returnBook = 2; // 准时归还 |
|
||||
} else { |
|
||||
item.returnBook = 3; // 逾期归还 |
|
||||
} |
|
||||
} else { |
|
||||
// 未归还 |
|
||||
const now = new Date(); |
|
||||
const returnDate = new Date(item.returnTime); |
|
||||
const diffDay = Math.ceil((returnDate - now) / (1000 * 3600 * 24)); |
|
||||
|
|
||||
if (diffDay < 0) { |
|
||||
// 1. 已逾期（应还时间 < 当前时间） |
|
||||
item.returnBook = 3; |
|
||||
}else if (diffDay <= 3) { |
|
||||
// 2. 临期（剩余 0~3 天） |
|
||||
item.returnBook = 1; |
|
||||
} else { |
|
||||
// 3. 正常在借 |
|
||||
item.returnBook = 0; |
|
||||
} |
|
||||
} |
|
||||
return item; |
|
||||
}); |
|
||||
}, |
|
||||
|
|
||||
// 获取列表（首次/刷新） |
|
||||
async getListData(statusKey, isRefresh = false) { |
|
||||
const tab = this.tabData.find(item => item.status === statusKey); |
|
||||
if (!tab) return; |
|
||||
|
|
||||
if (!isRefresh && this.listData[statusKey]?.length > 0) { |
|
||||
this.loadingMap[statusKey] = false; |
|
||||
return; |
|
||||
} |
|
||||
|
|
||||
this.loadingMap[statusKey] = true; |
|
||||
this.pageMap[statusKey] = 1; |
|
||||
|
|
||||
try { |
|
||||
const data = await this.fetchBorrowList(tab.apiStatus, this.pageMap[statusKey], this.sizeMap[statusKey]); |
|
||||
console.log('data',data) |
|
||||
|
|
||||
let list = data.records || []; |
|
||||
list = this.processBorrowData(list); |
|
||||
this.listData[statusKey] = list; |
|
||||
this.hasMoreMap[statusKey] = list.length === this.sizeMap[statusKey]; |
|
||||
this.loadMoreStatusMap[statusKey] = this.hasMoreMap[statusKey] ? "" : "no-more"; |
|
||||
|
|
||||
} catch (err) { |
|
||||
this.listData[statusKey] = []; |
|
||||
} finally { |
|
||||
this.loadingMap[statusKey] = false; |
|
||||
this.isRefreshing = false; |
|
||||
uni.stopPullDownRefresh(); |
|
||||
|
|
||||
this.$nextTick(() => { |
|
||||
this.calcSwiperHeight(statusKey); |
|
||||
}); |
|
||||
} |
|
||||
}, |
|
||||
|
|
||||
// 加载更多 |
|
||||
async loadMoreList(statusKey) { |
|
||||
if (this.loadingMap[statusKey] || !this.hasMoreMap[statusKey] || this.isRefreshing) return; |
|
||||
|
|
||||
this.loadMoreStatusMap[statusKey] = "loading"; |
|
||||
this.pageMap[statusKey] += 1; |
|
||||
|
|
||||
const tab = this.tabData.find(item => item.status === statusKey); |
|
||||
try { |
|
||||
const data = await this.fetchBorrowList(tab.apiStatus, this.pageMap[statusKey], this.sizeMap[statusKey]); |
|
||||
|
|
||||
let newList = data.records || []; |
|
||||
newList = this.processBorrowData(newList); |
|
||||
|
|
||||
if (newList.length > 0) { |
|
||||
this.listData[statusKey] = [...this.listData[statusKey], ...newList]; |
|
||||
this.hasMoreMap[statusKey] = newList.length === this.sizeMap[statusKey]; |
|
||||
this.loadMoreStatusMap[statusKey] = this.hasMoreMap[statusKey] ? "" : "no-more"; |
|
||||
} else { |
|
||||
this.hasMoreMap[statusKey] = false; |
|
||||
this.loadMoreStatusMap[statusKey] = "no-more"; |
|
||||
} |
|
||||
} catch (err) { |
|
||||
this.loadMoreStatusMap[statusKey] = ""; |
|
||||
} finally { |
|
||||
this.$nextTick(() => { |
|
||||
this.calcSwiperHeight(statusKey); |
|
||||
}); |
|
||||
} |
|
||||
}, |
|
||||
|
|
||||
// 下拉刷新 |
|
||||
refreshList(statusKey) { |
|
||||
this.getListData(statusKey, true); |
|
||||
}, |
|
||||
|
|
||||
// 模拟接口（带分页） |
|
||||
async fetchBorrowList(apiStatus, pageNum, pageSize) { |
|
||||
return new Promise((resolve) => { |
|
||||
setTimeout(() => { |
|
||||
const mock = this.getMockData(apiStatus, pageNum, pageSize); |
|
||||
resolve({ |
|
||||
records: mock, |
|
||||
total: mock.length * 3 |
|
||||
}); |
|
||||
}, 500); |
|
||||
}); |
|
||||
}, |
|
||||
|
|
||||
// 模拟分页数据 |
|
||||
getMockData(apiStatus, pageNum, pageSize) { |
|
||||
const base = [ |
|
||||
{ |
|
||||
imgCover: "https://qiniu.aiyxlib.com/1606124577077", |
|
||||
title: "名侦探柯南", |
|
||||
nickname: "青山刚昌", |
|
||||
publish: "长春出版社", |
|
||||
isbn: "1001", |
|
||||
desc: '精心提炼20种GPT提问方法及指令，从入门到进阶再到精通，100个。', |
|
||||
startTime: "2026-03-01", |
|
||||
returnTime: "2026-04-30", // 应还时间：还有10天左右 → 在借中 |
|
||||
realityTime: "" |
|
||||
}, |
|
||||
{ |
|
||||
imgCover: "https://qiniu.aiyxlib.com/1606124577077", |
|
||||
title: "三体", |
|
||||
nickname: "刘慈慈", |
|
||||
publish: "重庆出版社", |
|
||||
isbn: "1002", |
|
||||
desc: '精心提炼20种GPT提问方法及指令，从入门到进阶再到精通，100个。', |
|
||||
startTime: "2026-03-10", |
|
||||
returnTime: "2026-04-22", // 应还时间：剩2天 → 临期 |
|
||||
realityTime: "" |
|
||||
}, |
|
||||
{ |
|
||||
imgCover: "https://qiniu.aiyxlib.com/1606124577077", |
|
||||
title: "红楼梦", |
|
||||
nickname: "曹雪芹", |
|
||||
publish: "人民文学", |
|
||||
isbn: "1003", |
|
||||
desc: '精心提炼20种GPT提问方法及指令，从入门到进阶再到精通，100个。', |
|
||||
startTime: "2026-02-01", |
|
||||
returnTime: "2026-03-25", // 已过期 → 逾期 |
|
||||
realityTime: "" |
|
||||
}, |
|
||||
{ |
|
||||
imgCover: "https://qiniu.aiyxlib.com/1606124577077", |
|
||||
title: "西游记", |
|
||||
nickname: "吴承恩", |
|
||||
publish: "中华书局", |
|
||||
isbn: "1004", |
|
||||
desc: '精心提炼20种GPT提问方法及指令，从入门到进阶再到精通，100个。', |
|
||||
startTime: "2026-02-10", |
|
||||
returnTime: "2026-04-01", |
|
||||
realityTime: "2026-03-31" // 提前归还 → 准时 |
|
||||
}, |
|
||||
{ |
|
||||
imgCover: "https://qiniu.aiyxlib.com/1606124577077", |
|
||||
title: "水浒传", |
|
||||
nickname: "施耐庵", |
|
||||
publish: "人民文学出版社", |
|
||||
isbn: "1005", |
|
||||
desc: '精心提炼20种GPT提问方法及指令，从入门到进阶再到精通，100个。', |
|
||||
startTime: "2026-03-05", |
|
||||
returnTime: "2026-05-05", |
|
||||
realityTime: "" |
|
||||
}, |
|
||||
{ |
|
||||
imgCover: "https://qiniu.aiyxlib.com/1606124577077", |
|
||||
title: "三国演义", |
|
||||
nickname: "罗贯中", |
|
||||
publish: "人民文学出版社", |
|
||||
isbn: "1006", |
|
||||
desc: '精心提炼20种GPT提问方法及指令，从入门到进阶再到精通，100个。', |
|
||||
startTime: "2026-03-15", |
|
||||
returnTime: "2026-05-15", |
|
||||
realityTime: "" |
|
||||
}, |
|
||||
{ |
|
||||
imgCover: "https://qiniu.aiyxlib.com/1606124577077", |
|
||||
title: "活着", |
|
||||
nickname: "余华", |
|
||||
publish: "作家出版社", |
|
||||
isbn: "1007", |
|
||||
desc: '精心提炼20种GPT提问方法及指令，从入门到进阶再到精通，100个。', |
|
||||
startTime: "2026-03-20", |
|
||||
returnTime: "2026-05-20", |
|
||||
realityTime: "" |
|
||||
}, |
|
||||
{ |
|
||||
imgCover: "https://qiniu.aiyxlib.com/1606124577077", |
|
||||
title: "围城", |
|
||||
nickname: "钱钟书", |
|
||||
publish: "人民文学出版社", |
|
||||
isbn: "1008", |
|
||||
desc: '精心提炼20种GPT提问方法及指令，从入门到进阶再到精通，100个。', |
|
||||
startTime: "2026-03-25", |
|
||||
returnTime: "2026-05-25", |
|
||||
realityTime: "" |
|
||||
} |
|
||||
]; |
|
||||
|
|
||||
if (pageNum >= 4) { // 第4页开始返回空 |
|
||||
return []; |
|
||||
} |
|
||||
|
|
||||
// 为在借中tab生成更多数据 |
|
||||
let list = []; |
|
||||
if (apiStatus === 0) { // 在借中 |
|
||||
// 每页返回指定数量的数据 |
|
||||
const start = (pageNum - 1) * pageSize; |
|
||||
const end = start + pageSize; |
|
||||
for (let i = start; i < end; i++) { |
|
||||
const item = base[i % base.length]; |
|
||||
list.push({ ...item, isbn: item.isbn + pageNum + i }); |
|
||||
} |
|
||||
} else { |
|
||||
list = [...base]; |
|
||||
if (pageNum > 1) { |
|
||||
list.push(...base.map(item => ({ ...item, isbn: item.isbn + pageNum }))); |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
switch (apiStatus) { |
|
||||
case -1: return list; |
|
||||
case 0: return list; |
|
||||
case 1: return [list[0], list[1]]; |
|
||||
case 2: return []; |
|
||||
default: return []; |
|
||||
} |
|
||||
}, |
|
||||
|
|
||||
// 计算swiper高度 |
|
||||
calcSwiperHeight(statusKey) { |
|
||||
const selector = `.list-item-${statusKey}`; |
|
||||
const query = uni.createSelectorQuery().in(this); |
|
||||
query.selectAll(selector).boundingClientRect((res) => { |
|
||||
let total = 200; |
|
||||
if (res?.length) { |
|
||||
total = res.reduce((t, h) => t + h.height + 8, 0); |
|
||||
} |
|
||||
// 加上uni-load-more组件的高度 |
|
||||
total += 80; // 估算uni-load-more组件的高度 |
|
||||
this.swiperHeightData[statusKey] = total; |
|
||||
this.currentSwiperHeight = total; |
|
||||
}).exec(); |
|
||||
}, |
|
||||
|
|
||||
// tab切换 |
|
||||
tabClick(index) { |
|
||||
this.currentIndex = index; |
|
||||
const tab = this.getCurrentTab(); |
|
||||
|
|
||||
if (this.currentPageScrollTop > 100) { |
|
||||
uni.pageScrollTo({ scrollTop: 0, duration: 100 }); |
|
||||
} |
|
||||
|
|
||||
if (!this.listData[tab.status]?.length) { |
|
||||
this.loadingMap[tab.status] = true; |
|
||||
this.getListData(tab.status); |
|
||||
} else { |
|
||||
this.currentSwiperHeight = this.swiperHeightData[tab.status] || 400; |
|
||||
} |
|
||||
}, |
|
||||
|
|
||||
onSwiperChange(e) { |
|
||||
if (e.detail.source === "touch") { |
|
||||
this.currentIndex = e.detail.current; |
|
||||
} |
|
||||
}, |
|
||||
|
|
||||
onSwiperEnd() { |
|
||||
const tab = this.getCurrentTab(); |
|
||||
if (!this.listData[tab.status]?.length) { |
|
||||
this.loadingMap[tab.status] = true; |
|
||||
this.getListData(tab.status); |
|
||||
} else { |
|
||||
this.currentSwiperHeight = this.swiperHeightData[tab.status] || 400; |
|
||||
} |
|
||||
}, |
|
||||
|
|
||||
goToDetail(item) { |
|
||||
uni.navigateTo({ |
|
||||
url: `/subpkg/pages/book-detail/book-detail?isbn=${item.isbn}` |
|
||||
}); |
|
||||
} |
|
||||
} |
|
||||
}; |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
.lending-container { |
|
||||
background-color: #f5f5f5; |
|
||||
min-height: 100vh; |
|
||||
|
|
||||
.tab-sticky { |
|
||||
position: sticky; |
|
||||
top: 0; |
|
||||
z-index: 99; |
|
||||
background: #fff; |
|
||||
} |
|
||||
|
|
||||
.swiper { |
|
||||
width: 100%; |
|
||||
min-height: 300px; |
|
||||
} |
|
||||
|
|
||||
.swiper-item { |
|
||||
width: 100%; |
|
||||
height: 100%; |
|
||||
} |
|
||||
|
|
||||
.list-wrapper { |
|
||||
padding: 10px; |
|
||||
box-sizing: border-box; |
|
||||
} |
|
||||
|
|
||||
.empty { |
|
||||
text-align: center; |
|
||||
padding: 100px 0; |
|
||||
color: #999; |
|
||||
font-size: 14px; |
|
||||
} |
|
||||
} |
|
||||
::v-deep .uni-load-more{ |
|
||||
height: auto !important; |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,225 +0,0 @@ |
|||||
<template> |
|
||||
<view class="lending-container"> |
|
||||
<!-- Tabs 吸顶 --> |
|
||||
<view class="tab-sticky"> |
|
||||
<my-tabs |
|
||||
:tabData="tabData" |
|
||||
:defaultIndex="currentIndex" |
|
||||
:config="{ textColor: '#333' }" |
|
||||
@tabClick="tabClick" |
|
||||
/> |
|
||||
</view> |
|
||||
|
|
||||
<!-- Swiper 内容区 --> |
|
||||
<swiper |
|
||||
class="swiper" |
|
||||
:current="currentIndex" |
|
||||
:style="{ height: currentSwiperHeight + 'px' }" |
|
||||
@animationfinish="onSwiperEnd" |
|
||||
@change="onSwiperChange" |
|
||||
duration="300" |
|
||||
> |
|
||||
<swiper-item class="swiper-item" v-for="(tabItem, tabIndex) in tabData" :key="tabIndex"> |
|
||||
<view class="list-wrapper"> |
|
||||
<!-- 加载中 --> |
|
||||
<uni-load-more status="loading" v-if="loadingMap[tabIndex]" /> |
|
||||
|
|
||||
<!-- 空数据 --> |
|
||||
<view class="empty" v-else-if="!listData[tabIndex] || listData[tabIndex].length === 0"> |
|
||||
暂无借阅记录 |
|
||||
</view> |
|
||||
|
|
||||
<!-- 图书列表 --> |
|
||||
<block v-else> |
|
||||
<book-list-item |
|
||||
:class="'list-item-' + tabIndex" |
|
||||
v-for="(item, index) in listData[tabIndex]" |
|
||||
:key="index" |
|
||||
:data="item" |
|
||||
:ranking="index + 1" |
|
||||
@click="goToDetail(item)" |
|
||||
/> |
|
||||
</block> |
|
||||
</view> |
|
||||
</swiper-item> |
|
||||
</swiper> |
|
||||
</view> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import myTabs from "@/components/my-tabs/my-tabs.vue"; |
|
||||
import bookListItem from "@/components/book-list-item/book-list-item.vue"; |
|
||||
|
|
||||
export default { |
|
||||
components: { |
|
||||
myTabs, |
|
||||
bookListItem |
|
||||
}, |
|
||||
data() { |
|
||||
return { |
|
||||
tabData: [ |
|
||||
{ label: "在借中" }, |
|
||||
{ label: "将过期" }, |
|
||||
{ label: "已过期" } |
|
||||
], |
|
||||
currentIndex: 0, |
|
||||
// 列表数据缓存 |
|
||||
listData: { |
|
||||
0: [], |
|
||||
1: [], |
|
||||
2: [] |
|
||||
}, |
|
||||
// 每个页面的加载状态 |
|
||||
loadingMap: { |
|
||||
0: true, |
|
||||
1: true, |
|
||||
2: true |
|
||||
}, |
|
||||
// Swiper 高度自适应 |
|
||||
currentSwiperHeight: 400, |
|
||||
swiperHeightData: {}, |
|
||||
// 页面滚动 |
|
||||
currentPageScrollTop: 0 |
|
||||
}; |
|
||||
}, |
|
||||
|
|
||||
onLoad() { |
|
||||
this.getListData(0); |
|
||||
}, |
|
||||
|
|
||||
onPageScroll(res) { |
|
||||
this.currentPageScrollTop = res.scrollTop; |
|
||||
}, |
|
||||
|
|
||||
methods: { |
|
||||
async getListData(index) { |
|
||||
this.loadingMap[index] = true; |
|
||||
|
|
||||
setTimeout(() => { |
|
||||
const mockData = this.getMockListByStatus(index); |
|
||||
this.listData[index] = mockData; |
|
||||
this.loadingMap[index] = false; |
|
||||
|
|
||||
this.$nextTick(() => { |
|
||||
this.calcSwiperHeight(index); |
|
||||
}); |
|
||||
}, 600); |
|
||||
}, |
|
||||
|
|
||||
getMockListByStatus(status) { |
|
||||
const baseList = [ |
|
||||
{ |
|
||||
imgCover: "https://qiniu.aiyxlib.com/1606124577077", |
|
||||
title: "名侦探柯南", |
|
||||
nickname: "青山刚昌", |
|
||||
publish: "长春出版社", |
|
||||
isbn: "1001" |
|
||||
}, |
|
||||
{ |
|
||||
imgCover: "https://qiniu.aiyxlib.com/1606124577077", |
|
||||
title: "三体", |
|
||||
nickname: "刘慈欣", |
|
||||
publish: "重庆出版社", |
|
||||
isbn: "1002" |
|
||||
} |
|
||||
]; |
|
||||
|
|
||||
if (status === 0) return baseList; |
|
||||
if (status === 1) return [baseList[0]]; |
|
||||
if (status === 2) return []; |
|
||||
return []; |
|
||||
}, |
|
||||
|
|
||||
calcSwiperHeight(index) { |
|
||||
const query = uni.createSelectorQuery().in(this); |
|
||||
query |
|
||||
.selectAll(`.list-item-${index}`) |
|
||||
.boundingClientRect((res) => { |
|
||||
let totalHeight = 0; |
|
||||
if (res && res.length) { |
|
||||
res.forEach((item) => { |
|
||||
totalHeight += item.height + 8; |
|
||||
}); |
|
||||
} else { |
|
||||
totalHeight = 200; |
|
||||
} |
|
||||
|
|
||||
this.swiperHeightData[index] = totalHeight; |
|
||||
this.currentSwiperHeight = totalHeight; |
|
||||
}) |
|
||||
.exec(); |
|
||||
}, |
|
||||
|
|
||||
tabClick(index) { |
|
||||
this.currentIndex = index; |
|
||||
|
|
||||
if (this.currentPageScrollTop > 100) { |
|
||||
uni.pageScrollTo({ scrollTop: 100, duration: 100 }); |
|
||||
} |
|
||||
|
|
||||
if (!this.listData[index] || this.listData[index].length === 0) { |
|
||||
this.getListData(index); |
|
||||
} else { |
|
||||
this.currentSwiperHeight = this.swiperHeightData[index] || 400; |
|
||||
} |
|
||||
}, |
|
||||
|
|
||||
onSwiperChange(e) { |
|
||||
if (e.detail.source === "touch") { |
|
||||
this.currentIndex = e.detail.current; |
|
||||
} |
|
||||
}, |
|
||||
|
|
||||
onSwiperEnd() { |
|
||||
const index = this.currentIndex; |
|
||||
if (!this.listData[index] || this.listData[index].length === 0) { |
|
||||
this.getListData(index); |
|
||||
} else { |
|
||||
this.currentSwiperHeight = this.swiperHeightData[index] || 400; |
|
||||
} |
|
||||
}, |
|
||||
|
|
||||
goToDetail(item) { |
|
||||
uni.navigateTo({ |
|
||||
url: "/subpkg/pages/book-detail/book-detail?isbn=" + item.isbn |
|
||||
}); |
|
||||
} |
|
||||
} |
|
||||
}; |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
.lending-container { |
|
||||
background-color: #f5f5f5; |
|
||||
min-height: 100vh; |
|
||||
|
|
||||
.tab-sticky { |
|
||||
position: sticky; |
|
||||
top: 0; |
|
||||
z-index: 99; |
|
||||
background: #fff; |
|
||||
} |
|
||||
|
|
||||
.swiper { |
|
||||
width: 100%; |
|
||||
min-height: 300px; |
|
||||
} |
|
||||
|
|
||||
.swiper-item { |
|
||||
width: 100%; |
|
||||
height: 100%; |
|
||||
} |
|
||||
|
|
||||
.list-wrapper { |
|
||||
padding: 10px; |
|
||||
box-sizing: border-box; |
|
||||
} |
|
||||
|
|
||||
.empty { |
|
||||
text-align: center; |
|
||||
padding: 100px 0; |
|
||||
color: #999; |
|
||||
font-size: 14px; |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,246 +0,0 @@ |
|||||
<template> |
|
||||
<view class="lending-container"> |
|
||||
<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 v-for="(tabItem, idx) in tabData" :key="idx"> |
|
||||
<view class="list-wrapper"> |
|
||||
<uni-load-more status="loading" v-if="loadingMap[tabItem.status]" /> |
|
||||
<view class="empty" v-else-if="!listData[tabItem.status] || listData[tabItem.status].length === 0"> |
|
||||
暂无{{ tabItem.label }}记录 |
|
||||
</view> |
|
||||
<block v-else> |
|
||||
<book-list-item |
|
||||
:class="'list-item-' + tabItem.status" |
|
||||
v-for="(item, index) in listData[tabItem.status]" |
|
||||
:key="index" |
|
||||
:data="item" |
|
||||
:ranking="index + 1" |
|
||||
@click="goToDetail(item)" |
|
||||
/> |
|
||||
</block> |
|
||||
</view> |
|
||||
</swiper-item> |
|
||||
</swiper> |
|
||||
</view> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import myTabs from "@/components/my-tabs/my-tabs.vue"; |
|
||||
import bookListItem from "@/components/book-list-item/book-list-item.vue"; |
|
||||
|
|
||||
export default { |
|
||||
components: { myTabs, bookListItem }, |
|
||||
data() { |
|
||||
return { |
|
||||
tabData: [ |
|
||||
{ label: "全部", status: "all", apiStatus: -1 }, |
|
||||
{ label: "在借中", status: "lending", apiStatus: 0 }, |
|
||||
{ label: "将过期", status: "expiring", apiStatus: 1 }, |
|
||||
{ label: "已过期", status: "expired", apiStatus: 2 }, |
|
||||
], |
|
||||
currentIndex: 0, |
|
||||
listData: {}, |
|
||||
loadingMap: {}, |
|
||||
swiperHeightData: {}, |
|
||||
currentSwiperHeight: 400, |
|
||||
currentPageScrollTop: 0 |
|
||||
}; |
|
||||
}, |
|
||||
|
|
||||
onLoad() { |
|
||||
// 初始化数据结构 |
|
||||
this.initDataStructure(); |
|
||||
// 加载第一个tab的数据 |
|
||||
const firstTab = this.getCurrentTab(); |
|
||||
if (firstTab) { |
|
||||
this.getListData(firstTab.status); |
|
||||
} |
|
||||
}, |
|
||||
|
|
||||
onPageScroll(res) { |
|
||||
this.currentPageScrollTop = res.scrollTop; |
|
||||
}, |
|
||||
|
|
||||
methods: { |
|
||||
// 初始化数据结构 |
|
||||
initDataStructure() { |
|
||||
this.tabData.forEach(tab => { |
|
||||
const key = tab.status; |
|
||||
this.$set(this.listData, key, []); |
|
||||
this.$set(this.loadingMap, key, true); |
|
||||
}); |
|
||||
}, |
|
||||
|
|
||||
// 获取当前选中的tab对象 |
|
||||
getCurrentTab() { |
|
||||
return this.tabData[this.currentIndex]; |
|
||||
}, |
|
||||
|
|
||||
// 获取列表数据 |
|
||||
async getListData(statusKey) { |
|
||||
// 避免重复请求 |
|
||||
if (this.listData[statusKey]?.length > 0) return; |
|
||||
|
|
||||
this.loadingMap[statusKey] = true; |
|
||||
|
|
||||
// 找到对应的tab配置 |
|
||||
const tabConfig = this.tabData.find(tab => tab.status === statusKey); |
|
||||
const apiStatus = tabConfig?.apiStatus ?? 0; |
|
||||
|
|
||||
// 调用API |
|
||||
const data = await this.fetchBorrowList(apiStatus); |
|
||||
this.listData[statusKey] = data; |
|
||||
this.loadingMap[statusKey] = false; |
|
||||
|
|
||||
// 计算高度 |
|
||||
this.$nextTick(() => { |
|
||||
this.calcSwiperHeight(statusKey); |
|
||||
}); |
|
||||
}, |
|
||||
|
|
||||
// API请求（可独立到 api 文件） |
|
||||
async fetchBorrowList(apiStatus) { |
|
||||
// 模拟接口请求 |
|
||||
return new Promise((resolve) => { |
|
||||
setTimeout(() => { |
|
||||
resolve(this.getMockData(apiStatus)); |
|
||||
}, 600); |
|
||||
}); |
|
||||
}, |
|
||||
|
|
||||
// Mock数据（模拟后端返回） |
|
||||
getMockData(apiStatus) { |
|
||||
const baseList = [ |
|
||||
{ |
|
||||
imgCover: "https://qiniu.aiyxlib.com/1606124577077", |
|
||||
title: "名侦探柯南", |
|
||||
nickname: "青山刚昌", |
|
||||
publish: "长春出版社", |
|
||||
isbn: "1001" |
|
||||
}, |
|
||||
{ |
|
||||
imgCover: "https://qiniu.aiyxlib.com/1606124577077", |
|
||||
title: "三体", |
|
||||
nickname: "刘慈欣", |
|
||||
publish: "重庆出版社", |
|
||||
isbn: "1002" |
|
||||
} |
|
||||
]; |
|
||||
|
|
||||
// 根据状态返回不同数据 |
|
||||
switch(apiStatus) { |
|
||||
case 0: return baseList; |
|
||||
case 1: return [baseList[0]]; |
|
||||
case 2: return []; |
|
||||
case -1: return baseList; |
|
||||
default: return []; |
|
||||
} |
|
||||
}, |
|
||||
|
|
||||
// 计算swiper高度 |
|
||||
calcSwiperHeight(statusKey) { |
|
||||
const selector = `.list-item-${statusKey}`; |
|
||||
const query = uni.createSelectorQuery().in(this); |
|
||||
query.selectAll(selector).boundingClientRect((res) => { |
|
||||
let totalHeight = 200; // 默认高度 |
|
||||
if (res && res.length) { |
|
||||
totalHeight = res.reduce((sum, item) => sum + item.height + 8, 0); |
|
||||
} |
|
||||
this.swiperHeightData[statusKey] = totalHeight; |
|
||||
this.currentSwiperHeight = totalHeight; |
|
||||
}).exec(); |
|
||||
}, |
|
||||
|
|
||||
// tab点击事件 |
|
||||
tabClick(index) { |
|
||||
this.currentIndex = index; |
|
||||
const currentTab = this.getCurrentTab(); |
|
||||
|
|
||||
// 滚动到顶部 |
|
||||
if (this.currentPageScrollTop > 100) { |
|
||||
uni.pageScrollTo({ scrollTop: 100, duration: 100 }); |
|
||||
} |
|
||||
|
|
||||
// 按需加载数据 |
|
||||
const statusKey = currentTab.status; |
|
||||
if (!this.listData[statusKey] || this.listData[statusKey].length === 0) { |
|
||||
this.getListData(statusKey); |
|
||||
} else { |
|
||||
this.currentSwiperHeight = this.swiperHeightData[statusKey] || 400; |
|
||||
} |
|
||||
}, |
|
||||
|
|
||||
onSwiperChange(e) { |
|
||||
if (e.detail.source === "touch") { |
|
||||
this.currentIndex = e.detail.current; |
|
||||
} |
|
||||
}, |
|
||||
|
|
||||
onSwiperEnd() { |
|
||||
const currentTab = this.getCurrentTab(); |
|
||||
const statusKey = currentTab.status; |
|
||||
|
|
||||
if (!this.listData[statusKey] || this.listData[statusKey].length === 0) { |
|
||||
this.getListData(statusKey); |
|
||||
} else { |
|
||||
this.currentSwiperHeight = this.swiperHeightData[statusKey] || 400; |
|
||||
} |
|
||||
}, |
|
||||
|
|
||||
goToDetail(item) { |
|
||||
uni.navigateTo({ |
|
||||
url: `/subpkg/pages/book-detail/book-detail?isbn=${item.isbn}` |
|
||||
}); |
|
||||
} |
|
||||
} |
|
||||
}; |
|
||||
</script> |
|
||||
<style lang="scss" scoped> |
|
||||
.lending-container { |
|
||||
background-color: #f5f5f5; |
|
||||
min-height: 100vh; |
|
||||
|
|
||||
.tab-sticky { |
|
||||
position: sticky; |
|
||||
top: 0; |
|
||||
z-index: 99; |
|
||||
background: #fff; |
|
||||
} |
|
||||
|
|
||||
.swiper { |
|
||||
width: 100%; |
|
||||
min-height: 300px; |
|
||||
} |
|
||||
|
|
||||
.swiper-item { |
|
||||
width: 100%; |
|
||||
height: 100%; |
|
||||
} |
|
||||
|
|
||||
.list-wrapper { |
|
||||
padding: 10px; |
|
||||
box-sizing: border-box; |
|
||||
} |
|
||||
|
|
||||
.empty { |
|
||||
text-align: center; |
|
||||
padding: 100px 0; |
|
||||
color: #999; |
|
||||
font-size: 14px; |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,151 +0,0 @@ |
|||||
<template> |
|
||||
<view class="reader-card"> |
|
||||
<image class="card-top-bg" src="@/static/images/card-img1.png" mode="widthFix" /> |
|
||||
|
|
||||
<view class="card-list"> |
|
||||
<view |
|
||||
class="card-list-item" |
|
||||
v-for="(item, index) in cardList" |
|
||||
:key="item.id" |
|
||||
@click="handleSelectItem(item.bindValue)" |
|
||||
:class="{ active: selectedValue === item.bindValue }" |
|
||||
> |
|
||||
<image class="card-left-img" src="@/static/images/card-img2.png" mode="widthFix" /> |
|
||||
<view class="card-right-info"> |
|
||||
<text class="info-title">读者证号</text> |
|
||||
<text class="info-num">{{ item.bindValue }}</text> |
|
||||
</view> |
|
||||
<radio :value="item.bindValue" :checked="selectedValue === item.bindValue"/> |
|
||||
</view> |
|
||||
|
|
||||
<view class="add-card-btn" @click="toAddReaderCard"> |
|
||||
<uni-icons type="plus" size="20" color="#01a4fe"></uni-icons> |
|
||||
<text>新增读者证</text> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import { FetchFindAllReaderBindByOpenId, FetchSetDefaultReadCard } from '@/api/user'; |
|
||||
const READLIST = 'reader-card-list'; |
|
||||
|
|
||||
export default { |
|
||||
data() { |
|
||||
return { |
|
||||
selectedValue: '', |
|
||||
cardList: [], |
|
||||
} |
|
||||
}, |
|
||||
onLoad() {}, |
|
||||
onShow() { |
|
||||
this.getBindReaderCardList(); |
|
||||
}, |
|
||||
methods: { |
|
||||
async getBindReaderCardList() { |
|
||||
try { |
|
||||
const openId = uni.getStorageSync('wx_login_code'); |
|
||||
if (!openId) { |
|
||||
uni.showToast({ title: '未获取到用户信息', icon: 'none' }); |
|
||||
return; |
|
||||
} |
|
||||
|
|
||||
const data = { libcode: '1201', openId: openId }; |
|
||||
const res = await FetchFindAllReaderBindByOpenId(data); |
|
||||
|
|
||||
if (res.code === 200 && res.data.length > 0) { |
|
||||
this.cardList = res.data; |
|
||||
uni.setStorageSync(READLIST, res.data); |
|
||||
|
|
||||
// 优先 bindDefault = true |
|
||||
const defaultCard = this.cardList.find(item => item.bindDefault === true); |
|
||||
this.selectedValue = defaultCard ? defaultCard.bindValue : this.cardList[0].bindValue; |
|
||||
} else { |
|
||||
this.cardList = []; |
|
||||
uni.setStorageSync(READLIST, []); |
|
||||
this.selectedValue = ''; |
|
||||
} |
|
||||
} catch (err) { |
|
||||
this.cardList = uni.getStorageSync(READLIST) || []; |
|
||||
const defaultCard = this.cardList.find(item => item.bindDefault === true); |
|
||||
this.selectedValue = defaultCard ? defaultCard.bindValue : this.cardList[0]?.bindValue || ''; |
|
||||
} |
|
||||
}, |
|
||||
|
|
||||
// 点击整个卡片 → 触发切换 |
|
||||
handleSelectItem(value) { |
|
||||
const oldValue = this.selectedValue; |
|
||||
const openId = uni.getStorageSync('wx_login_code'); |
|
||||
|
|
||||
if (value === oldValue) return; |
|
||||
|
|
||||
uni.showModal({ |
|
||||
title: '提示', |
|
||||
content: '确定切换默认读者证吗？', |
|
||||
success: async (res) => { |
|
||||
if (!res.confirm) { |
|
||||
this.selectedValue = oldValue; |
|
||||
return; |
|
||||
} |
|
||||
|
|
||||
try { |
|
||||
const result = await FetchSetDefaultReadCard({ |
|
||||
bindType: 'rdid', |
|
||||
bindValue: value, |
|
||||
libcode: '1201', |
|
||||
openid: openId |
|
||||
}); |
|
||||
|
|
||||
if (result.code === 200) { |
|
||||
this.selectedValue = value; |
|
||||
uni.setStorageSync('currentReaderCard', value); |
|
||||
uni.showToast({ title: '默认证切换成功', icon: 'success' }); |
|
||||
} else { |
|
||||
this.selectedValue = oldValue; |
|
||||
uni.showToast({ title: result.msg || '切换失败', icon: 'none' }); |
|
||||
} |
|
||||
} catch (err) { |
|
||||
this.selectedValue = oldValue; |
|
||||
uni.showToast({ title: '切换失败', icon: 'none' }); |
|
||||
} |
|
||||
} |
|
||||
}); |
|
||||
}, |
|
||||
toAddReaderCard() { |
|
||||
uni.navigateTo({ url: "/pages/login/login" }); |
|
||||
}, |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
.reader-card{ |
|
||||
position: relative; |
|
||||
min-height: 100vh; |
|
||||
background-color: #f5f5f5; |
|
||||
|
|
||||
.card-top-bg{ |
|
||||
position: absolute; |
|
||||
left: 0; |
|
||||
top: 0; |
|
||||
width: 100%; |
|
||||
display: block; |
|
||||
} |
|
||||
|
|
||||
.add-card-btn { |
|
||||
display: flex; |
|
||||
align-items: center; |
|
||||
justify-content: center; |
|
||||
margin-top: 15px; |
|
||||
height: 44px; |
|
||||
border: 1px dashed #01a4fe; |
|
||||
border-radius: 8px; |
|
||||
color: #01a4fe; |
|
||||
font-size: 15px; |
|
||||
|
|
||||
uni-icons { |
|
||||
margin-right: 6px; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,128 +0,0 @@ |
|||||
<template> |
|
||||
<view class="container"> |
|
||||
<!-- 扫码按钮 --> |
|
||||
<button type="primary" @click="scanCode" class="scan-btn"> |
|
||||
扫码识别图书 |
|
||||
</button> |
|
||||
|
|
||||
<!-- 图书信息展示 --> |
|
||||
<view class="book-info" v-if="bookData.title"> |
|
||||
<image :src="bookData.image" class="book-cover" mode="widthFix"></image> |
|
||||
<view class="book-title">{{ bookData.title }}</view> |
|
||||
<view class="book-desc">作者：{{ bookData.author }}</view> |
|
||||
<view class="book-desc">出版社：{{ bookData.publisher }}</view> |
|
||||
<view class="book-desc">出版日期：{{ bookData.pubdate }}</view> |
|
||||
<view class="book-desc">ISBN：{{ isbn }}</view> |
|
||||
</view> |
|
||||
|
|
||||
<!-- 无数据提示 --> |
|
||||
<view class="empty" v-else> |
|
||||
请点击按钮扫描图书条形码 |
|
||||
</view> |
|
||||
</view> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
export default { |
|
||||
data() { |
|
||||
return { |
|
||||
isbn: '', // 扫码得到的ISBN |
|
||||
bookData: {} // 图书信息 |
|
||||
} |
|
||||
}, |
|
||||
methods: { |
|
||||
// 调用微信扫码 |
|
||||
async scanCode() { |
|
||||
try { |
|
||||
// 只允许扫条形码（图书ISBN） |
|
||||
const res = await uni.scanCode({ |
|
||||
onlyFromCamera: true, |
|
||||
scanType: ['barCode'] |
|
||||
}) |
|
||||
|
|
||||
// res.result 就是扫码得到的ISBN编码 |
|
||||
// this.isbn = res.result |
|
||||
this.isbn = '9787020167319' |
|
||||
console.log('扫码结果：', this.isbn) |
|
||||
|
|
||||
// 根据ISBN查询图书信息 |
|
||||
this.getBookInfo() |
|
||||
|
|
||||
} catch (err) { |
|
||||
uni.showToast({ |
|
||||
title: '扫码失败', |
|
||||
icon: 'none' |
|
||||
}) |
|
||||
} |
|
||||
}, |
|
||||
|
|
||||
// 查询图书信息（免费公开接口） |
|
||||
async getBookInfo() { |
|
||||
uni.showLoading({ title: '查询中...' }) |
|
||||
|
|
||||
try { |
|
||||
this.bookData = { |
|
||||
title: "活着", |
|
||||
author: "余华", |
|
||||
publisher: "人民文学出版社", |
|
||||
pubdate: "2012-08-01", |
|
||||
image: "https://qiniu.aiyxlib.com/1606124577077" |
|
||||
}; |
|
||||
|
|
||||
uni.hideLoading(); |
|
||||
uni.showToast({ title: "查询成功" }); |
|
||||
// const res = await uni.request({ |
|
||||
// url: 'https://api.jike.xyz/situ/book/isbn/' + this.isbn, |
|
||||
// method: 'GET' |
|
||||
// }) |
|
||||
|
|
||||
// if (res.data.code === 200) { |
|
||||
// this.bookData = res.data.data |
|
||||
// uni.showToast({ title: '查询成功' }) |
|
||||
// } else { |
|
||||
// uni.showToast({ title: '未查询到图书信息', icon: 'none' }) |
|
||||
// } |
|
||||
} catch (err) { |
|
||||
uni.showToast({ title: '查询失败', icon: 'none' }) |
|
||||
} finally { |
|
||||
uni.hideLoading() |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style scoped> |
|
||||
.container { |
|
||||
padding: 40rpx; |
|
||||
} |
|
||||
.scan-btn { |
|
||||
margin-bottom: 40rpx; |
|
||||
} |
|
||||
.book-info { |
|
||||
display: flex; |
|
||||
flex-direction: column; |
|
||||
align-items: center; |
|
||||
} |
|
||||
.book-cover { |
|
||||
width: 300rpx; |
|
||||
height: 420rpx; |
|
||||
margin-bottom: 20rpx; |
|
||||
border: 1rpx solid #eee; |
|
||||
} |
|
||||
.book-title { |
|
||||
font-size: 36rpx; |
|
||||
font-weight: bold; |
|
||||
margin-bottom: 15rpx; |
|
||||
} |
|
||||
.book-desc { |
|
||||
font-size: 28rpx; |
|
||||
color: #666; |
|
||||
margin-bottom: 10rpx; |
|
||||
} |
|
||||
.empty { |
|
||||
text-align: center; |
|
||||
color: #999; |
|
||||
margin-top: 100rpx; |
|
||||
} |
|
||||
</style> |
|
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue