jhlapp/pages/order/OrderReturn.vue

<template>
	<view class="order-out-box">
		<view class="order-status-tab">
			<view class="keyword-view clearfix">
				<view class="float_left">
					<u-search
						@clear="searchConfirm()"
						@search="searchConfirm()"
						:show-action="false"
						:clearabled="true"
						placeholder="订单编号/退货单号/商品名称"
						v-model="search_data.search"
						height="72"
						placeholder-color="#879BBA"
						color="#879BBA"
						bg-color="#ECF0F7"
					></u-search>
				</view>
				<view class="float_right" @click="openSearch"><text class="custom-icon custom-icon-shaixuan"></text></view>
			</view>
		</view>
		<scroll-view
			scroll-y
			class="order_ul"
			@scrolltolower="scrollTolower"
			@refresherrefresh="refresherrefresh"
			:refresher-enabled="true"
			:refresher-triggered="refresher_triggered"
		>
			<view class="order_li" v-for="(item, index) in order_list" :key="index" @click="goPage(`/pagesT/order/ReturnDetail?id=` + item.id)">
				<view class="order_time clearfix">
					<view class="float_left">
						<view class="tag-circleRight">
							<image
								:src="
									item.inStatus === 4
										? '../../static/img/ic-delivered.png'
										: item.inStatus === 5
										? '../../static/img/ic-stock.png'
										: '../../static/img/ic-delivered.png'
								"
								class="img"
							></image>
						</view>
						<text class="txt">{{ item.no }}</text>
					</view>
				</view>
				<view class="order_bottom">
					<view class="order_params">
						客户名称
						<text class="right-txt">{{ item.customerName }}</text>
					</view>
					<view class="order_params clearfix">
						退货时间
						<text class="right-txt">{{ $u.timeFormat(item.createTime, 'yyyy-mm-dd hh:MM:ss') }}</text>
					</view>
					<view class="order_params clearfix">
						退货数量
						<text class="right-txt">{{ item.num }}</text>
					</view>
				</view>
				<view class="clearfix pay-status-tip" :class="[parseInt(item.auditStatus) === 2 ? 'pay-success' : parseInt(item.auditStatus) === 3 ? 'pay-danger' : 'pay-warning']">
					<text class="float_left ">
						<text class="txst">退货金额</text>
						<text class="money-text">{{ $utils.formattedNumber(item.returnTotalPrice) }}</text>
					</text>
					<view class="float_right txst">
						<text :class="[parseInt(item.auditStatus) === 2 ? 'primary-status' : parseInt(item.auditStatus) === 3 ? 'danger-status' : 'warning-status']">
							{{ parseInt(item.auditStatus) === 2 ? '已审核' : parseInt(item.auditStatus) === 3 ? '已驳回' : '未审核' }}
						</text>
					</view>
				</view>
			</view>
			<view v-if="!order_list.length" class="empty-view"><u-empty text="暂无订单" mode="order"></u-empty></view>
			<u-loadmore v-if="order_list.length" :status="load_status" />
		</scroll-view>
		<addBtn url="/pagesT/order/AddReturn"></addBtn>
		<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/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-position="top" label="审核状态">
							<text
								v-for="(item, index) in order_status"
								:key="index"
								class="check-li"
								:class="[search_data.auditStatus === item.value ? 'active' : '']"
								@click="statusChange(item)"
							>
								{{ item.label }}
							</text>
						</u-form-item>
						<u-form-item label-position="top" label="入库状态">
							<text
								v-for="(item, index) in single_status"
								:key="index"
								class="check-li"
								@click="stockChange(item)"
								:class="[search_data.inStatus === item.value ? 'active' : '']"
							>
								{{ item.label }}
							</text>
						</u-form-item>
						<u-form-item label="业务员">
							<view class="clearfix form-val" @click="goPage('/pagesT/staff/selStaff')">
								<text class="float_left ellipsis">{{ search_data.operatorId ? search_data.operatorName : '请选择' }}</text>
								<view class="float_right" @click.stop="clearValue('operatorId')">
									<u-icon :name="!search_data.operatorId ? '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>
	</view>
</template>

<script>
import uniStatusBar from '../../components/uni-status-bar.vue';
export default {
	components: {
		uniStatusBar
	},
	props: {
		shopData: {
			type: [Object, String],
			default: ''
		},
		staffData: {
			type: [Object, String],
			default: ''
		}
	},
	data() {
		return {
			refresher_triggered: false, //设置当前下拉刷新状态，true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发
			order_status: [{ value: 2, label: '已审核' }, { value: 1, label: '待审核' }],
			single_status: [{ value: 4, label: '未入库' }, { value: 5, label: '已入库' }],
			search_show: false,
			pay_type_list: [],
			pay_index: 0,
			load_status: 'nomore',
			page: 1,
			pageSize: 10,
			total: 0,
			tab_current: 0, // 页面current 0，订单，1，退货单
			order_state: 'all', // 订单状态
			order_list: [], // 订单列表
			search_data: {
				inStatus: '', //入库状态
				shopId: '', // 店铺
				shopName: '',
				operatorId: '', //员工
				operatorName: '',
				auditStatus: '', // 审核状态
				start: '',
				end: '',
				search: '' //关键词
			}
		};
	},
	created() {
		this.getAllOrderReturn();
	},
	watch: {
		// 店铺
		shopData(val) {
			if (val) {
				this.search_data.shopName = val.name;
				this.search_data.shopId = val.id;
			}
		},
		// 业务员
		staffData(val) {
			if (val) {
				this.search_data.operatorName = val.staffName;
				this.search_data.operatorId = val.id;
			}
		}
	},
	methods: {
		// 打开搜索弹窗
		openSearch() {
			this.search_show = true;
		},
		// 上拉加载
		scrollTolower() {
			if (this.total / this.pageSize > this.page) {
				this.page += 1;
				this.getData();
			}
		},
		// 复制
		copy(no) {
			uni.setClipboardData({
				data: no,
				success: res => {
					uni.showToast({
						title: '复制成功',
						icon: 'none',
						duration: 2000
					});
				}
			});
		},
		// 审核状态切换
		statusChange(row) {
			this.search_data.auditStatus = row.value;
		},
		// 入库状态切换
		stockChange(row) {
			this.search_data.inStatus = row.value;
		},
		// 搜索确定
		searchConfirm() {
			this.search_show = false;
			this.page = 1;
			this.getData();
		},
		// 重置搜索
		clearValue(params) {
			if (!params) {
				this.search_data = {
					inStatus: '', //入库状态
					shopId: '', // 店铺
					shopName: '',
					operatorId: '', //员工
					operatorName: '',
					auditStatus: '', // 审核状态
					start: '',
					end: '',
					search: '' //关键词
				};
				this.searchConfirm();
			} else {
				this.search_data[params] = '';
			}
		},
		getData() {
			const obj = {
				inStatus: this.search_data.inStatus, //入库状态
				shopId: this.search_data.shopId, // 店铺
				operatorId: this.search_data.operatorId, //员工
				auditStatus: this.search_data.auditStatus, // 审核状态
				start: this.search_data.start,
				end: this.search_data.end,
				search: this.search_data.search //关键词
			};
			const isKey = this.$utils.isSerch(obj);
			if (isKey) {
				this.searchAllOrderOut(obj);
			} else {
				this.getAllOrderReturn();
			}
		},
		// 退货订单列表搜索
		searchAllOrderOut(obj) {
			this.load_status = 'loading';
			let params = {
				page: this.page,
				pageSize: this.pageSize,
				...obj
			};
			this.$u.api
				.searchAllOrderOut(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;
				});
		},
		// 退货订单列表
		getAllOrderReturn() {
			this.load_status = 'loading';
			let params = {
				page: this.page,
				pageSize: this.pageSize
			};
			this.$u.api
				.getAllOrderReturn(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 lang="scss" scoped>
.order-out-box {
	.order-status-tab {
		width: 100%;
		.keyword-view {
			padding: 20rpx 24rpx;
			background-color: #ffffff;
			.float_left {
				width: 640rpx;
			}
			.float_right {
				line-height: 64rpx;
				width: 50rpx;
				text-align: center;
				color: #666666;
			}
		}
	}
}

.order_ul {
	height: calc(90vh - 226rpx);
	padding-top: 24rpx;
	.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>