qzw_xcx/pages/myOrder/order.vue

<template>
	<view class="cart-list">
       <view style="padding: 0 36upx;line-height: 70upx;border-bottom: 14upx solid #F5F5F5;">已取消</view>  
	   <view class="adress">
	   		 <view class="adressDetail">156355</view>
	   		 <view>北京大酒店将诶怕</view>
	   </view>
	   <view style="padding: 30upx 36upx 15upx 36upx;border-bottom: 1px solid #F5F5F5;">
		  <image src="" style="width: 50upx;height: 50upx; vertical-align: middle;background-color: #007AFF;"></image>
		  <span style="padding-left: 16upx;">华南酒店</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;">合计：50</view>
		  <view style="padding-left: 20upx;">运费: 50</view>
	 </view>
	 <view style="padding: 15upx 36upx;">订单编号:<text class="orderCode">DDERKIJGIOSJKGPE</text></view>
	 <view class="adressbottom">
		 <view>下单时间: <text  style="font-weight: 500;" class="time">2552558555</text></view>
		 <view>支付订单: <text class="time">2552558555</text></view>
		 <view>商家发货: <text class="time">2552558555</text></view>
		 <view>确认收货: <text class="time">2552558555</text></view>
	 </view>
	 
	 <view class="adressbutton">
		<view class="buttonStatus">
			<view @click="estimate" class="deleteOrder">晒单</view>
			<view @click="reminder" class="deleteOrder">催单</view>
			<view @click="cancelOrder" class="deleteOrder">取消订单</view>
			<view class="payOrder" @click="goPay">去付款</view>
		</view>
	 </view>
	<van-dialog use-slot title="确定取消订单？"
	 show-cancel-button="true"
	 @cancel="cancelDialog" @confirm="confirmOrder"
	 :show="orderCancel">
	 </van-dialog>
	<Dialog  :orderCancel="orderCancel" 
	    @colseDialog="cancelDialog" 
	    @confirmPay="confirmOrder"
	 />
	</view>
</template>

<script>
	import Dialog from '@/component/Dialog.vue'
	export default {
		components: {
			Dialog
		},
		data() {
			return {
			  orderCancel: false,
		    }
	    },
		methods: {
			// 取消订单
			cancelOrder() {
				this.orderCancel = true;
			},
			cancelDialog() {
				this.orderCancel = false;
			},
			confirmOrder() {
				this.orderCancel = false;
				this.$msg("取消成功");
			},
			goPay() {
				uni.navigateTo({
					url: './paymoment'
				})
			},
			
			// 催单
			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;
		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>