discounts-minapp/integral/logs.vue

<template>
	<view class="integral-logs">
		<!-- 筛选器 -->
		<view class="filter-box">
			<view class="box">
				<view class="filter-item" :class="[active == 1?'active':'']" @click="handleType(1)">
					全部
				</view>
				<view class="filter-item" :class="[active == 2?'active':'']" @click="handleType(2)">
					获得
				</view>
				<view class="filter-item" :class="[active == 3?'active':'']" @click="handleType(3)">
					消耗
				</view>
			</view>
				<view class="filter-time" @click="handleTime">
					筛选时间
					<u-icon name="arrow-down" size="30" color="#fff"></u-icon>
				</view>
		</view>
		
		
		<u-datetime-picker
		                :show="show"
		                v-model="time"
		                mode="date"
						:closeOnClickOverlay="true"
						@cancel="cancel"
						@confirm="confirm"
						@close="close"
		        ></u-datetime-picker>
				
				<zs-list mt="90rpx" @load="loadMore" :status="status">
					<view class="time-title">
						2022年10月
					</view>
					<view class="item" v-for="(item,index) in list" :key="index">
						<view class="info">
							<view class="title">
								{{item.title}}
							</view>
							<view class="time">
								{{item.time}}
							</view>
						</view>
						<view class="score">
							{{item.score}}
						</view>
					</view>
				</zs-list>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show:false,
				time:Number(new Date()),
				status:'more',
				active:1,
				list:[
					{
						title:'天天签到积分',
						time:'2022-10-01',
						score:'+5'
					},
					{
						title:'天天签到积分',
						time:'2022-10-01',
						score:'+5'
					},
					{
						title:'天天签到积分',
						time:'2022-10-01',
						score:'+5'
					},
					{
						title:'天天签到积分',
						time:'2022-10-01',
						score:'+5'
					},
					// {
					// 	title:'天天签到积分',
					// 	time:'2022-10-01',
					// 	score:'+5'
					// },
					// {
					// 	title:'天天签到积分',
					// 	time:'2022-10-01',
					// 	score:'+5'
					// },
					// {
					// 	title:'天天签到积分',
					// 	time:'2022-10-01',
					// 	score:'+5'
					// },
					// {
					// 	title:'天天签到积分',
					// 	time:'2022-10-01',
					// 	score:'+5'
					// },
					// {
					// 	title:'天天签到积分',
					// 	time:'2022-10-01',
					// 	score:'+5'
					// },
					// {
					// 	title:'天天签到积分',
					// 	time:'2022-10-01',
					// 	score:'+5'
					// },
					// {
					// 	title:'天天签到积分',
					// 	time:'2022-10-01',
					// 	score:'+5'
					// }
				]
			}
		},
		methods: {
			handleType(val){
				this.active = val
			},
			handleTime() {
				this.show = true
			},
			// 关闭选择器时触发
			close(){
				this.show = false
			},
			// 点击确定按钮时触发
			confirm(){
				this.show = false
			},
			// 点击取消按钮
			cancel(){
				this.show = false
			},
			loadMore(){
				this.status = 'loading'
					setTimeout(()=>{
						this.status = 'more'
						this.list.push({
						title:'天天签到积分',
						time:'2022-10-01',
						score:'+15'
					})
					},1000)
			}
		},
	}
</script>

<style lang="scss">
.integral-logs{
	.filter-box{
		display: flex;
		padding: 25rpx 0;
		background: rgb(57, 81, 251);
		color: #fff;
		position: fixed;
		top: 0%;
		left: 0%;
		width: 100%;
		.box{
			flex: 1;
			display: flex;
			border-right: 1px solid #fff;
			.filter-item{
				flex: 1;
				text-align: center;
			}
			.active{
				font-weight: bold;
			}
		}
		.filter-time{
			width: 240rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			.u-icon{
				margin-left: 8rpx;
			}
		}
	}
	.time-title{
		font-size: 32rpx;
		font-weight: bold;
		padding-left: 20rpx;
		line-height: 70rpx;
	}
	.item{
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 25rpx;
		box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 3px 0px;
		margin-bottom: 15rpx;
		border-radius: 12rpx;
		.info{
			.title{
				font-size: 32rpx;
			}
			.time{
				font-size: 24rpx;
				color: #cacaca;
				margin-top: 10rpx;
			}
		}
		.score{
			font-size: 38rpx;
			color: rgb(57, 81, 251);
		}
	}
}
</style>