<style lang="scss" scoped>
.detail{
	.top{ background:#0795c9; padding:50rpx 30rpx; color:#fff; label{ font-size:50rpx; color:#fff; font-weight:bold;} }
	.line{height:10rpx; background:#f2f2f2;}
	.item{ display:flex; border-bottom:1px solid #f1f1f1; align-items:center; justify-content: space-between; padding:25rpx 30rpx;
	  .fl{color:#999; width:300rpx;} .fr{ color:#333; text-align:right; flex:1; &.red{color:red; font-size:33rpx;} 
		  image{ width:280rpx; height:160rpx;}
		}
	}
	.btns{position: fixed; display:flex; align-items:center; justify-content: space-between; box-shadow:0 0 10rpx #eee; height:100rpx; width:100%; text-align:right; bottom:0; left:0; z-index:222; padding:0rpx 30rpx;  background:#fff;
	  .fl{color:red; font-size:38rpx;}
		.fr{ display:flex;}
		.btn.blue{ background:$main-color; color:#fff;}
		.btn{ background:#eee; color:#999; line-height:70rpx; margin-left:30rpx; width:auto; border-radius:70rpx; height:70rpx; font-size:30rpx; padding:0px 30rpx; border:0;}
	}	
}	
</style>
<template>
	<view class="detail" v-if="show">
	 	<view class="top">订单状态：			
					<label v-if="info.status==4">已取消</label>
					<block v-else>
						  <label v-if="info.paystate===0">待支付</label>
								<block v-else>														
									<label v-if="info.status===0">待发货</label>
									<label v-if="info.status===1">待收货</label>
									<label v-if="info.status==2">已收货</label>
									<label v-if="info.status===3">已完成</label>
								</block>
					</block>
		</view>
		<view class="line"></view>
		<view class="item">
			<view class="fl">订单编号：</view><view class="fr">{{info.orderno}}</view>
		</view>
		<view class="item">
			<view class="fl">创建时间：</view><view class="fr">{{info.datetime}}</view>
		</view>
		<view class="line"></view>
		<view class="item">
			<view class="fl">客户呢称：</view><view class="fr">{{info.name}}</view>
		</view>
		<view class="item">
			<view class="fl">手机号：</view><view class="fr">{{info.mobile}}</view>
		</view>	
		<view class="item">
			<view class="fl">收货地址：</view>
			<view class="fr">{{info.shaddress}}</view>
		</view>	
		<view class="line"></view>
		<view class="item">
			<view class="fl">产品名称：</view><view class="fr">{{info.title}}</view>
		</view>
		<view class="item">
			<view class="fl">订单价格：</view><view class="fr">￥{{info.price}}</view>
		</view>
		<view class="item">
			<view class="fl">产品图片：</view><view class="fr"><image :src="api.img(info.productimg)" @tap="scanImage(api.img(info.productimg))"></image></view>
		</view>		
		<view class="line"></view>
		<view class="item">
			<view class="fl">支付状态：</view>
			<view class="fr">
				  <text v-if="info.status===0 && info.paystate===0">待支付</text>
						<text v-if="info.status===2 && info.paystate===0">未支付</text>
						<text v-if="info.paystate===1">已支付</text>
						<text v-if="info.paystate===2">已退款</text>
			</view>
		</view>
		<view class="item" v-if="info.couponmoney!=null">
			<view class="fl">优惠金额：</view><view class="fr">￥{{info.couponmoney}}</view>
		</view>
		<view class="item">
			<view class="fl">支付金额：</view><view class="fr red">￥{{info.paymoney}}</view>
		</view>
		<view class="item" v-if="info.paytime">
			<view class="fl">支付时间：</view><view class="fr">{{info.paytime}}</view>
		</view>
		<view class="line"></view>	
		<view class="line" style="height:120rpx;"></view>		
		<view class="btns" v-if="info.status===0">
			<view class="fl"><block v-if="info.paystate===0">￥{{info.price}}</block></view>
			<view class="fr">
				<view class="btn" v-if="info.paystate===0" @tap="cancelOrder" >取消订单</view>
				<view class="btn" v-if="cancel(info.paytime) && info.paystate===1" @click="cancelOrder()">取消订单</view>	
				<view class="btn blue" v-if="info.paystate===0" @tap="orderPay">立即支付</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {GetDateDiff,getCurrentTime} from '@/utils/util.js'
	import pay from '@/utils/pay.js'
	export default{
		data(){
			return{
				show:false,
				status:0, //订单状态 0 处理中 1已完成  2已取消
				orderno:'', //订单编号
				info:{}, //订单信息
				zqaddress:'', //自取地址
			}
		},
				
		onLoad(e){
			if(this.api.getQs(e.orderno)){
				 this.orderno = e.orderno;
				 this.getOrderDetail();
			}
		},
		
		methods:{
			 
			 //订单详情
			 async getOrderDetail(){
				 const json = await this.api.orderDetail({q:{orderno:this.orderno}});				
				 if(json.data.code==0){
					  this.info = json.data.data;
							this.show = true;
				 }
			 },
				
				//判断5分钟之内可取消订单
				cancel(paytime){
					  var startTime = paytime;
					  var endTime = getCurrentTime();	
							if(startTime != null && startTime!=""){ 								 
									var minute = GetDateDiff(startTime,endTime,"minute");
									if(minute<=5){
											return true;
									}else{
										 return false;
									}
							}
				},
			 
			 //取消订单
			 cancelOrder(){
				  var that = this;
				  uni.showModal({title:'温馨提示',	content:'确定要取消订单吗？',
					    success(res){
								 if(res.confirm){
									 that.doCancelOrder();
								 }
							}
					})				  
			 },
			 
			 async doCancelOrder(){
				 const json = await this.api.cancelOrder({q:{orderno:this.orderno}});
				 if(json.data.code==0){
				 	 uni.showToast({title:json.data.msg})
					 var that = this;
					 setTimeout(res=>{
						   that.getOrderDetail();
					 },1200)
				 }
			 },
			 
			 //预览图片
			 scanImage(img,index){
				  let arr = [];
					 arr.push(img);
					 uni.previewImage({urls:arr});
			 }, 
				
				//订单支付
				async orderPay(){
					  this.api.go('/pages/pay/index?orderno='+this.info.orderno+'&title='+this.info.title);
				},
			 
		}		
	}
</script>

