<template>
  <view> 
    <view class="order">
      <view class="content">
        <view v-if="list.length>0">
          <view class="order-jf-li" v-for="(item,index) in list" :key="index"  >
            <view class="bianhao flex fsz28" @click.stop="godetails(item)">
              <text>订单编号：{{item.order_no}}</text>
              <text v-if=" item.status==1">
			  {{item.pay_status_text}} <text v-if=" item.shipping_status>0">,{{item.shipping_status_text}}</text>
			   <text v-if=" item.refund_status ==1">,{{item.refund_status_text}}</text>
			   
			   </text>
              <text v-if=" item.status>1"><text v-if=" item.refund_status ==2">{{item.refund_status_text}},</text>
			  {{item.status_text}}</text>
            </view>
            <view class="order-jf-img flex" @click.stop="godetails(item)">
              <view class="left">
                <image :src="item.goods_image"   class="tu-row-item-l little-img"></image>
              </view>
              <view class="  fsz32 overflow4" style="margin-left:8px;flex: 0 0 68%;">
					<view class="goods_name">{{item.goods_name}}</view>
					<view class="fsz32" style="text-align: right;">
					  x{{item.number}}
					</view>
              </view>  
			 
            </view> 
			<view class="order-jf-time flex fsz28" @click="godetails(item)">
			  <view class="fsz34"> 
			    <text class="fsz28" style="color:#333;">合计：</text> {{item.order_point}}积分+{{item.order_amount}}元 
			   </view>
			</view> 
            <view class="order-jf-btn fsz28">  
                <view class="btn btn-default"  @click="godetails(item)">详情</view>  
              <template v-if="item.auth_cancel  == 1">
                <view class="btn btn-default"  @click.stop="closeorder(item)">取消订单</view>
              </template>
              <template v-if="item.auth_pay == 1"> 
                <view class="btn btn-default"  @click.stop="gopay(item)">去支付</view>
              </template> 
              <template v-if="item.auth_finish == 1"> 
                <view class="btn btn-default"  @click.stop="gofinish(item)">完成</view>
              </template>  
                <view class="btn btn-default"  @click.stop="gorefund(item)" v-if="item.auth_refund == 1">申请退款</view> 
            </view>
          </view>
          <uni-load-more :status="loadmore" :content-text="contentText" />
        </view>
       <view class="zanwuimg" v-if="list.length == 0">
         <image src="../../static/img/null.png" mode="widthFix"></image>
       	<view>暂无相关订单</view>
       </view> 
      </view> 
    </view> 
  </view>
</template>

<script> 
  export default{ 
    data(){
      return{   
		  page:1,
          list:[],
          ifBottomRefresh:false,
          loadmore: 'more',
          contentText: {
            contentdown: '查看更多',
            contentrefresh: '加载中',
            contentnomore: '没有更多'
          },
          state:0, 
          orderId:'', 
          isshow:true,
      }
    },
    onShow() { 
      uni.$on('getload',(data)=>{ 
        this.getdata()
      }) 
    },
    onLoad(options) {  
      this.getdata()
    },
    onReachBottom() { 
      this.page += 1 
      if (this.loadmore == 'noMore') return
      this.ifBottomRefresh = true
      this.getdata() 
    },
    methods:{
      onClickItem(e) { 
          this.current = e.currentIndex
          this.ifBottomRefresh = false
          this.getdata()
      },
      getdata(){
        let data = {
           page:this.page 
        }
        this.$api.exchangeOrderlist(data,res=>{ 
          if(res.code == '1'){
			this.list= this.list.concat(res.data.list.data)
			this.loadmore = this.list.length < res.data.list.total ? 'more' : 'noMore' 
          }
        })
      }, 
      godetails(item){
		  uni.navigateTo({
		  	url:'/pages/exchange/orderdetail?id='+item.id
		  })   
      },    
		gorefund(item){  
			uni.showModal({
				title:'提示',
				content: '确认申请退款吗?',
				success:(ret)=>{ 
					if(ret.confirm){    
						this.$api.exchangeRefund({id:item.id},res=>{ 
						  if(res.code == '1'){
							uni.showToast({ title: '申请退款成功' , icon: 'success' })  
							  this.page =1;
							  this.list =[];
								this.getdata()
						  }else{
							uni.showToast({ title: res.msg , icon: 'none' }) 
						  }
						})
					}
				}
		  })  
		},
		gofinish(item){  
			uni.showModal({
				title:'提示',
				content: '确认完成吗?',
				success:(ret)=>{ 
					if(ret.confirm){    
						this.$api.exchangeFinish({id:item.id},res=>{ 
						  if(res.code == '1'){
							uni.showToast({ title: res.msg , icon: 'success' }) ;
						  this.page =1;
						  this.list =[];
							this.getdata()
						  }else{
							uni.showToast({ title: res.msg , icon: 'none' }) 
						  }
						})				
					}
				} 
			})

		},
		gopay(item){ 
			let that = this
			this.$api.exchangePay({order_id:item.id},data=>{ 
			  if(data.code == '1'){
				  uni.requestPayment({
					provider: 'wxpay',
					appid:data.data.appId,
					nonceStr:data.data.nonceStr,
					package:data.data.package,
					timeStamp: data.data.timeStamp,
					signType: data.data.signType,
					paySign:data.data.paySign,
					success: function(e) { 
						that.page=1;
						that.list=[];
						that.getdata() 
					},
					fail(err) {
					  console.log(err,'失败')
					}
				  });
			  }else{ 
				 uni.showToast({ title: data.msg , icon: 'none' })
			}
			}) 
		}, 
      closeorder(item){  
		  	uni.showModal({
		  		title:'提示',
		  		content: '确认取消订单吗?',
		  		success:(ret)=>{ 
		  			if(ret.confirm){    
					  this.$api.exchangeCancelorder({id:item.id},res=>{ 
						if(res.code == '1'){
							uni.showToast({ title: '取消成功' , icon: 'success' }) 
						  this.page =1;
						  this.list =[];
						  this.getdata()
						}else{
						  uni.showToast({ title: res.msg , icon: 'none' }) 
						}
					  })
        
					}
				} 
			})
      }
    }
  }
</script>
<style> 
.mainwidth2{margin: 0;}
.order{width: 96%;margin: 0 auto;}
.order-jf-li{background: #fff;border-radius: 10rpx;padding: 24rpx; box-shadow: 2px 2px 5px 2px #eee;margin-bottom: 40rpx;}
.flex{display: flex;justify-content: space-between;margin-bottom: 30rpx;}
.bianhao{color:#777777;}
.order-jf-img .left{flex:0 0 30%;}
.order-jf-img .right{flex:0 0 68%;font-weight: 700;}
.order-jf-img .left image{width: 100%;height: 150rpx;border-radius: 10rpx;}
.order-jf-time{line-height: 50rpx;align-items: center;}
.order-jf-time .fsz34{font-weight: 700;color:red;}
.order-jf-btn{display: flex;justify-content: flex-end;position: relative;height: 64rpx;}
.order-jf-btn .state{color: #fa8a1e;padding: 0;position: absolute;left: 0;margin: 0;border: none;}
 .content{margin-top: 30rpx;}
.order-jf-time .fsz28{color: #777;}
.kaipiao{position: relative;}
.kaipiao .tishi{position: absolute;width: 400rpx;background: #ddd;text-align: center;border-radius: 10rpx;top: -99rpx;left: -50%;}
.sanjiao{width: 0;height: 0;border-bottom: 18rpx solid transparent;position: absolute;border-top: 18rpx solid #ddd;border-left: 18rpx solid transparent;border-right: 18rpx solid transparent;left: 50%;transform: translateX(-50%);top: 62rpx;}
.goods_name{    line-height: 42rpx;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-box-orient: vertical;
    padding: 0rpx 18rpx;
    box-sizing: border-box;
    word-break: break-all;}
</style>
