taoke/pages/order/order-details.vue

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

			<view class="contacts">
				<view class="name">
					刘亦菲
				</view>
				<view class="phone">
					86-18112512562
				</view>
			</view>
			<view class="address">
				广东省广州市花都区合成村2街5号
			</view>
		</view>
		<view class="order">
			<view class="order-head">
				<view class="factory-name">{{order.factory}}</view>
				<view v-if="order.status === 0" class="order-status">待付款</view>
				<view v-if="order.status === 2" class="order-status">待收货</view>
			</view>
			<view class="order-info">
				<view class="product-item" v-for="product in order.products">
					<view class="product-image">
						<image class="image" :src="product.image" mode="scaleToFill"></image>
					</view>
					<view class="product-info">
						<view class="row">
							<view class="name">{{product.name}}</view>
							<view class="price">￥{{product.price}}</view>
						</view>
						<view class="row">
							<view class="spec">{{product.specs_name}}</view>
							<view class="num">×{{product.specs_num}}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="total-price">
				总价 <text class="warning">￥{{order.total}}</text>
			</view>
		</view>
		<view class="info">
			<view class="title">订单信息</view>
			<view class="row">
				<view class="label">订单编号</view>
				<view>264545121255151212</view>
			</view>
			<view class="row">
				<view class="label">支付宝交易号</view>
				<view>456451512316545113215645</view>
			</view>
			<view class="row">
				<view class="label">创建时间</view>
				<view>2021-03-14 01:25:01</view>
			</view>
			<view class="row">
				<view class="label">付款时间</view>
				<view>2021-03-14 01:25:01</view>
			</view>
			<view class="row">
				<view class="label">发货时间</view>
				<view>2021-03-15 01:05:01</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 class="footer">
			<view class="option">
				<button v-if="order.status === 0" class="pay-btn" type="default">立即支付</button>
				<button v-if="order.status === 2" class="confirm-btn" type="default">确认收货</button>
			</view>

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

<script>
	export default {
		data() {
			return {
				order: {
					factory: '省心二号工厂',
					products: [{
							name: '【三只松鼠】元宵送礼坚果礼盒1498g',
							image: 'https://img.alicdn.com/i4/880734502/O1CN01tA7hal1j7xjnwHQZC_!!880734502.jpg',
							price: 9.52,
							specs_name: "白色",
							specs_num: 5
						},
						{
							name: '泰国Mistine小黄帽防晒霜',
							image: 'https://img.alicdn.com/i4/2929053804/O1CN01RSromv1dyHBcuS4I6_!!2929053804.jpg',
							price: 9.52,
							specs_name: "白色",
							specs_num: 5
						}
					],
					status: 0,
					total: '58.51'
				}
			}


		},
		methods: {

		}
	}
</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>