recycapp/pages/order/detail.vue

<template>
	<view class="content">
		<view style="overflow: hidden;">
				
				<view class="news_title"> 
					<view class="fsz30 overflow2 title tag">
						{{orderInfo.status_name||''}}
					</view>
					<view class="time fsz26">
						订单号：{{orderInfo.order_no||''}}
					</view>
					<view class="time fsz26">
						下单时间：{{orderInfo.createtime||''}}
					</view>
					<view class="time fsz26" v-if="orderInfo.status ==3">
						完成时间：{{orderInfo.finish_time||''}}
					</view>
				</view>
				<view class="line"></view>
				<view class=" w">
					<view class="biaoti fsz30">
						 预约信息
					</view>
					<view class="main">
						<view class="li fsz30">
							<view class="ti">联系人 : </view>
							<view>{{orderInfo.accept_name||''}}</view>
						</view>
						<view class="li fsz30">
							<view class="ti">电话 : </view>
							<view>{{orderInfo.accept_mobile||''}}</view>
						</view>
						<view class="li fsz30">
							<view class="ti">地址 : </view>
							<view>{{orderInfo.area_name||''}} </view>
						</view>
						<view class="li fsz30">
							<view class="ti"></view>
							<view style="    text-align: right;">{{orderInfo.accept_address||''}}</view>
						</view>
						<view class="li fsz30" v-if="orderInfo.status ==3">
							<view class="ti">订单金额 : </view>
							<view style="text-align: right;" class="red-price">{{orderInfo.price||''}}</view>
						</view>
						<view class="li fsz30" v-if="orderInfo.status ==3">
							<view class="ti">订单赠送积分 : </view>
							<view style="text-align: right;" class="red-price">{{orderInfo.send_point||''}}</view>
						</view>
					</view>
				</view> 
				<view class="line"></view>  
				<view class=" w">
					<view class="biaoti fsz30">
						 回收信息
					</view>
					<view class="main">
						<view class="li fsz30">
							<view class="ti">预约回收品类 : </view>
							<view>{{orderInfo.type_name||''}}</view>
						</view>
						<view class="li fsz30">
							<view class="ti">预约时间 : </view>
							<view>{{orderInfo.order_time||''}}</view>
						</view>
						<view class="li fsz30">
							<view class="ti">预约重量 : </view>
							<view>{{orderInfo.weight||''}}</view>
						</view>
						<view class="li fsz30">
							<view class="ti">备注 : </view>
							<view>{{orderInfo.remark||'无'}}</view>
						</view>
					</view>
				</view> 
				<view class="line"></view>  
				<view class=" w" v-if="orderInfo.status==2">
					<view class="biaoti fsz30">
						 回收员
					</view>
					<view class="main">
						<view class="li fsz30">
							<view>姓名 : </view>
							<view>{{orderInfo.person_name||''}}</view>
						</view>
						<view class="li fsz30">
							<view >电话 : </view>
							<view @tap="call(orderInfo.person_mobile)" >{{orderInfo.person_mobile||''}}</view>
						</view> 
						<view class="li fsz30">
							<view >接单时间 : </view>
							<view  >{{orderInfo.jiedan_time||''}}</view>
						</view> 
					</view>
				</view> 
				<view style="height:100px"></view>
			</view> 
			<view class="button-bottom" v-if="orderInfo.status==1 || orderInfo.status==2">
				<button class='btn btn-default'   v-if="orderInfo.status == 1 || orderInfo.status == 2" @click="cancelOrder()">取消订单</button>
				 
			</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			order_id: '',
			orderInfo: {}, 
		};
	},
	onLoad(e) {
		this.order_id = e.id;
		this.getOrderDetail();
	},
	methods: {
		cancelOrder() { 
			uni.showModal({
				title:'提示',
				content: '确认要取消订单吗?',
				success:(ret)=>{ 
					if(ret.confirm){  
						let data = {
							id: this.order_id
						}
				
						this.$api.cancelorder(data, res => {
							if (res.code ==1) {
								uni.showToast({ title: res.msg , icon: 'success' })
								setTimeout(function() {
									this.getOrderDetail()
								},2000);  
							} else {
								uni.showToast({ title: res.msg , icon: 'none' }) 
							}
						})
					}
				}
			})
		}, 
		getOrderDetail() {
			let _this = this
			let data = {
				id: _this.order_id
			}
			_this.$api.orderdetail(data, function(res) {
				if (res.code ==1 ) {
					let data = res.data.info  
					_this.orderInfo = data;  
				} else {
					uni.showToast({ title: res.msg , icon: 'none' }) 
				}
			})  
		}, 
		call(phone){
				  uni.makePhoneCall({
					phoneNumber:phone,
					success:function(){
						console.log('拨打电话成功');
					},
					fail() {
						console.log('打电话失败了');
					}
				})
		},
	}
};
</script>

<style lang="scss">
 
 
.news_title{
	border-bottom: 1px solid #eee;
    padding: 20rpx 5%;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
    width: 100%; }
.news_title	.title{
		color: #333;
		line-height: 50rpx;
	}
.news_title	.time{
		color: #777;
		margin-top: 20rpx;
	}
.news_title	.tag{ 
			color: #e01f20;
	}
 
 
 	.biaoti{
		color: #777777;
		height: 90rpx;
		line-height: 90rpx;
		margin-top: 20rpx; }
	.biaoti	image{width: 35rpx;margin-right: 10rpx; margin-bottom: -6rpx;}
 .main{
 	line-height: 60rpx;}
  .main	.li{
 		display: flex;
 		justify-content: space-between;
 	}
 
  
 .line{border:solid 3px #eee}.button-bottom {
		padding: 15upx 26upx;
		text-align: right;
		display: block;
	}

	.button-bottom .btn {
		margin-left: 20upx;
	}
	.ti{width:115px}
</style>