NurseStationPersonAppletUl/pages/MyBenefits/MyBenefits.vue

<template>
	<view class="app">
		<view class="topleft" @tap="taptime">
			{{newtime}}
			<u-icon name="arrow-down-fill" style='padding-left: 10rpx;'></u-icon>
		</view>
		<view class="benefits">
			<image src="../../static/shouyibeijing.png" mode=""></image>
			<view class="top">
				本月收益(元）
			</view>
			<view class="center" v-if="toppricerlist.monthOrderTotalPrice>=0">
				{{toppricerlist.monthOrderTotalPrice}}
			</view>
			<view class="center" v-else>
				0
			</view>
			<view class="bottom">
				<view class="bottomitem">
					<view class="text">
						今日收益(元)
					</view>
					<view class="price" v-if="toppricerlist.todayOrderPrice>=0">
						{{toppricerlist.todayOrderPrice}}
					</view>
					<view class="price" v-else>
						0
					</view>
				</view>
				<view class="bottomitem">
					<view class="text">
						累计总收益(元)
					</view>
					<view class="price" v-if="toppricerlist.orderTotalPrice>=0">
						{{toppricerlist.orderTotalPrice}}
					</view>
					<view class="price" v-else>
						0
					</view>
				</view>
			</view>
		</view>
		<view class="list" v-if="Detailslist.length>0">
			<view class="item" v-for="(item,index) in Detailslist" :key="index">
				<view class="time">
					<!-- {{item.serviceDate}} {{item.serviceStartTime}} -->
					{{item.finishOrderTime}}
				</view>
				<view class="border"></view>
				<view class="title">
					{{item.nurseItemName}}
				</view>
				<view class="price">
					+ {{item.revenueAmount}}
				</view>
			</view>
		</view>
		<view v-else class="" style="margin-top: 100rpx;">
			<u-empty text="暂无收益详细" mode="list" icon-size='240' font-size='32'></u-empty>
		</view>
		<u-popup v-model="tiemmask" mode='bottom' :closeable='true' :safe-area-inset-bottom='true'>
			<view class="timemask">
				<view class="tabs">
					<view class="tab" v-for="(item,index) in timetablist" @tap='timechange(index)'
						:style="timeindex == index?'border-bottom: 5rpx solid #4C7BC9;':''">
						{{item.name}}
					</view>
				</view>
				<view class="upiker">
					<upicker mode="time" v-model="timeshow" :params="timeparams" v-if="timeindex==0" start-year='2023'
						:end-year='newyear' @confirm='timeconfirm'>
					</upicker>
				</view>
				<view class="ucalendar">
					<ucalendar mode="range" v-if="timeindex==1" @change="ucalendarchange">
					</ucalendar>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import ucalendar from '../ucalendar/u-calendar.vue'
	import upicker from '../upicker/u-picker.vue'
	import {
		personRevenue,
		personRevenueDetails
	} from '@/api/MyBenefits/MyBenefits.js'
	export default {
		components: {
			ucalendar,
			upicker
		},
		data() {
			return {
				nursePersonId: null, //护理员id
				tiemmask: false, //遮罩层
				timeparams: { //时间picker
					year: true,
					month: true,
					day: false,
					hour: false,
					minute: false,
					second: false
				},
				timeshow: false, //时间遮罩层
				timetablist: [{ //切换
					name: '月份选择'
				}, {
					name: '自定义'
				}, ],
				timeindex: 0, //切换绑定的index
				tiemshow: false, //选择时间开关
				newtime: null, //开局月份
				newyear: null, //当前年份
				monthTime: null, //只选一个
				monthStartTime: '', //开始时间
				monthEndTime: '', //结束时间
				toppricerlist: {}, //toplist
				Detailslist: [], //详细
			};
		},
		onShow() {
			var that = this
			that.nowtime();
			const value = uni.getStorageSync('nursePersonId');
			if (value) {
				that.nursePersonId = value
				that.personRevenueinfo();
				that.personRevenueDetailsinfo();
			} else {}
		},
		methods: {
			//收益详细
			personRevenueDetailsinfo() {
				personRevenueDetails(this.nursePersonId, this.monthTime, this.monthStartTime, this.monthEndTime).then(
					res => {
						this.Detailslist = res.data
					})
			},
			//我的收益
			personRevenueinfo() {
				personRevenue(this.nursePersonId, this.monthTime, this.monthStartTime, this.monthEndTime).then(res => {
					this.toppricerlist = res.data
				})
			},
			//piker选择时间
			timeconfirm(e) {
				this.tiemmask = false
				this.newtime = e.year + '.' + e.month
				this.monthTime = e.year + '-' + e.month + '-01'
				this.personRevenueDetailsinfo();
				this.personRevenueinfo();
			},
			//日历选择时间
			ucalendarchange(e) {
				this.tiemmask = false
				e.startMonth > 10 ? '' : e.startMonth = '0' + e.startMonth
				e.startDay > 10 ? '' : e.startDay = '0' + e.startDay
				e.endMonth > 10 ? '' : e.endMonth = '0' + e.endMonth
				e.endDay > 10 ? '' : e.endDay = '0' + e.endDay
				this.newtime = e.startYear + '.' +
					e.startMonth + '.' + e.startDay + ' - ' + e.endYear + '.' + e.endMonth + '.' + e.endDay
				this.monthStartTime = e.startYear + '-' + e.startMonth + '-' + e.startDay
				this.monthEndTime = e.endYear + '-' + e.endMonth + '-' + e.endDay
				this.monthTime = ''
				this.personRevenueDetailsinfo();
				this.personRevenueinfo();
			},
			//time
			timechange(index) {
				this.timeindex = index;
			},
			//点击时间
			taptime() {
				this.tiemmask = true;
			},
			//当前月份
			nowtime() {
				let nowDate = new Date();
				let date = {
					// 获取当前年份
					year: nowDate.getFullYear(),
					//获取当前月份
					month: nowDate.getMonth() + 1,
					//获取当前日期
				};
				this.newyear = date.year
				//拼接
				if (date.month < 10) {
					this.newtime = date.year + ".0" + date.month
					this.monthTime = date.year + '-0' + date.month + '-01'
				} else {
					this.newtime = date.year + "." + date.month
					this.monthTime = date.year + '-' + date.month + '-01'
				}
			},
		}
	}
</script>

<style lang="scss">
	.app {
		padding: 0;

		.timemask {
			height: 1100rpx;
			position: relative;

			.ucalendar {
				width: 100%;
			}

			.upiker {
				position: absolute;
				top: 25%;
				left: 50%;
				transform: translateX(-50%);
				width: 100%;
			}

			.tabs {
				width: 70%;

				.tab {
					width: 150rpx;
					height: 100rpx;
					font-size: 32rpx;
					color: #000000;
					line-height: 100rpx;
					text-align: center;
					margin-left: 60rpx;
					display: inline-block;
				}
			}
		}

		.list {
			width: 94%;
			margin: 0 auto;

			.item {
				background-color: #fff;
				width: 100%;
				height: 210rpx;
				margin-top: 20rpx;
				box-shadow: 0rpx 9rpx 31rpx 9rpx rgba(0, 0, 0, 0.03);
				border-radius: 5rpx;
				position: relative;

				.border {
					width: 94%;
					margin: 0 auto;
					height: 1rpx;
					background-color: #E6E6E6;
				}

				.title {
					display: inline-block;
					width: 70%;
					font-size: 34rpx;
					color: #333333;
					overflow: hidden; //超出的文本隐藏
					display: -webkit-box;
					-webkit-line-clamp: 1; // 超出多少行
					-webkit-box-orient: vertical;
					position: absolute;
					left: 30rpx;
					top: 120rpx;
				}

				.price {
					position: absolute;
					right: 30rpx;
					top: 120rpx;
					font-size: 34rpx;
					color: #EA706A;
				}

				.time {
					height: 80rpx;
					line-height: 80rpx;
					font-size: 28rpx;
					color: #848383;
					margin-left: 30rpx;
				}
			}
		}

		.benefits {
			width: 94%;
			height: 380rpx;
			margin: 20rpx auto 0;
			position: relative;
			color: #FFFFFF;

			.bottom {
				width: 100%;
				position: absolute;
				bottom: 30rpx;
				display: flex;
				justify-content: space-around;
				text-align: center;

				.bottomitem {
					.text {
						font-size: 26rpx;
						opacity: 0.8;
					}

					.price {
						margin-top: 17rpx;
						font-size: 37rpx;
					}
				}
			}

			.center {
				font-weight: 600;
				position: absolute;
				top: 87rpx;
				left: 26rpx;
				font-size: 66rpx;
			}

			.top {
				position: absolute;
				top: 47rpx;
				left: 26rpx;
				font-size: 24rpx;
				opacity: 0.8;
			}

			image {
				width: 100%;
				height: 100%;
			}
		}

		.topleft {
			margin: 30rpx 0 0 30rpx;
		}
	}
</style>