parking_pda/pages/receipts/receiptsOut.vue

<template>
	<view>
		<u-navbar
		 title="出场小票详情" 
		 title-color="#fff" 
		 :custom-back="customBack" 
		 :border-bottom="false" 
		 back-icon-color="#CCE8FF" 
		 :background="{background: 'linear-gradient(145deg, #41AFF9 0%, #2D8CFB 100%)' }"></u-navbar>
		 <view class="receipts">
			<view class="receipts-list" v-for="(item,index) in itemList">
				 <view v-if="item.itemType==1">{{item.itemContent}}</view>
				 <view v-if="item.itemType==2">
					 <tki-qrcode
						 ref="qrcode"
						 cid="tki-qrcode-canvas"
						 :val="content"
						 :size="200"
						 unit="px"
						 background="#000000"
						 foreground="#ffffff"
						 pdground="#ffffff"
						 :iconSize="40"
						 :onval="Onval"
						 :loadMake="false"
						 :usingComponents="true"
						 :showLoading="false"
						 loadingText="loadingText"
						  />
				 </view>
			</view> 
		 </view>
		 <view class="footer">
			 <u-button class="btn" @click="print" type="primary">打印小票</u-button>
		 </view>
		 <u-toast ref="uToast" />
	</view>
</template>

<script>
	import tkiQrcode from "tki-qrcode";
	//#ifdef APP-PLUS
	let device = uni.requireNativePlugin("DeviceInfo");
	//#endif
	export default{
		components: {
			tkiQrcode
		},
		data(){
			return {
				Onval:false,
				content:'',
				itemList:[],
				orederId:'',
				list:[]
			}
		},
		onLoad(page){
			console.log(page)
			this.orderId=page.orderId;
			this.getContentList();
		},
		methods:{
			getContentList(){
				this.$u.api.printLeave({orderId:this.orderId})
				.then(res=>{
					this.list = [];
					let content = ''
					res.data.itemList.forEach(item=>{
						const obj={
							itemType:item.itemType,
						}
						this.list.push(obj);
						console.log(obj)
						if (item.itemType == 2) {
							content = item.itemContent
						}
					})
					console.log('list',this.list)
					this.itemList = res.data.itemList;
					setTimeout(() => {  
						this.Onval = true;
						this.content = content
					}, 300);  
					console.log(res)
				}).catch(err=>{
					if(err.errMsg){
						this.$refs.uToast.show({
							title: '请检查网络',
							type: 'error',
						});
						return false;
					};
					this.$refs.uToast.show({
						title: err.msg,
						type: 'error',
					});
				});
			},
			customBack(){
				uni.navigateBack({
				    delta: 1
				});
			},
			print(){
				this.$u.api.printLeave({orderId:this.orderId})
				.then(res => {
					if(res.code == 200){
						//#ifdef APP-PLUS
						device.print(res.data);
						//#endif
						plus.nativeUI.toast('打印成功');
					}
				})
				.catch(err=>{
					plus.nativeUI.toast('打印失败');
				});
			}
		}
	}
</script>

<style lang="scss">
	@import "./receiptsIn.scss";
</style>