H5_module/onlineregistration/registrationlist/registrationlist.vue

<template>
	<view class="box">
		<view class="tab bgfff dflex">
			<view :class="'li ' + (currentTab == 0 ? 'active' : '')" @tap="tab(0)">全部</view>
			<view :class="'li ' + (currentTab == 1 ? 'active' : '')" @tap="tab(1)">待预约</view>
			<view :class="'li ' + (currentTab == 4 ? 'active' : '')" @tap="tab(4)">待就诊</view>
			<view :class="'li ' + (currentTab == 7 ? 'active' : '')" @tap="tab(7)">已就诊</view>
		</view>
		<view v-if="pageList&&pageList.length>0">
			<view class="box-item" v-for="(item,index) in pageList" :key="index">
				<view v-for="(it,idx) in item.products" :key="idx" @tap="jumpUrl('/onlineregistration/detail/detail?id=' + item.id)">
					<view class="box-item-title">
						<text>{{item.merchantName}}</text>
						<view class="color-gray" v-if="it.history&&it.history.diagnosisNo">就诊序号 <text class="register-num">{{it.history.diagnosisNo}}</text></view>
					</view>
					<view class="box-item-contentbox">
						<view class="doctor-header">
							<image :src="it.history.headUrl?it.history.headUrl:'../static/onlineregistration/image/doctorPic.png'" mode="aspectFill"></image>
						</view>
						<view>
							<view class="box-item-content">
								<view class="box-item-content-item">
									<view class="item-name">预约医生</view>
									<view class="item-text">{{it.history.sysUidName}}</view>
								</view>
							</view>
							<view class="box-item-content">
								<view class="box-item-content-item">
									<view class="item-name">预约科室</view>
									<view class="item-text">{{it.history.departmentName}}</view>
								</view>
							</view>
							<view class="box-item-content">
								<view class="box-item-content-item">
									<view class="item-name">就诊时间段</view>
									<view class="item-text color-orange">{{captureTime(it.history.endTime,false)}} {{captureTime(it.history.startTime,true)}}~{{captureTime(it.history.endTime,true)}}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="pay-info" v-if="item.money>0">
					<text><!-- 共1个挂号    -->预约费</text>
					<text class="color-orange">￥{{item.money}}</text>
				</view>
				<view class="box-item-footer">
					<view class="footer-status">
						{{item.state==4?'待就诊':item.state==8?'已取消':item.state==7?'已就诊':item.stateName}}
					</view>
					<view class="footer-btn">
						<!-- <view class="footer-btn-item">查看详情</view> -->
						<view class="footer-btn-item" v-if="item.state==1||item.state==4" @click="cancelOrder(item,index)">取消预约</view>
						<view class="footer-btn-item color-orange border-orange" @click="payOrder(item.id)" v-if="item.state==1">立即预约</view>
					</view>
				</view>
			</view>
		</view>
		<view class="nodata" v-if="ishow">
			<image :src="picUrlss+'empty_dd.png'"></image>
			<text>还没有预约哦</text>
		</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 {
				picUrlss: req.public.picUrls,
				currentTab:0,
				form: {
					page: 1,
					limit: 10
				},
				pageList: [],
				isLoad: true,
				ishow: false
			};
		},

		components: {},
		props: {},
		onLoad() {
			this.getList()
		},
		onShow: function() {
		},

		methods: {
			captureTime(time,isTime){
				return util.captureTime(time,isTime)
			},
			tab(index) {
				let that = this;
				if (that.currentTab === index) return false;
				that.currentTab = index
				this.isLoad = true
				this.form.page = 1
				this.getList()
			},
			getList(){
				if(!this.isLoad) return false;
				this.isLoad = false;
				let form = this.form
				form.orderType = '47'
				if(this.currentTab > 0){
					form.state = this.currentTab
				}else delete form.state
				req.getRequest('/api/order/list',form,data=>{
					if(data&&data.length>0){
						data.map(it=>{
							it.products.map(pit=>{
								pit.history = JSON.parse(pit.history);
							})
							return it;
						})
					}
					if(data&&data.length == this.form.limit) this.isLoad = true
					if(this.form.page > 1) data = this.pageList.concat(data);
					if (data.length == 0) this.ishow = true
					else this.ishow = false
					this.pageList = data;
				})
			},
			payOrder(id){
				req.payOrders(id,success=>{
					uni.navigateTo({
						url: '/onlineregistration/detail/detail?id='+id
					})
				},'registered')
			},
			cancelOrder(item,index){
				let that = this;
				req.msgConfirm('确认取消预约吗',suc=>{
					if(item.state == 1){
						req.postRequest('/api/order/cancel',{id:item.id},data=>{
							req.msg('预约已取消');
							that.pageList[index].state = 8
							that.pageList[index].stateName = '已取消'
						})
					}else{
						req.postRequest(api.orderRefund_whole,{orderId:item.id},data=>{
							req.msg('预约已取消');
							that.pageList[index].state = 30
							that.pageList[index].stateName = '售后待审核'
						})
					}
				})
			},
			jumpUrl(url) {
				uni.navigateTo({
					url: url
				})
			},
		}
	};
</script>

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