jiuyiUniapp/jiuyi2/pages/shop/order/index.vue

<script setup>
	// 我的订单
	import {
		ref,
		reactive
	} from 'vue'
	import {
		onLoad,
		onUnload,
		onReachBottom,
		onPullDownRefresh,
		onPageScroll
	} from '@dcloudio/uni-app';
	// 顶部
	import apex from '@/components/header/apex.vue'
	// 顶部条件栏
	import JyShopNavigation from '@/components/public/jy-shop-navigation'
	// 订单
	import orderItem from '@/components/shop/order/item.vue';
	// 工具库
	import util from '@/common/js/util';
	// api
	import api from '@/api/index.js';
	// 订单方法
	import order from '@/common/js/order.js'

	// tabs
	const tabs = reactive([{
			id: '',
			name: '全部'
		},
		{
			id: 0,
			name: '待付款'
		},
		{
			id: 1,
			name: '待发货'
		},
		{
			id: 4,
			name: '待收货'
		},
		{
			id: 5,
			name: '已收货'
		},
		{
			id: 6,
			name: '已完成'
		},
		{
			id: 9,
			name: '已取消'
		}
	])
	// 列表
	const list = reactive({
		status: '',
		search: '',
		data: [],
		pageSize: 10,
		pageNum: 1,
		total: 0,
	})
	// 顶部导航背景颜色
	const apexBgColor = ref('#ffffff00')

	onLoad((options) => {
		// this.params.currentTab = options.currentTab / 1
		// 获取订单列表
		getList()
		// 开启监听
		addListener()
	})

	onUnload(() => {
		// 移除监听
		removeListener()
	})

	onPageScroll((ev) => {
		apexBgColor.value = ev.scrollTop > 44 ? '#fff' : '#ffffff00'
	})

	onReachBottom(() => {
		// 获取更多列表
		getMoreList()
	})

	onPullDownRefresh(() => {
		// 重载列表
		refreshList()
	})

	// 开启监听
	function addListener() {
		uni.$on('updateOrderList', (data) => {
			// 重载列表
			refreshList()
		})
	}

	// 移除监听
	function removeListener() {
		uni.$off('updateOrderList')
	}

	// 重载列表
	function refreshList() {
		list.pageNum = 1
		getList()
	}

	// 获取更多列表
	function getMoreList() {
		if (list.data.length >= list.total) return
		list.pageNum++
		getList()
	}

	// 获取订单列表
	function getList() {
		api.shop.getOrderList({
			query: {
				searchStr: list.search,
				status: list.status,
				pageNum: list.pageNum,
				pageSize: list.pageSize,
			},
		}).then(res => {
			if (res.code == 200) {
				if (list.pageNum == 1) list.data.length = 0
				list.data.push(...res.rows.map(item => {
					item.status = Number(item.status)
					if(item.refundStatus != 0) item.status_text = '售后'
					// item.status_text = 
					return item
				}))
				list.total = res.total
				return
			}
			util.alert({
				content: rs.msg,
				showCancel: false
			})
		})
	}

	/**
	 * 点击订单列表项
	 * @param {Object} ev 订单列表项
	 */
	function handleItem(ev) {
		uni.navigateTo({
			url: util.setUrl('/pages/shop/order/detail', {
				orderId: ev.id,
			})
		})
	}

	/**
	 * 点击tab
	 * @param {Object} ev
	 */
	function itemClick(ev) {
		// 重载列表
		refreshList()
	}

	/**
	 * 取消订单
	 * @param {Object} item 订单
	 */
	function handleCancel(item) {
		order.orderCancel({
			orderId: item.id,
		}).then(res => {
			// 重载列表
			refreshList()
		})
	}
</script>

<template>
	<apex :bgColor="apexBgColor" mode="flex">
		<template #content>
			<view class="search rows f1 mr30 plr20 bf8f8f8 br10">
				<uni-icons type="search" color="#999" />
				<input class="input ml20" v-model="list.search" type="text" placeholder="搜索内容" @confirm="refreshList" />
			</view>
		</template>
	</apex>

	<view class="app">
		<view class="shopHeaderBg bgColor"></view>

		<view class="f1 pr">
			<JyShopNavigation :current="list.status" :list="tabs" @tabItemClick="itemClick" marright="25px"
				activeWeight='600' activeColor="#333333" activeBarColor="initial" />
		</view>

		<view class="product mlr20 pr">
			<!-- 订单列表 -->
			<view class="order">
				<template v-for="(item,index) in list.data" :key="index">
					<view class="mtb30">
						<orderItem :item="item" mode="mine" @item="handleItem">
							<template #menu="scope">
								<view class="menu ptb20 df jcr" v-if="[0,1,4,5,6].includes(scope.item.status)">
									<template v-if="scope.item.status == 0">
										<view class="btn bar closeHollow plr30" @click.stop="handleCancel(scope.item)">
											取消订单</view>
										<view class="btn bar warmHollow plr30" @click.stop="order.orderPay(item)">继续付款
										</view>
									</template>
									<template v-if="scope.item.status == 1">
										<!-- <view class="btn bar closeHollow plr30" @click.stop="order.orderAfterSales(item)">申请退款</view> -->
										<!-- <view class="btn bar warmHollow plr30">催发货</view> -->
									</template>
									<template v-if="scope.item.status == 4">
										<!-- <view class="btn bar closeHollow plr30">申请退款</view> -->
										<view class="btn bar closeHollow plr30">查看物流</view>
										<view class="btn bar warmHollow plr30">确认收货</view>
									</template>
									<template v-if="scope.item.status == 5">
										<view class="btn bar closeHollow plr30" @click.stop="order.orderAfterSales(item)">申请退款</view>
										<view class="btn bar warmHollow plr30">评价</view>
									</template>
									<template v-if="scope.item.status == 6">
										<view class="btn bar closeHollow plr30">取消售后</view>
										<view class="btn bar closeHollow plr30">钱款去向</view>
										<view class="btn bar warmHollow plr30">平台介入</view>
									</template>
								</view>
							</template>
						</orderItem>
					</view>
				</template>
			</view>
			<!-- <JyOrderCard v-for="(item, index) in 10" type="user_order"></JyOrderCard> -->
		</view>
	</view>
</template>

<style scoped lang="scss">
	// 搜索
	.search {
		height: 30px;
	}

	// 背景颜色
	.bgColor {
		height: 300rpx;
	}

	.menu {
		border-top: 2rpx solid #eee;
	}
</style>