cashier_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="">交班人:{{form.staffName}}</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">{{form.dutyId}}</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">{{form.startTime}}</view>
					</view>
					<view class="u-m-t-32">
						<view>交班时间</view>
						<view class="color-666 u-font-24 u-m-t-8">{{form.endTime}}</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.memberData" :key="index">
						<view class="color-666 u-font-24">{{item.deposit}}</view>
						<view class="u-m-t-8 color-333">{{item.amount}}</view>
					</view>
				</view>

			</view>

		</view>

	</view>

</template>

<script setup>
	import {
		onLoad,
	} from '@dcloudio/uni-app';
	import {
		reactive
	} from 'vue';
	import myButton from '@/components/my-components/my-button';
	onLoad((e) => {
		form.dutyId = e.dutyId
		form.staffName = e.staffName
		form.startTime = e.startTime
		form.endTime = e.endTime
		form.memberData = JSON.parse(e.memberData)
		console.log(e)
	})

	const form = reactive({
		isDayin: false,
		startTime: '2024-07-29 11:47:28',
		endTime: '2024-07-29 11:47:28',
		banciItem: {
			name: '班次'
		},
		staffName: '',
		memberData: [],
		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>