library-wechat/subpkg/pages/reader-card/reader-card.vue

<template>
	<view class="reader-card">
    <image class="card-top-bg" src="@/static/images/card-img1.png" mode="widthFix" />
    
    <view class="card-list">
      <!-- 点击整个item触发切换 -->
      <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' });
          }
        }
      });
    },

    // 废弃不用
    radioChange() {},

    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;
  }
  
  .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: 12px;
        }
        
        .info-num{
          font-size: 14px;
          color: #999;
        }
      }
    }
  }

  .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>