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

<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>
        <uni-icons 
          type="checkmark" 
          size="24" 
          color="#01a4fe"
          v-if="selectedValue === item.bindValue"
        ></uni-icons>
      </view>

      <!-- <view class="add-card-btn" @click="toAddReaderCard">
        <uni-icons type="plus" size="20" color="#01a4fe"></uni-icons>
        <text>新增读者证</text>
      </view> -->
    </view>

    <!-- 底部解绑按钮 -->
    <button 
      class="unbind-btn" 
      :disabled="!selectedValue"
      :class="{disabled: !selectedValue}"
      @click="handleUnbind"
    >
      确认解绑
    </button>
	</view>
</template>

<script>
import { 
  FetchFindAllReaderBindByOpenId, 
  FetchUnbindReadCard 
} 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) return;

        const res = await FetchFindAllReaderBindByOpenId({
          libcode: '1201',
          openId: openId
        });

        if (res.code === 200) {
          this.cardList = res.data;
          uni.setStorageSync(READLIST, res.data);
        } else {
          this.cardList = [];
          uni.setStorageSync(READLIST, []);
        }
      } catch (err) {
        this.cardList = uni.getStorageSync(READLIST) || [];
      }
    },

    // 点击选择
    handleSelectItem(value) {
      // 重复点击取消选择
      if (this.selectedValue === value) {
        this.selectedValue = '';
      } else {
        this.selectedValue = value;
      }
    },

    // 确认解绑
    handleUnbind() {
      if (!this.selectedValue) {
        uni.showToast({ title: '请选择要解绑的读者证', icon: 'none' });
        return;
      }

      const openId = uni.getStorageSync('wx_login_code');
      if (!openId) return;

      uni.showModal({
        title: '提示',
        content: `确定要解绑【${this.selectedValue}】吗？`,
        success: async (res) => {
          if (res.confirm) {
            try {
              // 解绑接口参数 完全按你要求
              const result = await FetchUnbindReadCard({
                bindType: "rdid",
                bindValue: this.selectedValue,
                libcode: "1201",
                openid: openId
              });

              if (result.code === 200) {
                uni.showToast({ title: '解绑成功', icon: 'success' });
                this.selectedValue = '';
                this.getBindReaderCardList(); // 刷新列表
              } else {
                uni.showToast({ title: result.msg || '解绑失败', icon: 'none' });
              }
            } catch (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%;
    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;
    }
  }
  
  .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;
    border: none;
		&.disabled{
			background-color: #ccc;
		}
  }
}
</style>