352 lines
7.9 KiB
Vue
352 lines
7.9 KiB
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" @tap='gotaskDetails(item)'>
|
||
<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'
|
||
}
|
||
},
|
||
//去详情
|
||
gotaskDetails(item) {
|
||
uni.navigateTo({
|
||
url: `/pages/RevenueDetails/RevenueDetails?orderDetailsId=${item.nurserStationPersonRevenueId}`
|
||
})
|
||
},
|
||
}
|
||
}
|
||
</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>
|