You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
379 lines
9.8 KiB
379 lines
9.8 KiB
<template>
|
|
<view class="reader-card">
|
|
<image class="card-top-bg" src="@/static/images/card-img1.png" mode="widthFix" />
|
|
|
|
<view class="edit-btn" @click="toggleEditMode">
|
|
{{ isEditMode ? '完成' : '解绑' }}
|
|
</view>
|
|
|
|
<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">{{ formatCardNo(item.bindValue) }}</text>
|
|
<text class="default-tag" v-if="item.bindDefault">默认证</text>
|
|
</view>
|
|
|
|
<!-- 编辑模式显示单选框 -->
|
|
<radio v-if="isEditMode" :value="item.bindValue" :checked="selectedValue === item.bindValue"/>
|
|
|
|
<!-- 非编辑模式才显示：设置默认 + 二维码 -->
|
|
<view class="card-setting" v-else>
|
|
<button v-if="!item.bindDefault" type="default" size="mini" @click.stop="setDefaultCard(item.bindValue)">设置默认</button>
|
|
<uni-icons class="erweima-style" custom-prefix="iconfont" type="icon-erweima" size="28" @click.stop="showQrcode(item.bindValue)"></uni-icons>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="add-card-btn" @click="toAddReaderCard" v-if="!isEditMode">
|
|
<uni-icons type="plus" size="20" color="#01a4fe"></uni-icons>
|
|
<text>新增读者证</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 编辑模式显示底部解绑按钮 -->
|
|
<button
|
|
v-if="isEditMode"
|
|
class="unbind-btn"
|
|
:disabled="!selectedValue"
|
|
:class="{disabled: !selectedValue}"
|
|
@click="handleUnbind"
|
|
>
|
|
确认解绑
|
|
</button>
|
|
|
|
<!-- 二维码弹窗 -->
|
|
<uni-popup ref="popup" type="center" @maskClick="closePopup">
|
|
<view class="qrcode-popup">
|
|
<view class="qrcode-title">读者证二维码</view>
|
|
<w-qrcode
|
|
v-if="qrcodeText"
|
|
:value="qrcodeText"
|
|
:size="160"
|
|
foreground="#333"
|
|
background="#f5f5f5"
|
|
/>
|
|
<view class="qrcode-num">{{ qrcodeText }}</view>
|
|
<view class="close-btn" @click="closePopup">关闭</view>
|
|
</view>
|
|
</uni-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
FetchFindAllReaderBindByOpenId,
|
|
FetchSetDefaultReadCard,
|
|
FetchUnbindReadCard
|
|
} from '@/api/user';
|
|
import { getReaderCardList, getOpenId, setCurrentReaderCard, clearReaderCardCache, STORAGE_KEYS } from '@/utils/storage';
|
|
import config from '@/utils/config';
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
isEditMode: false,
|
|
selectedValue: '',
|
|
cardList: [],
|
|
qrcodeText: '',
|
|
loading: false,
|
|
}
|
|
},
|
|
onShow() {
|
|
this.getBindReaderCardList();
|
|
},
|
|
methods: {
|
|
formatCardNo(cardNo) {
|
|
if (!cardNo) return '';
|
|
const str = String(cardNo);
|
|
const len = str.length;
|
|
|
|
if (len > 8) {
|
|
const front = str.substring(0, 2);
|
|
const end = str.substring(len - 2);
|
|
const star = '*'.repeat(len - 4);
|
|
return front + star + end;
|
|
} else {
|
|
return '***' + str.substring(len - 2);
|
|
}
|
|
},
|
|
|
|
toggleEditMode() {
|
|
this.isEditMode = !this.isEditMode;
|
|
this.selectedValue = '';
|
|
},
|
|
|
|
async getBindReaderCardList(forceRefresh = false) {
|
|
if (this.loading) return;
|
|
this.loading = true;
|
|
|
|
try {
|
|
const readerList = await getReaderCardList(forceRefresh);
|
|
this.cardList = readerList;
|
|
} catch (err) {
|
|
console.error(err);
|
|
const cachedList = uni.getStorageSync(STORAGE_KEYS.READER_CARD_LIST) || [];
|
|
this.cardList = cachedList;
|
|
} finally {
|
|
this.loading = false;
|
|
}
|
|
},
|
|
|
|
handleSelectItem(value) {
|
|
if (this.isEditMode) {
|
|
this.selectedValue = this.selectedValue === value ? '' : value;
|
|
}
|
|
},
|
|
|
|
async setDefaultCard(value) {
|
|
const currentDefault = this.cardList.find(item => item.bindDefault === true);
|
|
if (currentDefault && currentDefault.bindValue === value) {
|
|
uni.showToast({ title: '当前已是默认证', icon: 'none' });
|
|
return;
|
|
}
|
|
|
|
const openId = await getOpenId();
|
|
if (!openId) {
|
|
uni.showToast({ title: '获取用户信息失败', icon: 'none' });
|
|
return;
|
|
}
|
|
|
|
uni.showModal({
|
|
title: '提示',
|
|
content: `确定设置【${value}】为默认读者证吗？`,
|
|
success: async (res) => {
|
|
if (!res.confirm) return;
|
|
try {
|
|
await FetchSetDefaultReadCard({
|
|
bindType: 'rdid',
|
|
bindValue: value,
|
|
libcode: config.LIB_CODE,
|
|
openid: openId
|
|
});
|
|
setCurrentReaderCard(value);
|
|
await this.getBindReaderCardList(true);
|
|
uni.showToast({ title: '设置成功', icon: 'success' });
|
|
} catch (err) {
|
|
console.error(err);
|
|
uni.showToast({ title: '设置失败', icon: 'none' });
|
|
}
|
|
}
|
|
});
|
|
},
|
|
|
|
showQrcode(bindValue) {
|
|
this.qrcodeText = bindValue;
|
|
this.$refs.popup.open();
|
|
},
|
|
|
|
closePopup() {
|
|
this.qrcodeText = '';
|
|
this.$refs.popup.close();
|
|
},
|
|
|
|
async handleUnbind() {
|
|
if (!this.selectedValue) {
|
|
uni.showToast({ title: '请选择要解绑的读者证', icon: 'none' });
|
|
return;
|
|
}
|
|
|
|
const openId = await getOpenId();
|
|
if (!openId) {
|
|
uni.showToast({ title: '获取用户信息失败', icon: 'none' });
|
|
return;
|
|
}
|
|
|
|
const unbindItem = this.cardList.find(item => item.bindValue === this.selectedValue);
|
|
const isUnbindDefault = unbindItem?.bindDefault === true;
|
|
|
|
uni.showModal({
|
|
title: '提示',
|
|
content: `确定要解绑读者证【${this.selectedValue}】吗？`,
|
|
success: async (res) => {
|
|
if (!res.confirm) return;
|
|
|
|
try {
|
|
const result = await FetchUnbindReadCard({
|
|
bindType: "rdid",
|
|
bindValue: this.selectedValue,
|
|
libcode: config.LIB_CODE,
|
|
openid: openId
|
|
});
|
|
|
|
if (result.code === 200) {
|
|
uni.showToast({ title: '解绑成功', icon: 'success' });
|
|
this.selectedValue = '';
|
|
await this.getBindReaderCardList(true);
|
|
|
|
if (isUnbindDefault && this.cardList.length > 0) {
|
|
const newValue = this.cardList[0].bindValue;
|
|
await FetchSetDefaultReadCard({
|
|
bindType: 'rdid',
|
|
bindValue: newValue,
|
|
libcode: config.LIB_CODE,
|
|
openid: openId
|
|
});
|
|
setCurrentReaderCard(newValue);
|
|
await this.getBindReaderCardList(true);
|
|
}
|
|
|
|
if (this.cardList.length === 0) {
|
|
clearReaderCardCache();
|
|
setTimeout(() => uni.navigateBack(), 1000);
|
|
}
|
|
}
|
|
} catch (err) {
|
|
console.error(err);
|
|
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%;
|
|
}
|
|
|
|
.edit-btn{
|
|
position: absolute;
|
|
right: 20px;
|
|
top: 20px;
|
|
z-index: 100;
|
|
font-size: 15px;
|
|
}
|
|
|
|
.card-list{
|
|
position: absolute;
|
|
left: 0;
|
|
top: 60px;
|
|
width: calc(100% - 24px);
|
|
height: calc(100vh - 195px);
|
|
overflow-y: auto;
|
|
padding: 12px;
|
|
z-index: 999;
|
|
|
|
.card-list-item{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 10px;
|
|
margin-bottom: 12px;
|
|
border: 2px solid #C6C6E2;
|
|
border-radius: 8px;
|
|
background: rgba(241,241,249,0.4);
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
|
|
&.active{
|
|
border-color: #01a4fe;
|
|
background: rgba(1, 164, 254, 0.1);
|
|
}
|
|
|
|
.card-left-img{
|
|
width: 80px;
|
|
margin-right: 12px;
|
|
display: block;
|
|
}
|
|
|
|
.card-right-info{
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.info-title{
|
|
font-size: 16px;
|
|
color: #333;
|
|
font-weight: bold;
|
|
padding-bottom: 4px;
|
|
}
|
|
|
|
.info-num{
|
|
font-size: 14px;
|
|
color: #999;
|
|
}
|
|
.default-tag{
|
|
width: 46px;
|
|
font-size: 12px;
|
|
color: #01a4fe;
|
|
border:1px solid #01a4fe;
|
|
border-radius: 4px;
|
|
padding: 2px 0;
|
|
text-align: center;
|
|
display: inline-block;
|
|
margin-top: 4px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|
|
|
|
.unbind-btn{
|
|
position: fixed;
|
|
bottom: 40px;
|
|
left: 0;
|
|
right: 0;
|
|
width: calc(100% - 40px);
|
|
margin: 0 auto;
|
|
padding: 4px 0;
|
|
color: #fff;
|
|
background-color: #01a4fe;
|
|
border-radius: 23px;
|
|
font-size: 16px;
|
|
&.disabled{
|
|
background-color: #ccc;
|
|
}
|
|
}
|
|
}
|
|
|
|
.card-setting{
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
button{
|
|
padding: 0 8px !important;
|
|
margin-bottom: 6px;
|
|
font-size: 12px;
|
|
}
|
|
::v-deep .icon-erweima{
|
|
color: #999 !important;
|
|
}
|
|
}
|
|
</style>
|