zh_order_food_xcx/pages/order/index.vue

<template>
	<view class="flex-common-css iPhone-bottom box-border-box">
		<Nav :leftShow='false' :customNav='true' bgckgroundBox='#fff'>
			<template>
				<view slot="custom" class="text-align-center fw-600">
					我的订单
				</view>
			</template>
		</Nav>
		<view class="nav-box box-border-box bgc-f display-flex">
			<view class="nav-item" :class="type == item.id?'fs-36 fw-600':'fs-34 fw-400'" v-for="(item,i) in navList"
				:key="i" @click="selectType(item.id)">
				{{item.name}}
				<view v-if="type == item.id" class="nav-item-x"></view>
			</view>
		</view>
		<scroll-view class="nav-type-box bgc-f p-12-24 box-border-box" :scroll-x="true">
			<view class="nav-type-item text-align-center fs-28" v-for="(item,index) in navTypeData"
				@click="navTypeClick(item.key)"
				:class="navTypeKey== item.key?'bgc-E4F3FD fw-600 fc-41ABF5':'bgc-F4F5F7 fw-400 fc-3'">
				{{item.name}}
			</view>
		</scroll-view>

		<view v-if="list.length == 0" class="scroll-view-css">
			<EnBlank :customSrc='true'>
				<template v-slot:blankImg>
					<image class="black-custom-img" src="@/static/img/common/no-order.png" mode=""></image>
				</template>
			</EnBlank>
		</view>

		<scroll-view v-else :scroll-y="true" class="scroll-view-css" @scrolltolower="scrolltolower">
			<view class="list-box">
				<view class="list-item bgc-f b-rad-20 mb-32 p-24 box-border-box" v-for="(item,index) in list">
					<view class="align-items-center flex-justify-space mb-24">
						<view class="align-items-center">
							<image v-if="item.site_logo" class="shops-img" :src="item.site_logo" mode="aspectFit">
							</image>
							<image v-else class="shops-img" src="@/static/img/logo/logo.png" mode=""></image>
							<view v-if="item.site_name" class="fs-32 fc-3 fw-600 shops-name text-overflow-ellipsis-one">
								{{item.site_name}}
							</view>
							<view v-else class="fs-32 fc-3 fw-600 shops-name text-overflow-ellipsis-one">
								君子校园
							</view>
							<!-- <image class="icons" src="@/static/img/toRight.png" mode=""></image> -->
						</view>
						<view class="fc-41ABF5 fs-28">
							{{item.order_status_str}}
						</view>
					</view>
					<view class="align-items-center flex-justify-space mb-24">
						<view class="goods-box" v-if="type == 1 || type == 2 || type == 5">
							<view class="" v-if="item.item.length == 1">
								<view class="align-items-center" v-for="(itemGoods,indexGoods) in item.item">
									<image class="goods-img flex-shrink0" :src="itemGoods.goods_img" mode="">
									</image>
									<view class="fs-28 fc-6 text-overflow-ellipsis">
										{{itemGoods.goods_name}}
									</view>
								</view>
							</view>
							<view class="align-items-center goods-two" v-else>
								<view class="flex-direction" v-for="(itemGoods,indexGoods) in item.item">
									<image class="goods-img flex-shrink0" :src="itemGoods.goods_img" mode="">
									</image>
									<view
										class="fs-28 fc-6 text-overflow-ellipsis-one goods-two-name text-align-center">
										{{itemGoods.goods_name}}
									</view>
								</view>
							</view>
						</view>
						<view class="goods-box" v-else>
							<view class="align-items-center">
								<image class="goods-img flex-shrink0" :src="item.goods_img" mode="">
								</image>
								<view class="fs-28 fc-6 text-overflow-ellipsis">
									{{item.goods_name}}
								</view>
							</view>
						</view>
						<view class="goods-num text-align-center">
							共 {{item.goods_number}} 件
						</view>
					</view>
					<view class="align-items-center flex-justify-space mb-24">
						<view class="fs-24 fc-9">
							下单时间：{{item.created_at}}
						</view>
						<view class="fs-28 fc-9">
							{{item.order_status == 1?'需付':'实付'}} <text
								class="fs-32 fc-3 fw-600">￥{{item.pay_money}}</text>
						</view>
					</view>
					<view class="align-items-center flex-justify-end">
						<view class="item-but but-class-two fs-28 mr-18"
							v-if="type == 1 && item.order_status == 7 && item.is_comment == 0">
							评价
						</view>
						<view class="item-but but-class-two fs-28 mr-18" @click="cancel(item)" v-if="type == 5 && item.order_status == 2">
							<!-- 干洗 -->
							取消订单
						</view>
						<view class="item-but but-class-two fs-28 mr-18" @click="expressCancel(item)" v-if="type == 2 && item.order_status == 2">
							<!-- 代取 -->
							取消订单
						</view>
						<view class="item-but but-class-one fs-28" v-if="item.order_status == 1">
							立即支付
						</view>
						<view class="item-but but-class-one fs-28" v-if="type == 2 && item.order_status == 4">
							<!-- 代取 -->
							再来一单
						</view>
						<view class="item-but but-class-one fs-28" v-if="type == 3 && item.order_status == 2">
							<!-- 团购 -->
							再来一单
						</view>
						<view class="item-but but-class-one fs-28" v-if="type == 4 && item.order_status == 2">
							<!-- 票务 -->
							再来一单
						</view>
						<view class="item-but but-class-one fs-28" v-if="type == 5 && item.order_status == 5">
							<!-- 干洗 -->
							再来一单
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import tools from '@/service/tools';
	import EnBlank from "@/components/en-utils/en-blank/en-blank";
	import {
		expressOrderStatus,
		expressOrderList,
		expressOrderCancel
	} from "@/api/expressOrder.js"
	import {
		orderStatus
	} from "@/api/order.js"
	import {
		groupOrderStatus,
		groupOrderList
	} from "@/api/groupOrder.js"
	import {
		ticketOrderStatus,
		ticketOrderList
	} from "@/api/ticketOrder.js"
	import {
		laundryOrderStatus,
		laundryOrderList,
		laundryOrderCancel
	} from "@/api/laundryOrder.js"
	export default {
		components: {
			EnBlank
		},
		data() {
			return {
				type: 1,
				navList: [{
						name: '外卖',
						id: 1
					},
					{
						name: '代取',
						id: 2
					},
					{
						name: '团购',
						id: 3
					},
					{
						name: '票务',
						id: 4
					},
					{
						name: '干洗',
						id: 5
					},
				],
				page: 1,
				list: [],
				total: 0,
				navTypeData: [],
				navTypeKey: 0,
				isAjax: false
			};
		},
		onShow() {
			this.resetList();
		},
		methods: {
			navTypeClick(key) {
				if (this.navTypeKey != key) {
					this.navTypeKey = key
					this.page = 1
					this.list = []
					if (this.type === 1) {

					} else if (this.type === 2) {
						this.expressOrderList()
					} else if (this.type === 3) {
						this.groupOrderList()
					} else if (this.type === 4) {
						this.ticketOrderList()
					} else if (this.type === 5) {
						this.laundryOrderList()
					}
				}
			},
			resetList() {
				this.page = 1;
				this.list = [];
				this.getList();
			},
			selectType(type) {
				if (type != this.type) {
					this.type = type;
					this.navTypeKey = 0
					this.resetList();
				}
			},
			expressOrderCancel(item) {
				// 代取取消订单
				expressOrderCancel({order_id: item.id}).then((res) => {
					if(res.code == 1) {
						tools.success(res.msg)
						this.page = 1;
						this.list = [];
						this.expressOrderList()
					}else {
						tools.error(res.msg)
					}
				})
			},
			cancel(item) {
				// 干洗取消订单
				laundryOrderCancel({order_id: item.id}).then((res) => {
					if(res.code == 1) {
						tools.success(res.msg)
						this.page = 1;
						this.list = [];
						this.laundryOrderList()
					}else {
						tools.error(res.msg)
					}
				})
			},
			scrolltolower() {
				++this.page
				if (this.type === 1) {

				} else if (this.type === 2) {
					this.expressOrderList()
				} else if (this.type === 3) {
					this.groupOrderList()
				} else if (this.type === 4) {
					this.ticketOrderList()
				} else if (this.type === 5) {
					this.laundryOrderList()
				}
				// console.log('触底');
			},
			getList() {
				if (this.type === 1) {
					this.orderStatus()
				} else if (this.type === 2) {
					this.expressOrderStatus()
					this.expressOrderList()
				} else if (this.type === 3) {
					this.groupOrderStatus()
					this.groupOrderList()
				} else if (this.type === 4) {
					this.ticketOrderStatus()
					this.ticketOrderList()
				} else if (this.type === 5) {
					this.laundryOrderStatus()
					this.laundryOrderList()
				}
			},
			expressOrderStatus() {
				// 代取订单状态
				expressOrderStatus().then((res) => {
					if (res.code == 1) {
						this.navTypeData = res.data
					}
				})
			},
			orderStatus() {
				// 外卖订单状态
				orderStatus().then((res) => {
					if (res.code == 1) {
						this.navTypeData = res.data
					}
				})
			},
			groupOrderStatus() {
				// 团购订单状态
				groupOrderStatus().then((res) => {
					if (res.code == 1) {
						this.navTypeData = res.data
					}
				})
			},
			ticketOrderStatus() {
				// 票务订单状态
				ticketOrderStatus().then((res) => {
					if (res.code == 1) {
						this.navTypeData = res.data
					}
				})
			},
			laundryOrderStatus() {
				// 干洗订单状态
				laundryOrderStatus().then((res) => {
					if (res.code == 1) {
						this.navTypeData = res.data
					}
				})
			},
			expressOrderList() {
				// 代取订单列表
				expressOrderList({
					status: this.navTypeKey,
					page: this.page
				}).then((res) => {
					if (res.code == 1) {
						if (res.data.items.length > 0) {
							this.list.push(...res.data.items)
						}
					}
				})
			},
			groupOrderList() {
				// 团购订单列表
				groupOrderList({
					status: this.navTypeKey,
					page: this.page
				}).then((res) => {
					if (res.code == 1) {
						if (res.data.items.length > 0) {
							this.list.push(...res.data.items)
						}
					}
				})
			},
			ticketOrderList() {
				// 票务订单列表
				ticketOrderList({
					status: this.navTypeKey,
					page: this.page
				}).then((res) => {
					if (res.code == 1) {
						if (res.data.items.length > 0) {
							this.list.push(...res.data.items)
						}
					}
				})
			},
			laundryOrderList() {
				// 干洗订单列表
				laundryOrderList({
					status: this.navTypeKey,
					page: this.page
				}).then((res) => {
					if (res.code == 1) {
						if (res.data.items.length > 0) {
							this.list.push(...res.data.items)
						}
					}
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	.nav-box {
		padding: 26rpx 44rpx;
		overflow-x: scroll;

		.nav-item {
			margin-right: 76rpx;
			white-space: nowrap;
			position: relative;

			.nav-item-x {
				position: absolute;
				width: 48rpx;
				height: 6rpx;
				border-radius: 20rpx;
				background-color: #41ABF5;
				left: 12rpx;
				bottom: -10rpx;
			}
		}
	}

	.nav-type-box {
		width: 100%;
		white-space: nowrap;
	}

	.nav-type-item {
		width: 144rpx;
		height: 64rpx;
		line-height: 64rpx;
		margin: 0 24rpx 0 0;
		border-radius: 200rpx;
		display: inline-block;
	}

	.nav-type-item:last-child {
		margin: 0;
	}

	.list-box {
		padding: 20rpx;
		box-sizing: border-box;
	}

	.shops-img {
		width: 48rpx;
		height: 48rpx;
		margin: 0 8rpx 0 0;
		border-radius: 50%;
	}

	.shops-name {
		max-width: 452rpx;
		margin: 0 8rpx 0 0;
	}

	.icons {
		width: 32rpx;
		height: 32rpx;
	}

	.goods-box {
		max-width: 506rpx;
		height: auto;
	}

	.goods-num {
		width: 24rpx;
		height: auto;
	}

	.goods-img {
		width: 144rpx;
		height: 144rpx;
		border-radius: 12rpx;
		margin: 0 16rpx 0 0;
	}

	.goods-two {
		overflow-x: scroll;
		overflow: auto;
	}

	.goods-two-name {
		width: 144rpx;
	}

	.item-but {
		width: 160rpx;
		height: 64rpx;
		line-height: 64rpx;
		text-align: center;
		border-radius: 200rpx;
	}

	.but-class-one {
		background: linear-gradient(225deg, #41ABF5 0%, #5BD8FB 100%);
		color: #fff;
	}

	.but-class-two {
		background: #fff;
		border: 2rpx solid #CCCCCC;
		color: #333;
	}
</style>