mabao/pages/common_tools/my_consulting/consultingInfo.vue

<template>
	<view class="main">
		<view class="list">
			<!-- 头像 -->
			<view class="portrait">
				<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">
				<!-- 名字+标签 -->
				<view class="name">
					<view style="margin-right: 15rpx;">{{orderInfo.docter.name}}</view>
					<view class="label" v-for="(itm,idx) in orderInfo.docter.label" :key="index">{{itm}}</view>
				</view>
				<!-- 科室 -->
				<view class="department">
					<text>科室:</text>
					<text style="color: #333333;">{{orderInfo.docter.office.name}}</text>
					<text style="color: #333333;">{{orderInfo.docter.qualification.name}}</text>
				</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>
			</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">
				<text class="text-leftstyle">结束时间：</text><text class="font_style">{{orderInfo.order_patient.appoint_end_time}}</text>
			</view>
			<view class="text-gray margin-top-xs padding-tb-xs">
				<text class="text-leftstyle">咨询时长：</text><text class="font_style"></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 class="cu-bar bg-white tabbar" v-if="orderInfo.order_status==4&&orderInfo.product_type==2" style="position: fixed;bottom: 0;width: 100%;display: flex;justify-content: flex-end;height: 108rpx;">
			<u-button shape="circle" :custom-style="customStyle" @click="gotoIm" :ripple="true">咨询会话</u-button>
			<u-button shape="circle" :custom-style="customStyle" :ripple="true">评价</u-button>
			<u-button shape="circle" :custom-style="customStylebtn" :ripple="true">意见单</u-button>
		</view>
		<view class="cu-bar bg-white tabbar" v-else-if="orderInfo.order_status==3" style="position: fixed;bottom: 0;width: 100%;">
			<view class="submit" style="background-color: #0B73B9;color: white;" @click="gotochat">
				{{orderInfo.product_type==1?'回拨':'咨询会话'}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		onLoad(options) {
			this.order_id = options.id
		},
		mounted() {
			this.getordersInfo()
		},
		data() {
			return {
				order_id: "",
				orderInfo: {},
				customStyle: {
					marginRight: '20rpx'
				},
				customStylebtn: {
					marginRight: '20rpx',
					color: "#0B73B9",
					borderColor: "#0B73B9"
				}
			}
		},
		methods: {
			getordersInfo: async function() {
				let res = await this.$request.post("/api/v1/order/orderDetail", {
					order_id: this.order_id
				})
				console.log(res)
				if (res.status == 0) {
					this.orderInfo = res.data
					console.log(this.orderInfo)
				}
			},
			gotochat() {
				if (orderInfo.product_type == 1) {

				} else if (orderInfo.product_type == 2) {
					uni.navigateTo({
						url: "conversation?doctor=" + JSON.stringify(this.orderInfo.docter)
					})
				}
			}
		}
	};
</script>

<style scoped lang="scss">
	.main {}

	.text-leftstyle {
		text-align: right;
		width: 138rpx;
		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>