sadjv3_jishi/pages/index/currentIncome.vue

<template>
	<view class="content">
		<view class="header">
			<view class="header-top">
				<view class="header-bottom" >
					<image style="width:100rpx; height:100rpx; margin-right: 10rpx;" src="../../static/purse3.png"></image>
					<view>
						<view class="header-text" style=" margin-top: -5px;">当前收益</view>
						<view class="header-bottom-money">{{shouyiMoeny}}</view>
					</view>
				</view>
				<view class="header-top-left">
					<view style="margin-bottom: 10rpx;">
						<span class="header-text"></image>当前周期</span>
					</view>
					<view>
						<span class="header-text1">{{startTime}}</span><span style="color: #fff; margin-right: 5rpx;">~</span><span class="header-text1">{{endTime}}</span>
					</view>
				</view>
			</view>
			<view class="flex justify-end">
				<view  class="header-top-btn"  @click="wangqi" style="font-size: 14px; margin-top: -8px;">往期收益</view>
			</view>
			<!--<view class="header-bottom" style="margin-bottom: 40rpx;">
				<view class="header-text" style=" margin-top: -5px;">当前收益</view>
				<view class="header-bottom-money">{{shouyiMoeny}}</view>
			</view>
			 性别选择 -->
			<u-action-sheet :list="wqlistData" v-model="wqsyshow" @click="wqlistCallback"></u-action-sheet>
		</view>
		<t-refresh class="mian" ref="refresh"  v-if="listData.length>0"  @refresh="refresh" @loadMore="loadMore" :loadingType="loadingType"   :tPadding="0" >
			<template slot="content" >
				<view class="mian-view" v-for="(item,index) in listData" :key="index" @click="goOder(item)">
					<view class="mian-head">
						<view class="mian-head-biao">{{item.status=='3'?'待评价':'已完成'}}</view>
						<view class="mian-head-time">
							<span class="shouyi-text">预约时间: </span>
							<span>{{item.serveTime}}</span>
						</view>
					</view>
					<view class="mian-foot">
						<view class="mian-foot-img">
							<image :src="item.massageImg?item.massageImg: '../../../static/logo.png'" mode=""></image>
						</view>
						<view class="mian-foot-list">
							<view class="mian-foot-view">
								<view class="mian-title">{{item.entryName}}</view>
								<view class="mian-dingwei">
									<image src="../../static/index/dangqian2.png" mode=""></image>
									<span class="shouyi-text">{{item.km}}km</span>
								</view>
							</view>
							<view class="mian-foot-dan shouyi-text od-number">
								订单编号 : {{item.ordersNo}}
							</view>
							<view class="mian-foot-adder shouyi-text add-text">
								服务地址 : {{item.address}}
							</view>
							<view class="mian-bottom">
								<view class="shouyi-text">项目金额 : ￥{{item.priceTotal}}</view>
								<view class="mian-bottom-shou">
									<span class="shouyi-text">本单收益:  </span>
									<span class="shouyi-text" style="color: #FF6000;font-weight: bold;">￥{{item.artificerMoneyTotal}}</span>
								</view>
							</view>
						</view>
					</view>
				</view>
			</template> 
		</t-refresh>
		<empty v-if="listData.length==0"></empty>
	</view>
</template>

<script>
	import empty from '@/components/empty.vue'
	import tRefresh from "@/components/t-refresh/t-refresh.vue"
	export default {
		components:{tRefresh,empty},
		data(){
			return{
				loadingType:0,
				orderType:'',
				userId:'',
				startTime:'',
				endTime:'',
				listData:[],
				wqlistData:[],
				titleData:'',
				page:1,
				limit:10,
				shouyiMoeny:'',
				wqsyshow:false,
				
				
			}
		},
		onLoad(e) {
			this.orderType=e.type;
			// this.shouyiMoeny=e.shouyiMoeny;
			
			this.userId = uni.getStorageSync("artificerId");
			this.getTime()
			this.getData();
			// this.getWangqiTime();
		},
		onPullDownRefresh: function() {
			this.page = 1;
			this.getData();
		},
		methods:{
			goOder(item){
				uni.navigateTo({
					url:'/my/order/revenueDetails?ordersId='+item.ordersId
				})
			},
			// 加载更多
			loadMore: async function() {
				//loadingType: 0.数据未加载完 1.数据全部加载完了 2.数据加载中
				if(this.loadingType==0){
					this.loadingType=2
					//模拟数据请求
					setTimeout(()=>{
						this.page++;
						this.loadingType=0;
						this.getData()
					},1000)
				}
			},
			getTime(){
				let now = new Date();
				let year = now.getFullYear();
				let month = now.getMonth() + 1; // JavaScript中月份是从0开始计数，需加1
				let monthJia=month<10?'0'+month:month;
				let day = now.getDate();
				let currentDate = year + '-' + monthJia + '-' + day;
				let dayEnd = new Date(now.getFullYear(), monthJia, 0).getDate();
				if(day>=1&&day<=15){
					this.startTime=year + '-' + monthJia + '-01';
					this.endTime=year + '-' + monthJia + '-' + 15;
				}else if(day>=16&&day<=dayEnd){
					this.startTime=year + '-' + monthJia + '-' + 16
					this.endTime=year + '-' + monthJia + '-' + dayEnd;
				}
				if(!this.orderType){
					this.orderType = 1;
				}
			},
			getData(){
				var that=this;
				let data = {
					userId:that.userId,
					orderType:that.orderType,
					startTime:that.startTime,
					endTime:that.endTime,
					page: that.page,
					limit: that.limit,
				}
				that.$Request.getT('/app/artificer/getOrderTypeList', data).then(res => {
					if (res.code == 0) {
						if (that.page == 1) that.listData = []; //如果是第一页需手动制空列表
						that.listData = [...that.listData, ...res.data.list]; //追加新数据
						that.shouyiMoeny = res.earnings;//收益信息
					} else {
						that.$queue.showToast(res.msg);
					}
				});
			},
			//获取往期集合
			// getWangqiTime(){
			// 	var that=this;
			// 	let data = {
			// 		userId:that.userId,
			// 	}
			// 	that.$Request.getT('/app/artificer/getZqhzList', data).then(res => {
			// 		console.log('------>',res)
			// 		if (res.code == 0) {
			// 			 that.wqlistData = res.data;
			// 		} else {
			// 			that.$queue.showToast(res.msg);
			// 		}
			// 	});
			// },
			//
			// wqlistCallback(index){
			// 	console.log("wqlistCallback-->",index)
			// 	this.wqsyshow = false;
			// 	var startAndEnd = this.wqlistData[index].label.split(" 至 ");
			// 	console.log("startAndEnd---->",startAndEnd)
			// 	this.startTime = startAndEnd[0];
			// 	this.endTime = startAndEnd[1];
			// 	console.log("startTime>",this.startTime)
			// 	console.log("endTime>",this.endTime)
			// 	this.getData();
			// },
			wangqi(){//往期收益 跳页
				// this.wqsyshow = true;
				uni.navigateTo({
					url:'/pages/index/previousEarnings?orderType='+this.orderType
				})
			},
		}
	}
</script>

<style scoped>
	/deep/.refresh-body .content{
		/* background-color: #f7f7f7; */
	}
	/deep/.refresh-body{
		height: 100% !important;
		border-top: 2px solid #f7f7f7;
	}
	.mian-bottom{
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		margin-top: 8rpx;
		font-size: ;
	}
	.mian-foot-adder{
		margin: 3px 0px;
	}
	.mian-dingwei image{
		width: 18.75rpx;
		height:21.53rpx;
		margin-right: 5px;
	}
	.mian-dingwei,.mian-bottom-shou{
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.mian-title{
		font-weight: bold;
		font-size: 31rpx;
		color: #333333;
	}
	.mian-foot-view{
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 5px;
	}
	.mian-foot-list{
		width: 73%;
		display: flex;
		flex-direction: column;
	}
.mian-foot-img image{
		width: 100%;
		height: 100%;
		border-radius: 20rpx;
	}
	.mian-foot-img{
		width: 160rpx;
		height: 160rpx;
		background: #E6E6E6;
		border-radius: 30rpx;
	}
	
	.mian-foot{
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
	.shouyi-text{
		color: #7D7D7D;
		font-size: 26rpx;
	}
	.mian-head-time span:nth-child(2){
		color: #11957C;
		margin-top: 1px;
	}
	.mian-head-time{
		display: flex;
		flex-direction: row;
		align-items: center;
		font-weight: 400;
		font-size: 26rpx;
	}
	.mian-head-biao{
		width: 130rpx;
		height: 47rpx;
		line-height: 47rpx;
		color: #fff;
		font-size: 25rpx;
		text-align: center;
		background: linear-gradient(90deg, #019C88, #28BA92, #35C495);
		border-top-left-radius: 21rpx;
		border-bottom-right-radius: 21rpx;
	}
	.mian-head{
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1px solid #E5E5E5;
		padding-bottom: 5px;
		margin-bottom: 10px;
	}
	.mian-view{
		width: 95%;
		background-color: #fff;
		padding: 12px;
		border-radius: 24rpx;
		display: flex;
		flex-direction: column;
		margin: 26rpx auto;
		
	}
	.mian{
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	.header-bottom-money{
		font-weight: bold;
		font-size: 49rpx;
		color: #00b198;
		margin-bottom: 3px;
	}
	.header-bottom{
		display: flex;
		align-items: end;
}
	.header-top-btn{
		width: 174rpx;
		height: 49rpx;
		line-height: 46rpx;
		text-align: center;
		font-size: 26rpx;
		background: linear-gradient(90deg, #019C88, #0FA78B, #35C495);
		border-radius: 24rpx;
		color: #fff;
	}
	.header-text{
		font-weight: 400;
		font-size: 26rpx;
		color: #00b198;
		margin-right: 8rpx;
	}
	.header-text1{
		font-weight: 400;
		font-size: 24rpx;
		color: #00b198;
		margin-right: 8rpx;
		border-radius: 30rpx;
	}
	.header-top-left{
		margin-top:20rpx;
		text-align: right;
	}
	.header-top{
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	.header{
		width: 100%;
		height: 280rpx;
		padding: 15px;
		background:#f7f7f7 url('../../static/index/technician15.png');
		background-repeat: no-repeat;
		background-size: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		/*border-radius: 24rpx;*/
	}
	.content{
		width: 100%;
		height: 100vh;
		background-color: #f7f7f7;
	}
	.od-number{
		font-size: 24rpx;
		color: #7ea866;
	}
	.add-text{
		font-size: 26rpx;
		color: #999;
	}
</style>