zianxin/pj_mini_app_cloud
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat:小程序自定义tabbar

Browse Source
This commit is contained in:
dzc committed 2026-03-13 16:40:18 +08:00
1 parent 4b1e41b550
commit 11fb30e17d
158 files changed
+47290 -27243
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/pages/root/dashboard.vue
+11 -2
View File
@@ -6,9 +6,12 @@ import { router } from "@@/index"
import { noticeApi, appApi } from "@@/api/index"
import { getAppInfo } from "@@/utils/app"
import { filePath } from "@@/utils/file"
import { useTabbarStore } from "@@/stores/tabbar"
import Empty from "@@/components/empty/empty.vue"
const tabbarStore = useTabbarStore()
const state = reactive<any>({
swiperList: [
{
@@ -44,6 +47,12 @@ onShow(() => {
onHide(() => {
})
const doMenu = async (v: any) => {
console.log("tabbarStore:", tabbarStore);
await tabbarStore.componetTabbarList(v.page)
tabbarStore.jumpFirstTabbar()
}
// 获取通知公告列表
const getNoticeList = async () => {
try {
@@ -128,8 +137,8 @@ const getAppMenuList = async () => {
<view class="w-full h-50rpx" />
<view v-if="state?.appMenuList?.length > 0">
<view class="grid grid-cols-3 h-full items-center gap-y-30rpx p-y-30rpx">
<view class="flex flex-col items-center justify-center" v-for="(v, i) in state.appMenuList"
:key="i">
<view class="flex flex-col items-center justify-center" v-for="(v, i) in state.appMenuList" :key="i"
@tap="doMenu(v)">
<view class="flex-col-center">
<image class="size-100rpx" :src="filePath(v.icon)" mode="aspectFill" />
<view class="m-t-10rpx sub-text-26">{{ v.title }}</view>
src/pages/tabbar/cabinet.vue
+69
View File
@@ -0,0 +1,69 @@
<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">
<view class="h-30rpx" />
<tm-sheet v-for="(item, index) in pageHook.list" :key="index" :margin="[0, 20]">
<tm-text font-size="32">{{ item.hardName }} {{ item.deviceCode }}</tm-text>
<view class="flex justify-around items-center my-1">
<view class="flex-col items-center p-2 rounded-1 active:bg-#E8E8E8" @click="doDetail(item.id)">
<image class="w-50 h-50" src="@/static/page/door-info.svg" />
<tm-text>货柜详情</tm-text>
</view>
<view class="flex-col items-center p-2 rounded-1 active:bg-#E8E8E8" @click="replenishment(item.id)">
<image class="w-50 h-50" src="@/static/page/open-door.svg" />
<tm-text>货柜补货</tm-text>
</view>
<view class="flex-col items-center p-2 rounded-1 active:bg-#E8E8E8" @click="openPutaway(item.id)">
<image class="w-50 h-50" src="@/static/page/door-putaway.svg" />
<tm-text>商品上架</tm-text>
</view>
</view>
</tm-sheet>
</z-paging>
</crud-layout>
</template>
<script setup lang="ts">
import { ref } from "vue"
import { hooks, router } from "@/sheep"
import { doorApi } from "@/sheep/api"
import { onLoad, onShow } from "@dcloudio/uni-app"
const pageRef = ref<any>(null)
onLoad(() => {
const app = getApp()
app._initTabbar()
})
onShow(() => {
if (pageRef.value) {
pageRef.value.reload(false)
}
})
const pageHook = hooks.usePage(pageRef, doorApi.hardDoorPage, null, "data.records")
const query = (page: number, pagesize: number) => {
pageHook.startPage(page, pagesize, false, {})
}
// 货柜详情
const doDetail = (id: string) => {
if (!id) return
router.jump("/pages/cabinet/cabinetDetail", { id }, 1)
}
// 商品补货
const replenishment = (id: string) => {
if (!id) return
router.jump("/pages/cabinet/replenishment", { id }, 1)
}
// 商品上架
const openPutaway = (id: string) => {
if (!id) return
router.jump("/pages/cabinet/putaway", { id }, 1)
}
</script>
src/pages/tabbar/canteen.vue
+4 -8
View File
@@ -15,16 +15,12 @@ const state = reactive<any>({
})
onLoad(() => {
const app = getApp({ allowDefault: true })
if (app._initTabbar) {
app._initTabbar()
}
})
onShow(() => {
const app = getApp({ allowDefault: true })
if (app._initTabbar) {
app._initTabbar()
onShow(async () => {
const app: any = getApp({ allowDefault: true })
if (app?.globalData?._initTabbar) {
await app.globalData._initTabbar()
}
if (pageRef.value) {
pageRef.value.reload(false)
src/pages/tabbar/canteenAnalyse.vue
+218
View File
@@ -0,0 +1,218 @@
<template>
<crud-layout title="喜好分析" bg="/static/page/blue-bg.png">
<z-paging ref="pageRef" height="100%" :fixed="false" 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" hide-empty-view>
<tm-sheet :margin="[0, 20]">
<view class="prefix_title mb-15rpx">菜品分类购买数量占比图</view>
<view class="w-full h-600rpx">
<qiun-data-charts type="pie" :opts="pieChartOpts" :chartData="pieChartData"
tooltipFormat="canteenPieTooltip" />
</view>
</tm-sheet>
<tm-sheet :margin="[0, 20]">
<view class="prefix_title mb-15rpx">近一周各食堂购买数量趋势图</view>
<view class="w-full h-600rpx">
<!-- tooltipFormat="canteenAreaTooltip" -->
<qiun-data-charts type="area" :opts="areaChartOpts" :chartData="areaChartData" />
</view>
</tm-sheet>
<tm-sheet :margin="[0, 20]">
<view class="prefix_title mb-15rpx">个人菜品喜好排行</view>
<view v-if="productLikeTopList.length > 0" class="rounded-16rpx bg-white overflow-hidden card">
<view
class="bg-gradient-to-r from-blue-100 to-blue-100 px-20rpx py-16rpx flex items-center border-b border-gray-100">
<view class="w-80rpx text-center text-24rpx font-bold text-gray-600">排名</view>
<view class="flex-1 px-16rpx text-24rpx font-bold text-gray-600">菜品名称</view>
<view class="w-120rpx text-center text-24rpx font-bold text-gray-600">分类</view>
<view class="w-160rpx text-center text-24rpx font-bold text-gray-600">购买数量</view>
</view>
<view v-for="(item, index) in productLikeTopList" :key="item.productId"
class="flex items-center px-20rpx py-16rpx border-b border-gray-50 hover:bg-gray-50 transition-colors"
:class="{
'bg-gradient-to-r from-yellow-50 to-orange-50': index === 0,
'bg-gradient-to-r from-gray-50 to-gray-100': index === 1,
'bg-gradient-to-r from-orange-50 to-red-50': index === 2,
}">
<view class="w-80rpx flex justify-center items-center">
<view v-if="index < 3"
class="w-40rpx h-40rpx rounded-1 flex items-center justify-center text-20rpx font-bold text-white"
:class="{
'bg-gradient-to-r from-yellow-400 to-yellow-500': index === 0,
'bg-gradient-to-r from-gray-400 to-gray-500': index === 1,
'bg-gradient-to-r from-orange-400 to-orange-500': index === 2,
}">
{{ index + 1 }}
</view>
<view v-else class="text-24rpx font-medium text-gray-500">{{ index + 1 }}</view>
</view>
<view class="flex-1 px-16rpx">
<view class="text-26rpx font-medium text-gray-800 truncate">{{ item.productName || "未知菜品" }}
</view>
</view>
<view class="w-120rpx text-center">
<view class="text-22rpx text-gray-600 truncate">{{ item.classifyName || "未分类" }}</view>
</view>
<view class="w-160rpx text-center">
<view
class="px-12rpx py-6rpx bg-blue-100 text-blue-600 text-22rpx rounded-1 whitespace-nowrap">
{{ item.payCount }}次</view>
</view>
</view>
</view>
<view v-else class="bg-white rounded-16rpx p-60rpx flex flex-col items-center justify-center">
<view class="text-28rpx text-gray-500">暂无菜品喜好数据</view>
</view>
</tm-sheet>
<view class="h-80rpx" />
</z-paging>
</crud-layout>
</template>
<script setup lang="ts">
import { onLoad } from "@dcloudio/uni-app"
import { ref } from "vue"
import qiunDataCharts from "@/components/qiun-data-charts/qiun-data-charts.vue"
import { totalApi } from "@/sheep/api"
import { hooks } from "@/sheep"
const pieChartData = ref({})
const areaChartData = ref({})
const productLikeTopList = ref<any>([])
const COLORLIST = ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"]
const pieChartOpts = {
color: COLORLIST,
padding: [20, 20, 20, 20],
enableScroll: false,
legend: {
float: "center",
padding: 2,
margin: 2,
fontSize: 14,
lineHeight: 14,
itemGap: 4,
},
extra: {
pie: {
activeOpacity: 0.5,
activeRadius: 10,
offsetAngle: 0,
labelWidth: 15,
border: true,
borderWidth: 3,
borderColor: "#FFFFFF",
linearType: "custom",
},
},
}
const areaChartOpts = {
color: COLORLIST,
padding: [15, 0, 0, -5],
enableScroll: false,
legend: {
float: "center",
padding: 10,
margin: 2,
fontSize: 12,
lineHeight: 12,
itemGap: 4,
},
xAxis: {
disableGrid: true,
},
yAxis: {
gridType: "dash",
dashLength: 2,
showTitle: true,
data: [
{
title: "购买数量",
titleOffsetX: 10,
titleOffsetY: -6,
},
],
},
extra: {
area: {
type: "curve",
opacity: 0.6,
addLine: true,
width: 2,
gradient: true,
activeType: "hollow",
},
},
}
onLoad(() => {
const app = getApp()
app._initTabbar()
})
const pageRef = ref<any>(null)
const pageHook = hooks.usePage(pageRef, () => [], null, "")
const query = () => {
getPieChartData()
getAreaChartData()
getProductLikeTop()
pageHook.startPage()
}
const getPieChartData = async () => {
const { code, data, msg } = await totalApi.productByClassify({})
if (code != 0) return uni.showToast({ title: msg || "数据获取失败", icon: "none" })
const seriesData = data.map((item: any, index: number) => {
return {
index,
name: item.classifyName || "",
value: Number(item.payCount),
labelText: `${item.classifyName || ""} ${item.payCount}次`,
...item,
}
})
pieChartData.value = {
series: [
{
data: seriesData,
},
],
}
}
const getAreaChartData = async () => {
const { code, data, msg } = await totalApi.productByCanteen({})
if (code != 0) return uni.showToast({ title: msg || "数据获取失败", icon: "none" })
const categories = data[0][Object.keys(data[0])[0]].map((item: any) => item.weekStr.replace("星期", "周"))
const series = data.map((item: any) => {
const name = Object.keys(item)[0]
const data = item[name].map((item: any) => Number(item.payCount))
return {
name: name.replace("食堂", ""),
data,
}
})
areaChartData.value = {
categories,
series,
}
}
const getProductLikeTop = async () => {
const { code, data, msg } = await totalApi.productLikeTop({})
if (code !== 0) return uni.showToast({ title: msg || "数据获取失败", icon: "none" })
productLikeTopList.value = data
}
</script>
src/pages/tabbar/coopMerchant.vue
+122
View File
@@ -0,0 +1,122 @@
<script setup lang="ts">
import { ref, reactive } from "vue"
import { onLoad, onShow } from "@dcloudio/uni-app"
import { merchantApi } from "@@/api"
import { hooks, router } from "@@/index"
import { filePath } from "@@/utils/file"
import zTabs from "@@/components/other/z-tabs/z-tabs.vue"
const pageRef = ref<any>(null)
const state = reactive<any>({
pa: {
pagesize: 10,
type: "2",
name: "",
catgoryId: null,
},
tabs: [{ id: null, name: "全部", disabled: false }],
})
const pageHook = hooks.usePage(pageRef, merchantApi.page, null, "data.records")
const query = (page: number, pagesize: number) => {
pageHook.startPage(page, pagesize, false, state.pa)
}
onLoad(async () => {
const app = getApp()
app._initTabbar()
try {
const res: any = await merchantApi.selectCatgory({ current: 1, size: 99999 })
if (res.code == 0) {
state.tabs = state.tabs.concat(res.data)
} else {
state.tabs = [{ id: null, name: "全部", disabled: false }]
}
} catch (error: any) {
uni.showToast({ title: error, icon: "none" })
}
})
onShow(() => {
pageRef.value && pageRef.value.reload(false)
})
const search = () => {
pageRef.value && pageRef.value.reload(true)
}
const doTab = (e: any) => {
const target = state.tabs[e]
state.pa.catgoryId = target.id
pageRef.value.reload(true)
}
const toDetail = async (v: any) => {
const isLogin = await hooks.useCheckLogin()
if (isLogin) {
if (v.supType && v.supType == "10") return router.jump("/pages/merchant/brandDetail", { parentId: v.id })
if (v.supType && v.supType == "20") return router.jump("/pages/merchant/detail", { id: v.id })
if (v.supType && v.supType == "50") return router.jump("/pages/merchant/brandDetail", { parentId: v.id })
uni.showToast({ title: "合作商家类型未知", icon: "none" })
}
}
</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="flex w-full">
<tm-input class="flex-1" v-model="state.pa.name" 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>
<view class="bg-white rounded-16rpx px-20rpx my-20rpx">
<z-tabs :list="state.tabs" @change="doTab" />
</view>
</template>
<view class="flex-row card p-20rpx m-b-20rpx" v-for="(v, i) in pageHook.list" :key="i" @tap="toDetail(v)">
<image class="w-180rpx h-180rpx rounded-12rpx my-auto" :src="filePath(v.logoPic)" mode="aspectFill" />
<view class="flex-1 flex-col m-l-20rpx">
<view class="sub-text-34">
<text class="mr-2">{{ v.name }}</text>
<!-- <tm-tag v-if="v.supType == '10' && Number(v.mchCount) > 0" size="xs" skin="thin">共{{ v.mchCount }}家</tm-tag> -->
</view>
<view class="m-t-10rpx">
<view class="flex justify-between items-center">
<view class="flex-1">
<view v-if="v.phone" class="flex items-center">
<image class="w-24rpx h-24rpx" src="@/static/page/phone.svg" />
<view class="second-text-28 ml-1">{{ v.phone }}</view>
</view>
</view>
<tm-tag class="max-w-160rpx" size="xs">{{ v.deptName.length > 5 ? v.deptName.substring(0, 5)
+ "..." :
v.deptName }}</tm-tag>
</view>
<view class="second-text-24">
<view v-if="v.jobTime != ',,'" class="second-text-28">营业时间：</view>
<view>{{ v.jobTime?.split(",")[0] ? "早：" + v.jobTime?.split(",")[0] : "" }}</view>
<view>{{ v.jobTime?.split(",")[1] ? "中：" + v.jobTime?.split(",")[1] : "" }}</view>
<view>{{ v.jobTime?.split(",")[2] ? "晚：" + v.jobTime?.split(",")[2] : "" }}</view>
</view>
<view v-if="v.addressDes" class="second-text-28">
<image class="w-24rpx h-24rpx" src="@/static/page/address.svg" />
<text class="ml-1">地址:</text>
<text class="m-l-10rpx">{{ v.addressDes }}</text>
</view>
</view>
</view>
</view>
</z-paging>
</crud-layout>
</template>
src/pages/tabbar/selfMerchant.vue
+74
View File
@@ -0,0 +1,74 @@
<script setup lang="ts">
import { ref, reactive } from "vue"
import { onLoad, onShow } from "@dcloudio/uni-app"
import { merchantApi } from "@@/api"
import { hooks, router } from "@@/index"
import { filePath } from "@@/utils/file"
const pageRef = ref<any>(null)
const state = reactive<any>({
pa: {
pagesize: 10,
type: "3",
},
})
const pageHook = hooks.usePage(pageRef, merchantApi.page, null, "data.records")
const query = (page: number, pagesize: number) => {
pageHook.startPage(page, pagesize, false, state.pa)
}
onLoad(() => {
})
onShow(async () => {
const app: any = getApp({ allowDefault: true })
if (app?.globalData?._initTabbar) {
await app.globalData._initTabbar()
}
pageRef.value && pageRef.value.reload(false)
})
const toDetail = async (v: any) => {
const isLogin = await hooks.useCheckLogin()
if (isLogin) {
router.jump("/pages/merchant/detail", { 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">
<view class="h-20rpx" />
<view class="flex-row card p-20rpx m-b-20rpx" v-for="(v, i) in pageHook.list" :key="i" @tap="toDetail(v)">
<image class="w-180rpx h-180rpx rounded-12rpx" :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-center sub-text-34">{{ v.name }}</view>
<tm-tag size="s">{{ v.deptName }}</tm-tag>
</view>
<view class="m-t-10rpx">
<view v-if="v.phone" class="flex items-center">
<image class="w-24rpx h-24rpx" src="@/static/page/phone.svg" />
<view class="second-text-28 ml-1">{{ v.phone }}</view>
</view>
<view class="second-text-24">
<view class="second-text-28">{{ v.jobTime == ",," ? "" : "营业时间：" }}</view>
<view>{{ v.jobTime?.split(",")[0] ? "早：" + v.jobTime?.split(",")[0] : "" }}</view>
<view>{{ v.jobTime?.split(",")[1] ? "中：" + v.jobTime?.split(",")[1] : "" }}</view>
<view>{{ v.jobTime?.split(",")[2] ? "晚：" + v.jobTime?.split(",")[2] : "" }}</view>
</view>
<view v-if="v.addressDes" class="second-text-28">
<image class="w-24rpx h-24rpx" src="@/static/page/address.svg" />
<text class="ml-1">地址:</text>
<text class="m-l-10rpx">{{ v.addressDes }}</text>
</view>
</view>
</view>
</view>
</z-paging>
</crud-layout>
</template>