mabaoDoctor/pages/menzhen/menzhenxq.vue

<template>
	<view style="width: 100%;height: 100%;background-color: #F6F6F6;">
		<u-gap height="30" bg-color="#f6f6f6"></u-gap>
		<view style="padding: 20rpx 28rpx;background-color: #FFFFFF;">
			<!-- 头部 -->
			<view class="flex align-center" style="font-weight: bold;font-size: 30rpx;margin:30rpx 0;">
				<view style="width: 25%;">订单号:</view>
				<view style="width: 50%;">{{orderID}}</view>
				<view style="width: 25%;" class="flex justify-center">
					<view class="but">门诊预约</view>
				</view>
			</view>
			<!-- 线 -->
			<u-line color="#EFEFEF" />
			<!-- 中部内容 -->
			<view style="font-size: 26rpx;background-color: #FFFFFF;">
				<view class="nr">
					<view class="left">患者:</view>
					<view class="right">{{name}}</view>
				</view>
				<view class="nr">
					<view class="left">年龄:</view>
					<view class="right">{{age}}</view>
				</view>
				<view class="nr">
					<view class="left">身份证号:</view>
					<view class="right">{{ID}}</view>
				</view>
				<view class="nr">
					<view class="left">预约时间:</view>
					<view class="right">{{appointment}}</view>
				</view>
				<view class="nr">
					<view class="left">门诊机构:</view>
					<view class="right">{{local}}</view>
				</view>
			</view>
		</view>

		<u-gap height="30" bg-color="#f6f6f6"></u-gap>
		<!-- 客户资料 -->
		<view class="" style="background-color: #FFFFFF;padding: 10rpx 28rpx;">
			<view class="nr">
				<view class="left">下单时间:</view>
				<view class="right">{{placeTime}}</view>
			</view>
			<view class="nr">
				<view class="left">下单客户:</view>
				<view class="right">{{xiadankh}}</view>
			</view>
			<view class="nr">
				<view class="left">订单状态:</view>
				<view class="right" v-if="zt==1">未支付</view>
				<view class="right" v-else-if="zt==2">待接单</view>
				<view class="right" v-else-if="zt==3">进行中</view>
				<view class="right" v-else-if="zt==4">已完成</view>
				<view class="right" v-else-if="zt==5">已取消</view>
				<view class="right" v-else-if="zt==6">已超时</view>
				<view class="right" v-else-if="zt==7">已预约</view>
			</view>
		</view>
		<u-gap height="30" bg-color="#f6f6f6"></u-gap>
		<!-- 底部按钮 -->
		<!-- 当订单状态为未接单  zt==0 -->
		<view class="bottomButton" v-if="zt == 2">
			<!-- 左边的首页按钮 -->
			<view style="width: 20%;" class="flex align-center justify-center">
				<u-icon name="home" size="50" @click="home"></u-icon>
			</view>
			<!-- 右边的其他按钮 -->
			<view style="width: 80%;" class="flex justify-end align-center">
				<view class="b">
					<u-button shape="circle" :custom-style="btStyle" @click="queren">确认接单</u-button>
				</view>
			</view>
		</view>
		<!-- 当订单状态为  zt==1 -->
		<view class="bottomButton" v-else-if="zt == 3">
			<!-- 左边的首页按钮 -->
			<view style="width: 20%;" class="flex align-center justify-center">
				<u-icon name="home" size="50" @click="home"></u-icon>
			</view>
			<!-- 右边的其他按钮 -->
			<view style="width: 80%;" class="flex justify-end align-center">
				<view class="b">
					<u-button shape="circle" :custom-style="btStyle" @click="querenok">确认完成</u-button>
				</view>
			</view>
		</view>
		<view class="bottomButton" v-else-if="zt > 3&&zt!=7">
			<!-- 左边的首页按钮 -->
			<view style="width: 20%;" class="flex align-center justify-center">
				<u-icon name="home" size="50" @click="home"></u-icon>
			</view>
			<!-- 右边的其他按钮 -->
			<view style="width: 80%;" class="flex justify-end align-center">
				<view class="b">
					<u-button shape="circle" :custom-style="btStyle" :disabled="true">已完成</u-button>
				</view>
			</view>
		</view>


	</view>
</template>

<script>
	export default {
		onLoad(options) {
			let ids = options.data;
			if (ids != '' && ids != 0) {
				this.xhrId = ids;
				// 执行渲染
				this.getInfos(ids);

			} else {
				uni.showToast({
					title: '请求错误',
					icon: 'none'
				})
			}
			console.log('详情：', options);
		},
		mounted() {

		},
		data() {
			return {
				xhrId: 0,
				// 上部数据
				orderID: 'ZX202000010', //订单号

				//中部数据
				name: '', //名字
				age: '', //年龄
				ID: '', //身份证
				appointment: '',
				//下部数据
				placeTime: '', //下单时间
				xiadankh: '', //下单客户
				zt: 0, // 状态 0未履行 1已完成
				local: '',

				//下部按钮样式
				bStyle: {
					width: '100%',
					height: '100%',
					fontSize: '28rpx',
				},
				btStyle: {
					width: '100%',
					height: '100%',
					fontSize: '28rpx',
					color: '#0B73B9',
					backgroundColor: '#FFFFFF'
				}
			}
		},
		methods: {

			/**
			 * 详情渲染
			 * @author Liu Yuanhang
			 * @param {Object} id
			 */
			getInfos: async function(id) {
				// 获取信息
				let res = await this.$request.post("patient/orderPatientDetail", {
					patient_id: id
				});
				if (res.status == 0) {
					let datas = res.data;
					this.orderID = datas.order_sn;
					this.name = datas.name;
					this.age = datas.numbirthday;
					this.ID = datas.card_number;
					this.appointment = datas.appoint_time;
					this.placeTime = datas.created_at;
					this.xiadankh = datas.nickname;
					this.zt = datas.order_status;
					this.local = datas.organization;

				} else {
					uni.showToast({
						title: res.message,
						duration: 3000
					})
					return false;
				}

			},

			/**
			 * 接单
			 * @author Liu Yuanhang
			 * @param {Object} e
			 */
			queren: async function(e) {
				this.zt = 3;
				let res = await this.$request.post("patient/putOrderPatient", {
					order_id: this.xhrId
				});
				console.log('接单：', res);
				if (res.status == 0) {
					uni.showToast({
						title: "接单成功！",
						duration: 3000
					})
				} else {
					uni.showToast({
						title: res.message,
						duration: 3000
					})
				}
			},

			/**
			 * 门诊预约完成订单
			 * @author Liu Yuanhang
			 */
			querenok: async function() {
				this.zt = 4;
				let res = await this.$request.post("patient/mzPatientok", {
					order_id: this.xhrId
				});
				console.log('完成接单：', res);
				if (res.status == 0) {
					uni.showToast({
						title: "操作成功！",
						duration: 3000
					})
				} else {
					uni.showToast({
						title: res.message,
						duration: 3000
					})
				}
				console.log('确认订单完成')
			},
			home(e) {
				uni.switchTab({
					url: '/pages/index/index'
				})
			}
		}
	};
</script>

<style lang="scss">
	page {
		background-color: #f6f6f6;
	}

	.but {
		padding: 16rpx 30rpx;
		border-radius: 20rpx;
		background-color: #eaeaea;
		height: 50rpx;
		color: b1b1b1;
		display: flex;
		justify-content: center;
		align-items: center;
		font-weight: 400;
		font-size: 28rpx;
	}

	.nr {
		margin: 28rpx 0;
		display: flex;

		.left {
			width: 25%;
			color: #666666;
		}

		.right {
			width: 75%;
		}
	}

	.bottomButton {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100rpx;
		display: flex;
		background-color: #FFFFFF;
		z-index: 1;

		.b {
			/*按钮样式*/
			margin-right: 30rpx;
			padding: 20rpx 0rpx;
			height: 100%;
			width: 150rpx;
		}
	}
</style>