qzw_xcx/pages/myOrder/order.vue

<template>
	<view class="cart-list">
       <view 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> -->
		   <span>{{detail.status}}</span>
	   </view>  
	   <view 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" v-for="(items,index) in detail.goods" :key="index">
			  <view>
				  <van-card
					title-class="changewidth"
					price-class ="priceClass"
					:price="items.goods_price"
					:desc="items.descire"
					:title="items.desarray"
					:thumb="pictureUrl + '/uploads/home/store/goods/'+items.goods_image.substr(0, items.goods_image.indexOf('\_')) + '/' + items.goods_image"
				  >
				  </van-card>
			  </view>
			  <view style="clear:both;width: 100%;overflow: hidden;">
				  <view  class="retungood" v-if="detail.status=='已收货' && items.status == 2" @click="goreturngood(items)">退货退款</view>
				  <view class="retungood" v-if="detail.status=='已收货' && items.status == 4" @click="goreturndetail(items.or_id)">退款成功</view>
				   <view class="retungood" v-if="detail.status=='已收货' && items.status ==3" @click="goreturndetail(items.or_id)">退款申请中</view>
			  </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 ||  detail.order_state == 20">未发货</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||  detail.order_state == 20">未确认</text>
			<text class="time"  v-else>{{detail.finnshed_time}}</text>
		 </view>
	 </view>
	 
	 <view class="adressbutton">
		<view  class="buttonStatus">
		<!-- 	<view>{{detail.operate}}</view> -->
			<!-- <view v-if="detail.order_state == 0 " @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>
			<!-- detail.order_state == 40 && detail.refund_state == 0 -->
			<view v-if=" detail.status == '已发货'" @click="cancelOrder(3)" class="deleteOrder">确认收货</view>
			<!-- <view v-if=" detail.status == '已收货'"  class="deleteOrder">退货退款</view> -->
			<view v-if=" detail.status == '已收货'" @click="estimate" class="deleteOrder">去评价</view>
			<view v-if=" detail.status == '已完成' ||  detail.status == '已取消'" @click="cancelOrder(2)" class="deleteOrder">删除订单</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,
			  isGet: false,
			  titles:'',
			  pictureUrl: this.pictureUrl,
			  orderCancel: false,
			  detail:{},
			  id: '' ,// 订单id
		    }
	    },
		onLoad(e) {
			console.log(e);
			this.id = e.id;
			this.getDetail();
		},
		methods: {
			// 退货退款
			goreturngood(item) {
				item.statusremak =  this.detail.status;
				item.order_id =  this.id;
				item.store_avatar = this.detail.store_avatar;
				item.store_name = this.detail.store_name;
				item.order_sn = this.detail.order_sn;
				let id = JSON.stringify(item);
				uni.navigateTo({
					url: `/pages/myOrder/returngood?id=${id}`  // 退货页面
				})
			},
			// 退款详情
			goreturndetail(e) {
				let id = e;
				uni.navigateTo({
					url: `/pages/myOrder/returndetail?id=${id}`  // 退货详情页面
				})
			},
			getDetail() {
				this.request({
					url: '/v2/order/info',
					method: 'post',
					data: {
						order_id: this.id
					},
					success: (res) => {
						let { data } = res.data;
						data.goods.forEach((items,index) => {
								let arr = items.goods_name.split(' ');
								items.desarray = arr[0];
								items.descire = items.goods_name.replace(arr[0], '');
						})
						this.detail = data;
						console.log(this.detail);
					}
				})
			},
			// 取消订单
			cancelOrder(e) { 
				if(e == 1) {
					this.titles="确认取消订单？"
					this.isCancel = true;
				}else if(e == 3){
					this.titles="确认收货？"
					this.isGet = true;
				}else {
				   this.titles="确认删除订单？"
				   this.isDelete = true;
				}
				this.orderCancel = true;
			},
			cancelDialog() {
				this.isCancel = false;
				this.isDelete = false;
				this.isGet = 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';
				}else if(this.isGet) {
					// 收货
					url = '/v2/order/confirm';
				} 
				this.request({
					url: url,
					method:'post',
					data: {
						order_id: this.id
					},
					success: (res) => {
						if(this.isDelete) {
							this.$msg("删除成功");
						}else if(this.isGet) {
							this.$msg("收货成功");
						}else if(this.isCancel) {
							this.$msg("取消成功");
						}
						setTimeout(()=> {
							uni.$emit("refehlist");
							uni.navigateBack();
						}, 2000)
						
					}
				})
				
				
			},
			goPay() {
				let prices = this.detail.order_amount;
				let order_id = this.id;
				let isform = 1;
				uni.navigateTo({
					url:`/pages/myOrder/paymoment?order_id=${order_id}
					&prices=${prices}&isform=${isform}`
				})
			},
			
			// 催单
			reminder() {
			   let order_id = this.id;
				uni.navigateTo({
					url: `/pages/myOrder/reminder?order_id=${order_id}`
				})
			},
		    
			// 评价晒单
			estimate() {
				let order_id = this.id;
				uni.navigateTo({
					url: `/pages/myOrder/estimate?order_id=${order_id}`
				})
				
			}
		}
	}
</script>
  
<style lang="scss">
		
	page {
		background-color: #F5F5F5;
	}
	.cart-list {
		background-color: #fff;
		
	}
		
	.topTip {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		padding: 20upx 36upx;
	}
	.changewidth {
		color: #303133;
		font-size: 32upx;
		font-weight: 100!important;
	}
	.priceClass {
		color:#303133!important;
		font-weight: normal!important;
		font-size: 36upx;
	}
	.van-card {
		background-color: #fff!important;
	}
	.shoplist {
		padding: 10upx 32upx;
		// display: flex;
		// justify-content: space-between;
		// align-items: center;
	}
	.retungood {
		text-align: right;
		padding: 0upx 32upx;
		float: right;
		border: 1px solid #666;
		//margin-right: 32upx;
	}
	.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;
		margin-bottom: 100upx;
		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>