H5_module/onlineregistration/detail/detail.vue

 <template>
	<view class="box" v-if="detail">
		<view class="ddinfo">
			<view class="li">
				<text>预约院区</text>
				<view>{{detail.merchantName}}</view>
			</view>
			<block v-for="(item,index) in detail.products" :key="index">
			<view class="li">
				<text>预约科室</text>
				<view>{{item.history.departmentName}}</view>
			</view>
			<view class="li">
				<text>医生姓名</text>
				<view>{{item.history.sysUidName}}</view>
			</view>
			<view class="li" v-if="item.history&&item.history.doctorTitle">
				<text>医生职称</text>
				<view>{{item.history.doctorTitle}}</view>
			</view>
			<view class="li" v-if="item.history&&item.history.diagnosisNo">
				<text>就诊序号</text>
				<view class="register-num">{{item.history.diagnosisNo}}</view>
			</view>
			<view class="li">
				<text>就诊时段</text>
				<view class="textcolor-orange">{{captureTime(item.history.endTime,false)}}  {{getweekday(item.history.startTime)}}<view class="textcolor-orange">{{captureTime(item.history.startTime,true)}}~{{captureTime(item.history.endTime,true)}}</view></view>
			</view>
			</block>
			<view class="li" v-if="detail.money>0">
				<text>预约费</text>
				<view class="textcolor-red">￥{{detail.money}}</view>
			</view>
		</view>
		<view class="ddinfo">
			<view class="li">
				<text>姓名</text>
				<view>{{JSON.parse(detail.params).name}}</view>
			</view>
			<view class="li">
				<text>电话</text>
				<view>{{JSON.parse(detail.params).phone}}</view>
			</view>
		</view>
		<view class="ddinfo" v-if="cancel">
			<view class="li">
				<text>注意事项</text>
			</view>
			<view class="notice">
				<view>就诊当天00:00前可在线退号，已取号请在就诊当天17:00前到医院窗口办理退号退费，逾期将不可办理退号退费。</view>
			</view>
		</view>
		<view class="bot ddflex" v-if="detail.state !== 7">
			<view class="footer-btn-item" @click="cancelOrder()" v-if="detail.state == 4 || detail.state == 1">取消预约</view>
			<view class="footer-btn-item color-gray" v-else>{{detail.state == 8?'已取消':detail.state == 7?'已就诊':detail.stateName}}</view>
			<view class="footer-btn-item color-orange border-orange" @click="payOrder()" v-if="detail.state == 1">立即付款</view>
			<!-- <view class="bottom-btn" @click="cancel()" v-if="detail.state !== 7">取消挂号</view> -->
		</view>
	</view>
</template>

<script> 
	// mine/coupons/coupons.js
	const req = require("../../utils/request.js");
	const api = require("../../utils/api.js");
	const util = require("../../utils/util.js");
	const app = getApp();

	export default {
		data() {
			return {
				id: '',
				detail: '',
				cancel:false
			};
		},

		components: {},
		props: {},
		onLoad(options) {
			this.id = options.id
			this.getDetail();
		},
		onShow: function() {
			let pagearr = getCurrentPages();//获取应用页面栈
			let currentPage = pagearr[pagearr.length - 1];//获取当前页面信息
			if(currentPage.options.cancel){
				uni.setNavigationBarTitle({ title: '取消预约' });
				this.setData({
					cancel:currentPage.options.cancel
				})
			}
		},

		methods: {
			captureTime(time,isTime){
				return util.captureTime(time,isTime)
			},
			getweekday(dateString){
				var dateArray = this.captureTime(dateString,false).split('-');
				let date = new Date(dateArray[0], parseInt(dateArray[1] - 1), dateArray[2]);
				return '星期' + '日一二三四五六'.charAt(date.getDay());
				// var weekArray = new Array("星期日","星期一", "星期二", "星期三", "星期四", "星期五", "星期六")
				// var week  = weekArray[new Date(date).getDay()]
				// return week
			},
			getDetail(){
				req.getRequest(api.rostering_info,{id: this.id},data=>{
					data.products.map(pit=>{
						pit.history = JSON.parse(pit.history);
						return pit;
					})
					this.detail = data;
				})
			},
			jumpUrl(url) {
				uni.navigateTo({
					url: url
				})
			},
			payOrder(){
				req.payOrders(this.detail.id,success=>{
					this.getDetail();
				},'registered')
			},
			cancelOrder(){
				req.msgConfirm('确认取消预约吗',suc=>{
					if(this.detail.state == 1){
						req.postRequest('/api/order/cancel',{id:this.detail.id},data=>{
							req.msg('预约已取消');
							this.getDetail();
						})
					}else{
						req.postRequest(api.orderRefund_whole,{orderId:this.detail.id},data=>{
							req.msg('预约已取消');
							this.getDetail();
						})
					}
				})
			}
		}
	};
</script>

<style>
	@import './detail.css';
</style>