八 order/order-details.vue

<template>
	<view class='order-details'>
		
		<!--订单情况-->
		<view class='order-item'>
			<!--待付款-->
			<view v-if='obligation'>
				<view>
					<view>拍下未付款</view>
					<view>
						剩余时间：
						<count-down
							:time="dateTime"
							format="DD:HH:mm:ss"
							autoStart
							@change="onChange"
							@finish="onFinish"
						>
							<view class="time">
								<view class="time__item">{{ timeData.days }}&nbsp;天</view>
								<view class="time__item">{{ timeData.hours}}&nbsp;时</view>
								<view class="time__item">{{ timeData.minutes }}&nbsp;分</view>
								<view class="time__item">{{ timeData.seconds }}&nbsp;秒</view>
							</view>
						</count-down>
					</view>
				</view>
				<view>超时自动关闭...</view>
			</view>
			<!--待发货-->
			<view v-if='shipped'>
				<view>订单支付成功！</view>
				<view>正在发货中...</view>
			</view>
			<!--待收货-->
			<view v-if='received'>
				<view>派送中！</view>
				<view @click='express'>查看物流信息...</view>
			</view>
			<!--已完成-->
			<view v-if='completed'>
				<view>订单已完成</view>
			</view>
		</view>
		<!--收货地址-->
		<view class='order-item'>
			<view>{{ address.name }} {{ address.mobile }}</view>
			<view>{{ address.province }} {{ address.city}} {{ address.county }} {{ address.address}}</view>
		</view>
		<!--商品详情-->
		<view class='order-item'>
			<view>标题：{{ goods[0].spuTitle }}</view>
			<view>价格：{{ goods[0].currentPrice * goods[0].counter }}</view>
			<view>数量：{{ goods[0].counter }}</view>
		</view>
		<!--订单信息-->
		<view class='order-item'>
			<view>订单编号：{{ order.orderNumber }}</view>
			<view>下单时间：{{ $utils.toDateString(  order.payTime ) }}</view>
		</view>
		
		<!--底部按钮-->
		<view class='order-bottom'>
			
			<view v-if='obligation'>
				<view @click='closeOrder'>取消订单</view>
				<view @click='goPayment'>去支付</view>
			</view>
			
			<view v-if='shipped'>
				<view @click='outPayment'>申请退款</view>
			</view>
			
			<view v-if='received'>
				<view @click='confirm'>确认收货</view>
			</view>
			
			<view v-if='completed'>
				<view @click='applyRefund'>申请售后</view>
			</view>
			
		</view>
		
		<!--消息提示-->
		<u-toast ref="uToast"></u-toast>
		
		<!--查询物流-->
		<u-popup :show="show" @close="show=false">
			<view style='height:600rpx;width:500rpx;overflow-y: auto;'>
				<u-steps :current="current" direction="column">
					<u-steps-item 
						v-for='(item,index) in steps'
						:title="item.title" 
						:desc="item.time"
					>
					</u-steps-item>
				</u-steps>
			</view>
		</u-popup>
			
	</view>
</template>

<script>
import { orderDetail  , paymentRefund  , orderExpress , orderClose  , payment , orderConfirm } from '@/utils/api/order.js'
import countDown from '@/components/count-down'
export default{
	data () {
		return {
			timeData:{},
			dateTime:0,
			address:{},
			goods:[],
			order:{},
			id:'',
			show:false,
			current:0,
			steps:[],
		}
	},
	components:{
		countDown
	},
	onLoad( e ) {
		this.id = e.id;
		
	},
	onShow(){
		this.getOrder();
	},
	computed:{
		//待付款
		obligation(){
			return this.order.status == 1 && this.order.deliveryStatus ==0 && this.order.isPay ==2 ;
		},
		//待发货
		shipped(){
			return this.order.status == 1 && this.order.deliveryStatus ==0 && this.order.isPay ==1 ;
		},
		//待收货
		received(){
			return this.order.status == 1 && this.order.deliveryStatus ==1 && this.order.isPay ==1 ;
		},
		//已经完成
		completed(){
			return this.order.status == 5;
		}
	},
	methods:{
		//查询数据
		async getOrder(){
			let res = await orderDetail(this.id);
			let { address , goods , order } = res.data;
			this.address = address;
			this.goods = goods;
			this.order = order;
				
			//订单失效时间 
			let stopTime = this.order.createTime + ( 60 * 60 * 1000 * 2 );
			let startTime = Date.now();
			let endTime = new Date( stopTime ).getTime();
			this.dateTime = endTime - startTime;
			
		},
		onChange( e ){
		  this.timeData = e;
		},
		//订单有效时间结束
		async onFinish(){
		  let res = await orderClose( this.id );
		  if( res.code =='200'){
		  	that.$refs.uToast.show({
		  		message:'订单关闭'
		  	})
		  	uni.navigateBack();
		  }
		},
		//申请退款
		outPayment(){
			let that = this;
			uni.showModal({
				title:'提示',
				content:'确定退款吗？',
				async success() {
					let res = await paymentRefund( that.id );
					if( res.code =='200'){
						that.$refs.uToast.show({
							message:'退款成功'
						})
						uni.navigateBack();
					}
				}
			})
		},
		//查询物流
		async express(){
			let res = await orderExpress( this.id );
			console.log( res );
			this.current = res.data.length-1;
			let arr = [];
			res.data.forEach(item=>{
				arr.push({
					title:item.logisticsDesc,
					time:this.$utils.toDateString( item.logisticsTime  )
				})
			})
			this.steps = arr;
			this.show = true;
		},
		//取消订单
		async closeOrder(){
			let that = this;
			uni.showModal({
				title:'提示',
				content:'确定取消订单吗？',
				async success() {
					let res = await orderClose( that.id );
					if( res.code =='200'){
						that.$refs.uToast.show({
							message:'订单关闭成功'
						})
						uni.navigateBack();
					}
				}
			})
		},
		//去支付
		async goPayment(){
			let that = this;
			let res = await payment( this.id );
			//去支付 ==> 以上下单参数没问题
			if( res.code =='200'){
				let { orderNumber } = res.data;
				let params = res.data.params;
				uni.requestPayment({
					nonceStr:params.nonceStr,
					package:params.package,
					paySign:params.paySign,
					signType:params.signType,
					timeStamp:params.timeStamp,
					success( e ){
						that.paymentEnd(2);
					},
					fail( e ){
						that.paymentEnd(1);
					}
				})
			}
		},
		//支付成功 或 失败
		paymentEnd( msg ){
			uni.navigateTo({
				url:`/order/order-list?id=${ msg }`
			})
		},
		//确认收货
		async confirm(){
			let that = this;
			uni.showModal({
				title:'提示',
				content:'确认收货吗？',
				async success() {
					let res = await orderConfirm( that.id );
					if( res.code =='200'){
						that.$refs.uToast.show({
							message:'收货成功'
						})
						uni.navigateBack();
					}
				}
			})
		},
		//申请售后
		applyRefund(){
			uni.navigateTo({
				url:`/order/applyRefund?id=${ this.id }`
			})
		}
	}
}
</script>

<style>
.order-details{
	background-color:  #F6F7F9;
}
.order-item{
	width: 716px;
	margin-top:20rpx;
	background-color: #ffffff;
	border-radius: 7rpx;
}
.order-bottom{
	position: fixed;
	bottom:20rpx;
	right:0;
}
</style>