door-uniapp-240802/service-uniapp-client/pages/orderManagement/orderManagement.vue

<template>
	<view class="orderManagement">
		<mNavbar title="订单管理" :leftClick="leftClick"></mNavbar>
		
		<van-tabs v-model:active="active" color="#EF8C94" @change="clickTabs"
			style="position: sticky;top: 90rpx;z-index: 99;">
			<van-tab :title="item.name" v-for="(item, index) in tabs" :key="index"
				@click="getOrderList(index)"></van-tab>
		</van-tabs>
		
		<view v-if="orderList.length > 0" class="list">
			<van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
				<view class="item" v-for="(item, index) in orderList" @click="toOrderDetail(item.id)">
		
					<view class="top">
						<view class="service">
							<text>{{item.projectId_dictText}}</text>
							<uni-icons type="right" size="15"></uni-icons>
							<text>{{item.type_dictText}}</text>
						</view>
						<view class="status">
							<text> {{item.state_dictText}}</text>
						</view>
					</view>
		
					<view class="content">
		
						<view class="left">
							<image mode="aspectFill" :src="item.image"></image>
						</view>
		
						<view class="right">
							<view class="text-hidden-1">
								客户姓名：{{item.name}}
							</view>
							<view class="text-hidden-1">
								下单时间：{{item.createTime}}
							</view>
							<view class="text-hidden-1">
								下单地址：{{item.addressId_dictText}}
							</view>
							<view class="text-hidden-1">
								总计时间：{{item.useTime}}分钟
							</view>
						</view>
		
					</view>
		
					<view class="order-price">
						<view v-if="true" class="tag">
							{{item.technicianId_dictText}}
						</view>
		
						<view v-else class="anticipate">
							<image src="/static/order/time.png" mode="aspectFill"></image>
							<text>预计30min内到达</text>
						</view>
		
						<view class="price">
							总价格：<text class="num">{{item.money}}元</text>
						</view>
					</view>
		
					<view class="bottom">
						<view @click.stop="calcelOrder(item.id,cancelSuccess)" class="b1" v-if="item.state == 0">
							取消订单
						</view>
						<view @click.stop="toPayOrder(item)" class="b2" v-if="item.state == 0">
							立即付款
						</view>
						<!-- <view @click.stop="toPayOrder(item)" class="b2" v-if="item.state == 2">
							立即确认
						</view> -->
						<view class="b1" @click.stop="moreOrder(item.projectId,toPlaceorder)" v-if="item.state == 3">
							再来一单
						</view>
						<view class="b2" @click.stop="toEvaluate(item.id,item.projectId)" v-if="item.state == 3">
							立即评价
						</view>
						<view class="b2" @click.stop="moreOrder(item.projectId,toPlaceorder)" v-if="item.state == 4">
							再来一单
						</view>
					</view>
		
				</view>
			</van-list>
		</view>
		
		<van-empty v-else image="/static/empty/order.png" image-size="400rpx" description="暂无订单" />
		
	</view>
</template>

<script>
	import mNavbar from '@/components/base/m-navbar.vue'
	import order from '@/mixins/order.js'
	
	export default {
		components: {
			mNavbar
		},
		mixins: [order],
		data(){
			return {
				active : 0,
				tabs: [
					{
						name: '待付款'
					},
					{
						name: '已付款'
					},
					{
						name: '已确认'
					},
					{
						name: '已完成'
					},
					{
						name: '已取消'
					}
				],
				queryParams: {
					state: 0,
					pageNo: 1,
					pageSize: 10
				},
				orderList : [],
				finished : false,
				
			}
		},
		onShow(){
			this.getOrderList(0)
		},
		methods : {
			//返回个人中心
			leftClick() {
				uni.switchTab({
					url: '/pages/index/center'
				})
			},
			
			//点击tab栏
			clickTabs(index) {
				this.queryParams.state = index;
				this.getOrderList()
			},
			
			//获取订单列表
			getOrderList() {
				this.$api('getOrderList', this.queryParams, res => {
					if (res.code == 200) {
						this.orderList = res.result.records;
						if (this.queryParams.pageSize > res.result.total) {
							this.finished = true
						}
						this.loading = false
					}else{
						this.finished = true
					}
			
					//用户不存在，删除token和用户信息并且需要用户重新登录
					if (res.code == 500 && res.message === '操作失败，用户不存在!') {
						localStorage.removeItem('token')
						localStorage.removeItem('userInfo')
						uni.navigateTo({
							url: '/pages/login/login'
						})
					}
				})
			},
			
			//跳转订单详情页面
			toOrderDetail(id) {
				uni.navigateTo({
					url: '/pages/order/orderDetail?id=' + id
				})
			},
			
			//list列表滑动到底部自动新增数据列表
			onLoad() {
				this.queryParams.pageSize += 10;
				this.getOrderList()
			},
			
			//取消成功
			cancelSuccess() {
				uni.showToast({
					title: '取消成功',
					icon: 'none'
				})
				this.getOrderList()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.orderManagement{
		.list {
			.item {
				width: calc(100% - 40rpx);
				background-color: #fff;
				margin: 20rpx;
				box-sizing: border-box;
				border-radius: 16rpx;
				padding: 30rpx;
		
				.top {
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 30rpx;
		
					.service {}
		
					.status {
						color: #333;
						font-size: 26rpx;
						font-weight: 600;
					}
				}
		
				.content {
					display: flex;
					margin: 10rpx 0;
		
					.left {
						width: 150rpx;
						height: 150rpx;
						border-radius: 10rpx;
		
						image {
							width: 150rpx;
							height: 150rpx;
						}
		
					}
		
					.right {
						width: calc(100% - 160rpx);
						color: #777;
						font-size: 24rpx;
						padding-left: 20rpx;
						line-height: 40rpx;
		
					}
				}
		
				.order-price {
					display: flex;
					justify-content: space-between;
					margin: 20rpx 0rpx;
		
					.tag {
						width: 150rpx;
						color: #EF8C94;
						font-size: 24rpx;
						text-align: center;
						background-color: #FAE9EA;
						border: 1px solid #EF8C94;
						border-radius: 8rpx;
						padding: 2rpx 0;
					}
		
					.anticipate {
						display: flex;
						align-items: center;
						font-size: 24rpx;
						color: #666666;
		
						image {
							width: 25rpx;
							height: 25rpx;
							margin-right: 5rpx;
						}
					}
		
					.price {
						font-weight: 900;
						text-align: right;
		
						text {
							color: #ff780099;
							font-size: 30rpx;
						}
					}
				}
		
				.bottom {
					display: flex;
					justify-content: flex-end;
					font-size: 25rpx;
		
					.b1 {
						border: 1px solid #777;
						color: #777;
						box-sizing: border-box;
					}
		
					.b2 {
						background: #EF8C94;
						color: #fff;
					}
		
					view {
						margin: 12rpx;
						border-radius: 28rpx;
						padding: 8rpx 28rpx;
						margin-bottom: 0;
					}
				}
			}
		}
	}
</style>