diagnosis_app/views/patientItems/order/index.vue

<template>
	<view class="content">
		<view class="banner">
			<image src="../../../static/images/order/banner.jpg" class="banner-img"></image>
		</view>
		<view class="drugstore">
			<view class="item name">
				<image class="icon" src="../../../static/images/order/drugstore.png" mode="widthFix"></image>
				<view class="info">{{drugstore.name}}</view>
			</view>
			<view class="item phone">
				<image class="icon" src="../../../static/images/order/phone.png" mode="widthFix"></image>
				<view class="info">{{drugstore.phone}}</view>
			</view>
			<view class="item address">
				<image class="icon" src="../../../static/images/order/location.png" mode="widthFix"></image>
				<view class="info">{{drugstore.address}}</view>
			</view>				
		</view>
		<view class="order-container">
			<view class="item medicine">
				<view class="title">购药信息</view>
				<view class="cont">
					<view class="row">
						<text class="name">购药人员</text>
						<text class="info">{{medicine.name}}</text>					
					</view>
					<view class="row">
						<text class="name">购药人电话</text>
						<text class="info phone">{{medicine.phone}}</text>					
					</view>	
					<view class="row">
						<text class="name">购药时间</text>
						<text class="info">{{medicine.time}}</text>					
					</view>								
				</view>	
			</view>
			<view class="item distribution">
				<view class="title">配送信息</view>
				<view class="cont">
					<view class="row">
						<text class="name">外送人员</text>
						<text class="info">{{distribution.name}}</text>					
					</view>
					<view class="row">
						<text class="name">外送人员电话</text>
						<text class="info phone">{{distribution.phone}}</text>					
					</view>	
					<view class="row">
						<text class="name">送药时间</text>
						<text class="info">{{distribution.startTime}}</text>					
					</view>		
					<view class="row">
						<text class="name">预计送达时间</text>
						<text class="info">{{distribution.arriveTime}}</text>					
					</view>											
				</view>	
			</view>	
			<view class="logistics">
				<view class="title">物流信息</view>
				<view class="cont">
					<view class="row-item" v-for="(item,index) in logistics" :key="index">
						<p class="status">{{item.status}}</p>
						<p class="time">{{item.time}}</p>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return {
				drugstore:{
					name:"",
					phone:"",
					address:""
				},
				medicine:{
					name:"",
					phone:"",
					time:""
				},
				distribution:{
					name:"",
					phone:"",
					startTime:"",
					arriveTime:""
				},
				logistics:[]
			}
		},
		created() {
			this.init();
		},
		methods:{
			init(){
				this.drugstore={
					name:"老百姓大药房(科技路店)  分店",
					phone:"13534323334",
					address:"科技路1号紫薇龙腾大厦"				
				}
				this.medicine={
					name:"王二狗",
					phone:"7777777",
					time:"2021-12-35 04:06:05"
				}
				this.distribution={
					name:"张楚岚",
					phone:"999999999",
					startTime:"2021-12-36 04:06:05",
					arriveTime:"2021-12-36 14:06:05"
				}
				this.logistics=[
					{status:"配送中",time:"2021-12-36 06:06:05"},
					{status:"您的订单在药房分拣完成",time:"2021-12-36 05:06:05"},
					{status:"打包完成",time:"2021-12-36 04:12:05"},
					{status:"扫描完成",time:"2021-12-36 04:09:05"},	
					{status:"已下单",time:"2021-12-36 04:06:05"},								
				]			
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		padding:24upx;
		.banner{
			padding-bottom: 24upx;
			.banner-img{
				display: block;
				width: 701upx;
				height: 380upx;
				margin: 0 auto;
			}
		}
		.drugstore{
			padding: 20upx;
			.item{
				display: flex;
				justify-content: flex-start;
				align-items: center;
				padding-top: 20upx;
				.icon{
					width: 30upx;
					display: block;
				}
				.info{
					font-size: 30upx;
					color: #0A0A0A;	
					padding-left: 20upx;
				}
			}
		}
		.order-container{
			.item{
				padding-left: 24upx;
				.title{
					height: 72upx;
					line-height: 72upx;
					font-size: 30upx;
					color: #0A0A0A;				
				}	
				.row{
					color: #999;
					font-size: 24upx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					height: 20upx;
					padding-bottom: 20upx;
					.info{
						color: #0A0A0A;
						&.phone{
							color: #1890FF;
						}					
					}
				}
			}
			.logistics{
				padding-left: 24upx;
				.title{
					height: 72upx;
					line-height: 72upx;
					font-size: 30upx;
					color: #0A0A0A;				
				}
				.cont{
					&{
					  color: #999;
					  font-size: 24upx;
					  padding-top: 24upx;
					}
					.row-item{
						padding-left: 50upx;
						padding-bottom: 32upx;
						position: relative;
						&::after{
							display: block;
							width: 15upx;
							height: 15upx;
							content: "";
							border-radius: 50%;
							background-color: #1890FF;
							position: absolute;
							left: 0;
							top: 10upx;
						}
						.status{
							line-height: 33upx;
						}
						.time{
							line-height: 30upx;
							padding-top: 8upx;
						}
					}
				}
			}
		}
	}
</style>