mabaoDoctor/pages/menzhen/menzhen.vue

<template style="background-color: #b8b8b8;">
	<view style="width: 100%;height: 100%;">
		<view class="topmenu">
			<u-dropdown>
				<u-dropdown-item v-model="value1" :title="options1[value1].label" :options="options1" @change="close1"></u-dropdown-item>
				<u-dropdown-item v-model="value2" :title="options2[value2].label" :options="options2" @change="close2"></u-dropdown-item>
			</u-dropdown>
		</view>
		
		<!-- 上面的下拉菜单中 -->
		<!-- value2状态  0为处理中 1为历史记录-->
		<view v-for="item,index in list" :key='index' :data-index="index" @click="xiangqing">
			<view class="list_view">
				<!-- 状态 0待履行 1已完成 -->
				<view class="flex align-center" style="margin-bottom: 30rpx;">
					 
					<view style="width: 70%;" v-if="item.zt == 1" class="flex align-center">
						<view style="width: 12rpx;height: 12rpx;border-radius: 50rpx;background-color: #ff9294;margin-right: 20rpx;"></view>
						<view style="color: #ff9294;font-size: 30rpx;font-weight:bold ;">未支付</view>
					</view>
					<view style="width: 70%;" v-if="item.zt == 2" class="flex align-center">
						<view style="width: 12rpx;height: 12rpx;border-radius: 50rpx;background-color: #ff9294;margin-right: 20rpx;"></view>
						<view style="color: #ff9294;font-size: 30rpx;font-weight:bold ;">待接单</view>
					</view>
					<view style="width: 70%;" v-if="item.zt == 3" class="flex align-center">
						<view style="width: 12rpx;height: 12rpx;border-radius: 50rpx;background-color: #ff9294;margin-right: 20rpx;"></view>
						<view style="color: #ff9294;font-size: 30rpx;font-weight:bold ;">进行中</view>
					</view>
					<view style="width: 70%;" v-if="item.zt == 4" class="flex align-center">
						<view style="width: 12rpx;height: 12rpx;border-radius: 50rpx;background-color: #ff9294;margin-right: 20rpx;"></view>
						<view style="color: #ff9294;font-size: 30rpx;font-weight:bold ;">已完成</view>
					</view>
					<view style="width: 70%;" v-if="item.zt == 5" class="flex align-center">
						<view style="width: 12rpx;height: 12rpx;border-radius: 50rpx;background-color: #ff9294;margin-right: 20rpx;"></view>
						<view style="color: #ff9294;font-size: 30rpx;font-weight:bold ;">已取消</view>
					</view>
					<view style="width: 70%;" v-if="item.zt == 6" class="flex align-center">
						<view style="width: 12rpx;height: 12rpx;border-radius: 50rpx;background-color: #ff9294;margin-right: 20rpx;"></view>
						<view style="color: #ff9294;font-size: 30rpx;font-weight:bold ;">已超时</view>
					</view>
					<view style="width: 70%;" v-if="item.zt == 7" class="flex align-center">
						<view style="width: 12rpx;height: 12rpx;border-radius: 50rpx;background-color: #ff9294;margin-right: 20rpx;"></view>
						<view style="color: #ff9294;font-size: 30rpx;font-weight:bold ;">已预约</view>
					</view>
				 
					<view style="width: 30%;" class="flex align-center">
						<view style="font-size: 28rpx;padding: 8rpx 24rpx;border-radius: 20rpx;background-color: #F6F6F6;">门诊预约</view>
					</view>
				</view>
				<!-- 线 -->
				<u-line color="#ebebeb" />
				<!-- 资料 -->
				<view class="">
					<view class="nr">
						<view class="left">患者:</view>
						<view class="right">{{item.name}}</view>
					</view>
					<view class="nr">
						<view class="left">年龄:</view>
						<view class="right">{{item.birthday}}</view>
					</view>
					<view class="nr">
						<view class="left">订单号:</view>
						<view class="right">{{item.order_sn}}</view>
					</view>
					<view class="nr">
						<view class="left">下单时间:</view>
						<view class="right">{{item.created_at}}</view>
					</view>
					<view class="nr">
						<view class="left">预约时间:</view>
						<view class="right">{{item.appoint_time}}</view>
					</view>
				</view>
			</view>
		</view>
	<view style="width: 100%;height: 100rpx;"></view>
	<u-empty text="暂无数据"  mode="order" margin-top="250" v-if="list.length<=0"></u-empty>
	</view>
</template>

<script>
	export default {
		// onLoad(e) {
		// 	this.getLists(this.num,this.value1,this.value2)
		// },
		onShow(e){
			this.getLists(this.num,this.value1,this.value2)
			
		},
		data() {
			return {
				//暂无数据
				show:false,
				value1: 0,
				value2: 0,
				options1: [{
						label: '预约时间正序',
						value: 0,
					},
					{
						label: '预约时间倒序',
						value: 1,
					},
					{
						label: '下单时间正序',
						value: 2,
					},
					{
						label: '下单时间倒序',
						value: 3,
					}
				],
				options2: [{
						label: '未完成',
						value: 0,
					},
					{
						label: '已完成',
						value: 1,
					},
				],
				list: [],
				num:1
			}
		},
		methods: {
			
				getLists: async function(curPage,timeSort,comStatus) {
						//备注：curPage当前页，pageSize一页显示多少条，appointment 固定值为1
						// timeSort：排序条件（不填写为默认排序，0=预约时间正序，1=预约时间倒叙，2=下单时间正序，3=下单时间倒叙），comStatus完成状态（不填写为全部类型，0=已完成，1=未完成）
						// 根据备注去操作接口
					let res = await this.$request.post('patient/orderPatientList', {
						'curPage': curPage,
						'pageSize': 5,
						'appointment':1,
						'timeSort':timeSort,
						'comStatus':comStatus
					})
					// 如果要加载第二页
					if(curPage!=1){
						console.log('页数curPage',curPage)
						console.log('类型typeAll',timeSort)
						console.log('状态processing',comStatus)
						let data = res.data;
						this.list= this.list.concat(data)
						// Array.prototype.push.apply(this.list, data);
						console.log('list',this.list)
					}else{
						console.log('c',curPage)
						console.log('t',timeSort)
						console.log('p',comStatus)
						let data = res.data;
						this.list = data
						console.log(this.list)
					}
				},
			close1(e) {
				this.value1 = e
				//重新选择就清空
				this.list = []
				this.num= 1
				//调用接口 页数 类型 状态
				this.getLists(this.num,this.value1,this.value2)
			},
			close2(e) {
				this.value2 = e
				//重新选择就清空
				this.list = []
				this.num= 1
				//调用接口 页数 类型 状态
				this.getLists(this.num,this.value1,this.value2)
			},
			// 详情
			xiangqing(e) {
				console.log(this.list[e.currentTarget.dataset.index])
				uni.navigateTo({
					url: 'menzhenxq?data=' + this.list[e.currentTarget.dataset.index].id
				})
			}
		},
		//页面到底监听
		onReachBottom() {
			this.num++
			console.log('到底', this.num);
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
			this.getLists(this.num,this.value1,this.value2)
		}
	}
</script>

<style lang="scss">
	.topmenu {
		// position: fixed;
		// top: 0;
		// left: 0;
		width: 100%;
		height: 100rpx;

		background-color: #FFFFFF;
		z-index: 1;
	}

	.list_view {
		margin: 20rpx 28rpx 10rpx 28rpx;
		background-color: #FFFFFF;
		border-radius: 12rpx;
		box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.04);
		padding: 28rpx;
	}

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

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

		.right {
			width: 75%;
			font-weight: 400;
		}
	}
</style>