jhlapp/pages/order/OrderList.vue

<template>
	<view class="order-out-box">
		<!--  v-if="$accessCheck($Access.orderQuerySearch)" -->
		<view class="order-status-tab">
			<view class="keyword-view clearfix">
				<view class="float_left">
					<view class="key-select">
						<u-icon
							@click="openFrom('show_key_menu')"
							label-pos="left"
							color="#879BBA"
							size="28"
							label-size="28"
							label-color="#879BBA"
							name="arrow-down"
							:label="keywordType"
						></u-icon>
					</view>
					<view class="search-out">
						<u-search
							@clear="searchConfirm()"
							:show-action="false"
							@search="searchConfirm()"
							:clearabled="true"
							placeholder="请输入……"
							v-model="search_data.keyword"
							height="72"
							placeholder-color="#879BBA"
							color="#879BBA"
							bg-color="#ECF0F7"
						></u-search>
					</view>
				</view>
				<view class="float_right" @click="openSearch"><text class="custom-icon custom-icon-shaixuan"></text></view>
			</view>
			<u-tabs-swiper
				ref="tabs"
				font-size="26"
				:current="status_current"
				:list="status_list"
				@change="statusChange"
				:is-scroll="false"
				inactive-color="#62738E"
				:bar-style="{ borderRadius: '6rpx', height: '6rpx', width: '32rpx', backgroundColor: '#4076D6' }"
				:active-item-style="{ color: '#2D405E', fontSize: '32rpx' }"
			></u-tabs-swiper>
		</view>
		<view class="top">
			<text class="float_left txt">全部订单</text>
			<text class="float_right txt">共{{ total }}条</text>
		</view>
		<scroll-view
			scroll-y
			class="order_ul"
			@refresherrefresh="refresherrefresh"
			:refresher-enabled="true"
			:refresher-triggered="refresher_triggered"
			@scrolltolower="scrollTolower"
			:scroll-top="scrollTop"
		>
			<view class="order_li" v-for="(item, index) in order_list" :key="index" @click="goPage(`/pages/order/orderInfo?userCenterId=${item.userCenterId}&id=${item.id}`)">
				<view class="order_time clearfix">
					<view class="float_left">
						<view class="tag-circleRight">
							<image
								:src="
									item.orderMsg === '待审核'
										? '../../static/img/ic-audit.png'
										: item.orderMsg === '已关闭'
										? '../../static/img/ic-Closed.png'
										: item.orderMsg === '已出库'
										? '../../static/img/ic-stock.png'
										: item.orderMsg === '已完成'
										? '../../static/img/ic-Completed.png'
										: item.orderMsg === '待出库'
										? '../../static/img/ic-delivered.png'
										: item.orderMsg === '待取消'
										? '../../static/img/ic-cancel.png'
										: '../../static/img/ic-delivered.png'
								"
								class="img"
							></image>
						</view>
						<text class="txt">{{ item.no }}</text>
					</view>
					<view class="float_right">
						<image
							:src="
								parseInt(item.payStatus) === 5
									? '../../static/img/ic-Paid.png'
									: parseInt(item.payStatus) === 4
									? '../../static/img/ic-Unpaid.png'
									: '../../static/img/ic-pay-bf.png'
							"
							style="width:102rpx ;height: 29rpx;"
						></image>
					</view>
				</view>
				<view class="order_bottom">
					<view class="order_params">
						客户名称
						<text class="right-txt">{{ item.customerName }}</text>
					</view>
					<view class="order_params clearfix">
						<view class="float_left">
							下单时间
							<text class="right-txt">{{ $u.timeFormat(item.createTime, 'yyyy-mm-dd hh:MM:ss') }}</text>
						</view>
						<view class="float_right" style="margin-right: 20rpx;"><u-button size="mini" @click="copyOrderInfo(item.userCenterId, item.id)">一键复制</u-button></view>
					</view>
				</view>
				<view class="clearfix pay-status-tip" :class="[parseInt(item.payStatus) === 5 ? 'pay-success' : parseInt(item.payStatus) === 4 ? 'pay-danger' : 'pay-warning']">
					<text class="float_left ">
						<text class="txst">订单金额</text>
						<text class="money-text">{{ $utils.formattedNumber(item.payAmount) }}</text>
						【{{ item.payTypeMsg }}】
					</text>
					<view class="float_right txst" v-if="parseInt(item.returnStatus) !== 0">
						<text :class="[parseInt(item.returnStatus) === 1 ? 'warning-status' : 'primary-status']">
							{{ parseInt(item.returnStatus) === 1 ? '部分退货' : '全部退货' }}
						</text>
					</view>
				</view>
			</view>
			<u-loadmore v-if="order_list.length" :status="load_status" />
			<view v-if="!order_list.length" class="empty-view"><u-empty text="暂无订单" mode="order"></u-empty></view>
		</scroll-view>
		<u-popup v-model="search_show" mode="right">
			<view class="search-pop">
				<uniStatusBar></uniStatusBar>
				<view class="form-view" style="padding-top: 45px;">
					<u-form label-width="160rpx" label-position="left">
						<u-form-item label-position="top" label="下单日期">
							<view class="date-li">
								<picker mode="date" @change="bindDateStartChange">
									<text class="date-li">{{ search_data.start ? $u.timeFormat(search_data.start, 'yyyy-mm-dd') : '开始日期' }}</text>
								</picker>
							</view>
							<view class="date-line">-</view>
							<view class="date-li">
								<picker mode="date" @change="bindDateEndChange">
									<text class="date-li">{{ search_data.end ? $u.timeFormat(search_data.end, 'yyyy-mm-dd') : '结束日期' }}</text>
								</picker>
							</view>
						</u-form-item>
						<u-form-item label="下单客户">
							<view class="clearfix form-val" @click="goPage('/pagesT/customer/selCustomer')">
								<text class="float_left ellipsis">{{ search_data.customerId ? search_data.customerName : '请选择' }}</text>
								<view class="float_right" @click.stop="clearValue('customerId')">
									<u-icon :name="!search_data.customerId ? 'arrow-right' : 'close-circle-fill'" size="28" color="#999999"></u-icon>
								</view>
							</view>
						</u-form-item>
						<u-form-item label="所属店铺">
							<view class="clearfix form-val" @click="goPage('/pagesT/shop/selShop')">
								<text class="float_left ellipsis">{{ search_data.shopId ? search_data.shopName : '请选择' }}</text>
								<view class="float_right" @click.stop="clearValue('shopId')">
									<u-icon :name="!search_data.shopId ? 'arrow-right' : 'close-circle-fill'" size="28" color="#999999"></u-icon>
								</view>
							</view>
						</u-form-item>
						<u-form-item label="支付方式">
							<view class="clearfix form-val" @click="goPage('/pagesT/payment/selPayment')">
								<text class="float_left ellipsis">{{ search_data.payType ? search_data.payTypeName : '请选择' }}</text>
								<view class="float_right" @click.stop="clearValue('payType')">
									<u-icon :name="!search_data.payType ? 'arrow-right' : 'close-circle-fill'" size="28" color="#999999"></u-icon>
								</view>
							</view>
						</u-form-item>
						<u-form-item label="客户类型">
							<view class="clearfix form-val" @click="goPage('/pagesT/customer/selCustomerType')">
								<text class="float_left ellipsis">{{ search_data.customerType ? search_data.customerTypeName : '请选择' }}</text>
								<view class="float_right" @click.stop="clearValue('customerType')">
									<u-icon :name="!search_data.customerType ? 'arrow-right' : 'close-circle-fill'" size="28" color="#999999"></u-icon>
								</view>
							</view>
						</u-form-item>
						<u-form-item label="订单来源">
							<view class="clearfix form-val" @click="openFrom('from_show')">
								<text class="float_left ellipsis">{{ search_data.source ? search_data.sourceName : '请选择' }}</text>
								<view class="float_right" @click.stop="clearValue('source')">
									<u-icon :name="!search_data.source ? 'arrow-right' : 'close-circle-fill'" size="28" color="#999999"></u-icon>
								</view>
							</view>
						</u-form-item>
					</u-form>
				</view>

				<view class="search-btn">
					<view class="btn-li" @click="clearValue()">重置</view>
					<view class="btn-li" @click="searchConfirm">确定</view>
				</view>
			</view>
		</u-popup>
		<addBtn v-if="$accessCheck($Access.OrderAddAddOrder)" url="/pages/order/OrderAdd"></addBtn>
		<u-select @confirm="fromChange" v-model="from_show" :list="order_from"></u-select>
		<u-action-sheet @click="selKeyType" :list="keywordType_list" v-model="show_key_menu"></u-action-sheet>
	</view>
</template>

<script>
import uniStatusBar from '../../components/uni-status-bar.vue';
export default {
	components: {
		uniStatusBar
	},
	props: {
		customerData: {
			type: [Object, String],
			default: ''
		},
		shopData: {
			type: [Object, String],
			default: ''
		},
		paymentData: {
			type: [Object, String],
			default: ''
		},
		customerTypeData: {
			type: [Object, String],
			default: ''
		}
	},
	data() {
		return {
			refresher_triggered: false, //设置当前下拉刷新状态，true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发
			from_show: false,
			search_show: false,
			pay_type_list: [],
			pay_index: 0,
			load_status: 'nomore',
			page: 1,
			pageSize: 10,
			total: 0,
			status_current: 0, // 状态current
			order_state: 'all', // 订单状态
			order_list: [], // 订单列表
			keywordType: '单据编号',
			show_key_menu: false,
			search_data: {
				keywordType: '',
				keyword: '',
				payType: '',
				payTypeName: '',
				start: '',
				end: '',
				customerId: '',
				customerName: '',
				customerType: '',
				customerTypeName: '',
				source: '',
				sourceName: '',
				shopId: '',
				shopName: ''
			},
			order_from: [
				{
					label: 'ios',
					value: 1
				},

				{
					label: '安卓',
					value: 2
				},
				{
					label: '微信小程序',
					value: 3
				},
				{
					label: '后台创建',
					value: 4
				},
				{
					label: 'H5页面',
					value: 5
				},
				{
					label: 'pc页面',
					value: 6
				},
				{
					label: '字节跳动小程序',
					value: 8
				}
			],
			status_list: [
				{
					value: 'all',
					name: '全部'
				},
				{
					// 新订单
					value: 'waitAudit',
					name: '待审核'
				},
				{
					// 等待出库
					value: 'waitOutStock',
					name: '待出库'
				},
				{
					// 已出库
					value: 'hasOutStock',
					name: '已出库'
				},
				{
					// 已收货
					value: 'finish',
					name: '已完成'
				},
				{
					// 已取消
					value: 'close',
					name: '已关闭'
				}
			],
			scrollTop: -1,
			keywordType_list: [
				{
					text: '单据编号',
					value: 1
				},
				{
					text: '自提码',
					value: 2
				},
				{
					text: '商品名称',
					value: 3
				},
				{
					text: '商品编码',
					value: 4
				},
				{
					text: '收货人',
					value: 5
				},
				{
					text: '电话',
					value: 6
				},
				{
					text: '业务员',
					value: 7
				},
				{
					text: '详细地址',
					value: 8
				}
			]
		};
	},
	watch: {
		customerData(val) {
			if (val) {
				this.search_data.customerName = val.name;
				this.search_data.customerId = val.id;
			}
		},
		// 店铺
		shopData(val) {
			if (val) {
				this.search_data.shopName = val.name;
				this.search_data.shopId = val.id;
			}
		},
		// 支付方式
		paymentData(val) {
			if (val) {
				this.search_data.payTypeName = val.title;
				this.search_data.payType = val.id;
			}
		},
		// 客户类型
		customerTypeData(val) {
			if (val) {
				this.search_data.customerTypeName = val.name;
				this.search_data.customerType = val.id;
			}
		}
	},
	created() {
		this.getAllOrder();
	},
	methods: {
		// 复制相应信息
		copyOrderInfo(userCenterId, orderId) {
			this.$u.api
				.getOrderInfoById(userCenterId, {
					orderId: orderId
				})
				.then(res => {
					const data = res.data;
					let goods = '';
					data.goodsData.forEach((item, index) => {
						goods = goods + item.goodsName + '（' + (Number(item.outNum) || Number(item.buyNum)) + '件）';
					});
					const copyInfo = `客户：${data.customerName}\n商品：${goods} \n客户电话：${data.customerMobile}\n业务员：${data.salesManName || '无'}\n备注：${data.remark ||
						'无'}`;
					uni.setClipboardData({
						data: copyInfo,
						success: () => {
							this.$u.toast('内容已复制');
						}
					});
				});
		},
		// 打开订单来源选择框
		openFrom(key) {
			console.log(13);
			this[key] = true;
		},
		// 搜索项筛选
		selKeyType(index) {
			this.keywordType = this.keywordType_list[index].text;
			this.search_data.keywordType = this.keywordType_list[index].value;
		},
		// 订单来源筛选
		fromChange(e) {
			this.search_data.source = e[0].value;
			this.search_data.sourceName = e[0].label;
		},
		// 上拉加载
		scrollTolower() {
			if (this.total / this.pageSize > this.page) {
				this.page += 1;
				this.getData();
			}
		},
		openSearch() {
			this.search_show = true;
		},
		statusChange(index) {
			this.scrollTop = 0;
			this.$nextTick(() => {
				this.scrollTop = -1;
			});
			this.status_current = index;
			this.order_state = this.status_list[index].value;
			this.searchConfirm();
		},
		clearValue(params) {
			if (!params) {
				this.search_data = {
					keyword: '',
					payType: '',
					payTypeName: '',
					start: '',
					end: '',
					customerId: '',
					customerName: '',
					customerType: '',
					customerTypeName: '',
					source: '',
					sourceName: '',
					shopId: '',
					shopName: ''
				};
				this.searchConfirm();
			} else {
				this.search_data[params] = '';
			}
		},
		searchConfirm() {
			this.search_show = false;
			this.page = 1;
			this.getData();
		},
		//  判断
		getData() {
			const obj = {
				keyword: this.search_data.keyword,
				payType: this.search_data.payType,
				shopId: this.search_data.shopId,
				startTime: this.search_data.start,
				endTime: this.search_data.end,
				customerId: this.search_data.customerId,
				customerType: this.search_data.customerType,
				source: this.search_data.source
				// returnStatus: this.search_data.Return,
				// outStatus: this.searchDate.outStatus,
				// payStatus: this.searchDate.payStatus,
			};
			const isKey = this.$utils.isSerch(obj);
			if (isKey) {
				this.searchOrder(obj);
			} else {
				this.getAllOrder();
			}
		},
		// 订单列表
		getAllOrder() {
			this.load_status = 'loading';
			let params = {
				page: this.page,
				pageSize: this.pageSize,
				state: this.order_state
			};
			this.$u.api
				.getAllOrder(params)
				.then(res => {
					// 设置当前下拉刷新状态为false
					this.refresher_triggered = false;
					if (this.page === 1) {
						this.order_list = res.data;
					} else {
						this.order_list = this.order_list.concat(res.data);
					}
					this.order_list = this.order_list.map(item => {
						return {
							...item,
							goods_list: item.goods_list || []
						};
					});
					this.total = res.pageTotal;
					this.load_status = this.$utils.loadStatus(this.page, this.pageSize, this.total);
				})
				.catch(err => {
					// 设置当前下拉刷新状态为false
					this.refresher_triggered = false;
				});
		},
		// 订单列表搜索
		searchOrder(obj) {
			this.load_status = 'loading';
			let params = {
				page: this.page,
				pageSize: this.pageSize,
				state: this.order_state,
				keywordType: this.search_data.keywordType,
				...obj
			};
			this.$u.api
				.keywordSearch(params)
				.then(res => {
					// 设置当前下拉刷新状态为false
					this.refresher_triggered = false;
					if (this.page === 1) {
						this.order_list = res.data;
					} else {
						this.order_list = this.order_list.concat(res.data);
					}
					this.order_list = this.order_list.map(item => {
						return {
							...item,
							goods_list: item.goods_list || []
						};
					});
					this.total = res.pageTotal;
					this.load_status = this.$utils.loadStatus(this.page, this.pageSize, this.total);
				})
				.catch(err => {
					// 设置当前下拉刷新状态为false
					this.refresher_triggered = false;
				});
		},
		bindDateStartChange(e) {
			this.search_data.start = this.$utils.timeByTimestamp(e.detail.value + ' 00:00:00');
		},
		bindDateEndChange(e) {
			this.search_data.end = this.$utils.timeByTimestamp(e.detail.value + ' 23:59:59');
		},
		// 下拉刷新
		refresherrefresh() {
			this.refresher_triggered = true;
			this.page = 1;
			this.getData();
		}
	}
};
</script>

<style scoped lang="scss">
.order-out-box {
	.order-status-tab {
		width: 100%;

		.keyword-view {
			padding: 20rpx 24rpx;
			background-color: #ffffff;

			.float_left {
				width: 640rpx;
				height: 72rpx;
				line-height: 72rpx;
				background-color: #ecf0f7;
				position: relative;
				border-radius: 40rpx;
				padding-left: 200rpx;
				.key-select {
					text-align: center;
					position: absolute;
					left: 0;
					height: 72rpx;
					width: 200rpx;
					top: 0;
				}
				.search-out {
					width: 438rpx;
				}
				&::before {
					content: '';
					display: block;
					left: 200rpx;
					height: 40rpx;
					width: 2rpx;
					position: absolute;
					background-color: #ced6e2;
					top: 50%;
					transform: translateY(-50%);
				}
			}

			.float_right {
				line-height: 64rpx;
				width: 50rpx;
				text-align: center;
				color: #666666;
			}
		}
	}
}

.top {
	width: 710rpx;
	padding: 24rpx 0rpx 0rpx 32rpx;
	height: 60rpx;
	margin-bottom: 20rpx;

	.txt {
		font-size: 24rpx;
		font-weight: 400;
		color: #879bba;
		line-height: 33rpx;
	}
}

.order_ul {
	height: calc(90vh - 226rpx);

	.order_li {
		background-color: #ffffff;
		padding-top: 32rpx;
		border-radius: 8rpx;
		margin: 0 auto 24rpx;
		width: 710rpx;

		.money-text {
			font-family: DIN-Medium;
			color: $uni-color-error;
			margin: 0 4rpx;
			font-size: 28rpx;
			font-weight: 500;
			margin-left: 30rpx;
		}

		.order_time {
			height: 40rpx;
			line-height: 40rpx;
			padding-right: 20rpx;
			margin-bottom: 24rpx;
			.tag-circleRight {
				display: inline-block;
				margin-left: 40rpx;
				vertical-align: middle;
				.img {
					width: 126rpx;
					height: 40rpx;
					display: block;
				}
			}
			.txt {
				font-size: 28rpx;
				font-weight: 500;
				margin-left: 16rpx;
				font-family: DIN-Medium;
			}
		}

		.order_info {
			padding: 30rpx;
			font-size: 24rpx;
			border-bottom: 1px solid #f7f8fa;
		}

		.remarks {
			background-color: #f1f1f1;
			padding: 0 30rpx;
			height: 60rpx;
			line-height: 60rpx;
		}

		.pay-status-tip {
			margin-left: 0rpx;
			color: #333333;
			height: 89rpx;
			vertical-align: middle;
			padding: 25rpx 40rpx;
			font-size: 28rpx;
			font-weight: 400;
			background: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, rgba(0, 195, 149, 0.1) 100%);

			.txst {
				font-size: 28rpx;
				font-weight: 500;
				color: #2d405e;
			}
		}
		.pay-success {
			background: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, rgba(0, 195, 149, 0.1) 100%);
		}

		.pay-danger {
			background: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, rgba(246, 119, 120, 0.1) 100%);
		}
		.pay-warning {
			background: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, #fdf6e8 100%);
		}

		.order_bottom {
			margin-left: 40rpx;
			font-size: 28rpx;

			.order_params {
				margin-bottom: 24rpx;
				color: #999999;

				.right-txt {
					font-size: 28rpx;
					font-weight: 400;
					color: #2d405e;
					margin-left: 30rpx;
				}

				.float_right {
					color: #333333;
				}
			}

			.printing-btn {
				position: absolute;
				right: 30rpx;
				top: 50%;
				transform: translateY(-50%);
				text-align: center;

				.custom-icon-dayin {
					font-size: 30rpx;
				}
			}

			.btn {
				display: flex;
				justify-content: center;
				margin-top: 30rpx;

				.btn_some {
					width: 200rpx;
					height: 70rpx;
					line-height: 70rpx;
					text-align: center;
					border-radius: 6rpx;
				}

				.btn_examine {
					border: 1px solid #2979ff;
					color: #2979ff;
				}

				.btn_order {
					border: 1px solid #999999;
					color: #999999;
					margin-left: 30rpx;
				}
			}
		}
	}
}
</style>