material-shop-user/pages/order/order.vue

<template>
	<view>
		<TuanAppShim bg="#fff"></TuanAppShim>
		<view v-if="$store.getters.userInfo.token" class="my-order-container">
			<OrderHeader
				ref="orderHeaderRef" :current-status="currentStatus" :menus="navMenus" :current-mode="currentOrderMode"
				@change-status="handleChangeStatus" @change-mode="handleChangeOrderMode" @search="handleSearchCommunityOrderList"
			>
			</OrderHeader>

			<view class="order-list" :class="{ ani: !isLoading }">
				<SubNavs
					v-show="isShowSubNav && ['comment', 'append'].includes(isShowSubNav)" :active-value="currentSubValue"
					:navs="subNavs" @change-sub="handleChangeSubNavs"
				></SubNavs>

				<view v-show="currentOrderMode === 'community'">
				</view>
				<!--  商城 -->
				<view v-show="currentOrderMode === 'shoppingMall'">
					<BusinessOrder
						v-for="(orderItem, orderIndex) in shoppingOrderList" :key="orderIndex" :data="orderItem"
						show-operate @refresh="getOrderList()" @pay-order="(e) => payObj = e"
					></BusinessOrder>
					<view style="padding-bottom: 45upx;">
						<LoadingMore
							:status="!shoppingIsEmpty && !shoppingOrderList.length
								? 'loading' : !shoppingIsEmpty && shoppingOrderList.length && (shoppingOrderList.length >= shoppingListTotal) ? 'no-more' : ''"
						>
						</LoadingMore>
						<tui-no-data v-if="shoppingIsEmpty" :fixed="false" style="margin-top: 60upx;">暂无数据</tui-no-data>
					</view>
				</view>

				<!--  商圈 -->
				<view v-show="currentOrderMode === 'businessDistrict'">
					<BusinessOrder
						v-for="(orderItem, orderIndex) in businessOrderList" :key="orderIndex" :data="orderItem"
						show-operate @refresh="getOrderList()" @pay-order="(e) => payObj = e"
					></BusinessOrder>
					<view style="padding-bottom: 45upx;">
						<LoadingMore
							:status="!businessIsEmpty && !businessOrderList.length
								? 'loading' : !businessIsEmpty && businessOrderList.length && (businessOrderList.length >= businessListTotal) ? 'no-more' : ''"
						>
						</LoadingMore>
						<tui-no-data v-if="businessIsEmpty" :fixed="false" style="margin-top: 60upx;">暂无数据</tui-no-data>
					</view>
				</view>

			</view>
		</view>

		<!-- 未登录时 -->
		<TuanUnLoginPage v-else></TuanUnLoginPage>

		<!-- 商圈支付 -->
		<tui-bottom-popup :show="payObj.showPayPopup" @close="payObj.showPayPopup = false">
			<view v-if="payObj.showPayPopup" style="padding: 60upx 0 128upx;">
				<CashierList
					:price-pay="payObj.pricePay" show show-platform-pay :shop-id-pay="payObj.shopId"
					@change="(e) => payObj.payInfo = { ...payObj.payInfo, ...e }"
				/>
				<tui-button
					type="warning" width="168upx" height="64upx" margin="30upx auto 0"
					shape="circle"
					@click="handleShopGoPay"
				>
					确认支付
				</tui-button>
			</view>
		</tui-bottom-popup>

		<!-- toast -->
		<tui-toast ref="toast"></tui-toast>
	</view>
</template>

<script>
import { businessSubNavs, shoppingSubNavs } from './config'
import { getAllOrderListApi } from '../../api/anotherTFInterface'
import { T_PAY_ORDER } from '../../constant'
import TuanUnLoginPage from './components/TuanUnLoginPage.vue'
import OrderHeader from './components/OrderHeader.vue'
import BusinessOrder from './components/BusinessOrder.vue'
import SubNavs from './components/SubNavs.vue'
import { handleDoPay } from '../../utils/payUtil'

export default {
	name: 'Order',
	components: {
		TuanUnLoginPage,
		OrderHeader,
		BusinessOrder,
		SubNavs
	},

	data() {
		return {
			currentOrderMode: 'shoppingMall',
			currentStatus: 0,
			currentSubValue: 0,
			communityCommentOrder: [],
			isLoading: false, // 是否加载中
			loadingStatus: 'loading', // 加载状态
			isShowSubNav: null,
			totalCommunityPages: 0,
			communityOrderList: [],
			// 二次追加订单
			awaitPayOrderList: [], // 待支付
			payedOrderList: [], // 已支付
			refusedOrderList: [], // 已拒绝
			// 评论订单
			commentOrder: {
				commentOrderList: [], // 待评论订单
				commentAppendOrderList: [], // 可追加订单
				commentedOrderList: [] // 已评论订单
			},
			currentNavInfo: {
				label: '全部',
				value: -1
			},

			// 商城订单
			shoppingQueryInfo: {
				page: 1,
				pageSize: 10,
				orderType: 1
			},
			shoppingOrderList: [],
			shoppingListTotal: 0,
			shoppingIsEmpty: false,
			// 商圈订单
			businessQueryInfo: {
				page: 1,
				pageSize: 10,
				orderType: 2
			},
			businessOrderList: [],
			businessListTotal: 0,
			businessIsEmpty: false,

			// 支付相关
			payObj: {
				showPayPopup: false,
				pricePay: 0,
				shopId: '',
				payInfo: {}
			}
		}
	},

	computed: {
		navMenus() {
			switch (this.currentOrderMode) {
				case 'community':
					return []
					break
				case 'shoppingMall':
					return shoppingSubNavs
					break
				case 'businessDistrict':
					return businessSubNavs
					break
				default:
					return ''
					break
			}
		},
		subNavs() {
			if (this.isShowSubNav) return this.isShowSubNav === 'append' ? [] : this.isShowSubNav === 'comment' ? this.communityCommentOrder : ''
			return []
		},
		appendOrderList() {
			if (!this.isShowSubNav) return []
			if (this.isShowSubNav === 'append') {
				if (this.currentSubValue === 0) {
					return this.awaitPayOrderList
				} else if (this.currentSubValue === 1) {
					return this.payedOrderList
				} else if (this.currentSubValue === 2) {
					return this.refusedOrderList
				}
			}
			return []
		},
		noDataVisible() {
			if (this.isLoading) return false
			if (this.currentOrderMode === 'community') {
				if (!this.isShowSubNav) {
					return !this.communityOrderList.length
				}
				if (this.isShowSubNav) {
					if (this.isShowSubNav === 'append') {
						return !this.appendOrderList.length
					} else if (this.isShowSubNav === 'comment') {
						if (this.currentSubValue === 0) {
							return !this.commentOrder.commentOrderList.length
						} else if (this.currentSubValue === 1) {
							return !this.commentOrder.commentedOrderList.length
						}
						return !this.commentOrder.commentAppendOrderList.length
					}
				}
			} else {
				return true
			}
		}
	},

	onShow() {
		uni.removeStorageSync(T_PAY_ORDER)
		this.$nextTick(() => {
			this.getOrderList()
		})
	},

	methods: {
		handleChangeOrderMode(mode) {
			if (mode === this.currentOrderMode) return
			this.currentOrderMode = mode
			if (this.currentOrderMode === 'community') {
			} else if (this.currentOrderMode === 'shoppingMall') {
				this.currentStatus = 0
			} else if (this.currentOrderMode === 'businessDistrict') {
				this.currentStatus = 0
			}
			this.isShowSubNav = null
			this.getOrderList()
		},

		// 清空搜索
		clearSearch() {
			this.$refs.orderHeaderRef && this.$refs.orderHeaderRef.clearSearch()
		},
		// 点击搜索
		handleSearchCommunityOrderList(searchValue) {
			if (this.currentOrderMode === 'community') {
			} else {
				this.ttoast({
					type: 'fial',
					title: '只能搜索社区订单'
				})
			}
		},

		// 切换状态
		handleChangeStatus(navInfo) {
			if (!navInfo) return
			this.currentNavInfo = navInfo
			this.currentStatus = navInfo.value
			if (this.currentOrderMode === 'community') {
				this.isShowSubNav = null
			} else if (this.currentOrderMode === 'shoppingMall') {
			} else if (this.currentOrderMode === 'businessDistrict') {
			}
			this.getOrderList()
		},

		// 切换sub
		handleChangeSubNavs(info) {
			this.currentSubValue = info.value
			if (this.isShowSubNav === 'comment') {
			}
		},

		// 发起请求获取列表数据
		async getOrderList(isLoadmore) {
			if (this.currentOrderMode === 'community') {
			} else if (this.currentOrderMode === 'shoppingMall') {
				uni.showLoading()
				getAllOrderListApi({ ...this.shoppingQueryInfo, state: this.currentStatus || '' })
					.then((res) => {
						this.shoppingListTotal = res.data.total
						if (isLoadmore) {
							this.shoppingOrderList.push(...res.data.list)
						} else {
							this.shoppingOrderList = res.data.list
						}
						this.shoppingIsEmpty = this.shoppingOrderList.length === 0
						uni.hideLoading()
					})
					.catch(() => {
						uni.hideLoading()
					})
			} else if (this.currentOrderMode === 'businessDistrict') {
				uni.showLoading()
				getAllOrderListApi({ ...this.businessQueryInfo, state: this.currentStatus || '' })
					.then((res) => {
						this.businessListTotal = res.data.total
						if (isLoadmore) {
							this.businessOrderList.push(...res.data.list)
						} else {
							this.businessOrderList = res.data.list
						}
						this.businessIsEmpty = this.businessOrderList.length === 0
						uni.hideLoading()
					})
					.catch(() => {
						uni.hideLoading()
					})
			}
		},

		// 去评论
		handleComment({ itemData, isAppend }) {
			if (isAppend) {
				uni.navigateTo({
					url:
						'/community-center/comment-order/append-comment?orderNo=' +
						itemData.orderNo +
						'&serveName=' +
						itemData.serverName +
						'&url=' +
						itemData.serverUrl +
						'&commentId=' +
						itemData.id
				})
			} else {
				uni.navigateTo({
					url: '/community-center/comment-order/rate?orderNo=' + itemData.orderNo + '&serveName=' + itemData.serverName + '&url=' + itemData.serverUrl
				})
			}
		},

		// 是否可以下拉加载
		canReachBottomLoad() {
			if (this.currentOrderMode === 'community') {
				return ![-3, -2].includes(this.currentStatus)
			} else if (this.currentOrderMode === 'businessDistrict') {
				return true
			}
		},

		async handleShopGoPay() {
			await handleDoPay(this.payObj.payInfo, 1)
			this.payObj = {
				showPayPopup: false,
				pricePay: 0,
				shopId: '',
				payInfo: {}
			}
		}
	},

	onPullDownRefresh() {
		if (!this.$store.getters.userInfo.token) return uni.stopPullDownRefresh()
		this.awaitPayOrderList = []
		this.payedOrderList = []
		this.refusedOrderList = []
		this.commentOrder.commentOrderList = []
		this.commentOrder.commentAppendOrderList = []
		this.commentOrder.commentedOrderList = []
		this.getOrderList()
	},

	onReachBottom() {
		if (this.canReachBottomLoad()) {
			if (this.currentOrderMode === 'community') {
			} else if (this.currentOrderMode === 'shoppingMall') {
				if (this.shoppingOrderList.length < this.shoppingListTotal) {
					++this.shoppingQueryInfo.page
					this.getOrderList(true)
				}
			} else if (this.currentOrderMode === 'businessDistrict') {
				if (this.businessOrderList.length < this.businessListTotal) {
					++this.businessQueryInfo.page
					this.getOrderList(true)
				}
			}
		}
	}
}
</script>

<style lang="scss" scoped>
/deep/ .tui-lazyload__img {
	width: 140rpx !important;
	height: 140rpx !important;
	background-color: #ccc;
}

@keyframes fade {
	0% {
		opacity: 0.4;
		transform: translateX(-100vw);
	}

	100% {
		opacity: 1;
		transform: translateX(0);
	}
}

.my-order-container {
	width: 100vw;
	background-color: #f5f5f7;

	.order-list {
		min-height: 100vh;
		background-color: #f5f5f7;
		position: relative;
		padding: 220upx 30upx 124upx;
		box-sizing: border-box;

		&.ani {
			animation: fade 350ms ease-in-out;
		}
	}
}
</style>