door-uniapp-240802/service-uniapp-client/pages/index/order.vue

<template>
	<view class="order">

		<mNavbar title="订单中心" />

		<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 { showConfirmDialog } from 'vant';
	import Position from '@/utils/position.js'
	import order from '@/mixins/order.js'

	export default {
		components: {
			mNavbar,
		},
		mixins: [ order ],
		data() {
			return {
				tabs: [{
						name: '全部'
					},
					{
						name: '待付款'
					},
					{
						name: '已付款'
					},
					{
						name: '已确认'
					},
					{
						name: '已完成'
					},
					{
						name: '已取消'
					}
				],
				active: this.$route.query.active || 0,
				queryParams: {
					state: -1,
					pageNo: 1,
					pageSize: 10
				},
				orderList: [], //订单列表数据
				loading: false,
				finished: false,
			}
		},
		onShow() {
			this.getOrderList(-1)
		},
		methods: {
			//获取订单列表
			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'
						})
					}
				})
			},

			//点击tab栏
			clickTabs(index) {
				if (index == 0) {
					this.queryParams.state = -1;
				} else {
					this.queryParams.state = index - 1;
				}
				this.getOrderList()
			},

			//跳转订单详情页面
			toOrderDetail(id) {
				uni.navigateTo({
					url: '/pages/order/orderDetail?id=' + id
				})
			},

			//跳转再来一单
			toPlaceorder(res, projectId) {
				uni.navigateTo({
					url: `/pages/technician/selectTechnician?serviceId=${projectId}`
				})
				sessionStorage.setItem('technicianList', JSON.stringify(res.result.tenPageList))
			},
			
			//取消成功
			cancelSuccess() {
				uni.showToast({
					title: '取消成功',
					icon: 'none'
				})
				this.getOrderList()
			},

			//list列表滑动到底部自动新增数据列表
			onLoad() {
				this.queryParams.pageSize += 10;
				this.getOrderList()
			}
		}
	}
</script>

<style scoped lang="scss">
	body {
		background-color: #f3f3f3;
		font-family: PingFang SC;
	}

	.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;

					image {
						width: 150rpx;
						height: 150rpx;
						border-radius: 10rpx;
					}

				}

				.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>