<template>
	<view>
		<view class="order">
			<view class="order-li">
				<view class="bianhao flex fsz28" style="color: #777;">
					<text>订单编号:{{details.order_no||''}}</text>
				  <text v-if=" details.status==1">{{details.pay_status_text||''}} 
				  
				   <text v-if=" details.refund_status ==1">,{{details.refund_status_text||''}}</text>
				   <text v-if=" details.shipping_status>0">,{{details.shipping_status_text||''}}</text></text>
				  <text v-if=" details.status>1"><text v-if=" details.refund_status ==2">{{details.refund_status_text||''}},</text>{{details.status_text}}</text>
				  
					 
				</view>
				<view class="order-img flex">
					<view class="left">
						<image :src="details.goods_image"   class="little-img"></image>
					</view>
					<view class="right fsz32">
						{{details.goods_name||''}}
					</view>
				</view>
				<view class="order-time flex fsz28">
					<view class="fsz28">
						<view class="">{{details.point||''}}积分+{{details.price||''}}元</view>
					 </view>
					<view class="">x{{details.number||''}}</view>
				</view> 
				<view class="order-time flex fsz28" v-if=" details.status==1 && details.refund_status==3">
					<view class="fsz28">
						<view class="">退款申请结果:{{details.approve_msg||''}}</view>
					 </view> 
				</view> 
			</view> 
			<view class="order-li order-info" v-if=" details.ship_code">
				<view class="fsz28">
					<text>快递公司：</text>{{details.ship_company||''}}
				</view>
				<view class="fsz28">
					<text>快递单号：</text>{{details.ship_code||''}}
				</view>  
			</view> 
			<view class="order-li order-info">
				<view class="fsz28">
					<text>订单编号：</text>{{details.order_no||''}}
				</view>
				<view class="fsz28">
					<text>下单时间：</text>{{details.createtime_text||''}}
				</view>  
				<view class="fsz28"  >
					<text>联系人：</text>{{details.contact_name||''}}
				</view>
				<view class="fsz28"  >
					<text>联系人手机号：</text>{{details.contact_mobile||''}}
				</view>
				<view class="fsz28"    >
					<text>收货地址：</text>{{details.contact_address||''}}
				</view>
			</view> 
			<view class="order-li">
				<view class="bianhao flex fsz28 order-time">
					<text>积分：</text>
					<text class="fsz34"> {{details.order_point||''}}</text>
				</view>  
				<view class="bianhao flex fsz28 order-time">
					<text>金额：</text>
					<text class="fsz34">
						￥{{details.order_amount||''}}</text>
				</view> 
			</view>  
			<view style="height:80px"></view> 
		</view> 
		<view class="order-btn fsz28" v-if="details.auth_refund == 1 || details.auth_cancel ==1 || details.auth_pay ==1 || details.auth_finish ==1">
			 <template v-if="details.auth_cancel ==1">
				<view class="btn btn-default" @click.stop="closeorder(details)">取消订单</view>
			</template>
			<template v-if="details.auth_pay ==1"> 
				<view class="btn btn-default"  @click="gopay()">去支付</view>
			</template>
			<view class="btn btn-default"  @click="gofinish()"  v-if="details.auth_finish == 1">完成</view> 
			<view class="btn btn-default"  @click="gorefund()"  v-if="details.auth_refund == 1">申请退款</view> 
		</view>
	</view>
</template>

<script> 
	export default{ 
		data(){
			return{   
				  id:'',
				  details:{}, 
				  isshow:true, 
			}
		},
		onLoad(options) {
			this.id = options.id 
		},
		onShow() {  
			this.getdata() 
		},
		methods:{ 
			getdata(){
				let data = {
					 id:this.id
				}
				this.$api.exchangeOrderinfo(data,res=>{ 
					if(res.code == '1'){
						this.details = res.data.info 
					}
				})
			},  
			gopay(item){  
					let that = this
					this.$api.exchangePay({order_id:this.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) { 
									this.getdata()
								},
								fail(err) {
									console.log(err,'失败')
								}
							});
						}else{ 
							uni.showToast({ title: data.msg , icon: 'none' })   
						}
					})  
			},
			gofinish(){ 
				uni.showModal({
					title:'提示',
					content: '确认完成订单吗?',
					success:(ret)=>{ 
						if(ret.confirm){  
							this.$api.exchangeFinish({id:this.id},res=>{ 
								if(res.code == '1'){
									uni.showToast({ title: res.msg , icon: 'success' }) 
									this.getdata()
								}else{
									uni.showToast({ title: res.msg , icon: 'none' }) 
								}
							})
						}
					} 
				})
			} ,
			gorefund(){ 
				uni.showModal({
					title:'提示',
					content: '确认申请退款吗?',
					success:(ret)=>{ 
						if(ret.confirm){   
							this.$api.exchangeRefund({id:this.id},res=>{ 
							  if(res.code == '1'){
								uni.showToast({ title: '申请退款成功' , icon: 'success' })   
								this.getdata()
							  }else{
								uni.showToast({ title: res.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: res.msg , icon: 'success' }) 
									this.getdata()
								}else{
									uni.showToast({ title: res.msg , icon: 'none' }) 
								}
							})
				
						}
					} 
				})
			}
		}
	}
</script>
<style>
.order{width: 96%;margin: 0 auto;}
.order-li{background: #fff;border-radius: 10rpx;padding: 24rpx;box-sizing: border-box;box-shadow: 2px 2px 5px 2px #eee;margin-bottom: 30rpx;}
.flex{display: flex;justify-content: space-between;margin-bottom: 30rpx;}
.bianhao{color:#222222;}
.order-img .left{flex:0 0 40%;}
.order-img .right{flex:0 0 58%;font-weight: 700;overflow: hidden;height: 65px;}
.order-img .left image{width: 100%;height:150rpx;border-radius: 10rpx;}
.order-time{line-height: 50rpx;align-items: center;}
.order-time .fsz34{font-weight: 700;color:red;}
 
.order-time .nouse{color:#fa8a1e;    float: right;}
.order-time .yiuse{   float: right;}
.order-btn{    display: flex; 
    position: fixed;
    bottom: 0px; 
    padding: 10px 0px;justify-content: flex-end;
    background: #fff;
    width: 100%;}
/* .order-btn>view{height: 64rpx;padding: 0 34rpx;box-sizing: border-box;border: 1px solid #ddd;line-height: 64rpx;border-radius: 50rpx;margin-right: 30rpx;}
 */.content{margin-top: 30rpx;}
.order-time .fsz28{color: #222222;}
.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;}
.order-info>view{line-height: 60rpx;color: #222222;}
</style>
