count-pass-app/subpages/order/selectList.vue

<template>
	<view class="order-list content ">
		<!-- <u-sticky bgColor="#fff" style="height: 60rpx;" class="sicky-height">
			<view class="address-text">{{location.address}}</view>
		</u-sticky> -->
		<view class="monitor-info" v-if="hardInfo && hardInfo.sysType=='101' && hardInfo.isMonitor=='1'">
			<monitorWeigh class="monitor-window" :hardInfo="hardInfo">
			</monitorWeigh>
		</view>
		<view class="swiper-box fixed">
			<template v-if="orderList.length">
				<u-list @scrolltolower="scrolltolower" :preLoadScreen="1.5">
					<u-list-item v-for="(item, index) in orderList" :key="index">
						<view class="order-card">
							<view class="order-card-title" @click="selectOrder(item)">
								<span class="type" v-if="item.orderType == '1'">{{ $t('order.temp') }}</span>
								<span class="type fixed" v-if="item.orderType == '2'">{{ $t('order.fixed') }}</span>
								<span class="type fixed" v-if="item.orderType == '5'">{{ $t('order.plan') }}</span>
								<text class="info">{{ item.tenantName || '' }}</text>
								<!-- <text class="no">No {{ item.code || '' }}</text> -->

								<template v-if="item.orderType != '4'">
									<span class="status" v-if="item.orderStatus == '0'">未进厂</span>
									<span class="status"
										v-if="item.orderStatus == '1' && item.weighingStatus == '0'">已进厂</span>
									<span class="status" v-if="item.orderStatus == '2'">已完成</span>
									<span class="status"
										v-if="item.orderStatus == '1' && item.weighingStatus != '0'">已过磅</span>
									<span class="status bad-status" v-if="item.orderStatus == '4'">已作废</span>
								</template>
								<template v-if="item.orderType == '4'">
									<span class="status" v-if="item.orderStatus == '0'">未接单</span>
									<span class="status" v-if="item.orderStatus == '1'">接单中</span>
									<span class="status" v-if="item.orderStatus == '2'">已完成</span>
									<span class="status bad-status"
										v-if="item.enabledMarkType =='1' || item.orderStatus == '4'">已作废</span>
								</template>
							</view>
							<view class="order-card-info" @click="selectOrder(item)">
								<view class="order-type">
									<u-tag :text="$t('order.mixed')" type="success" v-if="item.isMain == 1"></u-tag>
									<u-tag :text="$t('order.mixed')" type="success" v-if="item.isMain == 2"></u-tag>
								</view>
								<view class="row">
									<p class="cell">
										<!-- <text class="label">{{ $t('order.companyName') }}</text> -->
										<text class="info">{{ item.companyName || '' }}</text>
									</p>
								</view>
								<view class="row">
									<p class="cell">
										<!-- <text class="label">{{ $t('order.orderDate') }}</text> -->
										<text class="info">{{ item.setDate || '' }}</text>
									</p>
									<p class="cell">
										<text class="info"
											v-if="item.vehicleType == '101'">{{ $t('order.saleOrder') }}</text>
										<text class="info"
											v-if="item.vehicleType == '102'">{{ $t('order.purchaseOrder') }}</text>
										<text class="info"
											v-if="item.vehicleType == '103'">{{ $t('order.materialsOrder') }}</text>
										<text class="info"
											v-if="item.vehicleType == '104'">{{ $t('order.transferOrder') }}</text>
									</p>
								</view>
								<view class="row">
									<p class="cell">
										<!-- <text class="label">{{ $t('order.materialName') }}</text> -->
										<text class="info">{{ item.materialName || '' }}</text>
									</p>
									<p class="cell">
										<!-- <text class="label">{{ $t('order.orderNumber') }}</text> -->
									<!-- 	<text class="info">{{ item.orderNumber || '' }}{{ item.orderType ==
											'4' ? $t('customer_meter.unitN') : $t('customer_meter.unitT') }}</text> -->
											
											<text :style="'font-size: 9pt;font-weight: bold;'+(item.companyClientType=='109'?'color: green;':'color: red;')"
												class="info">{{ item.orderNumber || '' }}{{item.materialKind=='101' && item.companyClientType=='109'?$t('customer_meter.unitB')  :(item.orderType ==
												'4' ? $t('customer_meter.unitN') : $t('customer_meter.unitT')) }}</text>
									</p>
								</view>
								<view class="row">
									<p class="cell">
										<!-- <text class="label">{{ $t('order.driver') }}</text> -->
										<text class="info">{{ item.driver || '' }}-{{ item.phone || '' }}</text>
									</p>
									<p class="cell">
										<!-- <text class="label">{{ $t('order.vehicle') }}</text> -->
										<text class="info">{{ item.vehicle || '' }}</text>
									</p>
								</view>
								<view class="qrcode-logo" @click="drawQrcode(item)">
									<image class="img" src="/subpages/static/czzn-img/state/qrcode.png"
										mode="	scaleToFill" />
								</view>
			<!-- 					<view class="row" v-if="item.isMain == 1 || item.isMain == 2">
									<p class="cell">
										<text
											class="label">{{ item.isMain == 1 ? $t('order.mainOrder') : $t('order.suppOrder') }}</text>
										<text class="info used">{{ item.relationOrderCode || '' }}</text>
									</p>
								</view> -->

							</view>
							<view class="code">
								<view class="label">{{$t('spare.orderCode')}}</view>
								<view class="info">{{ item.code || '' }}</view>
							</view>
							<view class="order-card-bottom">

								<view class="btn">
									<u-button class="oper-btn" type='primary' shape="circle" color='#4680F9'
										size="small" @click="selectOrder(item)">
										{{ $t('mine.select') }}
									</u-button>
								</view>
								<!-- <view class="btn"
									v-if="item.orderType == 1 && (item.orderStatus == 0 || item.orderStatus == 1) && item.vehicleType == 101 && item.materialKind == 101 && item.loadFlag == 0 && item.isMain != 1">
									<u-button class="oper-btn" type='warning' shape="circle" size="small"
										@click="onMixedOrderClick(item)">
										{{ $t('base.button.mixed') }}
									</u-button>
								</view> -->
							</view>
						</view>
					</u-list-item>
				</u-list>
			</template>
			<template v-else>
				<u-empty mode="orderTypeList" icon="https://cdn.uviewui.com/uview/empty/list.png">
				</u-empty>
			</template>
		</view>
		<!-- <u-loading-page loadingMode='spinner' bg-color="rgba(0,0,0,0.5)" :loading="loading" color="#fff"
						loading-color="#fff">
					</u-loading-page> -->
		<u-popup :show="showQrcode" :round="16" @close="showQrcode = false" mode="center"
			:overlayStyle="{ background: '#fff' }">
			<view @click="showQrcode = false">
				<uqrcode ref='ordercode' canvas-id="order-canvas" :value="currentOrder.id" :start="false" />
				<view class="info-line">
					{{ $t('mine.customer') }} : {{ currentOrder.companyName || '' }}
				</view>
				<view class="info-line">
					{{ $t('mine.mater') }} : {{ currentOrder.materialName || '' }}
				</view>
				<view class="info-line" v-if="currentOrder.vehicle">
					{{ $t('order.vehicle') }} : {{ currentOrder.vehicle || '' }}
				</view>
			</view>
		</u-popup>
			<template>
				<view >
					<u-modal :show="orderNumberDialog" @confirm="confirm" @cancel="cancel" :showCancelButton="true" title="下单量" >
						<!-- 订单数量 -->
							<u-input :focus="true" v-if="orderNumberDialog" @focus="onOrderNumberFocus" v-model="orderNumber" border="none" type='digit'
								:placeholder="$t('base.common.placeholderI')+$t('order.orderNumber')" >
							</u-input>
					</u-modal>
				</view>
			</template>

		<u-toast ref="loadingToast"></u-toast>
	</view>
</template>

<script>
	import {
		sendHandleOrder
	} from "../../api/order"
	import monitorWeigh from '../../components/monitor/weigh/weigh.vue';
	export default {
		components: {
			monitorWeigh
		},
		data() {
			return {
				orderList: [],
				qrCode: '',
				noClick: true,
				showQrcode: false,
				currentOrder: {},
				location: {},
				hardInfo: {},
				orderNumber:0,
				orderNumberDialog:false,
				tempItem:{},
			};
		},
		onLoad(options) {
			console.log("获取到订单信息、", options.data)
			console.log("获取到的硬件信息", options.hardInfo)
			this.orderList = options && options.data ? JSON.parse(options.data) : []
			this.hardInfo = options && options.hardInfo ? JSON.parse(options.hardInfo) : {}
			if (this.orderList.length > 0) {
				let tenant = [{
					tenantName: this.orderList[0].tenantName,
					tenantId: this.orderList[0].tenantId,
					tenantCode: this.orderList[0].tenantId,
					statusFlag: "1"
				}]
				uni.setStorageSync('tenantInfo', tenant)
			}
			this.qrCode = options ? options.qrCode : ''
			this.location = options && options.location ? JSON.parse(options.location) : {}


		},
		
		destroyed() {
			console.log("关闭");
		},
		methods: {
			confirm(){
				console.log(this.orderNumber,'-------------------');
				if(this.orderNumber==null||this.orderNumber==0){
					uni.showToast({
							title: '请输入下单量',
							//将值设置为 success 或者直接不用写icon这个参数
							icon: 'error',
							//显示持续时间为 2秒
							duration: 2000
						})
					return;
				}
				this.selectOrder(this.tempItem);
				this.orderNumberDialog = false
			},
			cancel(){
				this.orderNumberDialog = false
			},
			onOrderNumberFocus() {
				if (this.orderNumber == 0) {
					this.orderNumber = null
				}
			},
			
			//二维码弹窗
			drawQrcode(item) {
				this.currentOrder = item
				this.showQrcode = true
				console.log(this.$refs.ordercode);
				setTimeout(() => {
					this.$refs.ordercode.make()
				}, 100)
			},
			selectOrder(item) {
				this.tempItem=item;
				this.$refs.loadingToast.show({
					type: "loading",
					message: this.$t('base.common.loading'),
					duration: "1000000"
				})
				console.log("选择到订单ID、", item);
				console.log("获取到二维码信息、", this.qrCode);
				if(item.orderType==5&&(this.orderNumber==0||this.orderNumber==null)){
					this.orderNumberDialog=true;
					this.$refs.loadingToast.hide()
					return;
				}
				if (this.qrCode) {
					let data = {
						orderId: item.id,
						orderType: item.orderType,
						vehicleSourceId: item.vehicleSourceId,
						vehicle:item.vehicle,
						qrCode: this.qrCode,
						orderNumber:this.orderNumber,
					}
					sendHandleOrder(data).then(res => {
						this.$refs.loadingToast.hide()
						console.log('扫码返回信息、', res.data);
						if (res.statusCode == 200) {
							uni.showModal({
								content: res.data.msg,
								showCancel: false,
								confirmText: this.$t("base.button.confirm"),
								success: function(res) {
									if (res.confirm) {
										setTimeout(() => {
											uni.navigateBack({
												delta: 1
											})
										}, 500)
									}
								}
							})
						}
					}).catch(() => {
						this.$refs.loadingToast.hide()
					})
				} else {
					this.$refs.loadingToast.hide()
				}
			},
			onMixedOrderClick(item) {
				uni.navigateTo({
					url: `/subpages/order/mixed?orderId=${item.id}&tenantId=${item.tenantId}`
				})
			}
		},
	};
</script>

<style></style>

<style lang="scss" scoped>
	.address-text {
		font-size: 12px;
		color: #999;
		text-align: center;
		width: 100%;
		left: 0;
		line-height: 48rpx;
		background: #fff;
	}
</style>

<style>
	/* #ifndef APP-NVUE */
	page {
		background-color: #f5f7fa;
	}

	/* #endif */
</style>
<style lang="scss" scoped>
	@import '../../common/css/public.scss';
	/deep/.u-sticky{
		height: 50rpx !important
	}
	.fixed {
		position: relative;
	}

	.monitor-info {
		position: sticky;
		display: flex;
		justify-content: center;
		top: 52rpx;
		height:70rpx;
		z-index: 100;
	}

	.monitor-window {
		position: relative;
		width: 50%;
	}
</style>