202 lines
6.1 KiB
Vue
202 lines
6.1 KiB
Vue
<script setup lang="ts">
|
|
import { ref, reactive, computed } from "vue"
|
|
import { onLoad, onShow } from "@dcloudio/uni-app"
|
|
import { isEmpty } from "radash"
|
|
import dayjs from "dayjs"
|
|
import { hooks, router } from "@@/index"
|
|
import { foodApi } from "@@/api"
|
|
import zTabs from "@@/components/other/z-tabs/z-tabs.vue"
|
|
import { LazyImg, Waterfall } from "vue-waterfall-plugin-next"
|
|
import "vue-waterfall-plugin-next/dist/style.css"
|
|
// import CustomWaterfallsFlow from "@@/components/other/custom-waterfalls-flow/custom-waterfalls-flow.vue"
|
|
import { filePath } from "@@/utils/file"
|
|
|
|
const menus = {
|
|
tabs: [
|
|
// { id: null, name: "全部", disabled: false },
|
|
{ id: 1, name: "早餐", disabled: false },
|
|
{ id: 2, name: "午餐", disabled: false },
|
|
{ id: 3, name: "晚餐", disabled: false },
|
|
],
|
|
weekDays: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"],
|
|
}
|
|
const state = reactive<any>({
|
|
dateList: [],
|
|
currentDateIndex: 0,
|
|
pa: {
|
|
merchantId: null,
|
|
startTime: null,
|
|
hourType: menus.tabs[0].id,
|
|
},
|
|
})
|
|
|
|
onLoad((options: any) => {
|
|
initDate()
|
|
if (!isEmpty(options.merchantId)) {
|
|
state.pa.merchantId = options.merchantId
|
|
}
|
|
})
|
|
onShow(() => {
|
|
if (pageRef.value && pageRef.value.reload) {
|
|
pageRef.value.reload(false)
|
|
}
|
|
})
|
|
|
|
const pageRef = ref<any>(null)
|
|
const pageHook = hooks.usePage(pageRef, foodApi.page, null, "data.records")
|
|
const query = (page: number, pagesize: number) => {
|
|
pageHook.startPage(page, pagesize, false, state.pa)
|
|
}
|
|
|
|
// 重新设置图片路径
|
|
const foodList = computed(() => {
|
|
return pageHook.list.map((item: any) => {
|
|
return { ...item, picUrl: filePath(item.picUrl) }
|
|
})
|
|
})
|
|
|
|
const initDate = () => {
|
|
const list: any = []
|
|
const now = new Date()
|
|
for (let i = 0; i < 10; i++) {
|
|
const date = dayjs(now).add(i, "d")
|
|
const weekDayStr = date.isSame(now, "day") ? "今天" : menus.weekDays[date.day()]
|
|
list.push({
|
|
weekDayStr,
|
|
date: date.toDate(),
|
|
dayTime: date.format("MM-DD"),
|
|
dateTime: date.format("YYYY-MM-DD"),
|
|
})
|
|
}
|
|
state.dateList = list
|
|
state.pa.startTime = state.dateList[0].dateTime
|
|
pageRef.value?.reload(false)
|
|
}
|
|
|
|
const doDateItem = (v: any, i: any) => {
|
|
state.currentDateIndex = i
|
|
state.pa.startTime = state.dateList[i].dateTime
|
|
pageHook.list = []
|
|
pageRef.value.reload(true)
|
|
}
|
|
|
|
const doTab = (e: any) => {
|
|
const target = menus.tabs[e]
|
|
state.pa.hourType = target.id
|
|
pageHook.list = []
|
|
pageRef.value.reload(true)
|
|
}
|
|
|
|
const doProduct = (v: any) => {
|
|
// router.jump("/pages/merchant/product-detail", { spuId: v.spuId })
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<crud-layout title="每日菜谱" navBgColor="#1777FF" navBgTitleColor="white" bg="/static/page/blue-bg.png">
|
|
<z-paging
|
|
ref="pageRef"
|
|
height="100%"
|
|
:fixed="false"
|
|
v-model="pageHook.list"
|
|
:default-page-size="8"
|
|
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="bg-#1777FF p-15rpx">
|
|
<scroll-view scroll-x class="whitespace-nowrap">
|
|
<view class="flex-row items-center space-x-15rpx">
|
|
<view
|
|
:class="{ active_date: state.currentDateIndex == i }"
|
|
class="flex-col-center flex-shrink-0 size-95rpx color-white rounded-8rpx font-size-24rpx font-700"
|
|
v-for="(v, i) in state.dateList"
|
|
:key="i"
|
|
@tap="doDateItem(v, i)"
|
|
>
|
|
<view>{{ v.dayTime }}</view>
|
|
<view>{{ v.weekDayStr }}</view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
<view class="bg-white rounded-16rpx px-20rpx m-x-10rpx m-t-15rpx">
|
|
<z-tabs :list="menus.tabs" @change="doTab" />
|
|
</view>
|
|
</template>
|
|
|
|
<view class="h-20rpx" />
|
|
|
|
<view class="m-x-20rpx">
|
|
<Waterfall
|
|
v-if="foodList.length"
|
|
:list="foodList"
|
|
:gutter="10"
|
|
:breakpoints="{
|
|
1800: { rowPerView: 4 },
|
|
1400: { rowPerView: 3 },
|
|
975: { rowPerView: 2 },
|
|
}"
|
|
:hasAroundGutter="false"
|
|
backgroundColor="#ffffff00"
|
|
:crossOrigin="false"
|
|
:animationDuration="100"
|
|
>
|
|
<template #default="{ item, url, index }">
|
|
<div class="card">
|
|
<LazyImg class="rounded-2" :url="item.picUrl" />
|
|
<view class="p-x-15rpx p-y-25rpx flex items-center justify-between">
|
|
<view class="sub-text-28 show-line">{{ item.name }}</view>
|
|
<!-- <view class="m-t-10rpx flex-row items-center"> -->
|
|
<view class="second-text-32 color-#f63a36!"> ¥{{ hooks.useMoney(item.price) }} </view>
|
|
<!-- <view class="m-l-20rpx mt-1 second-text-24 line-through">¥{{ hooks.useMoney(item.marketPrice) }}</view> -->
|
|
<!-- </view> -->
|
|
<!-- <view class="flex-col items-start"> -->
|
|
<!-- <view class="second-text-24">{{ hooks.useFormatNum("库存", "", item.stock) }}</view> -->
|
|
<!-- <view class="w-1px h-20rpx m-x-5rpx bg-#999" /> -->
|
|
<!-- <view class="second-text-24">{{ hooks.useFormatNum("销量", "", item.salesCount) }}</view> -->
|
|
<!-- </view> -->
|
|
</view>
|
|
</div>
|
|
</template>
|
|
</Waterfall>
|
|
|
|
<!-- <custom-waterfalls-flow v-model="foodList" imageKey="picUrl" :columnSpace="1" @wapperClick="doProduct" @imageClick="doProduct">
|
|
<template v-slot:default="v">
|
|
<view class="p-x-15rpx p-y-25rpx">
|
|
<view class="sub-text-28 show-line">{{ v.name }}</view>
|
|
<view class="m-t-10rpx flex-row items-center">
|
|
<view class="second-text-32 color-#f63a36!"> ¥{{ hooks.useMoney(v.price) }} </view>
|
|
<view class="m-l-20rpx second-text-24 line-through"> ¥{{ hooks.useMoney(v.marketPrice) }} </view>
|
|
</view>
|
|
<view class="flex-row items-center MT 10rpx">
|
|
<view class="second-text-24">{{ hooks.useFormatNum("库存", "", v.stock) }}</view>
|
|
<view class="w-1px h-20rpx m-x-5rpx bg-#999" />
|
|
<view class="second-text-24">{{ hooks.useFormatNum("销量", "", v.salesCount) }}</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
</custom-waterfalls-flow> -->
|
|
</view>
|
|
</z-paging>
|
|
</crud-layout>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
:deep() {
|
|
.layout_main > scroll-view {
|
|
padding: 0 !important;
|
|
}
|
|
}
|
|
|
|
.active_date {
|
|
background-color: white;
|
|
color: #1679ff !important;
|
|
}
|
|
</style>
|