cashier_admin_app/pageWorkControl/handover-detail/handover-detail.vue

<template>
	<view>
		<view class=" u-font-28 color-333 min-page bg-gray default-box-padding">

			<view class="bg-fff border-r-18 default-box-padding u-flex">
				<view class="">交班人:</view>
				<view class=" u-flex  u-m-l-24 ">
					<text class="color-999" v-if="form.banciItem===''">暂未选择</text>
					<text v-else>
						{{form.banciItem.name}}
					</text>
				</view>
			</view>
			
			<view class="bg-fff u-m-t-32 border-r-18 u-flex default-box-padding">
				<view class="u-flex-1 border-r">
					<view>
						<view>班次号</view>
						<view class="color-666 u-font-24 u-m-t-8">10001</view>
					</view>
					<view class="u-m-t-32">
						<view>班次</view>
						<view class="color-666 u-font-24 u-m-t-8">早班</view>
					</view>
				</view>
				<view class="u-flex-1">
					<view>
						<view>开班时间</view>
						<view class="color-666 u-font-24 u-m-t-8">2024-05-17 14:44:50</view>
					</view>
					<view class="u-m-t-32">
						<view>交班时间</view>
						<view class="color-666 u-font-24 u-m-t-8">2024-05-17 14:44:56</view>
					</view>
				</view>
			</view>
			
			<view class="u-font-32 u-m-t-32 u-m-b-32">数据统计</view>
			<view class="bg-fff u-m-t-32 border-r-18 default-box-padding">
				<view class="u-flex list u-text-center u-flex-wrap">
					<view class="item u-m-b-32" v-for="(item,index) in form.infolists" :key="index">
						<view class="color-666 u-font-24">{{item.name}}</view>
						<view class="u-m-t-8 color-333">{{item.value}}</view>
					</view>
				</view>

			</view>

		</view>

	</view>

</template>

<script setup>
	import {
		reactive
	} from 'vue';
	import myButton from '@/components/my-components/my-button';
	const form = reactive({
		isDayin: false,
		kaibanTime: '2024-07-29 11:47:28',
		jiaobanTime: '2024-07-29 11:47:28',
		banciItem: {
			name: '班次'
		},
		infolists: [{
				name: '订单数',
				value: 0
			},
			{
				name: '订单额',
				value: 0
			},
			{
				name: '订单微信支付额',
				value: 0
			},
			{
				name: '订单余额支付金额',
				value: 0

			},
			{
				name: '订单线下支付金额',
				value: 0
			
			},
			{
				name: '订单支付宝支付额',
				value: 0
			},
			{
				name:'堂食订单数',
				value: 0
			},
			{
				name:'堂食订单金额',
				value: 0
			},
			{
				name:'自取订单数',
				value: 0
			},
			{
				name:'自取订单金额',
				value: 0
			},
			{
				name:'外卖订单数',
				value: 0
			},
			{
				name:'外卖订单金额',
				value: 0
			},
			{
				name:'退款订单数',
				value: 0
			},
			{
				name:'成功退款金额',
				value: 0
			},
			{
				name:'微信成功退款金额',
				value: 0
			},
			{
				name:'余额成功退款金额',
				value: 0
			},
			{
				name:'线下成功退款金额',
				value: 0
			},
			{
				name:'支付宝成功退款金额',
				value: 0
			},
			{
				name:'充值数',
				value: 0
			},
			{
				name:'充值金额',
				value: 0
			},
			{
				name:'开通会员数',
				value: 0
			},
			{
				name:'开通会员金额',
				value: 0
			},
			{
				name:'配送费',
				value: 0
			},
			{
				name:'收银笔数',
				value: 0
			},
			{
				name:'收银金额',
				value: 0
			},
			{
				name:'订单满减优惠金额',
				value: 0
			},
			{
				name:'订单积分兑换金额',
				value: 0
			},
			{
				name:'订单优惠券减免金额',
				value: 0
			},
			{
				name:'订单会员优惠金额',
				value: 0
			},
			{
				name:'充值赠送金额',
				value: 0
			},
			{
				name:'堂食退款金额',
				value: 0
			},
			{
				name:'外卖退款金额',
				value: 0
			},
			{
				name:'自取退款金额',
				value: 0
			},
			{
				name:'堂食订单金额',
				value: 0
			},
			{
				name:'外卖订单金额',
				value: 0
			},
			{
				name:'配送费退款',
				value: 0
			},
			{
				name:'配送费总额',
				value: 0
			},
			{
				name:'微信到账金额',
				value: 0
			},
			{
				name:'支付宝到账金额',
				value: 0
			},
			{
				name:'收银支付金额',
				value: 0
			},
			{
				name:'收银余额支付金额',
				value: 0
			},
			{
				name:'收银微信支付金额',
				value: 0
			},
			{
				name:'挂账金额',
				value: 0
			},
			{
				name:'商家减免',
				value: 0
			}
		]
	})


	function toggleIsDayin() {
		form.isDayin = !form.isDayin
	}

	function back() {
		uni.navigateBack()
	}

	function jiaoban() {

	}
</script>

<style lang="scss" scoped>
	.border-r {
		position: relative;

		&::after {
			position: absolute;
			display: block;
			content: '';
			width: 1px;
			border-radius: 1px;
			right: 100rpx;
			top: 32rpx;
			bottom: 32rpx;
			background-color: #E5E5E5;
			;
		}
	}

	.list {
		.item {
			width: 33.333%;
		}
	}

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

		.u-absolute {
			bottom: 100%;
			margin-bottom: 32rpx;
			right: 0;
		}
	}
</style>