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">
      <radio-group v-model="selectedValue" @change="radioChange">
        <view 
          class="card-list-item" 
          v-for="(item, index) in cardList" 
          :key="index"
          @click="handleSelectItem(item.value)"
          :class="{ active: selectedValue === item.value }"
        >
          <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.cardNum }}</text>
          </view>
          <radio :value="item.value" :checked="selectedValue === item.value"/>
        </view>
      </radio-group>
    </view>
    
    <!-- 确定按钮 -->
    <button class="submit-btn" @click="handleSubmit">确定</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
        // 选中的radio值
        selectedValue: '1',
        // 读者证列表数据（支持多条数据渲染）
        cardList: [
          {
            value: '1',
            cardNum: 'NO.10078398329'
          },
          {
            value: '2',
            cardNum: 'NO.10078398330'
          },
          {
            value: '3',
            cardNum: 'NO.10078398331'
          }
        ]
			}
		},
		methods: {
      // 单选框change事件
      radioChange(e) {
        console.log('radio选中值：', e.detail.value)
        this.selectedValue = e.detail.value
      },
      // 点击item选中对应radio
      handleSelectItem(value) {
        this.selectedValue = value
      },
      // 提交按钮事件
      handleSubmit() {
        if(!this.selectedValue){
          uni.showToast({
            title: '请选择读者证',
            icon: 'none'
          })
          return
        }
        console.log('提交选中的读者证：', this.selectedValue)
        uni.showToast({
          title: '选择成功'
        })
        // 这里可以写后续业务逻辑
      }
		}
	}
</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{
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        flex: 1;
        
        .info-title{
          font-size: 16px;
          color: #333333;
          font-weight: bold;
          padding-bottom: 12px;
        }
        
        .info-num{
          font-size: 14px;
          color: #999999;
        }
      }
    }
  }
  
  .submit-btn{
    position: fixed;
    bottom: 40px;
    left: 0;
    right: 0;
    width: calc(100% - 40px);
    padding: 5px 0;
    color: #fff;
    background-color: #01a4fe;
    border-radius: 23px;
    border: none;
    font-size: 16px;
  }
}
</style>