xukou-ticket-wx/package_sub/order/order.vue

<template>
	<view class="container">
		<view class="select">
			<view class="select-keyword">
				<u-input v-model="select.keyword" placeholder="关键词"></u-input>
			</view>
			<view class="select-select">
				<u-input v-model="select.statusName" @click="isShowStatus = true" type="select"
					placeholder="状态"></u-input>
			</view>
			<view class="select-btn" @click="search">
				<view>搜索</view>
			</view>

		</view>

		<view class="order">
			<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom">
				<view v-if="list.length>0">
					<view class="order-item" @click="toUrl(item.id)" v-for="item in list">
						<view class="order-item-status">
							{{item.type===1?'陪诊服务':'居家照护'}}
						</view>
						<view class="order-item-info">
							<view>
								<text>编号：</text><text>{{item.no}}</text>
							</view>
							<view>
								<text>就诊时间：</text><text>{{item.time}}</text>
							</view>
							<view>
								<text>联系人：</text><text>{{item.appoint_name}}</text>
							</view>
							<view class="flex-center" @click.stop="callTel(item.appoint_mobile)">
								<view>
									<text>联系人电话：</text><text>{{item.appoint_mobile}}</text>
								</view>
								<view style="margin-left:10rpx">
									<u-icon name="phone-fill" color="#d61b24"></u-icon>
								</view>
							</view>
							<view>
								<text>医院：</text><text>{{item.hospital?item.hospital.name:''}}</text>
							</view>
						</view>
						<view class="order-item-btn">
							<block v-for="s in statusList">
								<view v-if="item.status===s.id">{{s.name}}</view>
							</block>
						</view>
					</view>
					<u-loadmore v-if="!(list.length===0 && select.page===1)" :margin-top="20" :margin-bottom="40"
						:status="loadStatus"></u-loadmore>
				</view>

				<view v-else style="height: 100%;" class="d-flex ai-center jc-center">
					<u-empty mode="list" text="暂无订单"></u-empty>
				</view>
			</scroll-view>
		</view>
		<!-- 选择搜索 状态 -->
		<u-select v-model="isShowStatus" value-name="id" @confirm="confirmStatus" label-name="name"
			:list="statusList"></u-select>
	</view>
</template>

<script>
	import {
		statusList
	} from "@/common/const.js"
	export default {
		data() {
			return {
				isShowStatus: false,
				statusList: [{
					id:'',
					name:'全部'
				}],
				select: {
					page: 1,
					page_size: 5,
					keyword: '',
					status: '',
					statusName: ''
				},
				last_page: 1,
				list: [],
				loadStatus: 'loadmore',
			}
		},
		onShow() {
			this.getOrderList()
		},
		onLoad() {
			this.statusList.push(...statusList)
		},
		methods: {
			toUrl(id) {
				uni.navigateTo({
					url: '/package_sub/order/orderDetail?type=order&id='+id
				})
			},
			callTel(tel) {
				if (this.base.isNull(tel)) {
					return
				}
				uni.makePhoneCall({
					phoneNumber: tel
				});
			},
			confirmStatus(e) {
				console.log("e",e)
				this.select.status = e[0].value
				this.select.statusName = e[0].label
			},
			search(){
				this.select.page = 1
				this.list = []
				this.loadStatus = 'loadmore'
				this.getOrderList()
			},
			async getOrderList() {
				const res = await this.$u.api.order({
					...this.select
				})
				this.last_page = res.last_page
				this.loadStatus = this.select.page >= this.last_page ? 'nomore' : 'loadmore'
				this.list.push(...res.data)
			},
			reachBottom() {
				if (this.select.page > this.last_page) {
					this.loadStatus = 'nomore'
					return
				}
				this.loadStatus = 'loading'
				this.select.page++
				this.getOrderList()
			},

		}

	}
</script>

<style lang="scss" scoped>
	.container {
		width: 100vw;
		height: 100vh;
		background-color: #F8F8F8;
		font-size: 32rpx;
		.select {
			width: 100vw;
			padding: 40rpx 28rpx;
			z-index: 4;
			position: fixed;
			top: 0rpx;
			height: 94rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			background-color: #fff;
			box-shadow: 1rpx 1rpx 10rpx #fdf0f0;

			&-keyword {
				background-color: #f5f5f5;
				border-radius: 60rpx;
				padding: 0rpx 30rpx;
				width: 40%;
			}

			&-select {
				background-color: #f5f5f5;
				border-radius: 60rpx;
				padding: 0rpx 30rpx;
				width: 40%;
			}

			&-btn {
				width: 10%;
			}
		}

		.flex-center {
			display: flex;
			align-items: center;

			.u-icon {
				margin-left: 10rpx;
			}
		}

		.order {
			padding: 20rpx;
			margin-top: 0;
			position: relative;
			padding-top: 120rpx;
			padding-bottom: 40rpx;
			background-color: #F8F8F8;
			height:100vh;
			&-item {
				background-color: #fff;
				padding: 20rpx;
				box-shadow: 1rpx 1rpx 10rpx #fdf0f0;
				border-radius: 10rpx;
				margin-bottom: 20rpx;
				border: 1rpx solid #fdf0f0;

				&-status {
					border-bottom: 1rpx solid rgba(0, 0, 0, 0.2);
					padding-bottom: 20rpx;
				}

				&-info {
					padding: 20rpx 0;

					&>view {
						margin-bottom: 10rpx;
					}
				}

				&-btn {
					display: flex;
					justify-content: flex-end;

					&>view {
						text-align: center;
						color: #d61b24;
						background: #fdf0f0;
						padding: 10rpx 30rpx;
						border-radius: 40rpx;
						border: 1rpx solid #d61b24;
					}
				}
			}
		}
	}
</style>