taoke/pages/order/order-details.vue

<template>
	<view>
		<view class="location">

			<view class="contacts">
				<view class="name">
					{{order.poststation.contacts}}
				</view>
				<view class="phone">
					{{order.poststation.phone}}
				</view>
			</view>
			<view class="address">
				{{order.poststation.address}}
			</view>
		</view>
		<view class="order">
			<view class="order-head">
				<view class="factory-name">{{order.seller.nickname?order.seller.nickname:'省心直供（该厂家暂未设置昵称）'}}</view>
				<view v-if="order.status === 'wait_pay'" class="order-status">待付款</view>
				<view v-if="order.status === 'wait_deliver'" class="order-status">待发货</view>
				<view v-if="order.status === 'wait_sign'" class="order-status">待签收</view>
				<view v-if="order.status === 'complete'" class="order-status">已完成</view>
				<view v-if="order.status === 'invalid'" class="order-status">已失效</view>
			</view>
			<view class="order-info">
				<view class="product-item" v-for="product in order.products_json">
					<view class="product-image">
						<image class="image" :src="product.spec_image" mode="scaleToFill"></image>
					</view>
					<view class="product-info">
						<view class="row">
							<view class="name">{{product.name}}</view>
							<view class="price">￥{{product.spec_price}}</view>
						</view>
						<view class="row">
							<view class="spec">{{product.spec_name}}</view>
							<view class="num">×{{product.num}}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="total-price">
				总价 <text class="warning">￥{{order.total_amount}}</text>
			</view>
		</view>
		<view class="info">
			<view class="title">订单信息</view>
			<view class="row">
				<view class="label">订单编号</view>
				<view>{{order.order_no}}</view>
			</view>
			<view class="row">
				<view class="label">支付宝交易号</view>
				<view>456451512316545113215645</view>
			</view>
			<view class="row">
				<view class="label">创建时间</view>
				<view>{{order.createtime|datetimeFilter}}</view>
			</view>
			<view class="row" v-if="order.paytime">
				<view class="label">付款时间</view>
				<view>{{order.paytime|datetimeFilter}}</view>
			</view>
			<view class="row" v-if="order.deliver_time">
				<view class="label">发货时间</view>
				<view>{{order.deliver_time|datetimeFilter}}</view>
			</view>
			<view v-if="false" class="option">
				<view class="option-item">
					<uni-icons class="icon" color="#666666" type="chatboxes-filled"></uni-icons>
					联系卖家
				</view>
				<view class="option-item">
					<uni-icons class="icon" color="#666666" type="phone-filled"></uni-icons>
					拨打电话
				</view>
			</view>
		</view>

		<view v-if="order.status === 'wait_pay' || order.status === 'wait_sign'" class="footer">
			<view class="option">
				<button v-if="order.status === 'wait_pay'" class="pay-btn" type="default" @tap="goToCashier">立即支付</button>
				<button v-if="order.status === 'wait_sign'" class="confirm-btn" type="default">确认收货</button>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				order: {
					seller: {}
				}
			}


		},
		onLoad(option) {
			this.order.id = option.id;
			this.getOrderData();
		},
		methods: {
			getOrderData() {
				this.$http.get({
					url: "/order",
					data: {
						id: this.order.id
					},
					success: (res) => {
						res.data.data.products_json = JSON.parse(res.data.data.products_snapshot)
						this.order = res.data.data
					}
				})
			},
			goToCashier() {
				uni.navigateTo({
					url: "/pages/order/cashier?order_no=" + this.order.order_no
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.location {
		padding: 40upx 20upx;
		background: white url(../../static/images/location.png) no-repeat;
		// background-color: white;
		background-size: 75upx 75upx;
		background-position: 30upx;

		.contacts {
			display: flex;
			align-items: center;
			margin-left: 100upx;

			.name {
				margin-right: 20upx;
				font-size: 28upx;
			}

			.phone {
				font-size: 24upx;
				color: #999999;
			}
		}

		.address {
			margin-left: 100upx;
			font-size: 28upx;
			margin-top: 10upx;
		}
	}

	.order {

		background: white;
		margin-top: 20upx;
		padding: 20upx;
		// border-radius: 20upx;

		.order-head {
			display: flex;
			justify-content: space-between;
			margin-bottom: 20upx;

			.order-status {
				color: $primary-color;
				font-size: 24upx;
			}
		}

		.factory-name {
			font-size: 28upx;
			font-weight: bold;
		}

		.product-item {
			display: flex;

			.product-image {
				width: 120upx;
				height: 120upx;
				margin-right: 20upx;
				margin-top: 10upx;

				.image {
					width: 120upx;
					height: 120upx;
				}
			}

			.product-info {
				flex-grow: 1;
				font-size: 28upx;

				.name {
					font-size: 28upx;
					white-space: normal;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;

				}

				.num {
					color: #999999;
				}

				.spec {
					font-size: 26upx;
					background: #CCCCCC;
					color: white;
					padding: 0 10upx;
					border-radius: 10upx;
				}
			}

			.row {
				display: flex;
				justify-content: space-between;
				margin-bottom: 10upx;
			}

		}

		.total-price {
			text-align: right;
			font-size: 28upx;
			padding: 10upx 0;

			.warning {
				color: $primary-color;
				font-weight: bold;
			}

		}

	}

	.info {
		background: white;
		margin-top: 20upx;
		padding: 20upx;

		.title {
			font-size: 30upx;
			margin-bottom: 20upx;
			font-weight: bold;
		}

		.row {
			display: flex;
			font-size: 26upx;
			margin: 10upx 0;

			& .label {
				width: 200upx;
			}
		}

		.option {
			display: flex;
			justify-content: space-around;
			text-align: center;
			padding: 20upx 0 0 0;
			border-top: 2upx solid #EEEEEE;
			color: #666666;
			margin-top: 40upx;

			.icon {
				margin-right: 10upx;
			}

			.option-item {
				flex: 1;
			}

			.option-item:first-child {
				border-right: 2upx solid #EEEEEE;
			}
		}
	}

	.footer {
		height: 80upx;
		background: white;
		position: fixed;
		bottom: 0;
		width: 100%;
		box-shadow: 0 0 10upx #EEEEEE;

		.option {
			text-align: right;
			margin: 15upx;

			.pay-btn,
			.confirm-btn {
				background: white;
				border: 2upx solid $primary-color;
				display: inline-block;
				line-height: normal;
				font-size: 28upx;
				color: $primary-color;
				border-radius: 40upx;
				padding: 5upx 10upx;
			}
		}
	}
</style>