emis-app/pages/print/courierNote.vue

<template>
	<tpx-page>
		<tpx-layout>
			<template v-slot:body>
				<view class="blcok-white-noradius" style="margin-top: 0;">
					<u-row justify="between">
						<view style="width: 140rpx;" class="font-weight">运单号</view>
						<view style="flex:1;">
							<tpx-scan-input v-model:value="submitParam.billCode" placeholder="请输入或扫码"
								@change="handleScanValChange" iconPos="right"></tpx-scan-input>
						</view>
					</u-row>
					<u-row justify="between" custom-style="margin-top:20rpx;">
						<view style="width: 140rpx;" class="font-weight">下单时间</view>
						<view style="flex:1;">
							<tpx-date-input v-model:value="submitParam.date" placeholder="请选择时间"></tpx-date-input>
						</view>
					</u-row>
					<u-row custom-style="margin-top:20rpx;" justify="end">
						<u-row>
							<text class="pr-30">是否已打印</text>
							<u-switch v-model="submitParam.hasPrinted"
								active-color="#B12D29" size="34"></u-switch>
						</u-row>
					</u-row>
		
					<view class="mt-30">
						<u-button type="primary" size="large" shape="square" plain="true" 
							custom-style="height:80rpx;font-size: 30rpx;border-radius: 14rpx;">查询</u-button>
					</view>
					<view class="clr-prm mt-20">注意：当打印出来寄件分拨或未端分拨返回为空时，请等待5分钟后再补 打印</view>
		
					<u-row justify="between" custom-style="margin-top:30rpx;">
						<view style="width: 140rpx;" class="font-weight">打印联选择</view>
						<view style="flex:1;" class="ml-20">
							<u-radio-group v-model="submitParam.lang" placement="row">
								<u-radio size="26" labelSize="26" label-color=":#999" activeColor="#B12D29" 
									customStyle="margin: 0 20rpx 0 0" v-for="(item, index) in yinlTypeList"
									:label="item.title" :name="item.val" 
								></u-radio>
							</u-radio-group>
						</view>
					</u-row>
					<view class="mt-20">
						<u-checkbox-group v-model="submitParam.printType" placement="column">
							<u-row custom-style="flex-wrap: wrap;">
								<u-col span="6" v-for="(item, index) in dicData.emis_print_type">
									<u-checkbox size="26" labelSize="26" label-color=":#999" activeColor="#B12D29"
										:customStyle="{marginBottom: '8rpx'}" 
										:label="item.title" :name="item.val" 
									></u-checkbox>
								</u-col>
							</u-row>
						</u-checkbox-group>
					</view>
				</view>
				
				<view class="blcok-white-noradius">
					<u-row justify="between">
						<text class="font-weight">运单列表</text>
						<view >
							<u-checkbox-group @change="handleSelAll">
								<u-checkbox size="26" labelSize="26" label-color=":#999" activeColor="#B12D29"
									label="全选"  :checked="submitParam.subBillCodeRange.length == yundanList.length" 
								></u-checkbox>
							</u-checkbox-group>
						</view>
					</u-row>
					
					<tpx-checkitems :list="yundanList" v-model:value="submitParam.subBillCodeRange" v-slot="dlCurrent" type="multiple" 
					>
						<view slot class="yditem mt-20">
							<u-row>
								<view class="com-chk-icon">
									<u-checkbox-group>
										<u-checkbox size="26" labelSize="26" label-color=":#999" activeColor="#B12D29"
											label="" :checked="dlCurrent.checked"
										></u-checkbox>
									</u-checkbox-group>
								</view>
								<view class="ddhao" style="flex: 1;">
									运单号：{{dlCurrent.item.val}}
								</view>
							</u-row>
						</view>
					</tpx-checkitems>
					
				</view>
				
			</template>
			<template v-slot:footer>
				<view class="blcok-white-noradius">
					<u-row>
						<u-button @click="handleSubmit()" type="primary" size="large" shape="square"
							custom-style="height:80rpx;font-size: 30rpx;border-radius: 14rpx;margin: 0 10rpx;">打印</u-button>
					</u-row>
				</view>
			</template>
		</tpx-layout>
	</tpx-page>
</template>

<script>
	import { debounce } from "@/common/util"
	import dayjs from "dayjs"
	import * as apiService from "@/common/api"
	
	export default {
		props: {
			// hasLeftWin: {
			// 	type: Boolean
			// }
		},
		computed: {
			dicData() {
			  return this.$store.getters.dicData
			},
		},
		data() {
			let { dicData } = this.$store.getters
			return {
				submitParam: {
					lang: 'zh',
					printType: [],
					isNeedPdf: 'T',
					date: [],
					subBillCodeRange: []
				},
				yinlTypeList: [
					{ title: '中文', val: 'zh' },
					{ title: '英文', val: 'en' },
				],
				
				yundanList: [
					{ val: 'T7080304037' },{ val: 'T708012124037' },{ val: 'T7080304092' }
				]
			}
		},
		onShareAppMessage() {
			return {
				// title: '',
				// path: 'TODO'
			}
		},
		onLoad() {
			this.initData();
		},
		onUnload() {

		},
		methods: {
			initData() {
				// uni.showLoading({
				// 	title: '加载中'
				// });
			},
			handleScanValChange: debounce(function(val){
				// val && ()
			}),
			async handleSubmit() {
				let res = await this.getRealGetWaybillPrintData()
				this.goto(`print/bluetoothPrinter?imageUrl=${res.data.fileUrl}&canvasWidth=${480}`)
			},
			handleSelAll() {
				if(this.submitParam.subBillCodeRange.length == this.yundanList.length) {
					this.submitParam.subBillCodeRange = []
				} else {
					this.submitParam.subBillCodeRange = this.yundanList.map(item=> item.val)
				}
			},
			async getRealGetWaybillPrintData() {
				let param = JSON.parse(JSON.stringify(this.submitParam))
				param.printType = param.printType.join(',')
				param.subBillCodeRange = param.subBillCodeRange.join(',')
				// param.isNeedPdf = param.isNeedPdf ? 'T' : ''
				let res = await apiService.getRealGetWaybillPrintData(param, { _loading: true })
				return res
			}
		}
	}
</script>

<style lang="scss">
	@import '@/common/uni-nvue.scss';

	page {
		background-color: #F6F6F6;
		height: 100% !important;
	}
</style>
<style scoped lang="scss">
	.ddhao {
		margin-left: 20rpx;
		padding: 20rpx 30rpx;
		border: 2px solid #F6F6F6;
		border-radius: 20rpx;
	}
</style>