feat:共富商城首页

src/App.vue

@@ -61,6 +61,14 @@ const tabbar: TabbarItem[] = [
 		launchParam: ["onlineShop"],
 		auth: ["user"],
 	},
+	{
+		pagePath: "pages/tabbar/prosperityShop",
+		text: "共富商城",
+		iconPath: "/static/tabbar/prosperity-shop.png",
+		selectedIconPath: "/static/tabbar/prosperity-shop-select.png",
+		launchParam: ["onlineShop"],
+		auth: ["user"],
+	},
 	{
 		pagePath: "pages/tabbar/cabinet",
 		text: "智能柜",

src/pages.json

@@ -44,6 +44,13 @@
 				"disableScroll": true
 			}
 		},
+		{
+			"path": "pages/tabbar/prosperityShop",
+			"style": {
+				"navigationBarTitleText": "共富商城",
+				"disableScroll": true
+			}
+		},
 		{
 			"path": "pages/tabbar/coopMerchant",
 			"style": {
@@ -576,6 +583,12 @@
 				"iconPath": "",
 				"selectedIconPath": ""
 			},
+			{
+				"pagePath": "pages/tabbar/prosperityShop",
+				"text": "",
+				"iconPath": "",
+				"selectedIconPath": ""
+			},
 			{
 				"pagePath": "pages/tabbar/cabinet",
 				"text": "",
@@ -614,4 +627,4 @@
 			}
 		]
 	}
-}
+}

src/pages/tabbar/prosperityShop.vue

@@ -0,0 +1,174 @@
+<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 items-center">
+					<image class="w-150rpx h-150rpx rounded-12rpx bg-#c4c4c4" :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">{{ v.contactPhone }}</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">{{ v.address }}1111</view>
+					</view>
+				</view>
+				<scroll-view scroll-x>
+					<view class="flex justify-start pt-2">
+						<view
+							class="w-150rpx overflow-hidden flex-col justify-start items-center mr-20rpx"
+							v-for="(pV, pI) in v.featuredProducts"
+							:key="pI"
+						>
+							<image class="w-150rpx h-150rpx rounded-12rpx bg-#c4c4c4" :src="filePath(pV.coverImage)" mode="aspectFill" />
+							<view class="mt-4rpx sub-text-24 truncate">{{ pV.title }}</view>
+							<view class="w-full flex justify-around">
+								<text class="main-text-26 truncate color-red!">
+									<text class="text-22rpx">¥</text>
+									<text>{{ hooks.useMoney(pV.minPrice) }}</text>
+								</text>
+								<text class="sub-text-26 truncate">{{ pV.unit || "" }}</text>
+							</view>
+							<view class="w-full flex justify-around">
+								<text class="second-text-24 truncate">
+									<text class="text-22rpx">¥</text>
+									<text>{{ hooks.useMoney(pV.spuPrice) }}</text>
+								</text>
+								<text class="second-text-26 truncate">库存{{ 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"
+
+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 toDetail = async (v: any) => {
+	const isLogin = await hooks.useCheckLogin()
+	if (isLogin) {
+		// router.jump("/pages/shop/detail", { id: v.id })
+	}
+}
+</script>

src/sheep/api/index.ts

@@ -40,4 +40,6 @@ export { default as invitationApi } from "./invitation"
 
 export { default as totalApi } from "./total"
 
-export { default as userCarApi } from "./userCar"
+export { default as userCarApi } from "./userCar"
+
+export { default as prosperityShopApi } from "./prosperityShop"

src/sheep/api/prosperityShop.ts

@@ -0,0 +1,12 @@
+import request from "@/sheep/utils/request"
+
+export default {
+	// 获取超市列表
+	getShopList: (params: { productLimit: number }): Promise<any> => {
+		return request({
+			url: "/supermarket/app/mall/merchant/list",
+			method: "GET",
+			params,
+		})
+	},
+}