mobile_uniapp_mmhy/pages/flowOrderDetails/flowOrderDetails.vue

<template>
	<view class="flowOrderDetails">
		<view class="head">
			请在号卡发货起15天内激活，超时未开通号卡将自动销户，请您尽快 完成激活 认证，开启新体验哦！
		</view>
		<view class="content">			
			<view class="box">
				<view class="title">
					<image src="../../static/img/image41.204c6330707ae6355af5.png" mode=""></image>
					订购商品:{{data.info.mobile.name}}
					<view class="type" v-if="data.status==0">待付款</view>
					<view class="type" v-else-if="data.status==10">已付款未处理</view>
					<view class="type" v-else-if="data.status==15">已提运营</view>
					<view class="type" v-else-if="data.status==17">有号码未发货</view>
					<view class="type" v-else-if="data.status==20">已提运营商</view>
					<view class="type" v-else-if="data.status==23">已发货</view>
					<view class="type" v-else-if="data.status==25">已完成</view>
					<view class="type" v-else-if="data.status==30">申请退款</view>
					<view class="type" v-else-if="data.status==50">已关闭</view>
					<view class="type" v-else-if="data.status==60">无号码</view>
					<view class="type" v-else-if="data.status==70">换卡</view>
					<view class="type" v-else-if="data.status==80">争议单</view>
					<view class="type" v-else-if="data.status==90">已退款</view>
					<view class="type" v-else-if="data.status==100">退款反驳</view>
					<view class="type" v-else-if="data.status==110">审核失败</view>
				</view>
				<view class="loabl">
					<text>下单时间:</text>
					{{data.create_time | formatDate}}
				</view>
				<view class="loabl">
					<text>订单编号:</text>
					{{data.id_no}}
				</view>
				<view class="loabl">
					<text>联系电话:</text>
					{{data.phone}}
				</view>
				<view class="loabl">
					<text>收货地址:</text>
					{{data.address}}
				</view>
				<view class="loabl" v-if="data.trans_name" @tap.stop="logisticsMet(data.id)">
					<text>{{data.trans_name}}:</text>
					{{data.trans_no}}
				</view>
			</view>
			<view class="box">
				<view class="title">
					<image src="../../static/img/image43.f76c452243d3d619ab9f.png" mode=""></image>
					入网信息
				</view>
				<view class="loabl">
					<text>姓名:</text>
					{{data.name}}
				</view>
				<view class="loabl">
					<text>身份证号:</text>
					{{data.id_no}}
				</view>
				<view class="loabl" v-if="data.gantanhao_data_notify">
					<text>生产号码:</text>
					{{JSON.parse(data.gantanhao_data_notify).plan_mobile_produced}}
				</view>
			</view>
			<view class="reason" v-if="data.status==110">
				失败原因：{{data.reason}}
			</view>
			<view class="btn" @tap="submit()" v-if="data.status==110">
				补传照片
			</view>
		</view>
		<u-popup v-model="logistics" mode="center" border-radius="14">
			<view class="logistics">
				<image @tap="logistics=false" src="../../static/img/up.png"></image>
				<view class="list" v-if="logisticsList.length==0">
					暂无物流信息
				</view>
				<view class="list" v-for="(item,index) in logisticsList" :key="index" style="margin-bottom: 10rpx;">
					<view class="text" style="color: #868686; font-size:26rpx;margin-bottom:10rpx">{{item.AcceptStation}}</view>
					<view class="text" style="color: #868686; font-size:26rpx;margin-bottom:10rpx">{{item.AcceptTime}}</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id:'',
				data:{
					info:{
						mobile:{
							name:''
						}
					}
				},
				logistics:false,
				logisticsList:[], //物流
			}
		},
		onLoad(option) {
			console.log(option)
			if(option.id){
				this.id = option.id
				
			}
		},
		onShow() {
			this.order_detail()
		},
		filters: {
			formatDate(value) {
				if(value == undefined){
					return;
				}
				// let date = new Date(value * 1000);
				let date = new Date(value * 1000);
				//时间戳为10位需*1000，时间戳为13位的话不需乘1000
				let y = date.getFullYear();
				let MM = date.getMonth() + 1;
				MM = MM < 10 ? ('0' + MM) : MM; //月补0
				let d = date.getDate();
				d = d < 10 ? ('0' + d) : d; //天补0
				let h = date.getHours();
				h = h < 10 ? ('0' + h) : h; //小时补0
				let m = date.getMinutes();
				m = m < 10 ? ('0' + m) : m; //分钟补0
				let s = date.getSeconds();
				s = s < 10 ? ('0' + s) : s; //秒补0
				// return y + '-' + MM + '-' + d; //年月日
				return MM + '-' + d + ' ' + h + ':' + m; //年月日时分秒
			}
		 
		},
		methods: {
			submit(){
				uni.navigateTo({
				  url: '/pages/flowDetails/flowDetails?id='+this.data.mobile_id+'&chanId='+uni.getStorageSync('chanId')+'&orderId='+this.data.id,
				})
			},
			logisticsMet(id){
				this.logistics=true;
				this.$http.logistics({id: id})
				.then(res=>{
					if(res.data.code==1){
						console.log(res.data.data)
						this.logisticsList=res.data.data
					}
				})
			},
			order_detail(){
				this.$http.order_detail({id:this.id})
				.then(res=>{
					if(res.data.code==1){
					console.log(res.data.data)
						this.data=res.data.data
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.reason{
		font-size: 20rpx;
		margin: 0 37rpx;
		color: red;
	}
	.btn{
		width: 690rpx;
		height: 90rpx;
		line-height: 90rpx;
		text-align: center;
		font-size: 32rpx;
		margin: 90rpx auto 0;
		color: #fff;
		background-color: #4891ef;
		border-radius: 30rpx;
	}
	page{
		height: 100%;
		background-color: #F5F5F5;
	}
	.flowOrderDetails{
		.logistics{
			padding: 30rpx;
			width:580rpx ;
			// max-height: 900rpx;
			image{
				float: right;
				width: 21rpx;
				height: 21rpx;
			}
			.list{
				margin-top: 30rpx;
				padding-bottom: 6rpx;
				border-bottom: 1rpx solid #868686;
			}
		}
		.head{
			background-color: #3483ea;
			box-sizing: border-box;
			padding: 80rpx 30rpx 120rpx;
			font-size: 30rpx;
			color: #fff;
			align-items:center;
		}
		.content{
			position: relative;
			top: -80rpx;
		}
		.box{
			width: 680rpx;
			margin: 20rpx auto;
			background-color: #fff;
			border-radius: 20rpx;
			box-sizing: border-box;
			padding: 30rpx;
			box-shadow: 10rpx 10rpx 24rpx rgba(0, 0, 0, 0.05);
			.title{
				position: relative;
				box-sizing: border-box;
				font-size: 30rpx;
				color: #333;
				// margin-bottom: 20rpx;
				border-bottom: 1px solid #f1f1f1;
				padding: 20rpx;
				padding-right: 140rpx;
				image{
					width: 35rpx;
					height: 35rpx;
					padding-right:8rpx;
				}
				.type{
					position: absolute;
					right: 0rpx;
					width: 120rpx;
					top: 0;
					padding: 4rpx 20rpx;
					background-color: #ef9f26;
					font-size: 26rpx;
					border-radius: 20rpx;
					color: #FFF;
				}
			}
			.loabl{
				color: #868686;
				font-size: 28rpx;
				// margin-top: 10rpx;
				border-bottom: 1px solid #f1f1f1;
				padding: 20rpx;
				text{
					display: inline-block;
					width: 120rpx;
					margin-right: 10rpx;
				}
			}
		}
	}
</style>