chuangte_bike_newxcx/page_fenbao/huiyuan/goumaijilu.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>
    <!-- 订单列表 -->
    <scroll-view 
      class="order-list"
      scroll-y
      @scrolltolower="loadMore">
      <view 
        v-for="(item, index) in orderList" 
        :key="index" 
        class="order-item"
		@click="btnxq(item.id)"
      >
        <!-- 订单状态和基本信息 -->
        <view class="order-header">
          <text class="order-no">订单号：{{item.no}}</text>
          <text class="order-status">
               已支付
          </text>
        </view>
        
        <!-- 会员卡信息 -->
        <view class="card-info">
          <text class="card-name">{{item.vipName}}</text>
          <text class="card-discount">{{item.vipDiscountValue}}折</text>
        </view>
        
        <!-- 订单详情 -->
        <view class="order-detail">
          <view class="detail-item">
            <text>售价：</text>
            <text class="price">¥{{item.vipPrice}}</text>
          </view>
          <view class="detail-item">
            <text>有效期：</text>
            <text>{{item.vipValidDays}}天</text>
          </view>
          <view class="detail-item" v-if="item.vipEnableLimit">
            <text>使用限制：</text>
            <text>{{item.vipLimitRound}}天内{{item.vipLimitCount}}次</text>
          </view>
		  <view class="detail-item" v-if="item.vipEnableLimit">
		    <text>使用限制：</text>
		    <text>无限制</text>
		  </view>
          <view class="detail-item">
            <text>下单时间：</text>
            <text>{{item.createTime}}</text>
          </view>
        </view>
      </view>
      
      <!-- 加载更多提示 -->
      <view class="load-more">
        <text>当前没有更多记录了...</text>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      orderList: [], // 订单列表数据
      page: 1, // 当前页码
      pageSize: 10, // 每页条数
      loading: false, // 是否正在加载
      noMore: false ,// 是否没有更多数据
	  bgc: {
	  	backgroundColor: "#f5f5f5",
	  },
	  total:0
    }
  },
  onLoad() {
	this.page = 1
    this.getOrderList();
  },
  methods: {
    // 点击跳转到详情
	btnxq(id){
		uni.navigateTo({
			url:'/page_fenbao/huiyuan/goumaixq?id=' + id
		})
	},
    // 获取订单列表
    getOrderList() {
        this.$u.get(`/app/vipOrder/list?pageNum=${this.page}&pageSize=${this.pageSize}&orderByColumn=createTime&isAsc=desc`).then((res) => {
        	if (res.code == 200) {
				this.total = res.total
        		if(this.page == 1){
					this.orderList = res.rows
					this.page++
				}else{
					this.orderList = this.orderList.concat(res.rows)
					this.page++
				}
        	}
        })
    },

    
    // 加载更多
    loadMore() {
        if(this.total > this.orderList.length){
			this.getOrderList()
		}else{
			console.log(11);
		}
    },
  }
}
</script>

<style lang="scss" scoped>
.container {
  padding: 20rpx;
  background-color: #f5f5f5;
}

.order-list {
	height: 86vh;
  .order-item {
    background-color: #fff;
    border-radius: 12rpx;
    padding: 30rpx;
    margin-bottom: 20rpx;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
    
    .order-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20rpx;
      padding-bottom: 20rpx;
      border-bottom: 1rpx dashed #eee;
      
      .order-no {
        font-size: 26rpx;
        color: #666;
      }
      
      .order-status {
        font-size: 28rpx;
        font-weight: bold;
        
        &.paid {
          color: #67C23A;
        }
        
        &.unpaid {
          color: #E6A23C;
        }
        
        &.canceled {
          color: #909399;
        }
      }
    }
    
    .card-info {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20rpx;
      
      .card-name {
        font-size: 32rpx;
        font-weight: bold;
        color: #333;
      }
      
      .card-discount {
        font-size: 28rpx;
        color: #f56c6c;
        background-color: #fff0f0;
        padding: 4rpx 12rpx;
        border-radius: 6rpx;
      }
    }
    
    .order-detail {
      .detail-item {
        display: flex;
        justify-content: space-between;
        font-size: 26rpx;
        color: #666;
        margin-bottom: 12rpx;
        
        .price {
          color: #f56c6c;
          font-weight: bold;
        }
      }
    }
    
    .order-actions {
      display: flex;
      justify-content: flex-end;
      margin-top: 30rpx;
      padding-top: 20rpx;
      border-top: 1rpx dashed #eee;
      
      .btn {
        height: 60rpx;
        line-height: 60rpx;
        font-size: 26rpx;
        padding: 0 30rpx;
        margin-left: 20rpx;
        border-radius: 30rpx;
        
        &.cancel {
          background-color: #fff;
          color: #666;
          border: 1rpx solid #ddd;
        }
        
        &.pay {
          background-color: #4a8cff;
          color: #fff;
        }
      }
    }
  }
  
  .load-more {
    text-align: center;
    padding: 30rpx 0;
    font-size: 26rpx;
    color: #999;
  }
}
</style>