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, payApi } from "@@/api"

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

import zTabs from "@@/components/other/z-tabs/z-tabs.vue"

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(() => {})
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, orderApi.page, null, "data.records")
const query = (page: number, pagesize: number) => {
	const isLogin = hooks.useStaticCheckLogin()
	console.log(isLogin, "isLogin")

	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="5"
			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-x-15rpx p-y-25rpx m-b-20rpx"
				v-for="(v, i) in pageHook.list"
				:key="i"
				@tap="doToDetail(v)"
			>
				<view class="flex-row items-center">
					<image class="w-80rpx h-80rpx rounded-8rpx" :src="filePath(v.logoPic)" mode="aspectFill" />
					<view class="flex-1 flex-col 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>
						</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>
				</view>
				<view class="relative h-180rpx m-t-20rpx">
					<view class="absolute top-0 right-0 bottom-0 left-0 h-180rpx">
						<scroll-view scroll-x class="flex-row-center whitespace-nowrap">
							<view class="flex-row items-center">
								<view
									class="inline-flex! flex-col justify-center h-180rpx m-r-20rpx"
									v-for="(pV, pI) in v.carList"
									:key="pI"
									@tap.stop="
										router.jump('/pages/merchant/product-detail', {
											id: pV.productId,
										})
									"
								>
									<image class="w-160rpx h-120rpx rounded-8rpx" :src="filePath(pV.productPic)" mode="aspectFill" />
									<view class="w-160rpx m-t-10rpx sub-text-24 show-line text-center">
										{{ pV.productName }}
									</view>
								</view>
								<view class="inline-flex! h-180rpx">
									<view class="w-160rpx h-full" />
								</view>
							</view>
						</scroll-view>
					</view>
					<view class="absolute top-0 right-0 bottom-0 z-10 flex-col items-end w-160rpx p-x-20rpx bg-white bg-opacity-95">
						<view class="main-text-30 color-red!">¥ {{ hooks.useMoney(v.totalPrice) }}</view>
						<view class="m-t-10rpx second-text-26">共 {{ v.carList.length }} 件</view>
					</view>
				</view>
				<view v-if="['5', '10'].includes(v.orderStatus)" class="flex-row items-center justify-end p-t-20rpx">
					<!-- <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>

<style lang="scss" scoped></style>