chuangte_bike_newxcx/page_fenbao/huiyuan/myhuiyuan.vue

<template>
  <view class="container">
   <u-navbar title="我的会员" :border-bottom="false" :background="bgc" back-icon-color="#333333" title-color='#333333'
       		title-size='36' height='36' id="navbar">
       	</u-navbar>
    <view class="jilu" @click="btngm">
    	购买记录
    </view>
    <!-- 会员卡列表 -->
    <view class="card-list">
      <view 
        v-for="(card, index) in cardList" 
        :key="index" 
        class="card-item"
      >
        <!-- 卡片内容 -->
        <view class="card-content">
          <view class="card-top">
            <text class="card-name">{{card.name}}</text>
            <text class="card-discount">{{card.discount}}折</text>
          </view>
          
          <view class="card-info">
            <view class="info-item">
              <text class="info-label">开始时间</text>
              <text class="info-value">{{card.startTime}}</text>
            </view>
			<view class="info-item">
			  <text class="info-label">结束时间</text>
			  <text class="info-value">{{card.endTime}}</text>
			</view>
            <view class="info-item">
              <text class="info-label">使用限制</text>
              <text class="info-value" v-if="card.enableLimit" >每{{card.limitRound}}天内可用{{card.limitCount}}次</text>
			   <text class="info-value" v-else >无限制</text>
            </view>
			<view class="info-item">
			  <text class="info-label">剩余次数</text>
			  <text class="info-value">当前剩余{{card.surplusTotal}}次</text>
			</view>
			<view class="info-item" style="color: red;">
			  仅限{{card.areaName}}使用
			</view>
          </view>
        </view>

        <!-- 右侧操作区 -->
        <view class="card-action">
          <text class="card-price"></text>
          <button 
            class="renew-btn"
            @click="handleRenew(card)"
          >
            再次购买
          </button>
        </view>
      </view>
    </view>

    <!-- 空状态 -->
    <view v-if="cardList.length === 0" class="empty-state">
      <image src="https://lxnapi.ccttiot.com/smartmeter/img/static/uI8XNIcYtLGc7sMDnN1L" class="empty-image" />
      <text class="empty-text">您还没有会员卡</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      cardList: [],
	  bgc: {
	  	backgroundColor: "#f5f5f5",
	  },
    }
  },
  onLoad() {

  },
  onShow() {
  	 this.getlist()
  },
  methods: {
	  // 查询用户会员卡列表
	  getlist(){
	  	this.$u.get(`/app/vipUser/list?pageNum=1&pageSize=999&isEffective=true&minSurplusCount=1`).then((res) => {
	  		if (res.code == 200) {
	  			this.cardList = res.rows
	  		}
	  	})
	  },
	  // 点击跳转到购买记录
	  btngm(){
		 uni.navigateTo({
		 	url:'/page_fenbao/huiyuan/goumaijilu'
		 }) 
	  },
    // 再次购买
    handleRenew(card) {
       uni.navigateTo({
          url:'/page_fenbao/huiyuan/index?areaId=' + card.areaId
       })
    },
  }
}
</script>

<style lang="scss" scoped>
	.jilu{
		width: 100%;
		text-align: right;
		color: #3a7be5;
	}
.container {
  padding: 24rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.header {
  padding: 20rpx 0;
  .title {
    font-size: 36rpx;
    font-weight: 600;
    color: #333;
  }
}

.card-list {
	margin-top: 20rpx;
  .card-item {
    display: flex;
    background-color: #fff;
    border-radius: 12rpx;
    padding: 24rpx;
    margin-bottom: 24rpx;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
    
    .card-content {
      flex: 1;
      padding-right: 20rpx;
      
      .card-top {
        display: flex;
        align-items: center;
        margin-bottom: 20rpx;
        
        .card-name {
          font-size: 32rpx;
          font-weight: 500;
          color: #333;
          margin-right: 16rpx;
        }
        
        .card-discount {
          font-size: 26rpx;
          color: #ff6b6b;
          background: #fff0f0;
          padding: 4rpx 12rpx;
          border-radius: 6rpx;
        }
      }
      
      .card-info {
        .info-item {
          display: flex;
          margin-bottom: 12rpx;
          font-size: 26rpx;
          
          &:last-child {
            margin-bottom: 0;
          }
          
          .info-label {
            color: #999;
            width: 120rpx;
          }
          
          .info-value {
            color: #666;
          }
        }
      }
    }
    
    .card-action {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      justify-content: space-between;
      min-width: 160rpx;
      
      .card-price {
        font-size: 32rpx;
        color: #ff6b6b;
        font-weight: 600;
      }
      
      .renew-btn {
        background-color: #4a8cff;
        color: white;
        border-radius: 6rpx;
        height: 56rpx;
        line-height: 56rpx;
        font-size: 24rpx;
        padding: 0 20rpx;
        margin-top: 16rpx;
        
        &:active {
          background-color: #3a7be5;
        }
      }
    }
  }
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 100rpx;
  
  .empty-image {
    width: 240rpx;
    height: 240rpx;
    margin-bottom: 30rpx;
    opacity: 0.6;
  }
  
  .empty-text {
    font-size: 28rpx;
    color: #999;
    margin-bottom: 30rpx;
  }
  
  .empty-btn {
    background-color: #4a8cff;
    color: white;
    border-radius: 6rpx;
    height: 72rpx;
    line-height: 72rpx;
    font-size: 28rpx;
    width: 200rpx;
  }
}
</style>