pj_h5_cloud/src/pages/tabbar/prosperityShop.vue

<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="flex justify-between items-center my-1">
					<tm-text font-size="40" color="#0779FD" class="font-bold">共富商城</tm-text>
					<tm-text font-size="30" color="#0779FD">优质商户，品质商品，欢迎联系购买</tm-text>
				</view>
				<view class="w-full flex items-center">
					<tm-input
						class="flex-1"
						v-model="state.params.keyword"
						type="text"
						height="72"
						minHeight="72"
						fontSize="28"
						:showClear="true"
						:focus="false"
						placeholder="请输入超市名称"
						style="border: 4rpx solid #0779fd; border-radius: 14rpx"
						:focus-highlight="false"
						color="#ECF4F9"
					>
						<template v-slot:rightIcon>
							<tm-button class="mr-1 px-3 py-26rpx text-30rpx!" size="xs" @click="search">搜 索</tm-button>
						</template>
					</tm-input>
				</view>

				<scroll-view scroll-x>
					<view class="w-full flex my-2">
						<view
							class="mr-2 sub-text-28 py-1 px-2 rounded-1 bg-#fff border border-solid border-transparent"
							:class="{ 'bg-#0779FD22! c-#0779FD! border-#0779FD33!': state.params.categoryId === v.id }"
							v-for="(v, i) in state.classifyList"
							:key="i"
							@tap="doClassify(v.id)"
						>
							{{ v.name }}
						</view>
					</view>
				</scroll-view>
			</template>

			<view class="card p-20rpx mb-20rpx" v-for="(v, i) in pageHook.list" :key="i" @tap="toDetail(v)">
				<view class="flex">
					<image class="w-150rpx h-150rpx rounded-12rpx" :src="filePath(v.images)" mode="aspectFill" />
					<view class="ml-20rpx flex-1 overflow-hidden">
						<view class="sub-text-30 truncate">{{ v.name }}</view>
						<view class="second-text-26 truncate">
							<text class="mr-20rpx">{{ v.contactName }}</text>
							<text class="mr-20rpx">
								<image class="w-24rpx h-24rpx mr-1" src="@/static/page/phone.svg" />
								<text @tap="doPhone(v.contactPhone)">{{ v.contactPhone }}</text>
							</text>
							<text>{{ v.email }}</text>
						</view>
						<view class="sub-text-26 truncate">
							<text class="bg-#0779FD11 py-1 rounded-2 c-#0094ff">营业：{{ v.businessHours }}</text>
						</view>
						<view class="second-text-26">
							<image class="w-24rpx h-24rpx mr-1" src="@/static/page/address.svg" />
							<text>{{ v.address }}</text>
						</view>
					</view>
				</view>
				<scroll-view scroll-x>
					<view class="flex mt-2">
						<view class="w-160rpx flex-col items-center mr-20rpx" v-for="(pV, pI) in v.featuredProducts" :key="pI">
							<image class="w-160rpx h-160rpx rounded-12rpx" :src="filePath(pV.coverImage)" mode="aspectFill" />
							<view class="w-full mt-4rpx sub-text-24 truncate">{{ pV.title }}</view>
							<view class="w-full flex justify-between pr-1">
								<text class="main-text-26 color-red!">
									<text class="text-22rpx">¥</text>
									<text>{{ pV.spuPrice.toFixed(2) }}</text>
								</text>
								<text class="sub-text-24">{{ pV.unit || "" }}</text>
							</view>
							<view class="w-full flex justify-between pr-1">
								<text class="second-text-24 line-through">
									<text class="text-22rpx">¥</text>
									<text>{{ pV.originalPrice.toFixed(2) }}</text>
								</text>
								<text class="second-text-24">库存{{ pV.totalStock }}</text>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</z-paging>
	</crud-layout>
</template>

<script setup lang="ts">
import { hooks, router } from "@/sheep"
import { onlineShopApi, prosperityShopApi } from "@/sheep/api"
import { onLoad } from "@dcloudio/uni-app"
import { isEmpty } from "radash"
import { reactive, ref } from "vue"
import { filePath } from "@@/utils/file"
import { getAppInfo } from "@/sheep/utils/app"
import { APPENV } from "@/sheep/constant"

const state = reactive<any>({
	params: {
		categoryId: "",
		keyword: "",
	},
	classifyList: [],
	shopList: [],
})
const pageRef = ref<any>(null)
const pageHook = hooks.usePage(pageRef, prosperityShopApi.getShopList, null, "data")

const query = (page: number, pagesize: number) => {
	pageHook.startPage(page, pagesize, false, state.params)
}

onLoad(async () => {
	const app = getApp()
	app._initTabbar()

	await getClassify()
})

// 获取分类
const getClassify = async () => {
	const { data } = await onlineShopApi.getSpuCategory()
	state.classifyList = treeToList(data) ?? []
	state.classifyList.unshift({ id: "", name: "全部分类" })
	if (!isEmpty(state.classifyList)) {
		state.params.categoryId = state.classifyList[0].id
	}
}
const treeToList = <T extends { children?: T[] }>(tree: T[], result: T[] = []): T[] => {
	for (const node of tree) {
		result.push(node)
		if (node?.children?.length) {
			treeToList(node.children, result)
		}
	}
	return result
}

// 切换分类
const doClassify = async (categoryId: string) => {
	if (state.params.categoryId == categoryId) return
	state.params.categoryId = categoryId
	pageRef.value && pageRef.value.reload(true)
}

// 点击搜索
const search = () => {
	state.params.categoryId = ""
	pageRef.value && pageRef.value.reload(true)
}

// 联系商家
const doPhone = async (item: string) => {
	if (isEmpty(item)) return uni.showToast({ title: "该商户没有预留电话", icon: "none" })
	if ((await getAppInfo()) == APPENV.ZZD) {
		;(window as any).dd
			.callPhone({ phoneNum: item.trim() })
			.then((res) => {})
			.catch((err) => {})
		return
	}
	if ((await getAppInfo()) == APPENV.SH) {
		hooks.useMakePhoneCall(item.trim())
		return
	}
}

// 超市详情
const toDetail = async (v: any) => {
	const isLogin = await hooks.useCheckLogin()
	if (isLogin) {
		// router.jump("/pages/shop/detail", { id: v.id })
	}
}
</script>