156 lines
3.6 KiB
Vue
156 lines
3.6 KiB
Vue
<template>
|
|
<view class="page-wrapper">
|
|
<view class="custom-content">
|
|
<view class="start-time" :style="{ color: vdata.startTime ? '#000' : '#666' }" @tap="refStartTime.show">{{
|
|
vdata.startTime || '请选择开始时间'
|
|
}}</view>
|
|
<view class="endTime-time" :style="{ color: vdata.endTime ? '#000' : '#666' }" @tap="refEndTime.show">{{
|
|
vdata.endTime || '请选择结束时间'
|
|
}}</view>
|
|
</view>
|
|
<block v-for="v in vdata.list" :key="v.id">
|
|
<view class="list-main" @tap="toDetails(v.id)">
|
|
<view class="left">
|
|
<view class="title">{{ v.realname }}</view>
|
|
<view class="time">{{ v.workStartTime }}</view>
|
|
</view>
|
|
<view class="line">—</view>
|
|
<view class="right">
|
|
<view class="amount title">￥{{ (v.successAmount / 100).toFixed(2) }}</view>
|
|
<view class="time">{{ v.workEndTime || '未下班' }}</view>
|
|
</view>
|
|
</view>
|
|
</block>
|
|
<view class="list-null" v-if="!vdata.hasNext">暂无更多数据</view>
|
|
</view>
|
|
<xp-picker mode="ymdhi" ref="refStartTime" @confirm="timeConfirm($event, 'startTime')">
|
|
<view></view>
|
|
</xp-picker>
|
|
<xp-picker mode="ymdhi" ref="refEndTime" @confirm="timeConfirm($event, 'endTime')">
|
|
<view></view>
|
|
</xp-picker>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { reactive, ref } from 'vue'
|
|
import { onLoad, onReachBottom, onUnload } from '@dcloudio/uni-app'
|
|
import { $handoverList } from '@/http/apiManager'
|
|
import dayjs from 'dayjs'
|
|
const refStartTime = ref(null)
|
|
const refEndTime = ref(null)
|
|
const vdata = reactive({
|
|
list: [],
|
|
hasNext: true,
|
|
})
|
|
const params = {
|
|
pageSize: 10,
|
|
pageNumber: 1,
|
|
queryDateRange: '',
|
|
}
|
|
const getList = () => {
|
|
if (!vdata.hasNext) return
|
|
$handoverList(params).then(({ bizData }) => {
|
|
vdata.list.push(...bizData.records)
|
|
vdata.hasNext = bizData.hasNext
|
|
})
|
|
}
|
|
getList()
|
|
onReachBottom(() => {
|
|
params.pageNumber += 1
|
|
getList()
|
|
})
|
|
/**
|
|
* @param {e} Object 组件原生 回调 时间戳 日期
|
|
* @param {key} String vdata 对象的 key 值 赋值使用
|
|
* */
|
|
const timeConfirm = (e, key) => {
|
|
vdata[key] = dayjs(e.timestamp).format('YYYY-MM-DD hh:mm')
|
|
|
|
if (key == 'endTime' || (vdata.endTime != undefined && dayjs(vdata.startTime).isAfter(vdata.endTime))) {
|
|
console.log('进入请求')
|
|
params.queryDateRange = `customDateTime_${vdata.startTime + ':00'}_${vdata.endTime + ':00'}`
|
|
vdata.list = []
|
|
params.pageNumber = 1
|
|
vdata.hasNext = true
|
|
getList()
|
|
}
|
|
}
|
|
/**
|
|
* @param {id} String 用于 和后端交互请求详情
|
|
* */
|
|
const toDetails = (id) => {
|
|
uni.navigateTo({
|
|
url: '/pages/handover/handover?id=' + id,
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.list-main {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 15rpx;
|
|
margin: 30rpx;
|
|
background-color: #fff;
|
|
border-radius: 14rpx;
|
|
|
|
.title {
|
|
font-size: 22rpx;
|
|
font-weight: 600;
|
|
margin-bottom: 10rpx;
|
|
}
|
|
|
|
.amount {
|
|
color: $v-primary;
|
|
}
|
|
|
|
.line {
|
|
align-self: flex-end;
|
|
}
|
|
|
|
.right {
|
|
text-align: right;
|
|
}
|
|
|
|
.time,
|
|
.line {
|
|
color: #ccc;
|
|
}
|
|
}
|
|
|
|
.custom-content {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
margin-top: 30rpx;
|
|
|
|
view {
|
|
flex: 0 0 30%;
|
|
padding: 10rpx 0;
|
|
background-color: #ded7d7;
|
|
text-align: center;
|
|
border-radius: 10rpx;
|
|
font-size: 16rpx;
|
|
}
|
|
}
|
|
|
|
.list-null {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
color: #666;
|
|
margin: 30rpx 0;
|
|
padding: 0 30rpx;
|
|
font-size: 24rpx;
|
|
font-weight: 600;
|
|
|
|
&::after,
|
|
&::before {
|
|
content: '';
|
|
display: block;
|
|
width: 35%;
|
|
height: 2rpx;
|
|
background-color: #ededed;
|
|
}
|
|
}
|
|
</style>
|