moxuan_takeaway_shanghu/my/print/print.vue

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

		<!-- 分段器区域 -->
		<view class="subsection">
			<u-subsection
				v-if="modelDatas.length"
				bgColor="#fff"
				activeColor="#0061FF"
				inactiveColor="#808080"
				:list="modelDatas"
				:current="currentIndex"
				@change="changeIndex"
			></u-subsection>
		</view>

		<view class="gap"></view>

		<!-- 小票编辑区域 -->
		<view class="edit">
			<view class="edit_title">小票编辑</view>
			<view class="edit_subTitle">
				<view class="sub_box"></view>
				基本信息
			</view>
			<view class="edit_desc">注：{{ descList[currentIndex] }}为小票必须展示的信息</view>

			<view class="check_box">
				<view class="check_box_item" v-for="item in dataObj.details" :key="item.id">
					<u-checkbox
						size="50"
						v-model="item.isCheck == 1 ? true : false"
						:disabled="
							item.printName == '平台名称' ||
							item.printName == '店铺名' ||
							item.printName == '订单号' ||
							item.printName == '送达时间' ||
							item.printName == '订单类型' ||
							item.printName == '商品名称' ||
							item.printName == '单价' ||
							item.printName == '数量' ||
							item.printName == '备注' ||
							item.printName == '打包费' ||
							item.printName == '商品费' ||
							item.printName == '优惠券' ||
							item.printName == '跑腿费' ||
							item.printName == '优惠活动' ||
							item.printName == '合计' ||
							item.printName == '姓名' ||
							item.printName == '电话号' ||
							item.printName == '地址' ||
							item.printName == '订餐时间'
						"
						:checked="item.isCheck == 1"
						@change="changeCheck(item)"
					>
						{{ item.printName }}
					</u-checkbox>
				</view>
			</view>
		</view>

		<!-- 自定义样式区域 -->
		<view class="diy">
			<view class="diy_title">自定义样式</view>

			<view class="diy_box" v-for="item in dataObj.types" :key="item.id">
				<view class="box_title">{{ item.printName }}</view>
				
				<view class="box_row">
					<view style="margin-bottom: 10rpx">打印字号：</view>
					<u-radio-group v-model="item.wordSize">
						<u-radio :customStyle="{ marginBottom: '8px' }" v-for="(item, index) in radiolist1" :key="index" :name="item.label">
							{{ item.name }}
						</u-radio>
					</u-radio-group>
				</view>
				<view class="box_row">
					<view style="margin-bottom: 10rpx">字体：</view>
					<u-radio-group v-model="item.isBlod">
						<u-radio :customStyle="{ marginBottom: '8px' }" v-for="(item, index) in radiolist2" :key="index" :name="item.label">
							{{ item.name }}
						</u-radio>
					</u-radio-group>
				</view>
			</view>
		</view>

		<!-- 保存按钮区域 -->
		<view class="btn" v-if="modelDatas.length">
			<view class="btn_box" @click="handleSave">保存</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			// 店铺id
			shopId: '',
			// 打印数据id
			printId: '',
			// 当前激活分段器索引
			currentIndex: 0,
			// 打印字号数组
			radiolist1: [
				{
					name: '正常',
					label: 1
				},
				{
					name: '放大',
					label: 2
				}
			],
			// 打印字体数组
			radiolist2: [
				{
					name: '正常',
					label: 0
				},
				{
					name: '加粗',
					label: 1
				}
			],
			// 模版数据
			modelDatas: [],
			// 每一个分段器的数据
			dataObj: {},

			descList: ['平台名称、店铺名、订单号', '商品名称、单价、数量、备注', '打包费、商品费、优惠券、跑腿费、优惠活动和合计', '姓名、电话号、地址 、订餐时间']
		}
	},
	onLoad() {
		this.shopId = uni.getStorageSync('shopId')
		// 根据店铺ID获取小票模板数据
		this.getModelDatas()
	},
	methods: {
		// 根据店铺ID获取小票模板数据
		async getModelDatas() {
			const res = await this.$Request.getT('/admin/printInfo/getPrintModelData', {
				shopId: this.shopId
			})
			console.log(res)
			if (res.code == 0) {
				this.printId = res.data.id
				this.modelDatas = res.data.modelDatas
				this.changeIndex(this.currentIndex)
			}
		},
		// 保存按钮回调
		async handleSave() {
			const res = await this.$Request.postJson(this.printId ? '/admin/printInfo/updatePrintModelData' : '/admin/printInfo/insertPrintModelData', {
				id: this.printId,
				modelDatas: this.modelDatas,
				shopId: this.shopId
			})
			if (res.code == 0) {
				uni.showToast({
					title: '保存成功',
					mask: true,
					icon: 'success'
				})
				setTimeout(() => {
					this.getModelDatas()
				}, 1500)
			}
		},
		// 切换分段器时的回调
		changeIndex(i) {
			this.currentIndex = i
			this.dataObj = this.modelDatas[this.currentIndex]
			uni.pageScrollTo({
				selector: '.gap',
				offsetTop: -500
			})
		},

		// 切换check时的回调
		changeCheck(item) {
			// console.log(item)
			item.isCheck = item.isCheck == 1 ? 0 : 1
		},
		handlePreview() {
			let data = encodeURIComponent(JSON.stringify(this.modelDatas))
			uni.navigateTo({
				url: `/my/print/preview?data=${data}`
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.container {
	min-height: 100vh;
	overflow-y: auto;

	.title {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		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;
		}
	}

	.subsection {
		position: fixed;
		top: 80rpx;
		left: 0;
		right: 0;
	}

	.gap {
		margin-top: 150rpx;
		height: 20rpx;
		background-color: #f1f1f1;
	}

	.edit {
		margin: 0 0 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: 0 20rpx 0 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;
			}
		}
	}

	.diy {
		background-color: #fff;

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

		.diy_box {
			padding: 0 20rpx 20rpx;
			font-size: 28rpx;

			.box_title {
				height: 80rpx;
				line-height: 80rpx;
				font-weight: bold;
			}

			.box_row {
				margin-bottom: 20rpx;
			}
		}
	}

	.btn {
		display: flex;
		justify-content: center;
		padding: 0 20rpx 40rpx;
		background-color: #fff;

		.btn_box {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 200rpx;
			height: 80rpx;
			color: #fff;
			border-radius: 10rpx;
			background-color: #0061ff;
		}
	}
}
</style>