cashier_app/pageWorkControl/index/index.vue

<template>
	<view class="top fixed-top bg-fff">
		<view class="u-flex color-main u-m-t-32 ">
		
			<view class="u-flex u-p-l-20 u-flex-1 u-row-center">
				<view @tap="timeToggle">
					<view class=" u-font-24 color-main u-flex" v-if="pageData.time.start&&pageData.time.end">
						<text>{{timeFormat(pageData.time.start, 'yyyy年mm月dd日') || '开始'}}</text>
						<text class="u-p-l-10 u-p-r-10">至</text>
						<text>{{timeFormat(pageData.time.end, 'yyyy年mm月dd日') || '结束'}}</text>

					</view>
					<view class="" v-else>所有时间</view>
				</view>
				<view class="u-flex u-m-l-12">
					<image src="/pageWorkControl/static/images/icon-arrow-down-fill.svg" class="icon-arrow-down-fill "
						mode=""></image>
				</view>
			</view>
		</view>
	</view>
	<template>
		<view class="color-333 u-font-28 min-page bg-gray default-box-padding" style="padding-top:80px;">
			<scroll-view :scroll-x="true" class="bg-fff table u-text-center">
				<view class="bg-fff border-r-12  u-flex no-wrap u-col-top">
					<view class="constantbox">
						<view class="constantboxitem">
							<view class="head">交班人</view>
							<view class="head">开班时间</view>
							<view class="head">交班时间</view>
							<view class="head">订单数</view>
							<view class="head">订单金额(元)</view>
						</view>
						<view class="constantboxitem" v-for="(item,index) in pageData.tableData.data" :key="index"
							@click="toDetail(item)">
							<view class="head">{{item.staffName || '无'}}</view>
							<view class="head">{{item.loginTime|| '无'}}</view>
							<view class="head">{{item.handoverTime|| '无'}}</view>
							<view class="head">{{item.orderCount|| '无'}}</view>
							<view class="head">{{item.handAmount|| '无'}}</view>
						</view>
					</view>
				</view>
			</scroll-view>
			<up-loadmore :status="pageData.tableData.status" />
			<view style="height: 100px;"></view>
		</view>
	</template>

	<!-- 交班记录时间筛选 -->
	<my-date-pickerview @confirm="datePickerConfirm" mode="date" ref="datePicker"></my-date-pickerview>
</template>

<script setup>
	import { onHide, onShow, onReachBottom } from '@dcloudio/uni-app';
	import { reactive, ref, watch } from 'vue';
	import myButton from '@/components/my-components/my-button';
	import myDatePickerview from '@/components/my-components/my-date-pickerview'
	import { timeFormat } from '@/node_modules/uview-plus';
	import go from '@/commons/utils/go.js'

	import { getHandoverRecord } from '@/http/api/handover.js'

	const pageData = reactive({
		time: {
			start: '',
			end: ''
		},
		query: {
			page: 1,
			size: 15,
			beginDate: '',
			endDate: ''
		},
		tableData: {
			data: [],
			total: 0,
			status: 'loadmore'
		}
	})
	const datePicker = ref(null)
	onShow(() => {
		getTableData()
	})
	onReachBottom(() => {
		console.log(pageData.tableData.status)
		if (pageData.tableData.status != 'nomore') {
			pageData.query.page++
			getTableData()
		}
	})
	
	/**
	 * 获取交班记录
	 */
	const getTableData = async () => {
		pageData.tableData.status = 'loading';
	
		getHandoverRecord(pageData.query).then(res=>{
			pageData.tableData.total = res.totalRow
			if (pageData.query.page == 1 && res.records.length < 10) {
				pageData.tableData.data = res.records
				pageData.tableData.status = 'nomore'
				return false;
			} else {
				setTimeout(() => {
					pageData.tableData.data = [...pageData.tableData.data, ...res.records]
					if (pageData.tableData.data.length >= pageData.tableData.total) pageData.tableData.status = 'nomore';
					else pageData.tableData.status = 'loadmore';
				}, 500)
			}
		}).catch(res=>{
			pageData.tableData.status = 'nomore'
		})
		
	}

	/**
	 * 选择时间
	 */
	function timeToggle() {
		datePicker.value.toggle()
	}
	
	/**
	 * 筛选时间确认
	 * @param {Object} e
	 */
	function datePickerConfirm(e) {
		pageData.tableData.data = [];
		pageData.query.beginDate = timeFormat(new Date(e.start.replaceAll('-', '/')).getTime())
		pageData.query.endDate = timeFormat(new Date(e.end.replaceAll('-', '/')).getTime())
		pageData.time.start = new Date(e.start.replaceAll('-', '/')).getTime()
		pageData.time.end = new Date(e.end.replaceAll('-', '/')).getTime()
		getTableData()
	}
	function toDetail(item) {
		// go.to('PAGES_WORK_HANDOVER_DETAIL', item)
	}

</script>

<style lang="scss" scoped>
	.min-page {}

	.fixed-top {
		padding: 32rpx 28rpx;
		z-index: 100;
	}

	.bottom {
		background-color: transparent;
		bottom: 84rpx;
		left: 28rpx;
		right: 28rpx;
	}

	.table {
		border-radius: 12rpx 12rpx 0rpx 0rpx;
		overflow: hidden;
		font-size: 24rpx;

		.constantbox {
			.constantboxitem {
				display: flex;

				.head {
					width: 200rpx;
					padding: 32rpx 24rpx;
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: 400;
					font-size: 24rpx;
					color: #333333;
					overflow: hidden; //超出的文本隐藏
					text-overflow: ellipsis; //溢出用省略号显示
					white-space: nowrap; //溢出不换行
				}

				.head:nth-child(4) {
					width: 300rpx;
				}

				.head:nth-child(5) {
					width: 300rpx;
				}
			}

			.constantboxitem:nth-child(even) {
				background: #fff;
			}

			.constantboxitem:nth-child(odd) {
				background: #F7F6FB;
			}

			.constantboxitem:nth-child(1) {
				background: #AEBAD2;
				color: #fff;
				font-size: 24rpx;
			}
		}

		.item:nth-of-type(2n+1) {
			background-color: rgb(249, 249, 249);
		}
	}
</style>