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

<script setup>
	// 商家订单
	import {
		ref,
		reactive
	} from 'vue'
	import {
		onLoad,
		onPageScroll
	} from '@dcloudio/uni-app';
	// 顶部
	import apex from '@/components/header/apex.vue'
	//顶部条件栏
	import JyShopNavigation from '@/components/public/jy-shop-navigation'
	// 产品图片
	// import JyOrderCard from '@/components/public/jy-order-card'
	import orderItem from '@/components/shop/order/item.vue';
	// 工具库
	import util from '@/common/js/util';

	// tabs
	const tabs = reactive([{
			id: '',
			name: '全部'
		},
		{
			id: 2,
			name: '待付款'
		},
		{
			id: 3,
			name: '待发货'
		},
		{
			id: 4,
			name: '待收货'
		},
		{
			id: 6,
			name: '售后/退款'
		}
	])

	// 列表
	const list = reactive({
		data: [{
			status: 1,
			status_text: '待付款',
		}, {
			status: 2,
			status_text: '待发货',
		}, {
			status: 3,
			status_text: '待收货',
		}, {
			status: 6,
			status_text: '售后中',
		}],
	})
	// 
	const params = reactive({
		currentTab: 0,
		search: ''
	})
	// 顶部导航背景颜色
	const apexBgColor = ref('#ffffff00')

	onLoad((options) => {
		// this.params.currentTab = options.currentTab / 1
	})

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

	/**
	 * 点击订单列表项
	 * @param {Object} ev 订单列表项
	 */
	function handleItem(ev) {
		uni.navigateTo({
			url: util.setUrl('/pages/shop/order/detail')
		})
	}
</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" type="text" placeholder="搜索内容" />
			</view>
		</template>
	</apex>

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

		<view class="f1 pr">
			<JyShopNavigation :current="params.currentTab" :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 rows ptb20" v-if="[2,3,4,5,6].includes(scope.item.status)">
									<view class="key fs0 c333">收货地址</view>
									<view class="value f1 ml20">
										<view class="c333 f28">收货地址</view>
										<view class="mt10 c666 f24">
											<text>姓名</text>
											<text>1397897890</text>
										</view>
									</view>
								</view>
								<!-- 退款原因 -->
								<view class="menu rows ptb20" v-if="[6].includes(scope.item.status)">
									<view class="key fs0 c333">退款原因</view>
									<view class="value f1 ml20">
										<view class="c333 f28">不想要了</view>
										<view class="imgList mt10 c666 f24">
											<template v-for="(item,index) in 3" :key="index">
												<image class="imgs wh80 br10" src="/static/logo.png"
													mode="aspectFill" />
											</template>
										</view>
									</view>
								</view>
								<!-- 操作按钮 -->
								<view class="menu ptb20 df jcr" v-if="[1,2,6].includes(scope.item.status)">
									<template v-if="scope.item.status == 1">
										<view class="btn bar warmHollow plr30">修改价格</view>
									</template>
									<template v-if="scope.item.status == 2">
										<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 class="fill" style="height: 30rpx;"></view>
	</view>
</template>

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

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

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