chuangte_bike_newxcx/page_fenbao/huiyuan/myhuiyuan.vue

<template>
  <view class="page">
    <u-navbar title="我的卡包" :border-bottom="false" :background="bgc" back-icon-color="#111827" title-color="#111827"
      title-size="34" title-bold height="44" :custom-back="btnfh">
    </u-navbar>

    <!-- 顶部操作 -->
    <view class="top-bar">
      <view class="jilu" @click="btngm">
        <text>购买记录</text>
        <u-icon name="arrow-right" size="28" color="#4297F3"></u-icon>
      </view>
    </view>

    <!-- 会员卡列表 -->
    <view class="list-container">
      <view
        v-for="(card, index) in cardList"
        :key="index"
        class="quota-card"
      >
        <!-- 卡片头部 -->
        <view class="card-header">
          <view class="user-info">
            <view class="avatar-box">
              <u-icon name="coupon" size="32" color="#4297F3"></u-icon>
            </view>
            <view class="info-text">
              <text class="phone">{{ card.name || '会员卡' }}</text>
              <text class="create-time">{{ card.startTime }} 至 {{ card.endTime }}</text>
            </view>
          </view>
          <view class="discount-tag">{{ card.discount }}折</view>
        </view>

        <!-- 卡片内容 -->
        <view class="card-content">
          <view class="info-grid">
            <view class="info-item">
              <text class="label">使用限制</text>
              <text class="value" v-if="card.enableLimit">每{{ card.limitRound }}天{{ card.limitCount }}次</text>
              <text class="value value-success" v-else>无限制</text>
            </view>
            <view class="info-item">
              <text class="label">剩余次数</text>
              <text class="value highlight">{{ card.surplusTotal || 0 }}次</text>
            </view>
          </view>
          <view class="time-row area-row">
            <u-icon name="map" size="22" color="#999" style="margin-right: 8rpx;"></u-icon>
            <text class="time-text">仅限{{ card.areaName || '—' }}使用</text>
          </view>
          
        </view>
      </view>

      <!-- 空状态 -->
      <u-empty v-if="cardList.length === 0 && !loading" mode="data" text="您还没有会员卡" margin-top="120"></u-empty>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      cardList: [],
      loading: false,
      bgc: {
        backgroundColor: "#F7F8FA",
      },
	  type: '',
      redirectUrl: '',
      redirectRemark: ''
    }
  },
  onLoad(e) {
    if (e.tyep) {
      this.type = e.tyep
    }
    if (e.redirectUrl) {
      this.redirectUrl = decodeURIComponent(e.redirectUrl)
    }
    if (e.redirectRemark) {
      this.redirectRemark = decodeURIComponent(e.redirectRemark)
    }
  },
  onShow() {
  	 this.getlist()
  },
  methods: {
	  btnfh(){
		  if(this.type == 99){
			  uni.reLaunch({
			  	url:'/pages/nearbystores/index'
			  })
		  }else{
			  uni.navigateBack()
		  }
	  },
	  // 查询用户会员卡列表
	  getlist() {
	    this.loading = true
	    this.$u.get(`/app/vipUser/list?pageNum=1&pageSize=999&isEffective=true&minSurplusCount=1&orderByColumn=createTime&isAsc=desc`).then((res) => {
	      this.loading = false
	      if (res.code == 200) {
	        this.cardList = res.rows || []
	      }
	    }).catch(() => {
	      this.loading = false
	    })
	  },
	  // 点击跳转到购买记录
	  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>
page {
  background-color: #F7F8FA;
  min-height: 100vh;
}

.page {
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

.top-bar {
  padding: 16rpx 24rpx;
  background: #FFFFFF;
  margin-bottom: 2rpx;
  display: flex;
  justify-content: flex-end;
  gap: 32rpx;
}

.jilu {
  display: flex;
  align-items: center;
  font-size: 28rpx;
  color: #4297F3;
  font-weight: 500;

  text {
    margin-right: 8rpx;
  }
}

.list-container {
  padding: 20rpx 24rpx;
}

.quota-card {
  background: #FFFFFF;
  border-radius: 16rpx;
  margin-bottom: 16rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx 24rpx 16rpx;
    border-bottom: 1rpx solid #F5F5F5;

    .user-info {
      display: flex;
      align-items: center;
      flex: 1;
      min-width: 0;

      .avatar-box {
        width: 56rpx;
        height: 56rpx;
        background: linear-gradient(135deg, #E8F4FD 0%, #D4ECFD 100%);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 16rpx;
        flex-shrink: 0;
      }

      .info-text {
        display: flex;
        flex-direction: column;
        flex: 1;
        min-width: 0;

        .phone {
          font-size: 28rpx;
          font-weight: 600;
          color: #333;
          margin-bottom: 4rpx;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .create-time {
          font-size: 22rpx;
          color: #999;
        }
      }
    }

    .discount-tag {
      padding: 8rpx 16rpx;
      background: linear-gradient(135deg, #FEE2E2 0%, #FECACA 100%);
      color: #DC2626;
      font-size: 24rpx;
      font-weight: 600;
      border-radius: 8rpx;
      flex-shrink: 0;
    }
  }

  .card-content {
    padding: 16rpx 24rpx 20rpx;

    .info-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16rpx 24rpx;

      .info-item {
        display: flex;
        flex-direction: column;

        .label {
          font-size: 22rpx;
          color: #999;
          margin-bottom: 6rpx;
        }

        .value {
          font-size: 26rpx;
          color: #333;
          font-weight: 500;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .highlight {
          color: #4297F3;
          font-size: 30rpx;
          font-weight: 600;
        }

        .value-success {
          color: #52C41A;
        }
      }
    }

    .time-row {
      display: flex;
      align-items: center;
      background: #F9FAFB;
      padding: 12rpx 16rpx;
      border-radius: 8rpx;
      margin-top: 16rpx;

      .time-text {
        font-size: 22rpx;
        color: #666;
        flex: 1;
      }
    }

    .area-row .time-text {
      color: #EF4444;
      font-size: 24rpx;
    }

    .action-row {
      margin-top: 16rpx;
      display: flex;
      justify-content: flex-end;
    }

    .action-btn {
      min-width: 180rpx;
      height: 64rpx;
      border-radius: 999rpx;
      border: 1rpx solid #BFDBFE;
      background: #EFF6FF;
      color: #1D4ED8;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24rpx;

      text {
        margin-left: 8rpx;
      }
    }
  }
}
</style>