flavorOfTimeSz/subPackages/rewards/index.vue

<template>
  <view class="bg">
    <!-- 标签栏 -->
	<view class="tab-bar">
	  <view v-for="(type,i) in coupons" :key="i" :class="['tab-item',activeType==i]" 
	  @click="switchTab(i)">{{type.statusText}}</view>
	</view>
	
	<div class="search-list">
		<view @click="goDetail(item)" v-for="(item, key) in list" :key="item.id" class="search-item">
			<view class="img" style="position: relative;">
				<image class="img" :src="showImg(item.headimg)" mode="aspectFill"></image>
			</view>
			<view class="content">
				<view class="title text-overflowRows">
					{{item.title}}
				</view>
				<view class="subtitle text-overflowRows">{{item.title}}</view>
			</view>
		</view>
		<view class="no-data-zhanwei" v-if="list.length<=0">
			<image src="https://static.ticket.sz-trip.com/uploads/20250618/0c2a469b4216f8cd570822b642d0a0fe.png"></image>
			<view style="padding:50rpx 0 67rpx">暂无数据</view>
		</view>
		
		<view style="width: 100%;height: 200rpx;"></view>
	</div>


    <!-- 前往兑换中心按钮 -->
    <view class="exchange-btn-container">
      <view class="exchange-btn" @click="gotoPath('/subPackages/rewards/exchange')">前往兑换中心</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      activeType: 0, // 当前选中标签
      coupons: [
        { status: 0, statusText: '待使用', },
        { status: 1, statusText: '已使用', },
        { status: 2, statusText: '已失效', }
      ],
	  
	  list: [],
	  finished: false,
    };
  },
  onReady () {
	  this.getHotList()
  },
  methods: {
    switchTab(tab) {
		this.finished = false;
		this.list = []
		this.activeType = tab;
		this.getHotList()
    },
	getHotList() {
		this.Post({
			offset: this.list.length,
			limit: 10,
			order: "sales_number"
		},'/api/product/get_product_by_type').then(res => {
			this.list = [...this.list, ...res.data.list]
			if(res.data.list.length < 10) this.finished = true
		})
	},
	goDetail (item) {
		uni.navigateTo({
			url:`/subPackages/rewards/order?id=${item.id}`
		})
	},
  },
  onReachBottom() {
  	setTimeout(() => {
  		if(!this.finished) this.getHotList()
  	},1000)
  }
};
</script>

<style lang="scss" scoped>
.bg{
	width: 750rpx;
	min-height: 100vh;
	background: #FFFFFF;
	display: flex;
	flex-direction: column;

.tab-bar {
  display: flex;
  border-bottom: 2rpx solid #D8D8D8;
  height: 109rpx;
  line-height: 109rpx;
  font-weight: 500;
  font-size: 31rpx;
  color: #000000;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  .tab-item {
    flex: 1;
    text-align: center;
	position: relative;
    &.true {
      font-weight: bold;
    }
	&.true::after{
		content: "1";
		width: 67rpx;
		height: 7rpx;
		background: #FB2A54;
		border-radius: 3rpx;
		bottom: 19rpx;
		left: calc(50% - 34rpx);
		position: absolute;
		font-size: 0;
	}
  }
}

	.search-list {
		padding: 26rpx 30rpx;
		flex: 1;
		height: 100rpx;
	}

	.search-item {
		width: 100%;
		height: 200rpx;
		background: #FFFFFF;
		border-radius: 13rpx;
		display: flex;
		margin-bottom: 26rpx;
		.img {
			width: 200rpx;
			height: 200rpx;
			background: #87CD93;
			border-radius: 13rpx;
			flex-shrink: 0;
		}
		
		.content {
			padding:13rpx 20rpx;
			display: flex;
			flex-direction: column;
			flex: 1;
		}
		.title {
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 31rpx;
			color: #000000;
			width: 100%;
		}
		.subtitle{
			font-weight: 500;
			font-size: 24rpx;
			color: #999999;
			margin-top: 20rpx;
		}

	}

	.list-common-empty{
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		margin: 26rpx 0;
		
	}
	.list-common-empty-tip{
		color:#999;
	}
	

  .exchange-btn-container {
    position: fixed;
    bottom: 20px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;

    .exchange-btn {
      padding: 8px 20px;
      background-color: #ff0000;
      color: #fff;
      border-radius: 20px;
      font-size: 15px;
    }
  }
}
</style>