count-pass-app/substaticpages/cargoOperator/order/orderList.vue

<template>
	<view class="order-list">
		<u-sticky bgColor="#fff">
			<view class="search-wrap">
				<view class="input-wrap">
					<view @click="showPopup('popupTenant')" class="input">
						{{form.tenantName}}
					</view>
				</view>
			</view>
			<view class="tabs-box">
				<u-tabs lineWidth="40" :list="vehicleTypeList.filter((item)=>{return item.isShow==true})"
					:current="currentVehicleType" @change="onVehicleTypeChange" lineColor="#3275F5"
					:itemStyle="{'height':'90rpx','padding':'0 32rpx'}">
					<view slot="right" style="padding-left: 160rpx;">
					</view>
				</u-tabs>
				<view @click="onClickRight" class="sx-btn">
					<uni-icons type="settings-filled" size='24'></uni-icons>
					<view>筛选</view>
				</view>
				<view class="orderStatus-tab abreast" v-if="form.vehicleType == '102'">
					<span :class="form.isCheck == item.value ? 'active' : ''" v-for="item in orderCheckList"
						@click="onOrderCheckChange(item)" :key="item.name">
						{{ item.name }}
					</span>
				</view>
				<view class="orderStatus-tab abreast" v-if="form.vehicleType == '101'">
					<span :class="form.loadFlag == item.value ? 'active' : ''" v-for="item in orderDeliverList"
						@click="onOrderDeliverChange(item)" :key="item.name">
						{{ item.name }}
					</span>
				</view>
			</view>
			<PopupSelect ref="popupTenant" :hasSearch='false' :option="tenantOption" @onConfirm="onTenantConfirm"
				@search="bindOption" />
		</u-sticky>
		<!-- 企业选项 -->


		<view class="swiper-box">
			<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">
								<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>
								<view class="out-type" v-if="item.backFlag == '1'">
									{{item.vehicleType=='101'?$t('order.isBackOut'):$t('order.return')}}
								</view>
								<template v-if="item.vehicleType == '101'">
									<span class="status" v-if="item.loadFlag == '0'">未发货</span>
									<span class="status" v-if="item.loadFlag == '2'">已发货</span>
								</template>
								<template v-if="item.vehicleType == '102'">
									<span class="status" v-if="item.isCheck == '0'">未验收</span>
									<span class="status" v-if="item.isCheck == '1'">已验收</span>
								</template>
							</view>
							<view class="order-card-info">
								<view class="order-type">
									<u-tag :text="$t('order.suppOrder')" type="error" 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="label">{{ $t('order.vehicleType') }}</text> -->
										<text class="info"
											v-if="item.vehicleType == '101'">{{ $t('order.saleOrder') }}</text>
										<text class="info"
											v-if="item.vehicleType == '102'">{{ $t('order.purchaseOrder') }}</text>
										<!-- <span class="tag tag-ls"
											v-if="item.orderType == '1'">{{ $t('order.temp') }}</span>
										<span class="tag tag-gd"
											v-if="item.orderType == '2'">{{ $t('order.fixed') }}</span> -->
									</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
											: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.vehicle') }}</text> -->
										<text class="info">{{ item.vehicle || '' }}</text>
									</p>
									<p class="cell">
										<!-- <text class="label">{{ $t('order.driver') }}</text> -->
										<text class="info">{{ item.driver || '' }}-{{ item.phone || '' }}</text>
									</p>

								</view>
								<template v-if="item.vehicleType=='101'">
									<view class="row">
										<p class="cell">
											<text class="label">{{ $t('deliver.deliverUserName') }}</text>
											<text class="info">{{ item.loadUserName || '' }}</text>
										</p>
									</view>
									<view class="row">
										<p class="cell">
											<text class="label">{{ $t('deliver.deliverTime') }}</text>
											<text class="info">{{ item.loadTime || '' }}</text>
										</p>
									</view>
								</template>
								<template v-if="item.vehicleType=='102'">
									<view class="row">
										<p class="cell">
											<text class="label">{{ $t('accept.acceptUserName') }}</text>
											<text class="info">{{ item.checkUserName || '' }}</text>
										</p>
									</view>
									<view class="row">
										<p class="cell">
											<text class="label">{{ $t('accept.acceptTime') }}</text>
											<text class="info">{{ item.checkDate || '' }}</text>
										</p>
									</view>
								</template>
								<!-- 							
								<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 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.orderStatus != 0 && item.weighingStatus != 0">
									<p class="cell">
										<text class="label">{{ $t('order.tareWeight') }}</text>
										<text class="info">{{ item.tareWeight || '0' }}</text>
									</p>
									<p class="cell">
										<text class="label">{{ $t('order.grossWeight') }}</text>
										<text class="info">{{ item.grossWeight || '0' }}</text>
									</p>
								</view>
								
								<view class="row" v-if="item.orderStatus != 0 && item.weighingStatus == 2">
									<p class="cell">
										<text class="label">{{ $t('order.outTime') }}</text>
										<text class="info">{{ item.outTime || '' }}</text>
									</p>
								</view>
								<view class="row" v-if="item.orderStatus == 2">
									<p class="cell">
										<text class="label">{{ $t('order.outDate') }}</text>
										<text class="info">{{ item.outDoorTime || '' }}</text>
									</p>
								</view> -->
							</view>
							<view class="code">
								<view class="label">{{$t('order.orderCode')}}</view>
								<view class="info">{{ item.code || '' }}</view>
								<view class="label">{{$t('order.source')}}</view>
								<view class="info"> {{$t('order.mini')}}</view>
								<!-- <view class="info"> {{getLabel(item.orderSource,orderSourceList)}}</view> -->
							</view>
							<view class="order-card-bottom">
								<view class="btn">
									<button class="oper-btn" type='primary' shape="circle" color='#4680F9' size="small"
										@click="onOrderInfoClick(item)">
										{{ $t('mine.detail') }}
									</button>
								</view>
							</view>
						</view>
					</u-list-item>
				</u-list>
			</template>
			<template v-else>
				<u-empty mode="order" icon="https://cdn.uviewui.com/uview/empty/list.png">
				</u-empty>
			</template>
		</view>

		<u-popup :show="showSearch" :round="16" @close="showSearch = false" mode="bottom">
			<view class="search-dialog">
				<p class="dialog-title">{{ $t('base.common.condition') }}</p>
				<view class="condition-wrap">
					<view class="row">
						<uni-datetime-picker :end='maxDate' :clear-icon="false" :value="searchOption.range"
							type="daterange" @change="confirm" />
					</view>
					<!-- 输入内容 -->
					<view class="row">
						<p class="p-title">{{ $t('base.common.placeholder') }}</p>
						<u-search class="p-input" bgColor='#fff' :showAction='false'
							:placeholder="$t('base.common.inputPlaceholder')" v-model="keyword">
						</u-search>
					</view>
					<!-- 选择客商 -->

					<view @click="showPopup('popupCompany')" class="row">
						<p class="p-title">{{ $t('order.vehicle') }}</p>
						<u-search class="p-input" bgColor='#fff' :showAction='false'
							:placeholder="$t('base.common.inputPlaceholder')" v-model="vehicle">
						</u-search>
					</view>

				</view>

				<view class="sure-btn">
					<button class="btn" @click="bindOrderList">{{ $t('base.common.submit') }}</button>
				</view>
			</view>
		</u-popup>
		<u-loading-page color="#666" loading-mode="semicircle" :loading="loading">
		</u-loading-page>

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

<script>
	import {
		mapGetters,
	} from "vuex";
	import {
		getOrderPage,
		cancelOrder,
		getCustomerList,
		getMeterList,
		getOption,
		getPlanOrderVehicleList
	} from "../../../api/order";

	import PopupSelect from '../../../components/popup-select/index'
	import {
		getTenantCacheList,
		getLabel
	} from '../../../utils/util.js'
	import {
		getDealerTenantList,
	} from "../../../api/tenant.js";
	import dayjs from 'dayjs'
	export default {
		components: {
			PopupSelect
		},
		data() {
			return {
				getLabel,
				maxDate: dayjs().format('YYYY-MM-DD'),
				searchOption: {
					range: [dayjs().add(-30, 'day').format('YYYY-MM-DD'), dayjs().format('YYYY-MM-DD')],
					vehicleTypeList: [{
						name: this.$t("mine.all"),
						disabled: false,
						value: '0',
					}, ],
				},
				loading: true, //页面加载状态
				currentOrder: {}, //订单id
				currentVehicleType: "",
				form: {
					type: "0",
					orderType: '',
					orderStatus: 0,
					tenantId: '',
					tenantName: '',
					companyId: "", //客商
					materialId: "", //物料
					companyName: "", //客商
					materialName: "", //物料
					vehicleType: "",
					isCheck: '0',
					loadFlag: '0' //是否已装车 0未装车，1已装车（发货）
				},
				currentCheckType: 0,
				vehicleTypeList: [{
						name: this.$t("order.accept"),
						isShow: false,
						value: '102',
						index: 0,
					},
					{
						name: this.$t("order.deliver"),
						isShow: false,
						value: '101',
						index: 1,
					},
				],
				orderCheckList: [{
						name: this.$t("accept.noneAccept"),
						isShow: true,
						value: '0',
						index: 0,
						key: "all",
					},
					{
						name: this.$t("accept.accepted"),
						isShow: true,
						value: '1',
						index: 1,
					},
				],
				orderDeliverList: [{
						name: this.$t("deliver.noneDeliver"),
						isShow: true,
						value: '0',
						index: 0,
						key: "all",
					},
					{
						name: this.$t("deliver.delivered"),
						isShow: true,
						value: '2',
						index: 1,
					},
				],
				orderSourceList: [{
						name: this.$t("order.pc"), //PC端
						value: '1'
					},
					{
						name: this.$t("order.mini"), //小程序
						value: '2'
					}, {
						name: this.$t("order.fixed"), //固定订单生成
						value: '3'
					},
					{
						name: this.$t("order.special"), //由特殊订单生成
						value: '4'
					},

					{
						name: this.$t("order.handWeigh"), //由手工过磅生成
						value: '5'
					},
					{
						name: this.$t("order.repair"), //由补录生成
						value: '6'
					},
					{
						name: this.$t("order.bath"), //由批量订单生成
						value: '7'
					},
					{
						name: this.$t("order.third"), //第三方生成
						value: '8'
					},
					{
						name: this.$t("order.share"), //共享订单
						value: '12'
					},
					{
						name: this.$t("order.plan"), //计划订单
						value: '13'
					},
				],
				page: {
					pages: 1,
					size: 5,
				},

				orderList: [],
				showSearch: false,
				keyword: '',
				vehicle: '',
				hasMore: false,
				tenantOption: [{
					text: this.$t('base.common.noData'),
					value: null
				}], //企业选项
				isDeliverUser: false,
				isAcceptUser: false,
			};
		},
		mounted() {
			console.log("order list mounted");
		},
		computed: {
			...mapGetters({
				userInfo: "user/info",
				hasLogin: "user/hasLogin",
			}),
		},
		onShow() {
			let routes = getCurrentPages();
			let options = routes[routes.length - 1].options;
			console.log("开始onShow 当前用户信息", options, this.userInfo);
			this.currentCheckType = options.isCheck
			this.searchList();
		},
		onLoad() {
			this.bindTenant()
			this.isAcceptUser = uni.getStorageSync('isAcceptUser')
			this.isDeliverUser = uni.getStorageSync('isDeliverUser')
			for (var i = 0; i < this.vehicleTypeList.length; i++) {
				if (this.vehicleTypeList[i].value == "101" && this.isDeliverUser == true) {
					this.$set(this.vehicleTypeList[i], "isShow", true);
				}
				if (this.vehicleTypeList[i].value == "102" && this.isAcceptUser == true) {
					this.$set(this.vehicleTypeList[i], "isShow", true);
				}
			}
			var vehicleInfo = this.vehicleTypeList.filter(p => {
				return p.isShow == true
			});
			if (vehicleInfo) {
				this.form.vehicleType = vehicleInfo[0].value
			}
		},

		methods: {
			onOrderDeliverChange(item) {
				this.form.loadFlag = item.value
				this.form.isCheck = ''
				this.searchList()
			},
			onOrderCheckChange(item) {
				this.form.isCheck = item.value
				this.form.loadFlag = ''
				this.searchList()
			},
			//切换订单类型
			onVehicleTypeChange(item) {
				this.form.isCheck = '0'
				this.form.loadFlag = '0'
				this.form.vehicleType = item.value;
				this.searchList()
			},
			//获取企业选项
			bindTenant() {
				this.tenantOption = getTenantCacheList();
				if (this.tenantOption.length > 0) {
					this.form.tenantId = this.tenantOption[0].value
					this.form.tenantName = this.tenantOption[0].text
				} else {
					// uni.showModal({
					// 	title: this.$t('settings.tips'),
					// 	showCancel: false,
					// 	content: this.$t('base.common.registerTenant'),
					// 	confirmText: this.$t('base.button.regedit'),
					// 	success: res => {
					// 		if (res.confirm) {
					// 			uni.navigateTo({
					// 				url: '/subpages/tenant/list?q=add'
					// 			});
					// 		}
					// 	},
					// 	fail: () => {},
					// 	complete: () => {}
					// });
					this.loading = false;
					return;
				}

			},
			//去订单详情
			onOrderInfoClick(item) {
				uni.navigateTo({
					url: `/substaticpages/cargoOperator/order/orderInfo?orderId=${item.id}&tenantId=${item.tenantId}&orderStatus=${item.orderStatus}`
				})
			},
			//确定选择日期
			confirm(item) {
				this.searchOption.range = item
			},
			//点击右侧筛选
			onClickRight() {
				this.showSearch = true
			},
			//搜索列表
			searchList() {
				this.page.pages = 1
				this.hasMore = false
				this.bindOrderList()
			},
			//获取订单列表
			bindOrderList() {
				var that = this;
				if (!that.form.tenantId) {
					uni.showToast({
						title: that.$t('base.common.placeholderS') + that.$t('base.common.tenant'),
						icon: 'none',
						duration: 2000
					})
					return;
				}
				that.form.weighingStatus = ''
				that.form.orderStatus = ''
				if ((that.form.vehicleType=='102' && that.form.isCheck == 0) || (that.form.vehicleType=='101' && that.form.loadFlag == 0)) {
					that.form.weighingStatus = 1
					that.form.orderStatus = 1
				}
				that.showSearch = false
				let data = {
					appUserType: "6",
					current: that.page.pages,
					size: that.page.size,
					orderStatus: that.form.orderStatus,
					weighingStatus: that.form.weighingStatus,
					keywords: that.keyword || '',
					startDate: that.searchOption.range[0] || '',
					endDate: that.searchOption.range[1] || '',
					vehicleType: that.form.vehicleType,
					orderType: that.form.orderType || '',
					tenantId: that.form.tenantId || '',
					isCheck: that.form.isCheck || '',
					loadFlag: that.form.loadFlag || '',
					vehicle: that.vehicle || '',
					checkUser: that.userInfo.userId
				};
				getOrderPage(data).then((res) => {
					if (res.statusCode == 200) {
						// that.orderList = res.data.data.records;
						if (res.data.data.records.length == 0) {
							that.orderList = [];
						}
						if (that.hasMore) {
							that.orderList = [
								...that.orderList,
								...res.data.data.records,
							];
						} else {
							that.orderList = res.data.data.records;
						}
						that.total = res.data.data.total;
						if (that.orderList.length >= that.total) {
							that.hasMore = false;
						} else {
							that.hasMore = true;
						}
						console.log("当前订单信息、", that.orderList);
					}
					that.loading = false;
				});
			},
			//加载更多
			scrolltolower() {
				console.log("1111111111111111");
				if (this.hasMore) {
					this.page.pages += 1;
					this.bindOrderList();
				}
			},

			//显示选择
			showPopup(refs) {
				this.$refs[refs].showPicker = true
			},
			//选择企业
			onTenantConfirm(value) {
				this.form.tenantId = ''
				this.form.tenantName = ''
				if (value.value) {
					this.form.tenantId = value.value
					this.form.tenantName = value.text
				}
				this.searchList();
			},
		},
	};
</script>
<style>
	/* #ifndef H5 */
	page {
		/* height: 100%; */
		background-color: #f2f2f2;
	}

	/* #endif */
</style>
<style lang="scss" scoped>
	@import '../../../common/css/public.scss';
</style>