vibe-coding-cn/yshop/yshop-drink-uniapp/pages/order/order.vue

<template>
	<!-- #ifdef MP-WEIXIN -->
	<uv-navbar
	  :fixed="false"
	  :title="title"
	  left-arrow
	  @leftClick="$onClickLeft"
	/>
	<!-- #endif -->
	<view class="container">
		<view class="bg-white flex px-2 py-1">
			<view class="mr-1"><uv-button @click="change('all')" :type="typeStr == 'all' ? 'success' : 'info' " :plain="true" :hairline="true" text="全部订单" size="small"></uv-button></view>
			<view class="mr-1"><uv-button @click="change('takein')" :type="typeStr == 'takein' ? 'success' : 'info' " :plain="true" :hairline="true" text="到店自取" size="small"></uv-button></view>
			<view class="mr-1"><uv-button @click="change('takeout')" :type="typeStr == 'takeout' ? 'success' : 'info' " :plain="true" :hairline="true" text="外卖到家" size="small"></uv-button></view>
			<view><uv-button @click="change('desk')" :type="typeStr == 'desk' ? 'success' : 'info' " :plain="true" :hairline="true" text="堂食就餐" size="small"></uv-button></view>
		</view>
		<view class="orders-list d-flex flex-column w-100" style="padding: 20rpx; padding-bottom: 0;" v-if="orders.length > 0">
			<view class="order-item" v-for="(item, index) in orders" :key="index" style="margin-bottom: 30rpx;" >
				<list-cell :hover="false">
					<view class="w-100 d-flex align-items-center">
						<view class="flex-fill d-flex flex-column">
							<view class="font-size-lg text-color-base" style="margin-bottom: 20rpx;">
								{{ item.shop.name }}
							</view>
							<view class="flex align-center">
								<view class="mr-1">
									<uv-tags text="预约" plain size="mini" type="error" v-if="item.orderType == 'due'"></uv-tags>
									<uv-tags text="堂食" plain size="mini" type="error" v-if="item.orderType == 'desk'"></uv-tags>
									<uv-tags text="自取" plain size="mini" type="error" v-if="item.orderType == 'takein'"></uv-tags>
									<uv-tags text="外卖" plain size="mini" type="error" v-if="item.orderType == 'takeout'"></uv-tags>
								</view>
								<view class="font-size-sm text-color-assist">订单编号:{{ item.orderId }}</view>
								<!-- <view class="font-size-base text-color-assist" v-if="item.orderType == 'desk'">桌号:{{ item.deskNumber }}</view>
								<view class="font-size-base text-color-assist" v-else>取餐号:{{ item.numberId }}</view> -->
							</view>	
						</view>
						<view class="font-size-medium text-color-primary">
							<text>{{ item.statusDto.title }}</text>
						</view>
					</view>
				</list-cell>
				<list-cell :hover="false" last>
					<view class="w-100 d-flex flex-column">
						<block>
							<view class="w-100 text-truncate font-size-lg text-color-base" style="margin-bottom: 20rpx;"
							v-if="item.cartInfo.length <= 3">
								<view class="flex mb-2" v-for="(good,index) in item.cartInfo" :key="index">  
									<image :src="good.image" mode="aspectFill" class="image"></image>
									<view class="flex flex-column">
										<view class="font-size-medium mt-1 text-color-base">{{ good.title }}</view>
										<view class="font-size-sm mt-1">{{ good.spec }}</view>
										<view class="font-size-sm mt-1">×{{ good.number }}  ¥{{ good.price }}</view>
									</view>
								</view>
							</view>
							<view class="w-100 text-truncate font-size-lg text-color-base flex flex-wrap" style="margin-bottom: 20rpx;" v-else>
								<view class="flex mb-2 justify-center" style="margin-right: 3rpx;" v-for="(good,index) in item.cartInfo" :key="index">  
									<image :src="good.image" mode="aspectFill" class="image"></image>
								</view>
							</view>
						</block>
						<view class="d-flex justify-content-between align-items-center" style="margin-bottom: 30rpx;">
							<view class="font-size-sm text-color-assist">
								{{formatDateTime(item.createTime) }}
							</view>
							<view class="d-flex font-size-sm text-color-base align-items-center">
								<view style="margin-right: 10rpx;">共{{ goodsNum(item.cartInfo) }}件商品，实付</view>
								<view class="font-size-lg">￥{{ item.payPrice }}</view>
							</view>
						</view>
						<view class="d-flex align-items-center justify-content-end">
							<view>
								<button v-if="item.paid > 0 && item.status < 2 && item.refundStatus == 0" class="left-margin"  plain size="mini" @tap.stop="receive(item)">确认收到餐</button>
								<button class="left-margin"  plain size="mini" @tap="detail(item.orderId)">订单详情</button>
							</view>
						</view>
					</view>
				</list-cell>
			</view>
		</view>
		<uv-empty v-else mode="order" text="您暂时还没有订单哦～">
			<uv-button text="去点单" @click="addFood" color="#059825" shape="circle"  customStyle="padding:0 120rpx;margin-top:30rpx"></uv-button>
		</uv-empty>
	</view>
</template>


<script setup>
import {
  ref,
  computed
} from 'vue'
import { useMainStore } from '@/store/store'
import { storeToRefs } from 'pinia'
import { onShow,onLoad,onPullDownRefresh,onReachBottom} from '@dcloudio/uni-app'
import { formatDateTime,kmUnit } from '@/utils/util'
import {
  orderGetOrders,
  orderReceive,
  cancelDue
} from '@/api/order'
const main = useMainStore()
const { isLogin } = storeToRefs(main)
const title = ref('我的订单')

const page = ref(1)
const pageSize = ref(10)
const orders = ref([])
const typeStr =  ref('all')
const type = ref(-1)
const orderType = ref('all')

const orderGoodsName = computed(() => { //计算单个饮品添加到购物车的数量
	return (goods) => {
		let arr = []
		goods.forEach(good => arr.push(good.title + '*' + good.number))
		return arr.join('，')
	}
})
const goodsNum = computed(() => { //计算单个饮品添加到购物车的数量
	return (goods) => {
		let num = 0;
		goods.forEach(good => num += parseInt(good.number))
		return num;
	}
})

onLoad((option) => {
	if(!isLogin.value) {
		uni.navigateTo({url: '/pages/components/pages/login/login'})
	}
	getOrders(false)
})
onPullDownRefresh(() => {
	 getOrders(false)
})
onReachBottom(() => {
	getOrders(false)
})

const addFood = () => {
	uni.switchTab({
		url: '/pages/menu/menu'
	}) 
}

// tab栏切换
const change = (e) => {
	typeStr.value = e
	orderType.value = e
	getOrders(true)
}


const getOrders = async(isRefresh = false) => {
	uni.showLoading({
		title: '加载中'
	})
	if(isRefresh) {
		orders.value = []
		page.value = 1
	}
	let ordersData = await orderGetOrders({page:page.value, limit:pageSize.value,type:type.value,orderType:orderType.value});

	if(ordersData) {
		orders.value = orders.value.concat(ordersData)
		page.value += 1
		
	}
	uni.stopPullDownRefresh();
	uni.hideLoading()
}
const detail = (id) => {
	uni.navigateTo({
		url: '/pages/components/pages/orders/detail?id=' + id
	})
}
// 确认收到货
const receive  = async(order) => {
	let data = await orderReceive({uni:order.orderId});
	if (data) {
		await getOrders(true)
	}
}

const cancelDueOrder = async(id) => {
	let data = await cancelDue({id:id});
	if (data) {
		await getOrders(true)
	}
}
	

</script>

<style lang="scss" scoped>
	.left-margin {
		margin-left: 10rpx;
	}
	.image {
		width: 130rpx;
		height: 130rpx;
		margin-right: 30rpx;
		border-radius: 8rpx;
	}
</style>