hospital-accompaniment-wechat/pages/tabBar/order.vue

<template>
	<view class="container">
		<u-sticky bgColor="#fff">
			<!-- <view class="search-box">
				<u-input placeholder="搜索我的订单" v-model="serviceName"
					:customStyle="{backgroundColor: '#eee',borderRadius: '50rpx',padding:'12rpx 30rpx'}" :border="false"
					@confirm="getOrderList('reload')">
					<template slot="suffix">
						<image src="/static/search-02.png" mode="aspectFill" style="width: 40rpx;height: 36rpx;"
							@click="getOrderList('reload')">
						</image>
					</template>
				</u-input>
			</view> -->
			<u-tabs :lineWidth="50" :activeStyle="{ color: '#4B91D1' }" :list="typeList" keyName="value"
				:current="current" @change="changeTab"></u-tabs>
		</u-sticky>
		<view class="order-list">
			<view class="order-item" v-for="item,index in orderList" :key="index" @click="toDetails(item)">
				<!-- 头部为左右结构，左边为名称、订单编号，右边为订单金额 -->
				<view class="order-t-box">
					<view class="order-t-box-l">
						<view class="order-name">
							{{item.serviceName || '-'}}（数量：{{item.orderNum || '-'}}）
						</view>
						<view class="order-no">
							<span>订单编号：{{item.orderNo || '-'}}</span>
							<image class="icon" :src="copyImg" mode="aspectFill"
								@click.stop="$utils.copyTxt(item.orderNo)"></image>
						</view>
					</view>
					<view class="order-t-box-r">
						<span class="title">订单金额</span>
						<span class="price">￥{{item.totalPrice || '-'}}</span>
					</view>
				</view>
				<u-line></u-line>
				<view class="order-b-box">
					<view class="order-b-box-l">
						<view class="order-b-item">
							<span class="title">医院：</span>
							<span class="txt">{{item.hospitalVo.name || '-'}}</span>
						</view>
						<view class="order-b-item">
							<span class="title">科室：</span>
							<span class="txt">{{item.hospitalDepartmentName || '-'}}</span>
						</view>
						<view class="order-b-item">
							<span class="title">就诊人：</span>
							<span class="txt">{{item.patientVo.name || '-'}}（{{item.patientVo.mobile || '-'}}）</span>
						</view>
					</view>
					<view class="order-b-box-r">
						<span class="status">{{getStatusTxt(item.status)}}</span>
					</view>
				</view>
				<u-line></u-line>
				<view class="btn-box">
					<span class="time">{{$utils.mFormatDate(item.expectedTime, 'yyyy-MM-dd HH:mm') || '-'}}</span>
					<span class="btn" @click.stop="cancleOrder">取消订单</span>
				</view>
			</view>
		</view>
		<view class="empty-box" v-if="!orderList.length">
			<u-empty marginTop="100" style="width: 100%;"></u-empty>
		</view>
		<view style="width: 100%;padding-bottom: 40rpx;" v-else>
			<u-loadmore :status="status" :loading-text="loadingText" :loadmore-text="loadmoreText"
				:nomore-text="nomoreText" @loadmore="loadmore" dashed line marginTop="20" />
		</view>
	</view>
</template>

<script>
	import {
		getOrderList,
		getOrderStatus
	} from "@/api/order.js"
	export default {
		data() {
			return {
				copyImg: require('@/static/copy.png'),
				serviceName: undefined,
				orderStatus: undefined,
				orderList: [],
				typeList: [],
				loading: false,
				pageSize: 10,
				pageNum: 1,
				botLoadingShow: 0, //0不显示  1显示 3.显示没有更多了
				loadingShow: false,
				status: 'loadmore',
				loadingText: '努力加载中',
				loadmoreText: '上拉或点击加载更多',
				nomoreText: '实在没有了',
				total: 0,
				customBar: 0, //状态栏高度 + 导航栏高度
				status: {
					10: ''
				},
				current: 0,
			}
		},
		onLoad(option) {
			if (option.type) {
				this.orderStatus = option.type;
				switch (option.type) {
					case "10":
						this.current = 1;
						break;
					case "20":
						this.current = 2;
						break
					case "40":
						this.current = 4;
						break
					case "60":
						this.current = 6;
						break
					default:
						this.current = 0;
						break

				}
			}
			
			this.init();
		},
		onShow() {
			// 获取全局参数
			const app = getApp();
			if (app.globalData.switchTabParams) {
				const params = app.globalData.switchTabParams;
				console.log('接收到的参数:', params);
				if (params.reload) {
					this.init()
					// 使用完后可以清除
					app.globalData.switchTabParams = null;
					return
				}
			
			}
		},
		methods: {
			init() {
				this.getOrderList("reload")
				this.getOrderStatus();
			},
			changeTab(item) {
				// console.log("item", item);
				this.orderStatus = item.code
				this.getOrderList("reload")
			},
			getStatusTxt(value) {
				let obj = this.typeList.find(item => item.code == value);;
				return obj ? obj.value : '-'
			},

			getOrderList(reload) {
				// 验证登录
				// let token = uni.getStorageSync('apiToken');
				// if (!token) return
				if (reload) {
					this.orderList = [];
				}
				let that = this;
				uni.showLoading({
					title: '加载中',
					mask: true,
				});
				let param = {
					status: this.orderStatus,
					serviceName: this.serviceName,
					pageNum: that.pageNum,
					pageSize: that.pageSize,
				};

				getOrderList(param).then(res => {
						let data = res.rows;
						if (data) {
							this.orderList.push(...data); //在列表后面新增新获取的数据
							this.total = res.total; //获取数据总页数
							if (this.orderList.length >= this.total) {
								this.status = 'nomore';
								return;
							}
						} else {
							that.status = 'nomore';
						}
					})
					.catch((err) => {
						console.log(err);
					})
					.finally(() => {
						uni.hideLoading();
					});
			},

			//查询订单状态
			getOrderStatus() {
				let that = this;
				getOrderStatus().then(res => {
						if (res.code == 200) {
							let data = res.data.orderStatus;
							data.unshift({
								value: '全部',
								code: '',
							})
							this.typeList = data;
						}

					})
					.catch((err) => {
						console.log(err);
					})

			},

			//去详情
			toDetails(item) {
				uni.navigateTo({
					url: '/pages/order/orderDetails?id=' + item.id
				})
			},

			//去验收
			toAcceptance(item) {
				uni.navigateTo({
					url: '/pages/mineOrders/acceptance?id=' + item.id
				})
			},

			loadmore() {
				// 如果当前页数大于等于总页数，状态修改为没有更多了，不再继续往下执行代码
				if (this.orderList.length >= this.total) {
					this.status = 'nomore';
					return;
				}
				this.status = 'loading'; //状态改为加载中
				this.pageNum++;
				this.getOrderList();
			},

			onReachBottom() {
				this.loadmore();
			},



			//下拉刷新回调函数
			onPullDownRefresh() {
				// wx.setStorageSync('isChangeBanner', true);
				this.init();
				setTimeout(function() {
					uni.stopPullDownRefresh();
				}, 1000);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		background-color: #f6f6f6;
	}

	.search-box {
		display: flex;
		align-items: center;
		padding: 20rpx;
	}

	.order-list {
		margin: 20rpx;

		.order-item {
			margin-bottom: 20rpx;
			background-color: #fff;
			border-radius: 20rpx;
			padding: 10rpx 24rpx 30rpx;

			.order-t-box {
				display: flex;
				justify-content: space-between;
				align-items: flex-start;
				padding: 20rpx 0;

				.order-t-box-l {
					.order-name {
						font-size: 32rpx;
						font-weight: bold;
					}

					.order-no {
						display: flex;
						align-items: center;
						margin-top: 15rpx;
						font-size: 24rpx;
						color: #6F6F6F;
						.icon{
							width: 40rpx;
							height: 40rpx;
							margin-left: 10rpx;
						}
					}
				}

				.order-t-box-r {
					display: flex;
					align-items: center;
					flex-direction: column;

					.title {
						font-size: 24rpx;
						color: #6F6F6F;
					}

					.price {
						margin-top: 15rpx;
						font-size: 32rpx;
						font-weight: bold;
						color: #FF0000;
					}
				}
			}

			.order-b-box {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 20rpx 0;

				.order-b-box-l {
					flex: 1;
					.order-b-item {
						margin-bottom: 15rpx;

						&:last-child {
							margin-bottom: 0;
						}

						.title {

							font-size: 26rpx;
							color: #1A1A1A;
						}

						.txt {
							font-size: 26rpx;
							color: #808080;
						}
					}
				}

				.order-b-box-r {
					width: 110rpx;
					text-align: right;
					font-size: 24rpx;
					color: #0085FF;
				}
			}

			.btn-box {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 15rpx;

				.time {
					font-size: 24rpx;
					color: #6F6F6F;
				}

				.btn {
					width: 160rpx;
					height: 60rpx;
					line-height: 60rpx;
					text-align: center;
					background-color: #4B91D1;
					color: #fff;
					border-radius: 30rpx;
					font-size: 24rpx;
				}
			}

		}
	}
</style>