orderDetail.vue

<template>
	<view class="full-width full-height"  style="margin: auto;"	:style="{ width:$tool.isPc()?$base.isPcWidth + 'px':'100%'}">

     <myhead :worksid="0" :title="myheadtext" :color="'#000'" :titleShow="true" :backShow="true" :background="'#fff'"></myhead>

		<scroll-view class="scroll_content" v-if="orderData !=null " style="position: fixed; top: 60px;"   
		:style="{ width:$tool.isPc()?$base.isPcWidth + 'px':'100%'}">
			<!-- 头部状态开始 -->
			<view class="order_detail_top">
				<view style="display:flex; flex-direction: row; padding-left: 40upx; width: 100%; ">
					
					<view style=" margin-top: 20upx;  margin-bottom: 20upx; width: 100%; ">
						<view style="font-size: 32upx;font-weight: 580;color: #854AC2;">
							{{$i18n.messages[$i18n.locale][orderData.status.text]}}
						</view>
						<view style="font-size: 27upx; color: #333333; margin-top:120upx; font-weight: 550; 
						    width: calc(100% - 10upx);  display: flex; flex-direction: row; max-width: calc(100% - 20upx); ">
							{{ orderData.order_express != null ? orderData.order_express.address: ""}}
						</view>
						<view
							style="font-size: 25upx;font-family: PingFang;font-weight: 400;color: #333333;margin-top: 3upx;">
							{{orderData.order_express != null ? orderData.order_express.receivor: "" }}
							{{orderData.order_express != null ? orderData.order_express.phone: "" }}
						</view>
					</view>
				</view>
			</view>
			<!-- 头部状态结束 -->

			<!-- 中间图片价格开始 -->
			<view class="order_detail_image" v-if="orderData.order_queue != null">
				<view style="display: flex;width: calc(100% - 30upx); flex-direction: row; height: 220upx;  ">
					<view style="width:150upx;
					height:150upx;
					background: #fff;
					border-radius:10upx;
					margin-top: 10upx; 
					margin-left: 40upx;
					position:relative;
					align-items: center;
					justify-content: center;">
						<image :src="orderData.order_queue.works_image" style="height: 150upx; position: absolute; border-radius: 10upx; margin: auto;
						left: 0;top: 0; left: 0; right: 0; bottom: 0;  " mode="heightFix"></image>
					</view>
					<view
						style=" font-size: 28upx;color: #333333;margin-left: 30upx; width: 360upx;  margin-top: 15upx; ">
						{{orderData.order_goods.goods_name}}
					</view>
				</view>

				<view style="width: 100%;height: 1upx;background: #EEEEEE;"></view>
				<view
					style="display: flex; flex-direction: row; float: right;  justify-content: center; align-items: center;height: 110upx; margin-right: 32upx; ">
					<view style="font-size: 28upx;font-family: Source Han Sans CN;font-weight: 600;color: #333333;">
						{{$i18n.messages[$i18n.locale]['支付金额']}}：
					</view>
					<view style="font-size: 36upx;font-family: Source Han Sans CN;font-weight: 600;color: #F56364; ">
						{{orderData.currency_symbol}}{{ (orderData.total_amount - orderData.discount_amount).toFixed(2) >= 0 ? (orderData.total_amount - orderData.discount_amount).toFixed(2) : 0 }}
					</view>
				</view>
			</view>

			<!-- 客服联系 -->
			<view class="order_detail_logistics" style=" height: 85upx; 
			line-height: 85upx; 
			text-align: center;">
				<view style="margin-top: 20upx;color: #854AC2; "> <!-- {{$i18n.messages[$i18n.locale]['联系']}} : --> {{phone}}
				</view>
			</view>

			<!--尾部订单明细图片价格开始 -->
			<view class="order_detail_logistics" v-if="orderData != null ">
				<view class="text"> {{$i18n.messages[$i18n.locale]['打印编号']}}：{{orderData.order_queue.id}}</view>
				<view class="text"> {{$i18n.messages[$i18n.locale]['设备编号']}}：{{orderData.order_queue.machine_id}}</view>
				<view class="text"> {{$i18n.messages[$i18n.locale]['订单编号']}}：{{orderData.id}}</view>
				<view class="text"> {{$i18n.messages[$i18n.locale]['下单时间']}}：{{orderData.create_time}}</view>
				<view class="text" v-if="orderData.promoter_id != 0 ">
					{{$i18n.messages[$i18n.locale]['推广编号']}}：{{orderData.promoter_id}}
				</view>
				<view class="text"
					v-if="orderData.order_express != null && orderData.order_express.express_name != null">
					{{$i18n.messages[$i18n.locale]['物流公司']}}：{{orderData.order_express.express_name}}
				</view>
				<view class="text" v-if="orderData.order_express != null && orderData.order_express.express_no != null">
					{{$i18n.messages[$i18n.locale]['快递单号']}}： {{orderData.order_express.express_no}}
				</view>
				<view class="text" v-if="orderData.send_goods_time != null">
					{{$i18n.messages[$i18n.locale]['发货时间']}}：{{ orderData.send_goods_time }}
				</view>
				<view class="text_logistics" @click="toSearchLogistics(orderData.order_express.express_url)"
					v-if="orderData.order_express != null && orderData.order_express.express_url != null">
					{{$i18n.messages[$i18n.locale]['物流详情']}}></view>
			</view>
			<!-- 尾部订单明细结束-->
			
		</scroll-view>

		<view class="button_save" @click="againOrder()" :style="{ width:$tool.isPc()?$base.isPcWidth - 60 + 'px':'calc(100% - 80upx)'}">
			{{$i18n.messages[$i18n.locale]['再来一单']}}
		</view>

	</view>
</template>

<script>
	import homeservice from '@/service/homeservice.js'
	import uniPopup from '../index/common/uni-popup/uni-popup.vue'
	import Enums from '@/util/Enums';
		import myhead from '../mine/head.vue';

	export default {
		components: {
			uniPopup,
			myhead
		},

		computed: {

		},

		data() {
			return {
				machine_id: null, //设备id
				order_id: null, //订单Id
				orderData: null, //订单数据
				phone: '18938664545',
				myheadtext:""
			};
		},

		methods: {

			//调转第三方物流链接
			toSearchLogistics(linkUrl) {
				if (linkUrl == null) {
					return
				}
				window.location.href = linkUrl
			},


			//再来一单
			againOrder() {
				const machine_id = uni.getStorageSync('machine_id');
				if (machine_id) {
					uni.reLaunch({
						url: '../index/detailsphone?machine_id=' + machine_id
					})
				}
			},

			//获取订单明细
			getOrderDetail() {
				let data = {
					s: "Order.detail",
					id: this.order_id,
				};
				homeservice.WorksListPhone(data).then(result => {
					this.orderData = result;
				}).catch(err => {

				});
			},
		},

		onReady() {
			
			
			this.myheadtext = this.$i18n.messages[this.$i18n.locale]['订单明细']
			// uni.setNavigationBarTitle({
			// 	title: this.$i18n.messages[this.$i18n.locale]['订单明细']
			// })
		},

		onLoad(options) {
			this.phone = uni.getStorageSync('phone');
			//console.log("this.phone="+this.phone)
			if (options.id) {
				this.order_id = options.id;
			}
			if (options.goods_id != 'null') {
				this.goods_id = options.goods_id
			}
			if (options.machine_id != 'null') { //设备进来的
				this.machine_id = options.machine_id
			}
			if (options.goodid != 'null') {
				this.works_id = options.goodid
			}
			this.getOrderDetail()
		},

		onShow() {},
		onUnload() {}

	};
</script>

<style lang="scss">
	page {
		background: #F5F5F5 !important;
	}

	.scroll_content {
		height: 100%;
		width: 100%;
		overflow: hidden;
		overflow-y: scroll;
		position: relative;

		.order_detail_top {
			width: calc(100% - 55upx);
			margin: 25upx;
			background: #FFFFFF;
			border-radius: 30upx
		}

		.order_detail_image {
			width: calc(100% - 55upx);
			height: 320upx;
			margin: 25upx;
			background: #FFFFFF;
			border-radius: 30upx;
			padding-top: 30upx;
		}

		.order_detail_logistics {
			width: calc(100% - 80upx);
			margin: 25upx;
			background: #FFFFFF;
			border-radius: 30upx;
			padding-top: 25upx;
			padding-left: 30upx;
			padding-bottom: 25upx;
			position: relative;

			.text {
				font-size: 28upx;
				color: #666666;
			}

			.text_logistics {
				position: absolute;
				right: 20upx;
				top: calc(50% - 20upx);
				font-size: 25upx;
				font-weight: 500;
				color: #333333;
			}
		}
	}

	.button_save {
		background: #F5F5F5;
		border: 1upx solid #854AC2;
		height: 65upx;
		position: fixed;
		bottom: 20upx;
		font-size: 40upx;
		font-weight: 500;
		text-align: center;
		left: 0;
		right: 0;
		margin: auto;
		border-radius: 60upx;
		line-height: 65upx;
		color: #854AC2;
	}
</style>