yudao-mall-uniapp/pages/XDHome/orderInfoList/orderInfoList.vue

<!-- 订单列表 -->
<template>
	<s-layout class="homepage-wrap ss-w-100 box-sizing" title="订单" navbar="custom"
		tabbar="/pages/XDHome/orderInfoList/orderInfoList">
		<view class="body" :style="'padding-top:' + bottomHeight">
			<!-- 导航 -->
			<view class="ss-flex-2 ss-col-center ss-margin-width2" style="position: relative">
				<view class="ss-flex-2 ss-col-center">
					<!-- <text class="textIcon icon-fanhui icon-navigation" @click="backPage"></text> -->
					<view style="color: #3D444E; font-size: 28rpx">订单列表</view>
				</view>
				<view class="ss-flex-1"></view>
				<text class="textIcon icon-kefu icon-navigation"></text>
				<text class="textIcon icon-tongzhiguanli icon-navigation" style="margin-left: 30rpx"></text>
			</view>
			<!-- 头部导航 -->
			<view class="ss-flex-2 ss-col-center navigation-box ss-row-around" style="margin-top: 20rpx;padding: 5rpx;">
				<view @click="onClick(1)" :class="nativeIndex==1?'click-box':''">全部</view>
				<view @click="onClick(2)" :class="nativeIndex==2?'click-box':''">待付款</view>
				<view @click="onClick(3)" :class="nativeIndex==3?'click-box':''">进行中</view>
				<view @click="onClick(4)" :class="nativeIndex==4?'click-box':''">已完成</view>
				<view @click="onClick(5)" :class="nativeIndex==5?'click-box':''">待评价</view>
				<view @click="onClick(6)" :class="nativeIndex==6?'click-box':''">已取消</view>
			</view>
			<!-- 中部 -->
			<view class="list-wrap">
				<scroll-view scroll-y="true" class="list">
					<view class="list-scroll-view">
						<view class="order-box">
							<view  @click="jumpOrderDetail">
								<view class="ss-flex-2 ss-col-center"
									style="border-bottom: 1rpx solid #DDDDE0;padding-bottom:10rpx;margin-bottom: 20rpx;">
									<view style="font-size:18rpx;color:#A3A3A3;">订单编号：20240909556699887744</view>
									<view class="ss-flex-1"></view>
									<view style="font-size:23rpx;color:#F0853B;">待开始</view>
								</view>
								<!-- 内容 -->
								<view class="ss-flex-2 ss-col-center" style="margin-bottom: 20rpx;">
									<view style="font-size:22rpx;color:#3E444E;">订单实效：</view>
									<view class="ss-flex-1"></view>
									<view style="font-size:22rpx;color:#3E444E;">预约</view>
								</view>
								<view class="ss-flex-2 ss-col-center" style="margin-bottom: 20rpx;">
									<view style="font-size:22rpx;color:#3E444E;">订单技师：</view>
									<view class="ss-flex-1"></view>
									<view style="font-size:22rpx;color:#3E444E;">萌萌技师</view>
								</view>
								<view class="ss-flex-2 ss-col-center" style="margin-bottom: 20rpx;">
									<view style="font-size:22rpx;color:#3E444E;">是否转工单：</view>
									<view class="ss-flex-1"></view>
									<view style="font-size:22rpx;color:#3E444E;">否</view>
								</view>
								<view class="ss-flex-2 ss-col-center" style="margin-bottom: 20rpx;">
									<view style="font-size:22rpx;color:#3E444E;">下单时间：</view>
									<view class="ss-flex-1"></view>
									<view style="font-size:22rpx;color:#3E444E;">2024-09-09 14:22:45</view>
								</view>
								<view class="ss-flex-2 ss-col-center" style="margin-bottom: 20rpx;">
									<view style="font-size:22rpx;color:#3E444E;">下单地址：</view>
									<view class="ss-flex-1"></view>
									<view style="font-size:22rpx;color:#3E444E;">烟台市莱山区华庭路橡树湾小区10-515</view>
								</view>
								<view class="ss-flex-2 ss-col-center">
									<view style="font-size:22rpx;color:#3E444E;">付款状态：</view>
									<view class="ss-flex-1"></view>
									<view style="font-size:22rpx;color:#49B790;">已付款</view>
								</view>
							</view>
							<view class="ss-flex-2 ss-col-center" style="margin-top:20rpx;">
								<view class="ss-flex-1"></view>
								<!-- <view class="butt-box" @click="jumpEvaluate">评价</view> -->
								<view class="butt-box">投诉</view>
								<view class="butt-box">结束订单</view>
								<!-- <view class="butt-box">确认技师离开</view> -->
								<!-- <view class="butt-box" style="background-color:#24C373;color:#fff;border:none;margin-right:0rpx;">再次购买</view> -->
							</view>
						</view>
						
						
						<view class="order-box">
							<view  @click="jumpOrderDetail">
								<view class="ss-flex-2 ss-col-center"
									style="border-bottom: 1rpx solid #DDDDE0;padding-bottom:10rpx;margin-bottom: 20rpx;">
									<view style="font-size:18rpx;color:#A3A3A3;">订单编号：20240909556699887744</view>
									<view class="ss-flex-1"></view>
									<view style="font-size:23rpx;color:#24C373;">服务中</view>
								</view>
								<!-- 内容 -->
								<view class="ss-flex-2 ss-col-center" style="margin-bottom: 20rpx;">
									<view style="font-size:22rpx;color:#3E444E;">订单实效：</view>
									<view class="ss-flex-1"></view>
									<view style="font-size:22rpx;color:#3E444E;">预约</view>
								</view>
								<view class="ss-flex-2 ss-col-center" style="margin-bottom: 20rpx;">
									<view style="font-size:22rpx;color:#3E444E;">订单技师：</view>
									<view class="ss-flex-1"></view>
									<view style="font-size:22rpx;color:#3E444E;">萌萌技师</view>
								</view>
								<view class="ss-flex-2 ss-col-center" style="margin-bottom: 20rpx;">
									<view style="font-size:22rpx;color:#3E444E;">是否转工单：</view>
									<view class="ss-flex-1"></view>
									<view style="font-size:22rpx;color:#3E444E;">否</view>
								</view>
								<view class="ss-flex-2 ss-col-center" style="margin-bottom: 20rpx;">
									<view style="font-size:22rpx;color:#3E444E;">下单时间：</view>
									<view class="ss-flex-1"></view>
									<view style="font-size:22rpx;color:#3E444E;">2024-09-09 14:22:45</view>
								</view>
								<view class="ss-flex-2 ss-col-center" style="margin-bottom: 20rpx;">
									<view style="font-size:22rpx;color:#3E444E;">下单地址：</view>
									<view class="ss-flex-1"></view>
									<view style="font-size:22rpx;color:#3E444E;">烟台市莱山区华庭路橡树湾小区10-515</view>
								</view>
								<view class="ss-flex-2 ss-col-center">
									<view style="font-size:22rpx;color:#3E444E;">付款状态：</view>
									<view class="ss-flex-1"></view>
									<view style="font-size:22rpx;color:#49B790;">已付款</view>
								</view>
							</view>
							<view class="ss-flex-2 ss-col-center" style="margin-top:20rpx;">
								<view class="ss-flex-1"></view>
								<!-- <view class="butt-box" @click="jumpEvaluate">评价</view> -->
								<view class="butt-box" @click="jumpComplaint">投诉</view>
								<view class="butt-box">结束订单</view>
								<!-- <view class="butt-box">确认技师离开</view> -->
								<!-- <view class="butt-box" style="background-color:#24C373;color:#fff;border:none;margin-right:0rpx;">再次购买</view> -->
							</view>
						</view>
						
						<view class="order-box">
							<view  @click="jumpOrderDetail">
								<view class="ss-flex-2 ss-col-center"
									style="border-bottom: 1rpx solid #DDDDE0;padding-bottom:10rpx;margin-bottom: 20rpx;">
									<view style="font-size:18rpx;color:#A3A3A3;">订单编号：20240909556699887744</view>
									<view class="ss-flex-1"></view>
									<view style="font-size:23rpx;color:red;">服务结束</view>
								</view>
								<!-- 内容 -->
								<view class="ss-flex-2 ss-col-center" style="margin-bottom: 20rpx;">
									<view style="font-size:22rpx;color:#3E444E;">订单实效：</view>
									<view class="ss-flex-1"></view>
									<view style="font-size:22rpx;color:#3E444E;">预约</view>
								</view>
								<view class="ss-flex-2 ss-col-center" style="margin-bottom: 20rpx;">
									<view style="font-size:22rpx;color:#3E444E;">订单技师：</view>
									<view class="ss-flex-1"></view>
									<view style="font-size:22rpx;color:#3E444E;">萌萌技师</view>
								</view>
								<view class="ss-flex-2 ss-col-center" style="margin-bottom: 20rpx;">
									<view style="font-size:22rpx;color:#3E444E;">是否转工单：</view>
									<view class="ss-flex-1"></view>
									<view style="font-size:22rpx;color:#3E444E;">否</view>
								</view>
								<view class="ss-flex-2 ss-col-center" style="margin-bottom: 20rpx;">
									<view style="font-size:22rpx;color:#3E444E;">下单时间：</view>
									<view class="ss-flex-1"></view>
									<view style="font-size:22rpx;color:#3E444E;">2024-09-09 14:22:45</view>
								</view>
								<view class="ss-flex-2 ss-col-center" style="margin-bottom: 20rpx;">
									<view style="font-size:22rpx;color:#3E444E;">下单地址：</view>
									<view class="ss-flex-1"></view>
									<view style="font-size:22rpx;color:#3E444E;">烟台市莱山区华庭路橡树湾小区10-515</view>
								</view>
								<view class="ss-flex-2 ss-col-center">
									<view style="font-size:22rpx;color:#3E444E;">付款状态：</view>
									<view class="ss-flex-1"></view>
									<view style="font-size:22rpx;color:#49B790;">已付款</view>
								</view>
							</view>
							<view class="ss-flex-2 ss-col-center" style="margin-top:20rpx;">
								<view class="ss-flex-1"></view>
								<view class="butt-box" @click="jumpEvaluate">评价</view>
								<view class="butt-box">投诉</view>
								<!-- <view class="butt-box">结束订单</view> -->
								<view class="butt-box">确认技师离开</view>
								<view class="butt-box" style="background-color:#24C373;color:#fff;border:none;margin-right:0rpx;">再次购买</view>
							</view>
						</view>
						
					</view>
				</scroll-view>
			</view>
		</view>
	</s-layout>
</template>
<script setup>
	import {
		reactive,
		ref
	} from 'vue';
	import {
		computed
	} from 'vue';
	import {
		onLoad,
		onPageScroll,
		onPullDownRefresh,
		onReady,
		onReachBottom,
		onShow,
	} from '@dcloudio/uni-app';
	import sheep from '@/sheep';
	import $share from '@/sheep/platform/share';
	// 隐藏原生tabBar
	uni.hideTabBar();

	// 导航功能
	const nativeIndex = ref(1)
	const onClick=async(num)=>{
		nativeIndex.value=num
	}
	// 返回首页
	const backPage = async () => {
		uni.reLaunch({
			url: '/pages/XDHome/homePage/homePage',
		});
	};
	// 跳转到订单详情
	const jumpOrderDetail=async()=>{
		uni.navigateTo({
			url:'/pages/XDHome/technician/orderDetailInfo/orderDetailInfo'
		})
	}
	
	// 跳转到服务评价
	const jumpEvaluate=async()=>{
		uni.navigateTo({
			url:'/pages/XDHome/technician/evaluate/evaluate'
		})
	}
	// 跳转到投诉页面
	const jumpComplaint=async()=>{
		uni.navigateTo({
			url:'/pages/XDHome/technician/complaint/complaint'
		})
	}

	const bottomHeight = ref('0rpx');
	// #ifdef APP-PlUS
	//获取顶部安全距离
	const app = uni.getSystemInfoSync();
	const bottomHeightOne = app.statusBarHeight + 'rpx';
	bottomHeight.value = bottomHeightOne
	// #endif
</script>
<style scoped lang="scss">
	.butt-box{
		font-size:20rpx;
		color: #777;
		padding:5rpx 15rpx;
		box-sizing: border-box;
		border: 1rpx solid #666;
		border-radius: 15rpx;
		margin-right: 20rpx;
	}
	.click-box{
		color:#48B68F;
		border-bottom:2rpx solid #48B68F;
		padding-bottom:5rpx;
	}
	.navigation-box {
		width: 95%;
		box-sizing: border-box;
		margin-left: 2.5%;
		color: #444;
		font-size: 26rpx;
	}

	.order-box {
		width: 100%;
		background-color: #fff;
		margin-bottom: 20rpx;
		border-radius: 10rpx;
		padding: 15rpx;
		box-sizing: border-box;
	}

	.icon-navigation {
		font-size: 32rpx;
		color: #3D444E;
		font-weight: 700;
	}

	// 上中下布局样式
	.body {
		display: flex;
		flex-direction: column;
		background-color: #EEEEF0;
		height: calc(100vh - 50px);
		box-sizing: border-box;
	}

	.head {
		text-align: center;
	}

	// 中部滚动
	.list-wrap {
		flex-grow: 1;
		position: relative;
		width: 95%;
		margin-left: 2.5%;
		box-sizing: border-box;
	}

	.list {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 50rpx;
		padding: 10rpx;
		border-radius: 15rpx;
		box-sizing: border-box;
	}

	.list-scroll-view {
		width: 100%;
		margin-bottom: 20rpx;
		box-sizing: border-box;
	}

	.course-card {
		width: 47vw;
		margin-top: 10px;
		margin-bottom: 10px;
	}

	// 底部
	.tools {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.tools-item {
		width: 45px;
		text-align: center;
		font-size: 14px;
		padding: 20px;
	}
</style>