purchase/pages/detailed/index.vue

<template>
	<view class="detail-box">
		<view class="head">
			<view class="item" :class="{'active': activeItem === index}" v-for="(item, index) in headList"
			 :key="index" @click="clickBtn(index)">{{item}}</view>
			 <view class="item" :class="{'active': activeItem === -1}" @click="clickBtn(-1)">筛选</view>
			 <view class="dropdown" v-show="activeItem === -1 && isShowItem">
			 	<view class="select-time">
					<view style="display: flex;" @click="startTime">
						<u-image src="../../static/img/sz_icon_rq/sz_icon_rq.png" width="30" height="30"></u-image>
						<view style="margin-left: 10rpx;">{{!selectDate.startDate ? '开始时间' : selectDate.startDate}}</view>
					</view>
					<view class="line"></view>
					<view style="display: flex;" @click="startTime">
						<u-image src="../../static/img/sz_icon_rq/sz_icon_rq.png" width="30" height="30"></u-image>
						<view style="margin-left: 10rpx;">{{!selectDate.endDate ? '开始时间' : selectDate.endDate}}</view>
					</view>
				</view>
				<view class="btns">
					<view class="btn reset-btn" @click="resetBtnClick">重置</view>
					<view class="btn confim-btn" @click="confimBtnClick">确认</view>
				</view>
			</view>
		</view>
		 <!---->
		<view class="list" v-if="listData.length > 0">
			<view class="item" v-for="(item, index) in listData"
			 :key="index">
				<view class="l">
					<view>{{item.type}}</view>
					<view>{{item.jine}}</view>
				</view>
				<view class="r">
					<view>{{item.tiemtype}}</view>
					<view class="time">{{item.time}}</view>
				</view>
			</view>
			<u-loadmore :status="status" :icon-type="iconType" :load-text="loadText" @loadmore="loadmore" class="loadmore"/>
		</view>
		
		<view v-else class="nothing-list">
			<image src="../../static/img/dd_icon_zw/dd_icon_zw.png" class="img"></image>
			<view class="w">暂无收支记录</view>
			<view class="s">快去分享下单赚钱吧！</view>
			<u-button class="confim" @click="confim" shape="circle" :ripple="true" :plain="false">确认</u-button>
		</view>
		<u-calendar v-model="showTime" mode="range" @change="change"></u-calendar>
	</view>
</template>

<script>
	export default {
		data () {
			return {
				isShowItem: true,
				selectDate: {},
				showTime: false,
				status: 'loadmore',
				iconType: 'flower',
				loadText: {
					loadmore: '上拉加载更多',
					loading: '努力加载中',
					nomore: '没有更多了'
				},
				headList: ['全部', '收益明细', '支持明细'],
				activeItem: 0,
				listData: [
					// {
					// 	type: '推广收益',
					// 	jine: '30元',
					// 	tiemtype: '收益时间',
					// 	time: '2021-02-21'
					// },
					// {
					// 	type: '推广收益',
					// 	jine: '30元',
					// 	tiemtype: '收益时间',
					// 	time: '2021-02-21'
					// }
				]
			}
		},
		methods: {
			resetBtnClick () {
				this.isShowItem = false
				this.selectDate = {}
				this.activeItem = -2
			},
			confimBtnClick () {
				this.isShowItem = false
			},
			change (data) {
				console.log(data)
				this.selectDate = data
			},
			loadmore () {
				'加载更多'
			},
			clickBtn (index) {
				this.activeItem = index
				this.isShowItem = true
			},
			startTime () {
				this.showTime = true
			}
		}
	}
</script>

<style scoped lang="scss">
	.detail-box {
		height: 100%;
		margin: 0 20rpx;
		& .head {
			display: flex;
			justify-content: space-between;
			margin-top: 40rpx;
			& .item {
				height: 40rpx;
				font-size: 28rpx;
				line-height: 40rpx;
				font-weight: 400;
				color: #9093B7;
				padding-bottom: 3rpx;
				&.active {
					color: #FFFFFF;
					font-weight: 600;
					border-bottom: 1rpx solid #FE192F;
				}
			}
		}
	}
	.dropdown {
		position: absolute;
		top: 100rpx;
		left: 0;
		right: 0;
		background: #151941;
		& .select-time {
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 50rpx 0;
			color: #C4CBE4;
			font-size: 24rpx;
			& .line {
				width: 32rpx;
				height: 1rpx;
				background-color: #C4CBE4;
				margin: 0 50rpx;
			}
		}
	}
	.btns {
		height: 90rpx;
		display: flex;
		& .btn {
			flex: 1;
			text-align: center;
			line-height: 90rpx;
			color: #FFFFFF;
		}
		& .reset-btn {
			background: #373F8B;
		}
		& .confim-btn {
			background: #FE192F;
		}
	}
	.list {
		margin-top: 50rpx;
		font-size: 24rpx;
		color: #FE192F;
		& .item {
			background-color: #2B3062;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 30rpx 20rpx;
			& .r {
				text-align: right;
				color: #8D90AC;
			}
			& .time {
				font-size: 20rpx;
			}
		}
		.loadmore {
			margin-top: 40rpx !important;
		}
		& .item + .item {
			border-top: 1rpx solid #576699;
		}
	}
	
	/deep/ .u-calendar__action {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}
	.nothing-list {
		flex-direction: column;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
		color: #FFFFFF;
		& .img {
			width: 178rpx;
			height: 200rpx;
		}
		& .w {
			margin-top: 100rpx;
			font-size: 40rpx;
			color: #CED6F1;
		}
		& .s {
			margin-top: 20rpx;
			font-size: 28rpx;
			color: #9496B1;
		}
		& .confim {
			margin: 70rpx 0rpx 29rpx 0rpx;
			width: 233rpx;
			height: 90rpx;
			background: linear-gradient(143deg, #EF6F5F 0%, #FB2636 100%);
			border-radius: 45rpx;
			font-size: 32rpx;
			color: #FFFFFF;
			&::after {
				border: none;
			}
		}
	}
</style>