qzw_xcx/pages/myOrder/order.vue

<template>
	<view class="cart-list">
       <view v-if="detail.refund_state == 0" style="padding: 0 36upx;line-height: 70upx;border-bottom: 14upx solid #F5F5F5;">
		   
		   <span v-if="detail.order_state == 10">未付款</span>
		   <span v-if="detail.order_state == 0">已取消</span>
		   <span v-if="detail.order_state == 20">待发货</span>  
		   <!-- 已付款  -->
		   <span v-if="detail.order_state == 30">已发货</span>
		   <span v-if="detail.order_state == 40">已收货</span>
	   </view>  
	   <view v-else style="padding: 0 36upx;line-height: 70upx;border-bottom: 14upx solid #F5F5F5;">
	   		   <span v-if="detail.refund_state == 1">等待酒店处理退货申请</span>
	   		   <span v-if="detail.refund_state == 2">同意退款售后</span>
	   		   <span v-if="detail.order_state == 3">拒绝退款</span>  
	   </view>  
	   <view class="adress">
	   		 <view class="adressDetail">{{detail.reciver_info.mob_phone}}</view>
	   		 <view>{{detail.reciver_info.address}}</view>
	   </view>
	   <view style="padding: 30upx 36upx 15upx 36upx;border-bottom: 1px solid #F5F5F5;">
		   <image :src="pictureUrl+'/uploads/home/store/'+detail.store_id+'/'+detail.store_avatar" style="border-radius: 50%;
		   width: 50upx;height: 50upx;vertical-align: middle;"></image>
		  <span style="padding-left: 16upx;">{{detail.store_name}}</span>
	   </view>
	
	 <view class="shoplist">
			  <view>
				  <van-card
					title-class="changewidth"
					price-class ="priceClass"
					price="10.00"
					desc="描述信息"
					title="商品标题"
					thumb="https://gd3.alicdn.com/imgextra/i3/0/O1CN01IiyFQI1UGShoFKt1O_!!0-item_pic.jpg_400x400.jpg"
				  >
				  </van-card>
			  </view>
	 </view>
	 <view class="topTip">
		  <view style="font-size: 28upx;">合计：{{detail.order_amount}}</view>
		  <view style="padding-left: 20upx;">运费: {{detail.shipping_fee}}</view>
	 </view>
	 <view style="padding: 15upx 36upx;">订单编号:<text class="orderCode">{{detail.order_sn}}</text></view>
	 <view class="adressbottom">
		 <view>下单时间: <text  style="font-weight: 500;" class="time">{{detail.add_time}}</text></view> 
		 <view>支付订单: 
		     <text class="time"  v-if="detail.order_state == 10 || detail.order_state == 0">未支付</text>
		     <text class="time"  v-else>{{detail.payment_time}}</text>
		 </view>
		 <view>商家发货: 
		   <text class="time"  v-if="detail.order_state == 10 || detail.order_state == 0">未发货</text>
		   <text class="time"  v-else>{{detail.shipping_time}}</text>
		 </view>
		 <view>确认收货: 
			<text class="time"  v-if="detail.order_state == 10 || detail.order_state == 0">未确认</text>
			<text class="time"  v-else>{{detail.finnshed_time}}</text>
		 </view>
	 </view>
	 
	 <view class="adressbutton">
		<view v-if="detail.refund_state == 0" class="buttonStatus">
			<view v-if="detail.order_state == 0 || detail.order_state == 40 " @click="cancelOrder(2)" class="deleteOrder">删除订单</view>
			<view @click="reminder"  v-if="detail.order_state == 20" class="deleteOrder">催单</view>
			<view @click="cancelOrder(1)" v-if="detail.order_state == 10" class="deleteOrder">取消订单</view>
			<view class="payOrder" v-if="detail.order_state == 10" @click="goPay">去付款</view>
		</view>
		<view v-else>
			<view v-if="detail.refund_state == 2">删除订单</view>
			
		</view>
	 </view>

	<Dialog  :orderCancel="orderCancel" 
	    :titles="titles"
	    @colseDialog="cancelDialog" 
	    @confirmPay="confirmOrder"
	 />
	</view>
</template>

<script>
	import Dialog from '@/component/Dialog.vue'
	export default {
		components: {
			Dialog
		},
		data() {
			return {
			  isCancel: false,
			  isDelete: false,
			  titles:'',
			  pictureUrl: this.pictureUrl,
			  orderCancel: false,
			  detail:{},
			  id: '' ,// 订单id
		    }
	    },
		onLoad(e) {
			console.log(e);
			this.id = e.id;
			this.getDetail();
		},
		methods: {
			getDetail() {
				this.request({
					url: '/v2/order/info',
					method: 'post',
					data: {
						order_id: this.id
					},
					success: (res) => {
						this.detail = res.data.data;
						console.log(this.detail);
					}
				})
			},
			// 取消订单
			cancelOrder(e) { 
				if(e == 1) {
					this.titles="确认取消订单？"
					this.isCancel = true;
				}else {
				   this.titles="确认删除订单？"
				   this.isDelete = true;
				}
				this.orderCancel = true;
			},
			cancelDialog() {
				this.isCancel = false;
				this.isDelete = false;
				this.orderCancel = false;
			},
			confirmOrder() {
				let url = '';
				this.orderCancel = false;
				// 取消
				if(this.isCancel) {
					url = '/v2/order/cancel';
				}else if(this.isDelete) {
					// 删除
					url = '/v2/order/drop';
				}
				this.request({
					url: url,
					method:'post',
					data: {
						order_id: this.id
					},
					success: (res) => {
						uni.$emit("refehlist");
						uni.navigateBack();
					}
				})
				
				
			},
			goPay() {
				let prices = this.detail.order_amount;
				let order_id = this.id;
				uni.navigateTo({
					url:`/pages/myOrder/paymoment?order_id=${order_id}&prices=${prices}`
				})
			},
			
			// 催单
			reminder() {
				uni.navigateTo({
					url: './reminder'
				})
			},
		    
			// 评价晒单
			estimate() {
				uni.navigateTo({
					url: './estimate'
				})
			}
		}
	}
</script>
  
<style lang="scss">
		
	page {
		background-color: #F5F5F5;
	}
	.cart-list {
		background-color: #fff;
		
	}
		
	.topTip {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		/* justify-content: space-between; */
		padding: 20upx 36upx;
		
	}
	.changewidth {
		color: #303133;
		font-size: 32upx;
		font-weight: 100!important;
	}
	.priceClass {
		color:#303133!important;
		font-weight: 100!important;
		font-size: 36upx;
	}
	.van-card {
		background-color: #fff!important;
	}
	.shoplist {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.adress {
		padding: 35upx 36upx;
		border-bottom: 14upx solid #F5F5F5;
	}
	.adressDetail {
		padding: 6upx 0;
	}
	.orderCode {
		padding-left: 15upx;
		font-weight: 500;
	}
	.adressbottom {
		padding: 0 36upx;
		color: #606266;
		border-top: 16upx solid #F5F5F5;
		padding-bottom: 32upx;
		view {
			padding: 32upx 0 0 0;
		}
			
		.time {
			padding-left: 16upx;
		}
	}
	.adressbutton {
		position: fixed;
		bottom: 0;
		width: 100%;
		.buttonStatus {
			display: flex;
			text-align: center;
			.deleteOrder {
				flex: 1;
				color: #303133;
				font-size: 32upx;
				background-color: #fff;
				padding: 10px 0;
			}
			.payOrder {
				flex: 1;
				font-size: 32upx;
				color: #fff;
				background-color: #D9332E;
				padding: 10px 0;
			}
		}
	}
</style>