book-hi/pages-mall/pages/after-sales/apply.vue

<template>
	<view class="page">
		<!-- 商品卡片 -->
		<TitleOperate title="售后商品" padding="10rpx 30rpx 24rpx 30rpx"></TitleOperate>
		<view class="goods">
			<template v-for="(goods, index) in selSalesGoods">
				<orderDetailGoodsCard :data="goods" :key="index"></orderDetailGoodsCard>
			</template>
			<view class="selgoodsb" v-if="canApplyList.length>1">
				<view class="t" v-if="selSalesGoods.length==0">
					该订单包含多个商品，请手动选择您要退款的商品
				</view>
				<u-button size="small" type="primary" @click="selSalesGoodsFun()">
					{{selSalesGoods.length>0?'重新选择':'选择商品'}}</u-button>
			</view>
			<view class="selgoodsb" v-else-if="canApplyList.length<1">
				<view class="t">
					未找到可申请售后的商品
				</view>
			</view>
		</view>
		
		<TitleOperate title="仅退款" padding="10rpx 30rpx 24rpx 30rpx" v-if="backType == '1'" showMore moreLabel="重新选择" @clickMore="backType='home'">
		<!-- 	<view>
				重新选择<u-icon size="20" name="arrow-right" :color="arrowColor"></u-icon>
			</view> -->
		</TitleOperate>
		<TitleOperate title="退货退款" padding="10rpx 30rpx 24rpx 30rpx" v-if="backType == '2'" showMore moreLabel="重新选择" @clickMore="backType='home'">
			<!-- <view>
				重新选择<u-icon size="20" name="arrow-right" :color="arrowColor"></u-icon>
			</view> -->
		</TitleOperate>
		<template v-if="selSalesGoods.length>0">
			<!-- 操作项 -->
			<SelectItem v-if="backType == 'home'" :ops="selectOps" @change="changBackType"></SelectItem>
			<!-- 售后原因 -->
			<ApplyReason v-else :backType="backType" :totalPrice="totalPrice" :goodslist="selSalesGoods"
				@done="confirmApply"></ApplyReason>
			<!-- 仅退款 -->
			<!-- <BackMoney v-if="backType == '1'" :totalPrice="totalPrice" :goodslist="selSalesGoods"
				@done="confirmApply"></BackMoney> -->
			<!-- 退货退款 -->
			<!-- <BackAll v-if="backType == '2'"></BackAll> -->
		</template>
		<selectGoodsPopup ref="selectGoodsPopup" @done="comfirmSel"></selectGoodsPopup>
	</view>
</template>

<script>
	// 组件
	import orderDetailGoodsCard from '@/pages-mall/components/order/orderdetail-goods-card.vue';
	import SelectItem from '@/pages-mall/components/after-sales/select-item.vue';
	import ApplyReason from '@/pages-mall/components/after-sales/apply-reason.vue';
	import BackGoods from '@/pages-mall/components/after-sales/back-goods.vue';
	import selectGoodsPopup from '@/pages-mall/components/after-sales/select-goods-pop.vue';
	import TitleOperate from '@/components/title-operate.vue';
	export default {
		components: {
			orderDetailGoodsCard,
			SelectItem,
			BackGoods,
			selectGoodsPopup,
			TitleOperate,
			ApplyReason
		},
		data() {
			return {
				orderId: null,
				// 选择的售后类型
				backType: 'home',
				canApplyList:[],
				selOpt: {},
				// 详情
				orderInfo: {},
				// 售后类型的配置项
				selectOps: [{
						title: '仅退款',
						desc: '未收到货(包含未签收),或与卖家协商同意前提下',
						icon: require('@/pages-mall/static/select-item-1.png'),
						type: '1',
						value: 1
					},
					{
						title: '退货退款',
						desc: '未收到货(包含未签收),或与卖家协商同意前提下',
						icon: require('@/pages-mall/static/select-item-2.png'),
						type: '2',
						value: 2
					},
					// {
					// 	title: '换货',
					// 	desc: '已收到货,需要退还收到的货物',
					// 	icon: require('@/pages-mall/static/select-item-3.png'),
					// 	type: 'goods'
					// }
				],

				// 选择的退款商品
				selSalesGoods: [],
			};
		},
		computed: {
			totalPrice() {
				let totalPrice = 0;
				this.selSalesGoods.map(item => (totalPrice += Number(item.actual_total_amount)));
				return totalPrice;
			},
		},
		onLoad(opt) {
			this.orderId = opt.orderId;
			console.log('this.orderId>>>',this.orderId)
			if (!this.orderId) {
				uni.navigateBack();
			}
			this.getOrderDetail();
		},

		methods: {
			// 导航栏返回自定义函数
			goBack() {
				if (this.backType == 'home') {
					uni.navigateBack({
						delta: 1
					});
				} else {
					this.backType = 'home';
				}
			},
			// 选择退款商品
			selSalesGoodsFun() {
				this.$refs.selectGoodsPopup.showPop(this.orderInfo)
			},
			getOrderDetail() {
				this.$u.api.getOrderDetailAjax(this.orderId).then(({code,data}) => {
					if (code == 1) {
						this.orderInfo = data;
						console.log('>>>>>>>11111',data);
						if(data.order_info.status=='11'){
							this.selectOps = [{
								title: '仅退款',
								desc: '未收到货(包含未签收),或与卖家协商同意前提下',
								icon: require('@/pages-mall/static/select-item-1.png'),
								type: '1',
								value: 1
							}]
						}
						// 过滤可申请的商品列表
						this.filCanApplyList();
						
					}
				}).catch()
			},
			// 过滤可申请售后的商品列表
			filCanApplyList(){
				console.log(this.orderInfo.order_goods_info);
				this.canApplyList = this.orderInfo.order_goods_info.filter(e=>(e.sub_status=='10'||e.sub_status=='22'||e.sub_status=='32'));
				console.log(this.canApplyList);
				if (this.canApplyList.length == 1) {
					this.selSalesGoods = this.canApplyList;
				}
			},
			// 选择售后类型
			changBackType(e) {
				this.backType = e.item.type;
				this.selOpt = e.item;
			},
			// 多商品确认选择
			comfirmSel(e) {
				this.selSalesGoods = e;
			},
			// 确认退款
			confirmApply(e) {
				// uni.redirectTo({
				// 	url: '/pages-mall/pages/after-sales/apply-status?refund_type='+this.backType+'&status=10'
				// })
				// return;
				let ids = this.selSalesGoods.map((e) => {
					return e.id
				});
				this.$u.api.refundOrderAjax({
					order_id: this.orderInfo.order_info.id,
					order_detail_ids: ids.toString(),
					refund_type:this.selOpt.value,
					...e,
				}).then(({code,data}) => {
					if (code == 1) {
						// 默认进入对应售后场景的第一步状态
						// uni.redirectTo({
						// 	url: '/pages-mall/pages/after-sales/apply-status?refund_type='+this.backType+'&status=10'
						// })
						uni.redirectTo({
							url: '/pages-mall/pages/after-sales/success?refundId='+data.id
						})
					}
				}).catch(()=>{
					
				})

			},
		}
	};
</script>

<style lang="scss" scoped>
	.page {
		padding: 30rpx;
	}

	.goods {
		border-radius: 16rpx;
		box-shadow: $app-theme-shadow;
		padding: 30rpx;
		margin-bottom: 24rpx;
		background-color: $app-theme-bg-color;
	}

	.selgoodsb {
		text-align: center;

		.t {
			margin-bottom: 20rpx;
			color: #666;
		}
	}
</style>