cashier_admin_app/pageWorkControl/handover-confirm/handover-confirm.vue

<template>
	<view>
		<view class=" u-font-28 min-page bg-gray default-box-padding">
			<view class="bg-fff border-r-18 default-box-padding">

				<view class="u-m-t-24">
					<view class="font-bold">开班时间</view>
					<view class="u-m-t-16 u-flex u-row-between u-p-b-24 border-bottom">
						<view>
							<uni-dateformat format="yyyy-MM-dd hh:mm:ss" :date="form.kaibanTime"></uni-dateformat>
							<text></text>
						</view>
						<view class="u-flex">
							<uni-icons type="right" color="#999" size="16"></uni-icons>
						</view>
					</view>
				</view>
				<view class="u-m-t-24">
					<view class="font-bold">交班时间</view>
					<view class="u-m-t-16 u-flex u-row-between u-p-b-24 border-bottom">
						<view>
							<uni-dateformat format="yyyy-MM-dd hh:mm:ss" :date="form.jiaobanTime"></uni-dateformat>
							<text></text>
						</view>
					</view>
				</view>
				<view class="u-m-t-24">
					<view class="font-bold">交班人</view>

					<view class="u-m-t-16 u-flex u-row-between u-p-b-24 border-bottom">
						<view>
							<text class="color-999" v-if="form.banciItem===''">暂未选择</text>
							<text v-else>
								{{form.banciItem.name}}
							</text>
						</view>
						<view class="u-flex">
							<uni-icons type="right" color="#999" size="16"></uni-icons>
						</view>
					</view>

				</view>
				<view class="u-m-t-24">
					<view class="font-bold">班次</view>

					<view class="u-m-t-16 u-flex u-row-between u-p-b-24 ">
						<view>
							<text class="color-999" v-if="form.banciItem===''">暂未选择</text>
							<text v-else>
								{{form.banciItem.name}}
							</text>
						</view>
						<view class="u-flex">
							<uni-icons type="right" color="#999" size="16"></uni-icons>
						</view>
					</view>

				</view>
			</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 style="height: 200rpx;"></view>
		</view>

	</view>
	

	<view class="u-fixed bottom u-flex bg-fff ">
		<view class="u-absolute u-flex" @tap="toggleIsDayin">
			<label class="radio">
				<radio @tap.stop="toggleIsDayin" :checked="form.isDayin" class="scale7" />
			</label>
			<text class="color-333 u-font-32">打印</text>
		</view>
		
		<view class="u-flex-1">
			<my-button bgColor="#333" color="#fff" borderRadius="100rpx 0 0 100rpx" shape="circle" plain type="primary"
				@tap="back">返回</my-button>
		</view>
		<view class="u-flex-1">
			<my-button borderRadius="0 100rpx 100rpx 0" shape="circle" type="primary" @tap="jiaoban">确认交班</my-button>
		</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
			},
		]
	})
	
	
	function toggleIsDayin(){
		form.isDayin=!form.isDayin
	}
	
	function back(){
		uni.navigateBack()
	}
	function jiaoban(){
		
	}
</script>

<style lang="scss" scoped>
	.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>