moxuan_takeaway_shanghu/my/print/preview.vue

<template>
	<view class="container">
		<!-- 基本信息区域 -->
		<view
			class="box2"
			v-for="(item, index) in list1.details"
			:key="item.id"
			:class="[list1.types[index].wordSize == 2 ? 'big2' : '', list1.types[index].isBlod == 1 ? 'bold' : '']"
		>
			<view v-if="item.isCheck == 1">
				{{ item.printName }}
				<span v-if="item.printName == '订单号' || item.printName == '订单类型'|| item.printName == '送达时间'">：xxx</span>
			</view>
		</view>

		<view class="line"></view>

		<!-- 商品信息区域 -->
		<view class="table" v-if="list2">
			<view
				class="table_box"
				v-for="item in list2.details.filter((ele) => ele.printName != '备注')"
				:key="item.id"
				:class="[
					list2.types.find((ele) => ele.printName == item.printName).wordSize == 2 ? 'big2' : '',
					list2.types.find((ele) => ele.printName == item.printName).isBlod == 1 ? 'bold' : ''
				]"
			>
				<view v-if="item.printName != '备注' && item.isCheck == 1">
					{{ item.printName }}
				</view>
			</view>
		</view>

		<view class="line"></view>

		<view class="table" v-if="list2">
			<view
				class="table_box"
				v-for="item in list2.details.filter((ele) => ele.printName != '备注')"
				:key="item.id"
				:class="[
					list2.types.find((ele) => ele.printName == item.printName).wordSize == 2 ? 'big2' : '',
					list2.types.find((ele) => ele.printName == item.printName).isBlod == 1 ? 'bold' : ''
				]"
			>
				<view v-if="item.printName != '备注' && item.isCheck == 1">xxx</view>
			</view>
		</view>

		<view class="line"></view>

		<view
			v-if="list2"
			class="box2"
			:class="[list2.types.find((ele) => ele.printName == '备注').wordSize == 2 ? 'big2' : '', list2.types.find((ele) => ele.printName == '备注').isBlod == 1 ? 'bold' : '']"
		>
			备注：xxx
		</view>

		<view class="line"></view>

		<!-- 支付信息区域 -->
		<view
			class="box2"
			v-for="(item, index) in list3.details"
			:key="item.id"
			:class="[list3.types[index].wordSize == 2 ? 'big2' : '', list3.types[index].isBlod == 1 ? 'bold' : '']"
		>
			<view v-if="item.isCheck == 1">{{ item.printName }}：xxxx</view>
		</view>
		<view class="line"></view>

		<!-- 用户信息区域 -->
		<view
			class="box2"
			v-for="(item, index) in list4.details"
			:key="item.id"
			:class="[list4.types[index].wordSize == 2 ? 'big2' : '', list4.types[index].isBlod == 1 ? 'bold' : '']"
		>
			<view v-if="item.isCheck == 1">{{ item.printName }}：xxxx</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			info: []
		}
	},
	onLoad(options) {
		this.info = JSON.parse(decodeURIComponent(options.data))
		console.log(this.info)
	},
	computed: {
		// 基本信息
		list1() {
			return this.info.find((ele) => ele.name == '基本信息')
		},
		// 商品信息
		list2() {
			return this.info.find((ele) => ele.name == '商品信息')
		},
		// 支付信息
		list3() {
			return this.info.find((ele) => ele.name == '支付信息')
		},
		// 用户信息
		list4() {
			return this.info.find((ele) => ele.name == '用户信息')
		}
	}
}
</script>

<style lang="scss" scoped>
.container {
	display: flex;
	flex-direction: column;
	padding: 40rpx 50rpx;
	min-height: 100vh;
	background-color: #fff;

	.box {
		font-size: 32rpx;
		line-height: 60rpx;
	}

	.box2 {
		font-size: 24rpx;
		margin-bottom: 15rpx;
	}

	.big {
		font-size: 40rpx;
	}

	.big2 {
		font-size: 32rpx;
	}

	.bold {
		font-weight: bold;
	}

	.line {
		margin-bottom: 15rpx;
		height: 2rpx;
		background-color: #ccc;
	}

	.table {
		display: flex;
		align-items: center;
		height: 60rpx;
		font-size: 24rpx;

		.table_box {
			flex: 1;
			text-align: center;
		}
	}
}
</style>