ydd_front/mer_uniapp/pages/trade_fair/mytask/index.vue

<template>
	<view :data-theme="theme">
		<view class='nav acea-row row-around'>
			<!-- <view class='item' :class='refundTypeStatus==-1 ? "on": ""' @click="statusClick(-1)">
				<view>售后申请</view>
			</view>
			<view class='item' :class='refundTypeStatus==0 ? "on": ""' @click="statusClick(0)">
				<view>处理中</view>
			</view> -->
			<view class='item' :class='orderStatus==1 ? "on": ""' @click="statusClick(1)">
				<view>待发货列表</view>
			</view>
			<view class='item' :class='orderStatus==10 ? "on": ""' @click="statusClick(10)">
				<view>客户退款处理</view>
			</view>
		</view>
		<view class="borderPad mt20">
			<view class='search acea-row row-middle'>
				<text class='iconfont icon-sousuo2 mr20'></text>
				<input type='text' v-model='keywords' confirm-type="search" :focus="focus" placeholder='根据商品名称/退款订单号/订单编号搜索'
				 placeholder-class='placeholder' @blur="handleSeach" maxlength="50"></input>
			</view>
		</view>
		<view class='return-list borderPad' v-if="orderList.length">
			<view class='goodWrapper borRadius14' v-for="(items,index) in orderList" :key="index">
				<!-- <view v-if="refundTypeStatus ==-1" class='orderNum acea-row'>
					<text class="mr10 iconfont icon-shangjiadingdan"></text>
					<text class="no mr10">{{items.merName}}</text>
				</view> -->
				<view v-if="orderStatus ==10" class='orderNum acea-row row-between'>
					<view class="acea-row">
						<view class="tit mr10">退款单号: </view>
						<view class="no">{{items.refundOrderNo}}</view>
					</view>
					<view class="afterSalesType">
						<span class="iconfont" :class="items.afterSalesType===1?'icon-jintuikuan':'icon-tuihuotuikuan'"></span>
						<span>{{items.afterSalesType===1?'仅退款':'退货退款'}}</span>
					</view>
				</view>
				<view @click='goOrderDetails(items)' class='item acea-row row-between-wrapper'>
					<view class='pictrue'>
						<image :src='items.image'></image>
					</view>
					<view class='text'>
						<view class='name line1 mb20'>{{items.productName}}</view>
						<!-- <view class="f-s-20 text-999 mb24">{{items.sku}}</view> -->
						<view class='acea-row row-between-wrapper'>
							<view class='num mr20 line-heightOne'>
								{{orderStatus ==1?'数量:'+items.payNum:'申请数量:'+items.applyRefundNum}}
							</view>
							<view v-show="orderStatus ==10" class='attr font-color line-heightOne'>
								{{items.refundStatus===3?'已退款':'申请退款'}}：{{items.refundPrice}}
							</view>
						</view>
						<view></view>
						<view class='acea-row row-between-wrapper' v-show="orderStatus ==1">
							<view></view>
							<view class="conter">
								{{items.shippingType==1?'快递配送':items.shippingType==2?'自提':'自提'}}
							</view>
						</view>
					</view>
				</view>
				<view v-if="orderStatus===10" class="btn-box acea-row row-between">
					<view @click.stop="handlerToRecord(items.orderNo)" v-if="items.applyRefundNum+items.refundNum>0" class="applyRefundNum">
						<text>有{{items.applyRefundNum+items.refundNum}}件商品已申请售后</text><span class="iconfont icon-gengduo3 ml10" style="font-size: 20rpx;"></span>
					</view>
					<view v-else></view>
					<!-- <view class="btn bg-color acea-row row-center" style="color: #fff;" @click="goRefund(items)">确认发货</view> -->
				</view>
				<view>
					<view class="refundTypeStatus line1" v-if="orderStatus===10" >
						{{ items.refundStatus| merFundStatusFilter}}
						<span class="tips ml20">{{items.refundStatus| orderMerRefundTipsStatusFilter}}</span>
					</view>
					<view class="btn-box acea-row" style="justify-content: flex-end;">
						<view></view>
						<view v-if="orderStatus == 10 && (items.refundStatus === 0|| items.refundStatus === 5 )" class="btn btn-999 acea-row row-center line-heightOne mr-20" @click="goOrderDetails(items)">去处理</view>
						<view v-if="orderStatus == 1 && items.status === 1 && items.shippingType == 1" style="color: #fff;" class="btn bg-color acea-row row-center line-heightOne ml20"
						  @tap='confirmFHOrder(items.orderNo)'>确认发货</view>
						<view v-if="orderStatus == 1 && items.status === 1 && items.shippingType == 2" style="color: #fff;" class="btn bg-color acea-row row-center line-heightOne ml20"
					    @tap='confirmFHOrderNotExp(items.orderNo)'>确认发货</view>
					</view>
				</view>
			</view>
		</view>
		<view class='loadingicon acea-row row-center-wrapper'>
			<text class='loading iconfont icon-jiazai' :hidden='loading==false'></text>{{orderList.length>0?loadTitle:''}}
		</view>
		<view class='noCart' v-if="orderList.length == 0 && !loading">
			<view class='pictrue text-center'>
				<image :src="urlDomain+'crmebimage/presets/nodingdan.png'"></image>
				<view class="default_txt">暂无售后订单哦~</view>
			</view>
		</view>
       <!-- 快递信息 -->
		<uni-popup ref="deliveryRef" :is-mask-click="false">
			<view class="w-full flex-center" :style="{height: height + 'px'}">
				<!-- <view class="flex-y-center" style="justify-content: space-between;padding: 20rpx 19rpx 38rpx 19rpx;width: 100%;">
					<view style="opacity: 0;">1</view>
					<image style="width: 39rpx;height: 39rpx;" src="/static/img/chacha.png" @tap="onCancel"></image>
				</view> -->
				<view style="background-color: #fff;width: 100%;padding: 50rpx;">
					<view class="flex-y-center picker" style="margin-bottom: 20rpx;">
						快递公司：<!-- <input class="search2" type="text" v-model="companyName" placeholder="请输入快递公司" /> -->
						<picker @change="bindExpressChange" :value="expressIndex" :range="expressAll"
							range-key="name">
							<view class="picker-box search2">
								{{expressAll[expressIndex].name}}
								<text class="iconfont icon-jiantou"></text>
							</view>
						</picker>
					</view>
					<view class="flex-y-center" style="margin-bottom: 20rpx;">
						快递单号：<input class="search2" type="text" v-model="companyOdd" placeholder="请输入快递单号" />
					</view>
					<view class="flex-y-center">
						快递备注：<input class="search2" type="text" v-model="deliveryMark" placeholder="请输入快递备注" />
					</view>
					<view class="flex-center">
						<button class="sub flex-center" @tap="onSure">确定</button>
					</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="rejectDialog" type="dialog">
			<view class="tui-modal-custom">
				<view class="fs-32 fw-500 lh-44rpx text-center">审核不通过原因</view>
				<view class="mt-24 bg--w111-f5f5f5 rd-16rpx p-24">
					<textarea class="w-full fs-26 h-342" ref="myTextarea" v-model="rejectText" :always-embed="true" :adjust-position="true"
					 cursor-spacing="85rpx" placeholder="请输入审核不通过原因" :maxlength="100" name="desc" />
					</view>
				<view class="flex-between-center mt-40">
					<view class="w-244 h-72 rd-36rpx flex-center fs-26 font-color close-btn" @tap="handleInputClose">取消
					</view>
					<view class="w-244 h-72 rd-36rpx flex-center bg-color text--w111-fff fs-26"
						@tap="handleInputConfirm">保存
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	// +----------------------------------------------------------------------
	// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
	// +----------------------------------------------------------------------
	// | Copyright (c) 2016~2025 https://www.crmeb.com All rights reserved.
	// +----------------------------------------------------------------------
	// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
	// +----------------------------------------------------------------------
	// | Author: CRMEB Team <admin@crmeb.com>
	// +----------------------------------------------------------------------
	import {
		secondHandAfterSaleList,
		secondHandRefundList,
		refundSecondHandMyList,
		refundSecondHandOkApi,
		returningSecondHandRejectApi,
		returningSecondHandAuditApi,
		secondHandOrderList,
		secondHandMySendList,
		secondHandSend
	} from '@/api/secondHand.js';
	import {
		goProductDetail,
		onRevokeRefund
	} from '@/libs/order.js'
	import {
		expressAllApi
	} from '@/api/order.js'
	import {
		toLogin
	} from '@/libs/login.js';
	import {
		Debounce
	} from '@/utils/validate.js'
	import {
		mapGetters
	} from "vuex";
	import animationType from '@/utils/animationType.js'
	let app = getApp();
	export default {
		created() {
			let that = this;
			uni.getSystemInfo({
				success: function(res) {
					that.height = res.windowHeight;
					//res.windowHeight:获取整个窗口高度为px，*2为rpx；98为头部占据的高度；
					// #ifndef APP-PLUS || H5 || MP-ALIPAY
					that.navbarRight =
						res.windowWidth - uni.getMenuButtonBoundingClientRect().left;
					// #endif
				},
			});
			if (!this.$Cache.get('expressListAll')) {
				this.getExpressAll();
			} else {
				this.expressAll = JSON.parse(this.$Cache.get('expressListAll'))
			}
		},
		data() {
			return {
				urlDomain: this.$Cache.get("imgHost"),
				loading: false,
				loadend: false,
				loadTitle: '显示更多', //提示语
				orderList: [], //订单数组
				refundTypeStatus: -1, //订单选择状态
				orderStatus: -1, //订单选择状态
				page: 1,
				limit: 20,
				keywords: '',
				isMyTask: 1,
				theme: app.globalData.theme,
				focus: false,
				rejectText: '',
				rejectOrder: '',
				height: '',
				expressAll: [],
				expressIndex: 0,
				orderNo: '',
				companyName: '',
				companyOdd: '',
				deliveryMark: ''
			};
		},
		computed: mapGetters(['isLogin',"uid"]),
		watch: {
			isLogin: {
				handler: function(newV, oldV) {
					if (newV) {
						//this.getOrderAfterSaleList();
					}
				},
				deep: true
			}
		},
		onLoad(options) {
			this.keywords = options.orderNo || ''
			this.orderStatus=options.orderStatus || ''
			if (this.isLogin) {
				this.getOrderAfterSaleList();
			} else {
				toLogin();
			}
		},
		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function() {
			if (this.refundTypeStatus === -1) {
				this.getOrderAfterSaleList();
			} else {
				this.getOrderRefundList();
			}
		},
		methods: {
			//物流公司
			getExpressAll() {
				expressAllApi().then(res => {
					this.$set(this, 'expressAll', res.data);
					this.$Cache.set('expressListAll', res.data)
				}).catch(err => {
					return this.$util.Tips({
						title: err
					});
				})
			},
			//选择物流公司
			bindExpressChange(e) {
				this.expressIndex = e.target.value;
			},
			//已经申请售后的订单跳转至申请列表
			handlerToRecord(orderNo) {
				this.refundTypeStatus = 9;
				this.keywords = orderNo;
				this.loadend = false;
				this.loading = false;
				this.page = 1;
				this.orderList = [];
				this.getOrderRefundList()
			},
			//审核保存
			handleInputConfirm() {
				let that = this;
					if (!this.rejectText) return this.$util.Tips({
						title: '请输入审核不通过原因！'
					});
					uni.showLoading({
						title: '正在处理中'
					});
					let params = {
						refundOrderNo: this.rejectOrder,
						auditType: 'refuse',
						reason: this.rejectText
					}
					returningSecondHandAuditApi(params).then(res => {
						uni.hideLoading();
						return that.$util.Tips({
							title: '处理成功',
							icon: 'success'
						}, function() {
							that.handleSeach();
						});
					}).catch(err => {
						return that.$util.Tips({
							title: err
						});
					});
				// 关闭窗口后，恢复默认内容
				this.$refs.rejectDialog.close()
			},
			//审核取消
			handleInputClose() {
				this.$refs.rejectDialog.close()
			},
			// 审核
			handleRevokeAudit(orderNo, type) {
				let that = this;
				this.rejectOrder = orderNo;
				if (type) {
					uni.showLoading({
						title: '正在处理中'
					});
					returningSecondHandAuditApi({refundOrderNo: this.rejectOrder, auditType: 'success'}).then(res => {
						uni.hideLoading();
						return that.$util.Tips({
							title: '处理成功',
							icon: 'success'
						}, function() {
							that.handleSeach();
						});
					}).catch(err => {
						return that.$util.Tips({
							title: err
						});
					});
				} else {
					this.$refs.rejectDialog.open();
				}
			},
			//撤销售后
			handleRevokeRefund(refundOrderNo) {
				let that = this;
				onRevokeRefund(refundOrderNo, 'secondHand').then(() => {
					this.handleSeach()
				});
			},
			//退回商品
			handleReturningRefund(item) {
				this.$Cache.set('productInfo', item)
				uni.navigateTo({
					url: `/pages/goods/returns_and_refunds/index?refundOrderNo=${item.refundOrderNo}&returnGoodsType=${item.returnGoodsType}&orderType=secondHand`
				})
			},
			//搜索
			handleSeach() {
				this.loadend = false;
				this.loading = false;
				this.page = 1;
				this.orderList = [];
				this.getOrderAfterSaleList();
			},
			/**
			 * 退款申请
			 */
			goRefund(item) {
				uni.navigateTo({
					url: `/pages/goods/after_sales_type/index?orderNo=${item.orderNo}&orderId=${item.id}&orderType=secondHand`
				})
				this.$Cache.set('productInfo', item)
			},
			statusClick(status) {
				this.orderStatus = status;
				this.loadend = false;
				this.loading = false;
				this.page = 1;
				this.orderList = [];
				this.getOrderAfterSaleList();
			},
			/**
			 * 去订单详情
			 */
			goOrderDetails: function(item) {
				let url;
				if (this.orderStatus == 1) {
					goProductDetail(item.productId, 0, '', JSON.stringify({id: item.productId}), 1);
				} 
				else if( item.merId == this.uid) {
					console.log(item.merId )
					url = `/pages/goods/second_refunds_details/index?orderType=secondHand&orderTypeId=10&refundOrderNo=` + item.refundOrderNo
				}
				else{
					url = `/pages/goods/refund_details/index?orderType=secondHand&orderTypeId=10&refundOrderNo=` + item.refundOrderNo
				}
				// #ifdef MP
				uni.navigateTo({
					url: url
				})
				// #endif
				// #ifndef MP
				uni.navigateTo({
					animationType: animationType.type,
					animationDuration: animationType.duration,
					url: url
				})
				// #endif
			},

			/**
			 * 获取售后申请列表
			 */
			getOrderAfterSaleList: function() {
				let that = this;
				if (that.loadend) return;
				if (that.loading) return;
				that.loading = true;
				that.loadTitle = "";
				let params = {
					page: that.page,
					limit: that.limit,
					keywords: that.keywords,
					isMyTask: that.isMyTask
				};
				let api = this.orderStatus == 10 ? refundSecondHandMyList : secondHandMySendList;
				this.orderStatus == 10 ? params.type = 0 : '';
				api(params).then(res => {
					let list = res.data.list || [];
					let loadend = list.length < that.limit;
					that.orderList = that.$util.SplitArray(list, that.orderList);
					that.$set(that, 'orderList', that.orderList);
					that.loadend = loadend;
					that.loading = false;
					that.loadTitle = loadend ? '我也是有底线的' : '显示更多';
					that.page = that.page + 1;
				}).catch(err => {
					that.loading = false;
					that.loadTitle = '显示更多';
				});
			},
			//确认发货
			confirmFHOrder: Debounce(function(orderNo) {
			    this.orderNo=orderNo;
				let that = this;
				this.$refs.deliveryRef.open('top')
			}),
			onSure() {
				let that = this;
				this.$refs.deliveryRef.close()
				this.companyName=that.expressAll[that.expressIndex].name
				console.log(this.companyName+"==================================")
				if (this.companyName== null || this.companyName =='') return that.$util.Tips({
					itle: '请填写快递公司'
				});
				if (this.companyOdd==null || this.companyOdd== '') return that.$util.Tips({
					itle: '请填写快递编号'
				});
				uni.showModal({
					title: '确认发货',
					content: '为保障权益，请确认快递信息填写无误后，再确认发货',
					success: function(res) {
						if (res.confirm) {
							const data = {
								orderNo: that.orderNo,
								deliveryType: 'express',
								expressCompy: that.companyName,
								expressNumber: that.companyOdd,
								deliveryMark: that.deliveryMark || ''
							}
							secondHandSend(data).then(res => {
								return that.$util.Tips({
									title: '操作成功',
									icon: 'success'
								}, function() {
									that.handleSeach();
								});
							}).catch(err => {
								return that.$util.Tips({
									title: err
								});
							})
						}
					}
				})
			},
			// 确认发货
			confirmFHOrderNotExp(orderNo) {
				let that = this;
				uni.showModal({
					title: '确认发货',
					content: '为保障权益，请确认是否发货',
					success: function(res) {
						if (res.confirm) {
							const data = {
								orderNo: orderNo,
								deliveryType: 'selfPickup',
							}
							secondHandSend(data).then(res => {
								return that.$util.Tips({
									title: '操作成功',
									icon: 'success'
								}, function() {
									that.handleSeach();
								});
							}).catch(err => {
								return that.$util.Tips({
									title: err
								});
							})
						}
					}
				})
			},
			/**
			 * 获取退款列表
			 */
			getOrderRefundList: function() {
				let that = this;
				if (that.loadend) return;
				if (that.loading) return;
				that.loading = true;
				that.loadTitle = "";
				secondHandRefundList({
					page: that.page,
					limit: that.limit,
					keywords: that.keywords,
					type: that.orderStatus
				}).then(res => {
					let list = res.data.list || [];
					let loadend = list.length < that.limit;
					that.orderList = that.$util.SplitArray(list, that.orderList);
					that.$set(that, 'orderList', that.orderList);
					that.loadend = loadend;
					that.loading = false;
					that.loadTitle = loadend ? '我也是有底线的' : '显示更多';
					that.page = that.page + 1;
				}).catch(err => {
					that.loading = false;
					that.loadTitle = '显示更多';
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	 //@import '../static/css/order_details.scss';
	.refundTypeStatus {
		width: 100%;
		height: 71rpx;
		line-height: 71rpx;
		background: #F6F6F6;
		border-radius: 10rpx;
		font-size: 26rpx;
		font-weight: 400;
		color: #282828;
		padding: 0 18rpx;

		.tips {
			font-size: 26rpx;
			font-weight: 400;
			color: #999999;
		}
	}

	.afterSalesType {
		font-weight: 400;
		color: #666666;
		font-size: 26rpx;

		.iconfont {
			@include main_color(theme);
			margin-right: 12rpx;
			font-size: 26rpx;
		}
	}

	.search {
		width: 100%;
		background-color: #fff;
		border-radius: 33rpx;
		padding: 0 24rpx;
		box-sizing: border-box;
		height: 64rpx;

		input {
			width: 600rpx;
			font-size: 28rpx;
		}

		.placeholder {
			color: #bbb;
		}

		.iconfont {
			color: #999999;
			font-size: 26rpx;
		}
	}

	.applyRefundNum {
		font-size: 26rpx;
		@include main_color(theme);
	}

	.status {
		position: absolute;
		right: 15rpx;
		top: 0;

		.iconfont {
			font-size: 120rpx;
			opacity: .3;
		}
	}

	.btn-box {
		display: flex;
		padding-top: 20rpx;
		line-height: 60rpx;

		.btn-line {
			@include main_color(theme);
			@include coupons_border_color(theme);
		}

		.btn-bg {
			color: #fff;
		}

		.btn-999 {
			border: 1px solid #999999;
			color: #666666;
		}

		.btn {
			width: 176rpx;
			height: 60rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 30rpx;
			font-size: 28rpx;
		}
	}

	.nav {
		background-color: #fff;
		width: 100%;
		height: 90rpx;
		line-height: 88rpx;

		.item {
			text-align: center;
			font-size: 30rpx;
			color: #282828;

			.num {
				margin-top: 18rpx;
			}
		}

		.on {
			@include main_color(theme);
			font-weight: bold;
			@include tab_border_bottom(theme);
		}
	}

	.mr8 {
		margin-right: 8rpx;
	}

	.return-list .goodWrapper {
		background-color: #fff;
		margin-top: 20rpx;
		position: relative;
		padding: 0rpx 24rpx 20rpx 24rpx;
	}

	.return-list .goodWrapper .orderNum {
		border-bottom: 1px solid #eee;
		height: 86rpx;
		line-height: 86rpx;

		.tit {
			font-size: 28rpx;
			color: #282828;
		}

		.no {
			font-size: 28rpx;
			color: #282828;
		}
	}

	.return-list .goodWrapper .item {
		border-bottom: 0;
		padding: 25rpx 0;

		.money {
			color: #999999;
			font-weight: 26rpx;
			margin-top: 0;
		}

		.attr,
		.num {
			font-size: 20rpx;
			color: #999999;
			margin-top: 0;
		}
	}

	.return-list .goodWrapper .totalSum {
		padding: 0 0 32rpx 0;
		// text-align: right;
		font-size: 26rpx;
		color: #282828;
		display: flex;
		justify-content: space-between;
	}

	.return-list .goodWrapper .totalSum .price {
		font-size: 28rpx;
		font-weight: bold;
		@include price_color(theme);
	}

	.hui {
		color: #CCCCCC;
		font-size: 24rpx;
	}

	.return-list .goodWrapper .powder {
		@include price_color(theme);
		//font-size: 24rpx;
	}

	.align-center {
		margin-top: 32rpx;
	}

	.noCart {
		margin-top: 32%;

		.pictrue image {
			width: 410rpx !important;
			height: 334rpx !important;
		}
	}

	.default_txt {
		font-size: 26rpx;
		color: #999;
		text-align: center;
	}
	.bg-tk-color {
		background-color: $bg-color-primary;
		color: #fff;
		border: none;
	}
	.tui-modal-custom {
		width: 600rpx;
		position: relative;
		box-sizing: border-box;
		padding: 40rpx;
		border-radius: 16px;
		background-color: #fff;
		z-index: 9999;
	
		.h-342 {
			min-height: 268rpx;
			max-height: 268rpx;
			overflow-y: scroll;
		}
	}
	.sub {
		background-color: $bg-color-primary;
		width: 308rpx;
		height: 77rpx;
		font-weight: 500;
		font-size: 31rpx;
		color: #FFFFFF;
		margin: 58rpx 0 96rpx 0;
	}
	.search2 {
		height: 60rpx;
		padding: 0 32rpx;
		border-radius: 36rpx;
		background: #F5F5F5;
	}
</style>