pj_h5_cloud/src/pages/tabbar/order.vue

<script setup lang="ts">
import { ref, reactive } from "vue"
import { onLoad, onShow } from "@dcloudio/uni-app"

import { hooks, router } from "@@/index"
import { orderApi } from "@@/api"

import { filePath } from "@@/utils/file"

import zTabs from "@@/components/other/z-tabs/z-tabs.vue"
import { getLaunchParam } from "@/sheep/utils/app"

const data = {
	tabs: [
		{ id: null, name: "全部", disabled: false },
		{ id: 1, name: "未支付", disabled: false },
		{ id: 5, name: "已支付", disabled: false },
		{ id: 10, name: "售后", disabled: false },
		{ id: 20, name: "已核销", disabled: false },
	],
}
const state = reactive<any>({
	pa: {
		orderStatus: data.tabs[0].id,
	},
})

onLoad(() => {
	const app = getApp()
	app._initTabbar()
})
onShow(async () => {
	const isLogin = await hooks.useCheckLogin()
	if (!isLogin) return
	if (pageRef.value) {
		pageRef.value.reload(false)
	}
})
const doTab = (e: any) => {
	const target = data.tabs[e]
	state.pa.orderStatus = target.id
	pageRef.value.reload(true)
}

const pageRef = ref<any>(null)
const pageHook = hooks.usePage(
	pageRef,
	getLaunchParam() == "canteen"
		? orderApi.caneenPage
		: getLaunchParam() == "selfMerchant"
		? orderApi.supPage
		: getLaunchParam() == "coopMerchant"
		? orderApi.supPage
		: getLaunchParam() == "onlineShop"
		? orderApi.supPage
		: async () => [],
	null,
	"data.records",
)
const query = (page: number, pagesize: number) => {
	const isLogin = hooks.useStaticCheckLogin()

	if (!isLogin) return
	pageHook.startPage(page, pagesize, false, state.pa)
}

// 查看订单和核销码
const doToDetail = (v: any) => {
	router.jump("/pages/order/detail", { id: v.id })
}

const doAppraise = () => {}

const doRefund = (v: any) => {
	router.jump("/pages/refund/apply", { id: v.id })
}
</script>

<template>
	<crud-layout bg="/static/page/blue-bg.png">
		<z-paging
			ref="pageRef"
			height="100%"
			:fixed="false"
			v-model="pageHook.list"
			:default-page-size="10"
			safe-area-inset-bottom
			:loading-more-enabled="true"
			:show-scrollbar="false"
			@query="query"
			:auto-clean-list-when-reload="false"
			:auto-scroll-to-top-when-reload="false"
			@scroll="pageHook.scroll"
		>
			<template #top>
				<view class="h-30rpx" />
				<view class="bg-white rounded-16rpx px-20rpx">
					<z-tabs :list="data.tabs" @change="doTab" />
				</view>
			</template>
			<view class="h-20rpx" />
			<view class="flex-col justify-center card p-3 m-b-20rpx" v-for="(v, i) in pageHook.list" :key="i">
				<view class="flex-row items-center">
					<image class="w-110rpx h-110rpx rounded-8rpx" :src="filePath(v.logoPic)" mode="aspectFill" />
					<view class="flex-1 m-l-20rpx">
						<view class="flex-row items-center justify-between">
							<view class="flex-row items-center">
								<view class="main-text-28">{{ v.merchantName }}</view>
								<!-- <view class="m-l-15rpx color-#999 font-size-26rpx! iconfont icon-youjiantou" /> -->
							</view>
							<tm-tag v-if="v.orderStatus == 1" color="info" size="xs">未支付</tm-tag>
							<tm-tag v-if="v.orderStatus == 5" color="success" size="xs">已支付</tm-tag>
							<tm-tag v-if="v.orderStatus == 10" color="error" size="xs">售后</tm-tag>
							<tm-tag v-if="v.orderStatus == 20" size="xs">已核销</tm-tag>
							<tm-tag v-if="v.orderStatus == 30" color="info" size="xs">已取消(智能柜)</tm-tag>
						</view>
						<view class="flex-row items-center justify-between m-t-5rpx">
							<view class="second-text-20">
								<text>下单时间</text>
								<text class="m-l-10rpx">{{ hooks.useTime(v.createTime, "{y}-{m}-{d} {h}:{i}:{s}") }}</text>
							</view>
							<view class="second-text-22">{{ hooks.useEnum("hardwareRefundStatusEnum", v.refundStatus) }}</view>
						</view>
						<view class="flex-row items-center justify-between m-t-5rpx">
							<view class="sub-text-24">
								<text v-if="v.payType == '9'">{{ v.productDesc?.replaceAll(";", "\;\n") }}</text>
							</view>
							<view class="main-text-30 whitespace-nowrap color-red! text-right">¥ {{ hooks.useMoney(v.totalPrice) }}</view>
						</view>
					</view>
				</view>

				<view class="flex items-center ml-[20rpx] overflow-hidden gap-2">
					<view class="w-4/5">
						<scroll-view v-if="['5', '20'].includes(v.orderStatus) && v.orderType == 2" scroll-x>
							<view class="flex-row items-center">
								<view class="inline-flex! flex-col items-center m-r-20rpx" v-for="(pV, pI) in v.carList" :key="pI">
									<image class="w-80rpx h-80rpx rounded-8rpx" :src="filePath(pV.productPic)" mode="aspectFill" />
									<view class="m-t-10rpx sub-text-24 show-line text-center">{{ pV.productName }}</view>
								</view>
							</view>
						</scroll-view>
					</view>
					<view
						v-if="v.carList?.length && ['5', '20'].includes(v.orderStatus) && v.orderType == 2"
						class="w-1/5 second-text-26 truncate text-center"
					>
						共 {{ v.carList.length }} 件
					</view>
				</view>
				<view v-if="['5', '10'].includes(v.orderStatus)" class="w-full flex-row items-center justify-end my-1">
					<!-- <view v-if="v.orderStatus == 5 && v.orderType == 2" class="botder_btn" @tap.stop="doRefund(v)">退款</view> -->
					<view v-if="v.orderStatus == 5 && v.orderType == 2" class="m-l-20rpx botder_btn" @tap.stop="doToDetail(v)">核销码</view>
				</view>
			</view>
		</z-paging>
	</crud-layout>
</template>