book-shop/pages-mall/pages/after-sales/list.vue

<template>
	<view class="page">
		<view class="list" v-if="refundOrder&&refundOrder.length>0">
			<view class="list_item" v-for="(item, index) in refundOrder" :key="index">
				<view class="ht">
					服务单号：{{item.refund_no}}
				</view>
				<view class="list_g_d" v-for="(son, sonIndex) in item.order_detail" :key="sonIndex">
					<view class="content">
						<view class="pic">
							<u-image width="160rpx" height="160rpx" radius="20rpx" :src="son.goods_cover"></u-image>
						</view>
						<view class="info">
							<view class="title">{{ son.goods_title }}</view>
							<view class="desc">
								<u-tag :text="son.goods_sku" size="mini" type="info" />
								<text>x{{ son.goods_nums }}</text>
								<!-- <view class="nums">
									<text>数量：</text>
									
								</view> -->
								<!-- <text class="price">申请金额：￥{{ son.total_amount }}</text> -->
							</view>
							
						</view>
					</view>
					<!-- <view class="operate_son">
						<u-button v-if="son.sub_status == 31" class="oparbtn" type="primary" size="mini" shape="circle" @click.stop="afterSalesDetail(son)">去填写单号</u-button>
						<u-button v-else class="oparbtn" size="mini" shape="circle" @click.stop="afterSalesDetail(son)">售后详情</u-button>
					</view> -->
					
				</view>
				<view class="saleAfter_status">
					<text v-if="item.status == 10">等待审核</text>
					<text v-if="item.status == 21">审核通过，正在退款中</text>
					<text class="color_blue" v-if="item.status == 211">退款成功</text>
					<text class="price_color" v-if="item.status == 22">审核失败</text>
					<text v-if="item.status == 31">审核通过，请填写退货快递单号</text>
					<text class="price_color" v-if="item.status == 32">退货退款,审核未通过</text>
					<text v-if="item.status == 33">等待卖家收货确认</text>
					<text v-if="item.status == 34">卖家已确认收货，正在退款中</text>
					<text class="color_blue" v-if="item.status == 344">退款成功</text>
				</view>
				<view class="operate">
					<view class="paystyle">
						申请金额:{{item.refundFee}}
					</view>
					<!-- <view class="" v-if="item.status==10">
						等待客服审核
					</view>
					<view class="" v-if="item.status == 21">
						退款已退回原账户
					</view>
					<view class="paystyle" v-if="['22','32'].includes(item.status)">
						审核失败
					</view> -->
					<u-button v-if="item.status == 31" class="oparbtn" type="primary" size="mini" shape="circle" @click.stop="afterSalesDetail(item.id)">去填写单号</u-button>
					<u-button v-else class="oparbtn" size="mini" shape="circle" @click.stop="afterSalesDetail(item.id)">售后详情</u-button>
					<!-- <u-button class="oparbtn" v-if="['22','32'].includes(item.status)"  type="primary" size="small" shape="circle" @click.stop="applyAfterSales(item.order_id)">重新申请</u-button>
					<u-button class="oparbtn" v-if="item.status==30"  type="primary" size="small" shape="circle" @click.stop="applyAfterSales(item.order_id)">重新申请</u-button> -->
					
				</view>
			</view>
			
		</view>
		<NoData height="60vh" type="order" v-if="finish&&refundOrder.length==0"></NoData>		
		<!-- <u-loadmore v-else :status="finish?'nomore':loading?'loading':'loadmore'" :load-text="loadText" margin-top="30" /> -->
		
		<LoadMore v-else :loadtype="{finish,loading}"></LoadMore>
	</view>
</template>

<script>
// 组件
import { orderOperate } from '@/pages-mall/mixins/order-operate.js';

const app = getApp();
var _self;
export default {
	mixins: [orderOperate],
	data() {
		return {
			page:1,
			loading:false,
			finish:false,
			loadText: {
				loadmore: '轻轻上拉',
				loading: ' ',
				nomore: '没有更多了'
			},
			refundOrder:[],//售后订单
		};
	},
	onLoad(ops) {
		_self = this;
	},
	onShow() {
		_self.getRefundOrderList();
	},
	
	onPullDownRefresh(){
		// uni.stopPullDownRefresh();
		this.page=1;
		this.finish=false;
		this.refundOrder=[];
		this.getData();
	},
	onReachBottom(){
		console.log('滚动到底部')
		this.getData();
	},
	methods: {
		// 刷新页面
		refreshData(){
			uni.startPullDownRefresh();
		},
		// 更新数据
		getData(){
			this.getRefundOrderList();
		},
		// 退款售后
		getRefundOrderList(){
			if(this.finish){
				return false;
			}
			this.loading = true;
			this.$u.api.getRefundOrderListAjax({
				page:this.page,
			}).then(({code,data})=>{
				uni.stopPullDownRefresh();
				this.loading = false;
				if(code==1){
					if(data.last_page<=data.current_page){
						this.finish = true;
					}
					if(data.current_page==1){
						this.refundOrder = data.data;
					}else{
						this.refundOrder=this.refundOrder.concat(data.data);
					}
				}else{
					this.finish = true;
				}				
				this.page = data.current_page+1;
			}).catch(()=>{
				uni.stopPullDownRefresh();
				this.loading = false;
				this.finish = true;
			})
		},
	}
};
</script>

<style lang="scss" scoped>
.pagecon{
	padding-bottom: 30rpx;
}
.list {
	padding:30rpx 30rpx;
	box-sizing: border-box;
	&_item{
		background-color: #ffffff;
		border-radius: 16rpx;
		box-shadow: 0px 2px 8px 0px rgba(27, 25, 86, 0.06);
		margin-bottom: 20rpx;
		.ht{
			height: 80rpx;
			display: flex;
			align-items: center;
			color: $app-theme-text-gray-color;
			border-bottom: 1rpx solid $app-theme-border-color;
			padding: 0 30rpx;
		}
		.paystyle{
			// font-weight: bold;
			margin-right: 20rpx;
			color: $app-theme-text-money-color;
		}
	}
}

.list_g_d{
	margin: 20rpx;
	.content{
		display: flex;
		align-content: space-between;
		.pic {
			margin-right: 24rpx;
		}
		.info {
			flex: 1;
			.title {
				width: 100%;
				line-height: 1.2em;
				// height: 2.4em;
				display: -webkit-box;
				overflow: hidden;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				font-size: 28rpx;
				font-weight: 400;
				color: $app-theme-text-black-color;
			}
			.desc {
				display: flex;
				justify-content: space-between;
				align-items: flex-end;
				margin-top: 10rpx;
			}
			.price {
				color: $app-theme-text-money-color;
			}
		}
	}
		
}
.saleAfter_status{
	color: $app-theme-points-yellow-color;
	margin: 10rpx 30rpx;
	text-align: right;
	
}
.operate{
	display: flex;
	justify-content: flex-end;
	align-items: center;
	padding: 0 30rpx;
	height: 80rpx;
	border-top: 1rpx solid $app-theme-border-color;
	.oparbtn{
		margin-left: 20rpx;
	}
}

.operate_son {
	text-align: right;
}
</style>