qzw_xcx/pages/myOrder/refuend.vue

<template>
	<view>
		
		<scroll-view  v-if="order_list.length > 0" style="height: 95vh;" class="floor-list"
		  :scroll-top="scrollTop" scroll-y="true"  @scroll="scroll"  @scrolltoupper="upper" @scrolltolower="lower"
		   :refresher-enabled="false">
		  <view v-for="(items,index) in order_list" :key="index"   class="cart-list">
		   <view  @click="goDetail(items.id)"   class="shoplist" style="background-color: #fff;">
			  <view>
				  <van-card
					title-class="changewidth"
					price-class ="priceClass"
					:price="items.goods_price"
					:desc="items.descire+'X'+items.goods_num"
					:title="items.desarray"
					:thumb="pictureUrl + '/uploads/home/store/goods/'+items.goods_image.substr(0, items.goods_image.indexOf('\_')) + '/' + items.goods_image"
				  >
				  </van-card>
			  </view>
		   </view>
			   <view class="topTip">
				  <view style="font-size: 28upx;">合计：{{items.total_price}}</view>
				<!--  <view class="deleChange" v-if="item.order_state == 10">未付款</view>
				  <view class="deleChange" v-if="item.order_state == 20">催单</view>
				  <view class="deleChange" v-if="item.order_state == 20">确认收货</view> uni.navigateTo({
					url:`/pages/myOrder/paymoment?order_id=${order_id}&prices=${prices}`
				})
				  <view class="deleChange" v-if="item.order_state == 40 && item.evaluation_state == 0">去评价</view> -->
				  <view class="deleChange" v-if="items.status == 1" @click="gopay(item)">待处理</view> 
				  <view class="deleChange" v-if="items.status == 2" @click="gopay(item)">退款成功</view> 
				  <view class="deleChange" v-if="items.status == 3" @click="gopay(item)">退款失败</view> 
			   </view>
		  </view>
		
		</scroll-view> 
		<view  v-if="order_list.length == 0 && successlogion && hasLogin" >
			  <view style="margin: 120upx auto;text-align: center;">
					<van-icon size="160rpx" color="#909399" name="description" />
					<view style="text-align: center;color: #909399;"> 去买点什么</view>
			  </view>
		</view>
	
		 <Gobacktop @getop="getop" v-if="isTop" />
		<!--  <logionDialog @confirmDiaolog="confirmDiaolog" :ishow="false" @cancelDiaolog="cancelDiaolog" :showdialog="showdialog"/> -->
	</view>
</template>

<script>
	import {
		mapMutations,mapState
	} from 'vuex'
	import Dialog from '@/component/Dialog.vue'
	import Gobacktop from '@/component/Gobacktop.vue'
	export default{
		components: {
			Dialog,
			Gobacktop
		},
		data() {
			return {
				isTop: false,
				ispull: true,
				showdialog: false,
				orderCancel:　false,
				titles:'',
				pictureUrl: this.pictureUrl,
				menu:[
					{name:'全部'},
					{name:'待支付'},
					{name:'处理中'},
					{name:'已收货'},
					{name:'已取消'},
					{name:'退款售后'}
				],
				deleteorder: 0, // 判断删除订单还是确认收货
				// 要查找的订单状态 all-全部 waiting-待支付 payed-处理中 complete-已收货 cancel-已取消 refund-退款售后
				active: 0,
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				order_id:'',
				page: 1,
				page_size:　10,
				state: 'all',
				order_list:[]
			}
		},
		computed:{
			...mapState([
			  'hasLogin',
			  'userInfo',
			  'successlogion'
			]),
		},
		onLoad(a) {
			if(this.successlogion &&　this.hasLogin) {
				this.refund(); // 获取订单
		  	}else {
				uni.navigateTo({
					url: '/pages/myCenter/logion'
				})
			}
		},
		watch:{
			'successlogion':function(val) {
			   if(val) {
				
				  this.refund(); 
			   }else {
				  uni.navigateTo({
				  	url: '/pages/myCenter/logion'
				  })
			   }
			},
			'hasLogin':function(val) {
			   if(val) {
				  
				  this.refund(); 
			   }else {
				  uni.navigateTo({
				  	url: '/pages/myCenter/logion'
				  })
			   }
			},
			
		},
		methods: {
			getop() {
			        this.scrollTop = this.old.scrollTop
					this.$nextTick(function(){
						this.scrollTop=0;
					});
			        this.isTop = false;
			      },
			gotologion() {
				uni.navigateTo({
					url: '/pages/myCenter/logion'
				})
			},
			// 关闭弹窗
			// cancelDiaolog() {
			// 	this.showdialog = false;
			// },
			// // 确定
			// confirmDiaolog() {
			// 	this.showdialog = false;
			// 	this.getlist(); // 获取订单
			
			
			
			// 订单退款售后列表
			refund() {
				this.request({
					url: '/v3/order/refund_list',
					method: 'POST',
					data: {
						state: this.state,
						page: this.page,
						page_size:　10
					},
					success: (res) => {
						if(res.data.data.refund_list.length< 10) {
							this.ispull = false;
						}
						res.data.data.refund_list.forEach((item,index) => {
							// item.goods.forEach(items => {
								let arr = item.goods_name.split(' ');
								item.desarray = arr[0];
								item.descire = item.goods_name.replace(arr[0], '');
							// })
						})
						this.order_list = this.order_list.concat(res.data.data.refund_list);
					}
				})
			},
		
			
			cancelDialog() {
				this.orderCancel = false;
			},
			
			goDetail(e) {
				let order_id = e; 
				uni.navigateTo({
				        url: `/pages/myOrder/returndetail?id=${order_id}`
				});
			},
			upper(e) {
				console.log(e)
				console.log("顶部")
			},
			
			// 滚到底部
			lower(e) {
				if(this.ispull) {
					this.page += 1;
					this.getlist();
				}
				
			},
			
			// 滚动时触发
			scroll(e) {
				if(e.detail.scrollTop > 400) {
				          this.isTop = true;
				        }else{ //当距离小于500时显示回到顶部按钮
				          this.isTop = false;
				        }
				
				        this.old.scrollTop = e.detail.scrollTop
			}
		}
		
	}
</script>
  
<style>
	page {
		background-color: #F5F5F5;
	}
	.cart-list {
		background-color: #fff;
		border-top: 12upx solid #F5F5F5;
	}
		
	.topTip {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20upx 36upx;
		border-bottom: 1px solid #F5F5F5;
	}
	.changewidth {
		color: #303133;
		font-size: 32upx;
		font-weight: 100!important;
	}
		
	.van-card__desc {
		font-size: 25rpx;
		color: #999!important;
		padding-top: 10rpx;
	}
	.priceClass {
		color:#303133!important;
		font-size: 36upx;
		font-weight: normal!important;
	}
	.van-card {
		background-color: #fff!important;
	}
	.shoplist {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.deleChange {
		border: 1px solid #C0C4CC;
		padding: 8upx;
	}
</style>