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 color="#f0f0f0"></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"
							:class="item.status == 6 ? 'cancle' : ''">{{getStatusTxt(item.status)}}</span>
					</view>
				</view>
				<u-line color="#f0f0f0"></u-line>
				<view class="btn-box">
					<span class="time">{{$utils.mFormatDate(item.expectedTime, 'yyyy-MM-dd HH:mm') || '-'}}</span>
					<view class="btn-box-r">
						<span class="btn btn1" v-if="item.status == 1" @click.stop="cancleOrder(item.id)">取消订单</span>
						<!--  -->
						<span class="btn btn2" v-if="item.status == 2 || item.status == 3" @click.stop="contactPerson(item.id)">联系护工</span>
						<span class="btn btn2" v-if="item.status == 5" @click.stop="goEvaluation(item.id)">去评价</span>
					</view>
				</view>
			</view>
		</view>
		<view class="empty-box" v-if="!orderList.length">
			<u-image src="/static/none.png" mode="aspectFill" width="582rpx" height="582rpx"></u-image>
			<span class="empty-txt">暂无数据!</span>
			<!-- <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>

		<u-popup :overlayStyle="{'touch-action':'none'}" closeable mode="bottom" :show="popShow" @close="popClose"
			@open="open" :round="20">
			<view class="pop-box">
				<view class="pop-title">联系护工</view>
				<view class="pop-content">
					<view class="pop-item" v-for="item,index in workerList" :key="index"
						@click="confirmAndCall(item.mobile)">
						<u-icon name="phone" color="#fff"></u-icon>
						<span class="txt">{{item.mobile || '-'}}</span>
					</view>
				</view>
				<view class="footer-btn">
					<span class="btn">取消</span>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		getOrderList,
		getOrderStatus,
		cancelOrder
	} 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,
				isFirst: true,

				workerList: [{
					mobile: '13555265325',
				}, {
					mobile: '15800215426',
				}, {
					mobile: '15074125896',
				}],
				popShow: false,
			}
		},
		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

				}
			}
			console.log('onLoad');


		},
		onShow() {
			if (this.isFirst) {
				this.isFirst = false;
				this.init();
			} else {
				// 获取全局参数
				const app = getApp();
				if (app.globalData.switchTabParams) {
					const params = app.globalData.switchTabParams;
					console.log('接收到的参数:', params);
					if (params.reload) {
						console.log('onShow');
						this.init()
						// 使用完后可以清除
						app.globalData.switchTabParams = null;
						return
					} else {

					}

				}
			}

		},
		methods: {
			init() {
				console.log("初始化");
				this.getOrderList("reload")
				this.getOrderStatus();
			},

			open() {
				this.popShow = true;
			},

			popClose() {
				this.popShow = false;
			},

			//拨打电话
			confirmAndCall(phoneNumber) {
				// 先验证电话号码
				if (!this.isValidPhoneNumber(phoneNumber)) {
					uni.showToast({
						title: '电话号码格式不正确',
						icon: 'none'
					});
					return;
				}

				// 显示确认对话框
				uni.showModal({
					title: '确认拨打电话',
					content: `确定要拨打 ${phoneNumber} 吗？`,
					success: (res) => {
						if (res.confirm) {
							// 用户点击确定，执行拨打电话
							this.makePhoneCall(phoneNumber);
						}
					}
				});
			},

			isValidPhoneNumber(phoneNumber) {
				// 简单的电话号码验证
				return /^1[3-9]\d{9}$/.test(phoneNumber);
			},

			makePhoneCall(phoneNumber) {
				uni.makePhoneCall({
					phoneNumber: phoneNumber,
					success: () => {
						console.log('拨打电话成功');
					},
					fail: (err) => {
						console.error('拨打电话失败', err);
						uni.showToast({
							title: '拨打电话失败',
							icon: 'none'
						});
					}
				});
			},

			changeTab(item) {
				// console.log("item", item);
				this.pageNum = 1;
				this.orderList = [];
				this.orderStatus = item.code;
				this.getOrderList("reload");
			},
			getStatusTxt(value) {
				let obj = this.typeList.find(item => item.code == value);;
				return obj ? obj.value : '-'
			},

			//取消订单
			cancleOrder(id) {
				//确认是否删除
				uni.showModal({
					title: '提示',
					content: '确定取消订单吗？',
					success: (res) => {
						if (res.confirm) {
							console.log('用户点击确定');
							cancelOrder(id).then(res => {
								if (res.code == 200) {
									uni.showToast({
										title: '取消成功',
										icon: 'success'
									})
									this.init()
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					},
				})
			},

			//联系护工
			contactPerson(item) {
				this.open()
			},

			//去评价
			goEvaluation(item) {
				uni.navigateTo({
					url: '/pages/order/evaluation?id=' + item.id

				})
			},

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

				getOrderList(param).then(res => {
						let data = res.rows;
						if (data) {
							that.orderList.push(...data); //在列表后面新增新获取的数据
							that.total = res.total; //获取数据总页数
							if (that.orderList.length >= that.total) {
								that.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: undefined,
							})
							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;

					.cancle {
						color: #FF0000;
					}
				}
			}

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

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

				.btn-box-r {

					display: flex;
					align-items: center;

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

					.btn1 {
						background-color: #fff;
						border: 1rpx solid #4B91D1;
						color: #4B91D1;
					}
				}

			}

		}


	}

	.pop-box {
		.pop-title {
			font-size: 32rpx;

			font-weight: bold;
			text-align: center;
			padding: 20rpx 0;

		}

		.pop-content {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-top: 30rpx;
			font-size: 28rpx;
			color: #6F6F6F;
			padding: 0 20rpx;

			&>view {
				margin-bottom: 20rpx;

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

				}

			}

			.pop-item {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 500rpx;
				padding: 20rpx 0;
				background-color: #4B91D1;
				border-radius: 40rpx;
				color: #fff;

				.txt {
					font-size: 28rpx;
				}
			}

		}

		.footer-btn {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-top: 60rpx;

			.btn {
				width: 500rpx;
				padding: 20rpx 0;
				border: 1rpx solid #4B91D1;
				border-radius: 40rpx;
				color: #333;
				text-align: center;
			}
		}
	}
</style>