moxuan_takeaway_shanghu/my/print/print.vue

<template>
	<view class="container">
		<!-- 预览按钮区域 -->
		<view class="title">
			<img class="img" src="../../static/images/my/eye.png" />
			预览效果
		</view>

		<!-- 分段器区域 -->
		<u-subsection bgColor="#fff" activeColor="#0061FF" inactiveColor="#808080" :list="list" :current="currentIndex"></u-subsection>

		<!-- 小票编辑区域 -->
		<view class="edit">
			<view class="edit_title">小票编辑</view>
			<view class="edit_subTitle">
				<view class="sub_box"></view>
				基本信息
			</view>
			<view class="edit_desc">注：平台名称、店铺名、单号、送达时间为小票必须展示的信息123132132123132123</view>

			<view class="check_box">
				<view class="check_box_item" v-for="(item, index) in checkboxList" :key="index">
					<u-checkbox size="50" v-model="item.checked" :disabled="item.disabled" :checked="item.checked">
						{{ item.name }}
					</u-checkbox>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			list: ['基本信息', '商品信息', '支付信息', '用户信息'],
			currentIndex: 0,
			checkboxList: [
				{
					name: '平台名称',
					disabled: true,
					checked: true
				},
				{
					name: '店铺名称',
					disabled: true,
					checked: true
				},
				{
					name: '订单号',
					disabled: true,
					checked: true
				},
				{
					name: '送达时间',
					disabled: true,
					checked: true
				},
				{
					name: '订单类型',
					disabled: false,
					checked: true
				}
			],
			checked: ''
		}
	}
}
</script>

<style lang="scss" scoped>
.container {
	.title {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		padding: 0 20rpx;
		height: 80rpx;
		font-size: 28rpx;
		color: #0061ff;
		background-color: #fff;
		border-bottom: 2rpx solid #f1f1f1;

		.img {
			margin-right: 6rpx;
			width: 58rpx;
			height: 58rpx;
		}
	}

	.edit {
		margin: 20rpx 0;
		background-color: #fff;

		.edit_title {
			display: flex;
			align-items: center;
			padding: 0 20rpx;
			height: 92rpx;
			font-size: 32rpx;
			font-weight: bold;
			border-bottom: 2rpx solid #f1f1f1;
		}

		.edit_subTitle {
			display: flex;
			align-items: center;
			padding: 0 20rpx;
			margin-top: 32rpx;
			font-size: 28rpx;

			.sub_box {
				margin-right: 12rpx;
				width: 20rpx;
				height: 20rpx;
				background-color: #0061ff;
			}
		}

		.edit_desc {
			padding-left: 50rpx;
			margin: 15rpx 0;
			font-size: 24rpx;
			color: #999999;
			line-height: 36rpx;
		}

		.check_box {
			padding: 0 20rpx;
			margin-top: 15px;
			display: flex;
			flex-wrap: wrap;

			.check_box_item {
				margin-bottom: 35rpx;
				width: 350rpx;
			}
		}
	}
}
</style>