mabao/pages/common_tools/my_consulting/appointmentInfo.vue

<template>
	<view class="main">
		<load-refresh ref="loadRefresh" :isPaging="false" :isRefresh="true" refreshType="loader" refreshTime="2000"
		 heightReduce="10" backgroundCover="#fff" @refresh="refresh">
			<view slot="content-list">
				<view class="list">
					<!-- 头像 -->
					<view class="portrait" v-if="orderInfo.product_type == 3">
						<view style="padding-top: 20rpx;">
							<!-- <image class="img" :src=""></image> -->
							<u-avatar :src="orderInfo.docter.avatar" mode="circle"></u-avatar>
						</view>
					</view>
					<!-- 文字 -->
					<view class="text" :style="orderInfo.product_type == 4||orderInfo.product_type == 5?'width:100%;padding:15rpx':''">
						<!-- 名字+标签 -->
						<view class="name" v-if="orderInfo.product_type == 3">
							<view style="margin-right: 15rpx;">{{orderInfo.docter.name}}</view>
							<view class="label" v-for="(itm,idx) in orderInfo.docter.label_texts" :key="index">{{itm.label_name}}</view>
						</view>
						<view class="name" v-if="orderInfo.product_type == 4||orderInfo.product_type == 5">
							<view style="margin-right: 15rpx;">预约地址：{{orderInfo.organization.address}}</view>
						</view>
						<!-- 科室 -->
						<view class="department" v-if="orderInfo.product_type == 3">
							<text>科室:</text>
							<text style="color: #333333;">{{orderInfo.docter.office.name}}</text>
							<text style="color: #333333;">{{orderInfo.docter.qualification.name}}</text>
						</view>
						<view class="department" v-if="orderInfo.product_type == 4">
							<text>预约疫苗:</text>
							<text style="color: #333333;">{{orderInfo.order_vaccine.vaccine_name}}</text>
						</view>
						<view class="department flex align-center" v-if="orderInfo.product_type == 5">
							<text>预约儿保项目:</text>
							<view class="">
								<view class="" v-for="(ite,idxn) in orderInfo.order_nurse" :key="idxn">
									{{ite.nurse_name}}
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="padding-sm bg-white margin-top-sm">
					<view class="text-lg text-black text-bold">
						订单信息
					</view>
					<view class="text-gray margin-top-xs padding-tb-xs">
						<text class="text-leftstyle">订单号：</text>
						<text class="font_style">{{orderInfo.order_sn}}</text>
					</view>
					<view class="text-gray margin-top-xs padding-tb-xs">
						<text class="text-leftstyle">状态：</text><text v-if="orderInfo.order_status==1" class="font_style" style="color: rgb(238, 170, 63);">未支付</text>
						<text v-else-if="orderInfo.order_status==2" class="font_style" style="color: rgb(238, 170, 63);">待接单</text>
						<text v-else-if="orderInfo.order_status==3" class="font_style" style="color: rgb(238, 170, 63);">进行中</text>
						<text v-else-if="orderInfo.order_status==4" class="font_style" style="color: rgb(238, 170, 63);">已完成</text>
						<text v-else-if="orderInfo.order_status==5" class="font_style" style="color: rgb(238, 170, 63);">已取消</text>
						<text v-else-if="orderInfo.order_status==6" class="font_style" style="color: rgb(238, 170, 63);">已超时</text>
						<text v-else-if="orderInfo.order_status==7" class="font_style" style="color: rgb(238, 170, 63);">已预约</text>
					</view>
					<view class="text-gray margin-top-xs padding-tb-xs">
						<text class="text-leftstyle">下单时间：</text><text class="font_style">{{orderInfo.created_at}}</text>
					</view>
					<view class="text-gray margin-top-xs padding-tb-xs" v-if="orderInfo.end_time!=0">
						<text class="text-leftstyle">结束时间：</text><text class="font_style">{{formatDate(orderInfo.end_time * 1000)}}</text>
					</view>
					<view class="text-gray margin-top-xs padding-tb-xs" v-if="orderInfo.product_type==1">
						<text class="text-leftstyle">咨询时长：</text><text class="font_style">{{orderInfo.consult_duration}}秒</text>
					</view>
					<view class="text-gray margin-top-xs padding-tb-xs">
						<text class="text-leftstyle">咨询患者：</text><text class="font_style">{{orderInfo.order_patient.name}}</text>
					</view>
					<view class="text-gray margin-top-xs padding-tb-xs">
						<text class="text-leftstyle">已付款：</text><text class="font_style">￥{{orderInfo.total_amount/100}}</text>
					</view>
				</view>
				<view class="cu-tabbar-height"></view>
				<view class="cu-tabbar-height"></view>
			</view>
		</load-refresh>
	</view>
</template>

<script>
	export default {
		onLoad(options) {
			this.order_id = options.id
		},
		mounted() {
			this.getordersInfo()
		},
		data() {
			return {
				order_id: "",
				orderInfo: {},
				outtime: ""
			}
		},
		methods: {
			refresh() {
				this.getordersInfo()
			},
			getordersInfo: async function() {
				let res = await this.$request.post("/api/v1/order/orderDetail", {
					order_id: this.order_id
				}, false)
				console.log(res)
				if (res.status == 0) {
					this.orderInfo = res.data
					this.$refs.loadRefresh.loadOver()
					console.log(this.orderInfo)
					// this.outtime = this.formatDate(this.orderInfo.end_time * 1000)
				}
			},
		}
	};
</script>

<style scoped lang="scss">
	.main {
		min-height: 100vh;
	}

	.text-leftstyle {
		text-align: right;
		width: 140rpx;
		display: inline-block;
	}

	.font_style {
		color: rgb(51, 51, 51);
	}

	.footer {
		width: 100%;
		height: auto;
		display: flex;
		position: fixed;
		bottom: 0;
	}

	.round {
		height: 45rpx;
		width: 50rpx;
		border-radius: 50%;
		background-color: #ececec;
	}

	.card {
		padding: 30rpx 30rpx;
		box-sizing: border-box;

		.card_view {
			width: 100%;
			background-color: #ffffff;
			border-radius: 15rpx;

			.title {
				width: 100%;
				height: 20vh;
				display: flex;
				justify-content: center;
				align-items: flex-end;

				.img {
					width: 90%;
					height: 90%;
				}
			}

			.describe {
				width: 100%;
				height: 1;
				padding: 100rpx 40rpx 20rpx 40rpx;
			}
		}
	}

	.list {
		margin: 20rpx 0 10rpx 0;
		padding: 20rpx 0;
		align-items: center;
		display: flex;
		width: 100%;
		border-radius: 15rpx;
		background-color: #FFFFFF;
		box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.08);

		.portrait {
			width: 20%;
			display: flex;
			justify-content: center;
			align-items: center;



			.img {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
			}

			.bun_true {
				text-align: center;
				width: 80rpx;
				height: 36rpx;
				background-color: #D92975;
				margin: 0 10rpx;
				border-radius: 60rpx;
				position: relative;
				top: -20rpx;
				font-size: 20rpx;
				color: #FFFFFF;
				padding: 3rpx 0;
			}

			.bun_false {
				border: 1rpx solid #D92975;
				text-align: center;
				width: 80rpx;
				height: 36rpx;
				background-color: #FFFFFF;
				margin: 0 10rpx;
				border-radius: 60rpx;
				position: relative;
				top: -20rpx;
				font-size: 20rpx;
				color: #D92975;
				padding: 3rpx 0;
			}
		}

		//文字
		.text {
			width: 70%;

			//名字+标签
			.name {
				font-size: 30rpx;
				font-weight: bold;
				display: flex;
				align-items: center;

				.label {
					font-weight: 400;
					margin-right: 15rpx;
					background-color: #E5F5FF;
					color: #0B73B9;
					width: 100rpx;
					height: 28rpx;
					font-size: 20rpx;
					border-radius: 10rpx;
					text-align: center;
				}
			}

			//科室
			.department {
				margin-top: 15rpx;
				color: #666666;

				text {
					margin-right: 15rpx;
				}
			}

			// 选项
			.option {
				display: flex;

				view {
					background-color: #E4E4E4;
					width: 100rpx;
					height: 48rpx;
					border-radius: 12px;
					margin-right: 15rpx;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}
		}
	}
</style>