jili2-ph/pages/order/detail.vue

<template>
	<view v-if="info">
		<view class="order-header">
			<view class="order-header-body">
				<view class="order-header-left">
					<image src="../../images/address.png" mode="aspectFit"></image>
				</view>
				<view class="order-header-main">
					<view>所属科室：{{info.depName}}</view>
					<view>联系人：{{info.contact}}</view>
					<view>联系电话：{{info.phone}}</view>
				</view>
				<view class="order-header-right">
					<span class="status" v-if="info.status == 0">待分配</span>
					<span class="status"  v-if="info.status == 1">进行中</span>
					<span class="status"  v-if="info.status == 2">已完成</span>
					<span class="status"  v-if="info.status == 3">已作废</span>
					<span class="status2" v-if="info.status == 4"><span class="yjs">(已结算)</span></span>
				
				</view>
			</view>
		</view>
		<view class="container">
			<view class="order-box">
				<view class="order-box-title">订单基础信息</view>
				<view class="order-box-list">
					<view class="order-box-list-title">病人姓名</view>
					<view class="order-box-list-val">{{info.name}}</view>
				</view>
				<view class="order-box-list">
					<view class="order-box-list-title">病人性别</view>
					<view class="order-box-list-val">
						<span v-if="info.gender == 1">男</span>
						<span v-if="info.gender == 2">女</span>
					</view>
				</view>
				<view class="order-box-list">
					<view class="order-box-list-title">病人年龄</view>
					<view class="order-box-list-val">{{info.age}}</view>
				</view>
				<view class="order-box-list">
					<view class="order-box-list-title">病人床号</view>
					<view class="order-box-list-val">{{info.bed}}</view>
				</view>
				<view class="order-box-list">
					<view class="order-box-list-title">所患疾病</view>
					<view class="order-box-list-val">{{info.ill}}</view>
				</view>
				<view class="order-box-list">
					<view class="order-box-list-title">服务类型</view>
					<view class="order-box-list-val">{{info.cateName}}</view>
				</view>
				<view class="order-box-list">
					<view class="order-box-list-title">单价(/人/天)</view>
					<view class="order-box-list-val">{{info.price}}</view>
				</view>
				<view class="order-box-list">
					<view class="order-box-list-title">开始时间</view>
					<view class="order-box-list-val">{{info.start}}</view>
				</view>
				<view class="order-box-list">
					<view class="order-box-list-title">结束时间</view>
					<view class="order-box-list-val">{{info.end}}</view>
				</view>
				<view class="order-box-list">
					<view class="order-box-list-title">结束时间</view>
					<view class="order-box-list-val">{{info.end}}</view>
				</view>
				<view class="order-box-list">
					<view class="order-box-list-title">预收金</view>
					<view class="order-box-list-val">{{info.preMoney}}</view>
				</view>
				<view class="order-box-list">
					<view class="order-box-list-title">订单金额</view>
					<view class="order-box-list-val">{{info.amount}}</view>
				</view>
				<view class="order-box-list">
					<view class="order-box-list-title">服务费</view>
					<view class="order-box-list-val">{{info.serviceMoney}}</view>
				</view>
				<view class="order-box-list2">
					<view class="order-box-list-title">备注</view>
					<view class="order-box-list-val">{{info.remark?info.remark:'无'}}</view>
				</view>
			</view>
			<view class="order-box2">
				<view>订单号：{{info.sn}}</view>
				<view>下单日期：{{info.createTime}}</view>
				<view v-if="info.finishTime">完成日期：{{info.finishTime}}</view>
				<view v-if="info.canceTime">作废日期：{{info.canceTime}}</view>
				<view v-if="info.cancelUserName">作废人：{{info.cancelUserName}}</view>
				<view v-if="info.cancelReason">作废原因：{{info.cancelReason}}</view>
			</view>
			
			<view v-if="info.todo.length > 0">
				<view>工单信息</view>
				<view v-for="(item,index) in info.todo" class="order-box2">
					<view>调度：{{item.userName}}</view>
					<view>护工：{{item.workerName}}</view>
					<view>开始时间：{{item.start}}</view>
					<view>结束时间：{{item.end}}</view>
					<view>备注：{{item.remark}}</view>
					<view>状态：
					<span v-if="item.status == 0">已作废</span>
					<span v-if="item.status == 1">服务中</span>
					<span v-if="item.status == 2">已结束</span>
					</view>
					<view>派发日期：{{item.createTime}}</view>
					
				</view>
			</view>
			
			<view v-if="info.pays2.length > 0">
				<view>服务费信息</view>
				<view v-for="(item,index) in info.pays2" class="order-box3">
					<view>金额：￥{{item.money}}</view>
					<view>退款金额：￥{{item.money2}}</view>
					<view>支付方式：
					<span v-if="item.type === 2">线上</span>
					<span v-if="item.type === 1">线下</span>
					</view>
					<view>日期：{{item.payTime}}</view>
				</view>
			</view>
			
			<view v-if="info.pays.length > 0">
				<view>预收金信息</view>
				<view v-for="(item,index) in info.pays" class="order-box3">
					<view>金额：￥{{item.money}}</view>
					<view>退款金额：￥{{item.money2}}</view>
					<view>支付方式：
					<span v-if="item.type === 2">线上</span>
					<span v-if="item.type === 1">线下</span>
					</view>
					<view>日期：{{item.payTime}}</view>
				</view>
			</view>
			

			<view v-if="info.status == 0||info.status == 1" class="btn" @click="finishBtn()">预收金</view>
			<!-- <view v-if="info.status == 1" class="btn btn-success" @click="finishBtn()">完成</view>
			<view v-if="info.status != 3&&info.status != 4" class="btn btn-danger" @click="cancelBtn()">作废</view> -->
		</view>
		
		<cmodal :show.sync="cancelShow" title="作废订单" @confirm="cancelConfirm">
		    <textarea v-model="cancelReason" style="height: 150rpx;" placeholder="请输入作废原因"></textarea>
		</cmodal>
		<cmodal :show.sync="finishShow" title="预收金" @confirm="finishConfirm"  @cancel="cancelFinishConfirm">
			<view class="form-box3">
			  <view class="form-box-label">金额 <text class="text-red">*</text></view>
			  <view class="form-box-content">
			    <input type="number" v-model="amount" placeholder="请填写金额" />
			  </view>
			</view>
		</cmodal>
	</view>
</template>

<script>
	var app = getApp();
	import cpicker from "../../components/cpicker/cpicker.vue";
	import wpicker from "../../components/w-picker/w-picker.vue";
	import cmodal from "../../components/cmodel/cmodel.vue";
	export default {
		components: {
			cpicker,
			wpicker,
			cmodal
		},
		data() {
			return {
				info: null,
				flag: 0,
				id: 0,
				cancelReason: '',
				cancelShow: false,
				end: '',
				finishShow: false,
				endShow: false,
				amount: '',
				wx: null,
			}
		},
		onLoad(option) {
			this.id = option.id;
			let that = this;
			if (this.$wechat && this.$wechat.isWechat()) {//获取定位经纬度
				this.$wechat.getWx(function (res) {
					console.log(res)
					that.wx = res;
				});
			}
		},
		onShow() {
			var that = this;
			app.ajaxReadyCallback = res => {  //各个接口统一回调方法
				var apiname = res.data.apiname;
				console.log(res);
				if(apiname == 'order'){
					that.info = res.data.data;
				}else if(apiname == 'payOrder'){
					that.getPayParam(res.data.data.payId);
				}else if(apiname == 'pay'){
					if(that.wx){
						that.wx.chooseWXPay({
							timestamp: res.data.data.timestamp,
							nonceStr: res.data.data.nonceStr,
							package: res.data.data.package,
							signType: res.data.data.signType,
							paySign: res.data.data.paySign,
							success: function (r) {
								// 支付成功后的回调函数
								if (r.errMsg == "chooseWXPay:ok") {
									window.location.reload();
								} else {
									uni.showToast({
										title: '支付失败',
										icon: 'none',
										duration: 2000
									})
								}
							},
							cancel: function(r) {},
							fail:function(r){
								uni.showToast({
									title: '支付失败',
									icon: 'none',
									duration: 2000
								})
							}
						});
					}else{
						uni.showToast({
							title: '支付调用失败，请刷新重试',
							icon: 'none',
							duration: 2000
						})
					}
				}
			}
			
			this.getOrderDetail();
		},
		methods: {
			getOrderDetail(){
				app.ajax({
					url: app.globalData.serverUrl + 'PhOrders/detail',
					type: 'POST',
					apiname: 'order',
					data:{
						id: this.id
					}
				});
			},
			sendOrder(id){
				uni.navigateTo({
				    url: '/pages/order/send?orderId='+id
				});
			},
			cancelBtn(){
				this.cancelShow = true;
				console.log(orderId,this.cancelShow);
			},
			cancelConfirm(){
				app.ajax({
					url: app.globalData.serverUrl + 'Order/cancel',
					type: 'POST',
					apiname: 'cancel',
					data: {
						cancelReason: this.cancelReason,
						id: this.id
					}
				});
			},
			selectEnd(){
				this.endShow = true;
			},
			onConfirm(e,type){
				this.end = e.result;
			},
			finishBtn(){
				this.finishShow = true;
				this.endShow = false;
				this.amount = '';
			},
			finishConfirm(){
				if(!this.amount || this.amount <= 0){
					uni.showToast({
						title: '未输入金额',
						icon: 'none',
						duration: 2000
					})
					return;
				}
				app.ajax({
					url: app.globalData.serverUrl + 'PhOrders/payOrder',
					type: 'POST',
					apiname: 'payOrder',
					data: {
						orderId: this.id,
						money: this.amount
					}
				});
			},
			
			getPayParam(payId){
				app.ajax({
					url: app.globalData.serverUrl + 'PhOrders/pay',
					type: 'POST',
					apiname: 'pay',
					data: {
						payId: payId
					}
				});
			},
			
			cancelFinishConfirm(){
				this.end = '';
			},
			getUrlCode (name) {
				return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [, ''])[1].replace(/\+/g, '%20')) || null
			},
		}
	}
</script>

<style lang="scss" scoped>
	page{
		overflow-x: hidden;
	}
	.container{
		overflow: hidden;
	}
	.btn{
		// width: 100%;
		height: 90rpx;
		line-height: 90rpx;
		text-align: center;
		font-size: 34rpx;
		font-weight: bold;
		border-radius: 10rpx;
		background-color: #FFFFFF;
		color: var(--themeColor);
		// margin: 10rpx;
	}
	.btn.btn-success{
		background-color: #5cb85c;
		color: #FFFFFF;
	}
	.btn.btn-danger{
		background-color: #FF7576;
		color: #FFFFFF;
	}
	.order-box2{
		width: 670rpx;
		height: auto;
		border-radius: 10rpx;
		background-color: #FFFFFF;
		overflow: hidden;
		padding: 30rpx 20rpx;
		margin: 20rpx 0;
		color: #666666;
		font-size: 28rpx;
	}
	.order-box{
		width: 100%;
		height: auto;
		border-radius: 10rpx;
		background-color: #FFFFFF;
		overflow: hidden;
	}
	.order-box-title{
		position: relative;
		width: 680rpx;
		height: 90rpx;
		line-height: 90rpx;
		padding-left: 30rpx;
		color: #333333;
		font-size: 34rpx;
		font-weight: bold;
	}
	.order-box-title::before{
		content: '';
		width: 5rpx;
		height: 28rpx;
		position: absolute;
		left: 16rpx;
		top: 32rpx;
		background-color: var(--themeColor);
	}
	.order-box-list{
		width: 670rpx;
		min-height: 90rpx;
		height: auto;
		padding: 0 20rpx;
		overflow: hidden;
	}
	.order-box-list .order-box-list-title{
		width: 270rpx;
		height: 90rpx;
		line-height: 90rpx;
		float: left;
		color: #333333;
		font-size: 34rpx;
		font-weight: bold;
	}
	.order-box-list .order-box-list-val{
		width: 380rpx;
		min-height: 62rpx;
		float: right;
		color: #333333;
		font-size: 30rpx;
		font-weight: bold;
		padding-top: 28rpx;
		text-align: right;
	}
	.order-box-list2{
		width: 670rpx;
		min-height: 90rpx;
		height: auto;
		padding: 0 20rpx;
		overflow: hidden;
	}
	.order-box-list2 .order-box-list-title{
		width: 100%;
		height: 90rpx;
		line-height: 90rpx;
		color: #333333;
		font-size: 34rpx;
		font-weight: bold;
	}
	.order-box-list2 .order-box-list-val{
		width: 630rpx;
		min-height: 50rpx;
		height: auto;
		color: #333333;
		font-size: 30rpx;
		font-weight: bold;
		background-color: #F7F7F7;
		border-radius: 10rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;
	}
	
	.order-header{
		background-color: var(--themeColor);
		width: 100%;
		height: auto;
		padding: 20rpx;
	}
	.order-header .order-header-body{
		width: 650rpx;
		height: 124rpx;
		padding: 30rpx;
		background-color: #FFFFFF;
		border-radius: 10rpx;
	}
	.order-header-left{
		width: 100rpx;
		height: 124rpx;
		float: left;
	}
	.order-header-left image{
		width: 70rpx;
		height: 70rpx;
		margin-top: 30rpx;
	}
	.order-header-main{
		width: 400rpx;
		height: 124rpx;
		float: left;
		color: #333333;
		font-size: 26rpx;
	}
	.order-header-main view{
		padding: 5rpx 0;
	}
	.order-header-right{
		width: 150rpx;
		height: 124rpx;
		// line-height: 124rpx;
		float: right;
		color: var(--themeColor);
		font-size: 34rpx;
		text-align: right;
		// overflow: hidden;
	}
	.order-header-right .status{
		display: inline-block;
		margin-top: 35rpx;
	}
	.order-header-right .status2{
		display: inline-block;
		margin-top: 15rpx;
	}

	.order-header-right .yjs{
		display: inline-block;
		margin-top: 5rpx;
		text-align: right;
		font-size: 29rpx;
	}
	
	.order-box3{
		width: 670rpx;
		height: auto;
		border-radius: 10rpx;
		background-color: #FFFFFF;
		overflow: hidden;
		padding: 30rpx 20rpx;
		margin: 20rpx 0;
		color: #666666;
		font-size: 28rpx;
		border-left: 5px solid var(--themeColor);
	}
</style>