1091 lines
31 KiB
Vue
1091 lines
31 KiB
Vue
<script setup lang="ts">
|
||
import { debounce } from 'throttle-debounce'
|
||
import dayjs from 'dayjs'
|
||
import Config from '@/config/index'
|
||
const { t, locale } = useI18n();
|
||
import StoreSkeleton from './components/store-skeleton.vue';
|
||
import { useScrollThreshold } from '@/hooks/useScrollThreshold'
|
||
import {
|
||
appCollectCollectPost, appMerchantCartCalculateSavingsPost, appMerchantCartListByMerchantIdPost,
|
||
appMerchantDetailMerchantIdGet,
|
||
appMerchantDishDishIdGet,
|
||
appMerchantMenuMenuListByUserPost, type MerchantCartVo,
|
||
type MerchantVo
|
||
} from "@/service";
|
||
import {CollectionType} from "@/constant/enums";
|
||
import {useUserStore} from "@/store";
|
||
import { parseBusinessHoursUtils, getDistanceInMiles } from "@/utils/utils";
|
||
import CouponPopup from './components/coupon-popup.vue'
|
||
import {getMerchantCouponReceiveListApi} from "@/pages-user/service";
|
||
// import type { MerchantVo } from '@/service/types'
|
||
// 页面加载状态
|
||
const loading = ref(true);
|
||
const userStore = useUserStore();
|
||
|
||
const storeID = ref('')
|
||
onLoad((options: any)=> {
|
||
console.log(options)
|
||
if(options.id) {
|
||
storeID.value = options.id
|
||
getStoreDetail()
|
||
// getMenuList()
|
||
}
|
||
})
|
||
|
||
// 定时器用于更新闭店提示
|
||
let closingTimer: NodeJS.Timeout | null = null
|
||
|
||
// 启动闭店提示定时器
|
||
function startClosingTimer() {
|
||
if (closingTimer) {
|
||
clearInterval(closingTimer)
|
||
}
|
||
|
||
closingTimer = setInterval(() => {
|
||
if (storeDetail.value.businessHours) {
|
||
closingInfo.value = parseBusinessHours(storeDetail.value.businessHours)
|
||
// 如果不再显示提示，清除定时器
|
||
if (!closingInfo.value.show) {
|
||
clearInterval(closingTimer!)
|
||
closingTimer = null
|
||
}
|
||
}
|
||
}, 60000) // 每分钟更新一次
|
||
}
|
||
|
||
// 停止闭店提示定时器
|
||
function stopClosingTimer() {
|
||
if (closingTimer) {
|
||
clearInterval(closingTimer)
|
||
closingTimer = null
|
||
}
|
||
}
|
||
|
||
onShow(()=> {
|
||
nextTick(()=> {
|
||
if(storeID.value) {
|
||
// 查询当前店铺购物车信息
|
||
getCartInfo()
|
||
}
|
||
})
|
||
})
|
||
|
||
// 页面卸载时清除定时器
|
||
onUnmounted(() => {
|
||
stopClosingTimer()
|
||
})
|
||
|
||
// 获取商家详情信息
|
||
const storeDetail = ref<MerchantVo>({})
|
||
// 闭店提示信息
|
||
const closingInfo = ref({ show: false, minutes: 0 })
|
||
|
||
// 解析营业时间并判断是否在闭店前30分钟
|
||
function parseBusinessHours(businessHours: string) {
|
||
if (!businessHours) return { show: false, minutes: 0 }
|
||
|
||
const now = dayjs()
|
||
const currentDay = now.day() // 0=Sunday, 1=Monday, ..., 6=Saturday
|
||
const dayNames = [t('pages-store.store.weekdays.sunday'), t('pages-store.store.weekdays.monday'), t('pages-store.store.weekdays.tuesday'), t('pages-store.store.weekdays.wednesday'), t('pages-store.store.weekdays.thursday'), t('pages-store.store.weekdays.friday'), t('pages-store.store.weekdays.saturday')]
|
||
const todayName = dayNames[currentDay]
|
||
|
||
// 检查今天是否营业
|
||
if (!businessHours.includes(todayName)) {
|
||
return { show: false, minutes: 0 }
|
||
}
|
||
|
||
// 提取时间范围，格式如：05:00-16:00
|
||
const timeMatch = businessHours.match(/(\d{2}):(\d{2})-(\d{2}):(\d{2})/)
|
||
if (!timeMatch) {
|
||
return { show: false, minutes: 0 }
|
||
}
|
||
|
||
const [, startHour, startMin, endHour, endMin] = timeMatch
|
||
|
||
// 使用dayjs创建今天的开店和闭店时间
|
||
const openTime = now.hour(parseInt(startHour)).minute(parseInt(startMin)).second(0)
|
||
const closeTime = now.hour(parseInt(endHour)).minute(parseInt(endMin)).second(0)
|
||
|
||
// 如果闭店时间小于开店时间，说明跨天营业，闭店时间应该是明天
|
||
const actualCloseTime = closeTime.isBefore(openTime) ? closeTime.add(1, 'day') : closeTime
|
||
|
||
// 检查是否在营业时间内
|
||
const isOpen = now.isAfter(openTime) && now.isBefore(actualCloseTime)
|
||
|
||
if (!isOpen) {
|
||
return { show: false, minutes: 0 }
|
||
}
|
||
|
||
// 计算闭店前30分钟的时间点
|
||
const thirtyMinsBefore = actualCloseTime.subtract(30, 'minute')
|
||
|
||
// 判断是否在闭店前30分钟内
|
||
if (now.isAfter(thirtyMinsBefore) && now.isBefore(actualCloseTime)) {
|
||
const minutesLeft = actualCloseTime.diff(now, 'minute')
|
||
return { show: true, minutes: minutesLeft }
|
||
}
|
||
|
||
return { show: false, minutes: 0 }
|
||
}
|
||
|
||
const storeDistance = ref(null)
|
||
function getStoreDetail() {
|
||
loading.value = true
|
||
appMerchantDetailMerchantIdGet({
|
||
params: {
|
||
merchantId: storeID.value,
|
||
}
|
||
}).then((res: any) => {
|
||
console.log('商家详情', res)
|
||
storeDetail.value = res.data as MerchantVo
|
||
|
||
getMerchantCouponReceiveList()
|
||
|
||
// 解析营业时间并判断闭店提示
|
||
if (res.data.businessHours) {
|
||
closingInfo.value = parseBusinessHours(res.data.businessHours)
|
||
// 如果需要显示闭店提示，启动定时器
|
||
if (closingInfo.value.show) {
|
||
startClosingTimer()
|
||
}
|
||
}
|
||
|
||
if(res.data.merchantCategoryIds && res.data.merchantCategoryIds.length > 0) {
|
||
tabs.value = [
|
||
{
|
||
title: t('pages.store.all'),
|
||
key: ''
|
||
},
|
||
...res.data.merchantCategoryIds.map((item) => {
|
||
return {
|
||
title: item.menuName,
|
||
key: item.id
|
||
}
|
||
})
|
||
]
|
||
}
|
||
|
||
// 用详情中的首屏菜品初始化列表，并让下一次触底从第 2 页开始，避免仍请求第 1 页导致与详情数据重复
|
||
const firstRecords = res.data?.dishPage?.records
|
||
if (firstRecords && firstRecords.length > 0) {
|
||
dishListByQuery.value = [...firstRecords]
|
||
const gotFullPage = firstRecords.length >= pageSize.value
|
||
hasMore.value = gotFullPage
|
||
pageNum.value = gotFullPage ? 2 : 1
|
||
} else if (tabs.value.length > 0) {
|
||
dishListByQuery.value = []
|
||
hasMore.value = true
|
||
pageNum.value = 1
|
||
nextTick(() => loadDishList(false))
|
||
}
|
||
|
||
// 商户的经纬度存在,并且用户的经纬度也存在
|
||
if(res.data.latitude && res.data.longitude && userStore.userLocation.latitude && userStore.userLocation.longitude) {
|
||
let distance = getDistanceInMiles(res.data.latitude, res.data.longitude, userStore.userLocation.latitude, userStore.userLocation.longitude)
|
||
console.log('距离商家距离', distance)
|
||
storeDistance.value = distance
|
||
}
|
||
|
||
// 判断配送和自取的开通状态
|
||
const hasDelivery = +storeDetail.value.deliveryService === 1
|
||
const hasPickup = +storeDetail.value.selfPickup === 1
|
||
|
||
if (!hasDelivery && !hasPickup) {
|
||
// 两个都没开通，不显示切换组件
|
||
showDeliverySwitch.value = false
|
||
} else if (!hasDelivery && hasPickup) {
|
||
// 只开通自取，默认选中自取
|
||
deliveryMethod.value = 1
|
||
showDeliverySwitch.value = true
|
||
} else if (hasDelivery && !hasPickup) {
|
||
// 只开通配送，默认选中配送
|
||
deliveryMethod.value = 0
|
||
showDeliverySwitch.value = true
|
||
} else {
|
||
// 两个都开通，默认选中配送
|
||
deliveryMethod.value = 0
|
||
showDeliverySwitch.value = true
|
||
}
|
||
|
||
|
||
}).catch((error) => {
|
||
console.error('获取商家详情失败:', error);
|
||
}).finally(()=> {
|
||
loading.value = false
|
||
})
|
||
}
|
||
|
||
const storeCouponList = ref([])
|
||
function getMerchantCouponReceiveList() {
|
||
getMerchantCouponReceiveListApi(storeID.value).then((res: any)=> {
|
||
console.log('商家优惠券列表', res)
|
||
storeCouponList.value = res.data
|
||
})
|
||
}
|
||
|
||
const cartDataList = ref<MerchantCartVo[]>([])
|
||
function getCartInfo() {
|
||
if(!userStore.isLogin) return
|
||
appMerchantCartListByMerchantIdPost({
|
||
params: {
|
||
merchantId: storeID.value,
|
||
}
|
||
}).then((res: any)=> {
|
||
console.log('购物车列表', res)
|
||
cartDataList.value = res.data
|
||
|
||
// 购物车有菜品，查询菜品会员折扣价
|
||
if(cartDataList.value.length > 0) {
|
||
appMerchantCartCalculateSavings()
|
||
}
|
||
})
|
||
}
|
||
// 查询菜品会员折扣价
|
||
const cartSavingsData = ref({})
|
||
function appMerchantCartCalculateSavings() {
|
||
appMerchantCartCalculateSavingsPost({
|
||
body: cartDataList.value.map(item => item.id)
|
||
}).then(res=> {
|
||
console.log('菜品会员折扣价', res)
|
||
cartSavingsData.value = res.data
|
||
})
|
||
}
|
||
|
||
// 优惠券列表（静态数据）
|
||
const couponList = ref([
|
||
{ id: 1, text: '20% Off' },
|
||
{ id: 2, text: '30% Off' },
|
||
{ id: 3, text: '$5 Off' },
|
||
{ id: 4, text: '40% Off' },
|
||
])
|
||
|
||
// 跳转到优惠券页面
|
||
const couponPopupRef = ref()
|
||
function handleClaimNow() {
|
||
couponPopupRef.value.init()
|
||
}
|
||
|
||
|
||
// 用户查询菜单列表
|
||
function getMenuList() {
|
||
appMerchantMenuMenuListByUserPost({
|
||
params: {
|
||
merchantId: storeID.value,
|
||
}
|
||
}).then(res=> {
|
||
console.log('商家菜单列表', res)
|
||
// 这里可以处理商家菜单列表数据
|
||
}).catch(error => {
|
||
console.error('获取商家菜单列表失败:', error);
|
||
})
|
||
}
|
||
|
||
// 配送方式
|
||
const deliveryMethod = ref(0);
|
||
const deliveryMethodOptions = [t('pages-store.store.delivery'), t('pages-store.store.pickup')];
|
||
const showDeliverySwitch = ref(true); // 是否显示配送方式切换组件
|
||
|
||
function handleClickSegmented(index: number) {
|
||
console.log("切换配送方式:", index);
|
||
if(+storeDetail.value.deliveryService !== 1 && index === 0) {
|
||
uni.showToast({
|
||
title: t('pages-store.store.toast.deliveryService'),
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
if(+storeDetail.value.selfPickup !== 1 && index === 1) {
|
||
uni.showToast({
|
||
title: t('pages-store.store.toast.selfPickup'),
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
deliveryMethod.value = index
|
||
}
|
||
|
||
const activeTab = ref(0);
|
||
const tabs = ref<any[]>([]);
|
||
|
||
function daySuffix(value: unknown) {
|
||
const n = Number(value)
|
||
const isEn = String(locale.value || '').toLowerCase().startsWith('en')
|
||
if (isEn) {
|
||
return n === 1 ? ` ${t('pages-store.store.day')}` : ` ${t('pages-store.store.days')}`
|
||
}
|
||
return t('pages-store.store.days')
|
||
}
|
||
|
||
// 分页相关状态
|
||
const pageNum = ref(1);
|
||
const pageSize = ref(10);
|
||
const hasMore = ref(true);
|
||
const isLoadingMore = ref(false);
|
||
const dishListByQuery = ref<any[]>([]);
|
||
|
||
// 计算当前显示的商品列表（统一走 dishListByQuery，避免「全部」首屏用详情、加载更多再拼第 1 页造成重复）
|
||
const currentDishList = computed(() => dishListByQuery.value || [])
|
||
|
||
// 加载菜品列表
|
||
async function loadDishList(isLoadMore = false) {
|
||
if (isLoadingMore.value) return;
|
||
|
||
const currentTab = tabs.value[activeTab.value];
|
||
if (!currentTab) return;
|
||
|
||
try {
|
||
isLoadingMore.value = true;
|
||
|
||
// 非加载更多场景下，固定先请求第 1 页，并将内部 pageNum 重置为 1
|
||
if (!isLoadMore) {
|
||
pageNum.value = 1;
|
||
}
|
||
|
||
// 构建请求参数
|
||
const body: any = {
|
||
merchantId: storeID.value,
|
||
pageNum: isLoadMore ? pageNum.value : 1,
|
||
pageSize: pageSize.value
|
||
};
|
||
|
||
// 如果选中的 tab 的 key 不为空，则传递 menuId
|
||
if (currentTab.key !== '') {
|
||
body.menuId = currentTab.key;
|
||
}
|
||
|
||
console.log('加载菜品列表参数', body);
|
||
|
||
const res = await appMerchantDishDishIdGet({ body });
|
||
|
||
if (res.data && res.data.rows) {
|
||
if (isLoadMore) {
|
||
// 加载更多：按 id 去重，防止接口分页重叠或重复请求时的重复项
|
||
const existingIds = new Set(dishListByQuery.value.map((r: any) => r.id))
|
||
const nextRows = res.data.rows.filter((r: any) => r != null && !existingIds.has(r.id))
|
||
dishListByQuery.value = [...dishListByQuery.value, ...nextRows]
|
||
} else {
|
||
// 首次加载或刷新
|
||
dishListByQuery.value = res.data.rows;
|
||
}
|
||
|
||
const gotFullPage = res.data.rows.length >= pageSize.value;
|
||
// 更新分页信息
|
||
hasMore.value = gotFullPage;
|
||
|
||
if (isLoadMore) {
|
||
// 下一次请求再使用下一页页码
|
||
if (gotFullPage) {
|
||
pageNum.value++;
|
||
}
|
||
} else {
|
||
// 首次/刷新后，下一次「加载更多」应该从第 2 页开始
|
||
pageNum.value = gotFullPage ? 2 : 1;
|
||
}
|
||
} else {
|
||
hasMore.value = false;
|
||
}
|
||
} catch (error) {
|
||
console.error('加载菜品列表失败:', error);
|
||
} finally {
|
||
isLoadingMore.value = false;
|
||
}
|
||
}
|
||
|
||
// 监听 tab 切换，重置数据并加载当前 tab 的第一页
|
||
watch(activeTab, () => {
|
||
hasMore.value = true;
|
||
dishListByQuery.value = [];
|
||
loadDishList(false);
|
||
});
|
||
|
||
// 触底加载更多
|
||
onReachBottom(() => {
|
||
if (hasMore.value && !isLoadingMore.value) {
|
||
loadDishList(true);
|
||
}
|
||
});
|
||
|
||
const showStatusBar = useScrollThreshold()
|
||
onPageScroll((e) => {
|
||
uni.$emit('page-scroll', e)
|
||
})
|
||
|
||
function navigateToDishes(item: any) {
|
||
uni.navigateTo({
|
||
url: '/pages-store/pages/store/dishes?id=' + item.id + '&storeId=' + storeID.value,
|
||
})
|
||
}
|
||
function navigateBack() {
|
||
uni.navigateBack({
|
||
delta: 1,
|
||
})
|
||
}
|
||
|
||
function navigateToCart() {
|
||
uni.navigateTo({
|
||
url:
|
||
'/pages-user/pages/cart/store-cart'
|
||
+ '?storeId=' + storeID.value
|
||
+ '&storeName=' + encodeURIComponent(storeDetail.value.merchantName),
|
||
})
|
||
}
|
||
|
||
// 收藏店铺
|
||
function handleCollectionClick() {
|
||
debouncedEmit(storeDetail.value.isCollect, storeDetail.value.id, CollectionType.STORE, ()=> {
|
||
storeDetail.value.isCollect = !storeDetail.value.isCollect
|
||
})
|
||
}
|
||
// 收藏菜品
|
||
function handleDishCollectionClick(item: any) {
|
||
debouncedEmit(item.isCollect, item.id, CollectionType.DISH, ()=> {
|
||
item.isCollect = !item.isCollect
|
||
})
|
||
}
|
||
// 防抖处理函数
|
||
const debouncedEmit = debounce(1300, (isCollected: boolean, id: string, type: CollectionType, callback: ()=> void) => {
|
||
// 收藏接口
|
||
appCollectCollectPost({
|
||
body: {
|
||
targetId: id,
|
||
targetType: type
|
||
}
|
||
}).then(res=> {
|
||
callback()
|
||
})
|
||
}, {
|
||
atBegin: true, // 立即触发
|
||
})
|
||
|
||
function navigateTo(url: string) {
|
||
uni.navigateTo({ url })
|
||
}
|
||
|
||
function isSoldOutStock(stockLike: unknown) {
|
||
const n = Number(stockLike)
|
||
return !Number.isNaN(n) && n <= 0
|
||
}
|
||
|
||
function getDishPromoLabel(item: any): string {
|
||
const raw = item?.marketingLabel ?? item?.hotSaleTag ?? item?.rankTag ?? item?.promotionLabel
|
||
return typeof raw === 'string' && raw.trim() ? raw.trim() : ''
|
||
}
|
||
|
||
// 分享商家
|
||
function handleShare() {
|
||
uni.shareWithSystem({
|
||
summary: '',
|
||
href: `${Config.shareLink}pages-store/pages/store/index?id=${storeID.value}`,
|
||
success(){
|
||
// 分享完成，请注意此时不一定是成功分享
|
||
},
|
||
fail(){
|
||
// 分享失败
|
||
}
|
||
})
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<view
|
||
class="animate-in fade-in animate-ease-out animate-duration-300"
|
||
v-show="loading"
|
||
>
|
||
<StoreSkeleton/>
|
||
</view>
|
||
<view
|
||
class="animate-in fade-in animate-ease-in animate-duration-300"
|
||
v-if="!loading"
|
||
>
|
||
<view class="store-box">
|
||
<!-- 顶部导航栏 -->
|
||
<view class="fixed top-0 left-0 z-9 w-full transition-all pt-6rpx" :class="[showStatusBar ? 'bg-#fff' : '']">
|
||
<status-bar />
|
||
<view class="flex-center-sb px-30rpx h-88rpx">
|
||
<image
|
||
@click="navigateBack"
|
||
src="@img/chef/1327.png"
|
||
mode="aspectFill"
|
||
class="w-48rpx h-48rpx relative z-1"
|
||
/>
|
||
<image
|
||
@click="handleShare"
|
||
src="@img-store/1335.png"
|
||
mode="aspectFill"
|
||
class="w-48rpx h-48rpx relative z-1"
|
||
/>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 占位 -->
|
||
<status-bar />
|
||
<view class="h-44rpx"></view>
|
||
|
||
<!-- 店铺 Logo -->
|
||
<view class="flex justify-center ">
|
||
<image
|
||
:src="storeDetail?.shopImages?.split(',')[0]"
|
||
mode="aspectFill"
|
||
class="w-128rpx h-128rpx rounded-24rpx bg-common"
|
||
/>
|
||
</view>
|
||
|
||
<!-- 店铺信息区域 -->
|
||
<view class="px-30rpx pt-24rpx pb-30rpx">
|
||
<view class="text-center">
|
||
<!-- 店铺名称 -->
|
||
<view class="text-36rpx lh-44rpx text-#333 font-bold">
|
||
{{ storeDetail?.merchantName }}
|
||
</view>
|
||
<!-- 评分 + CHEFLINK -->
|
||
<view class="center text-24rpx lh-24rpx mt-16rpx">
|
||
<view class="flex items-center">
|
||
<text class="text-#333 font-500">{{ storeDetail?.rating }}</text>
|
||
<image
|
||
src="@img/chef/124.png"
|
||
class="w-24rpx h-24rpx mx-4rpx"
|
||
></image>
|
||
<text class="text-#7D7D7D">({{ storeDetail?.commentCount }})</text>
|
||
</view>
|
||
<view class="flex items-center text-#CE7138 px-10rpx">
|
||
<image
|
||
src="@img-store/1339.png"
|
||
class="w-24rpx h-24rpx mr-4rpx"
|
||
></image>
|
||
CHEFLINK
|
||
</view>
|
||
</view>
|
||
<!-- 总销量 -->
|
||
<view class="text-24rpx lh-24rpx text-#7D7D7D text-center mt-12rpx">
|
||
{{ t('common.sales') }}：{{ storeDetail?.totalOrderCount }}
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 配送信息卡片 -->
|
||
<view v-if="showDeliverySwitch" class="delivery-info-card">
|
||
<template v-if="+storeDetail?.deliveryService === 1 && deliveryMethod === 0">
|
||
<view class="delivery-info-left">
|
||
<view>{{ t('pages-store.store.tips4') }} $ {{ storeDetail?.minOrderPrice }}</view>
|
||
<view>{{ t('pages-store.store.tips5') }} $ {{ storeDetail?.deliveryFee }}{{ t('pages-store.store.start') }}</view>
|
||
</view>
|
||
<view class="delivery-info-divider"></view>
|
||
<view class="delivery-info-right">
|
||
<view class="text-32rpx lh-40rpx text-#333 font-500">
|
||
{{ storeDetail?.deliveryTime }}{{ daySuffix(storeDetail?.deliveryTime) }}
|
||
</view>
|
||
<view class="text-24rpx lh-24rpx text-#7D7D7D mt-8rpx">{{ t('pages-store.store.earTime') }}</view>
|
||
</view>
|
||
</template>
|
||
<template v-if="+storeDetail?.selfPickup === 1 && deliveryMethod === 1">
|
||
<view class="delivery-info-left">
|
||
<view v-if="cartDataList.length > 0 && cartSavingsData && cartSavingsData.savings > 0">
|
||
{{ t('pages-store.store.use') }} {{ Config.appName }} {{ t('pages-store.store.tips3') }} ${{ cartSavingsData.savings }} {{ t('pages-store.store.discount') }}
|
||
</view>
|
||
<view v-else>--</view>
|
||
</view>
|
||
<view class="delivery-info-divider"></view>
|
||
<view class="delivery-info-right">
|
||
<view class="text-32rpx lh-40rpx text-#333 font-500">{{ storeDetail?.pickupTime }}{{ t('common.minutes') }}</view>
|
||
<view class="text-24rpx lh-24rpx text-#7D7D7D mt-8rpx">{{ t('pages-store.store.earTime') }}</view>
|
||
</view>
|
||
</template>
|
||
</view>
|
||
|
||
<!-- 优惠券标签行 -->
|
||
<view class="mt-24rpx flex items-center" v-if="storeCouponList.length">
|
||
<scroll-view
|
||
scroll-x
|
||
class="coupon-scroll flex-1"
|
||
:show-scrollbar="false"
|
||
enable-flex
|
||
>
|
||
<view class="coupon-container">
|
||
<view
|
||
v-for="(coupon, index) in storeCouponList"
|
||
:key="coupon.id || index"
|
||
class="coupon-item"
|
||
>
|
||
<view class="coupon-tag">
|
||
<text class="coupon-text">{{ coupon.nameZh }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
<view @click="handleClaimNow" class="flex items-center shrink-0 ml-16rpx">
|
||
<text class="text-28rpx lh-28rpx font-500 text-#CE7138 mr-4rpx">{{ t('pages-store.store.claimNow') }}</text>
|
||
<i class="i-carbon:chevron-right text-24rpx text-#CE7138"></i>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 分类标签（胶囊样式） -->
|
||
<scroll-view scroll-x class="w-full" :show-scrollbar="false" enable-flex>
|
||
<view class="flex items-center px-30rpx pb-24rpx">
|
||
<view
|
||
v-for="(item, index) in tabs"
|
||
:key="item.key"
|
||
@click="activeTab = index"
|
||
class="tab-chip"
|
||
:class="activeTab === index ? 'tab-chip--active' : ''"
|
||
>
|
||
{{ item.title }}
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
|
||
<!-- 商品列表 -->
|
||
<view v-if="tabs.length > 0" class="px-30rpx pb-180rpx">
|
||
<view v-if="currentDishList.length > 0" class="grid grid-cols-2 gap-24rpx items-start">
|
||
<template v-for="item in currentDishList" :key="item.id">
|
||
<view @click="navigateToDishes(item)" class="dish-card" :class="{ 'dish-card--soldout': isSoldOutStock(item?.stock) }">
|
||
<!-- 商品图片 -->
|
||
<view class="dish-card-image">
|
||
<!-- NEW 绑带标签 -->
|
||
<view v-if="item.isNew == 1" class="dish-new-ribbon">
|
||
<text class="dish-new-ribbon__text">NEW</text>
|
||
</view>
|
||
<view @click.stop="handleDishCollectionClick(item)" class="w-56rpx h-56rpx absolute z-4 top-12rpx right-12rpx center">
|
||
<image
|
||
v-if="!item.isCollect"
|
||
src="@img-store/1334.png"
|
||
mode="aspectFill"
|
||
class="w-44rpx h-44rpx"
|
||
style="filter: drop-shadow(0 2rpx 6rpx rgba(0,0,0,0.18))"
|
||
/>
|
||
<image
|
||
v-else
|
||
src="@img-store/1337.png"
|
||
mode="aspectFill"
|
||
class="w-44rpx h-44rpx"
|
||
style="filter: drop-shadow(0 2rpx 6rpx rgba(0,0,0,0.18))"
|
||
/>
|
||
</view>
|
||
<!-- 已售完遮罩 -->
|
||
<view v-if="isSoldOutStock(item?.stock)" class="dish-sold-dim"></view>
|
||
<!-- 已售完标签 -->
|
||
<view v-if="isSoldOutStock(item?.stock)" class="dish-sold-tag">{{ t('common.prompt.soldOut') }}</view>
|
||
<image
|
||
:src="item?.dishImage?.split(',')[0]"
|
||
mode="aspectFill"
|
||
class="dish-card-img"
|
||
/>
|
||
</view>
|
||
<!-- 卡片信息区 -->
|
||
<view class="dish-card-body">
|
||
<!-- 价格 + 销量 -->
|
||
<view class="flex items-start justify-between gap-12rpx mb-14rpx">
|
||
<view class="min-w-0 flex-1">
|
||
<text class="dish-price">$ {{ item.discountPrice }}</text>
|
||
<text
|
||
v-if="Number(item?.originalPrice) > Number(item?.discountPrice)"
|
||
class="dish-original-price"
|
||
>$ {{ item.originalPrice }}</text>
|
||
</view>
|
||
<text class="dish-sales shrink-0">{{ t('pages-store.store.sales') }}：{{ item.salesCount }}</text>
|
||
</view>
|
||
<!-- 商品名称 -->
|
||
<view class="dish-title line-clamp-2 mb-16rpx">
|
||
{{ item.dishName }}
|
||
</view>
|
||
<!-- 会员价 + 加购按钮 -->
|
||
<view class="flex items-center justify-between gap-12rpx">
|
||
<view
|
||
v-if="Number(item.memberPrice) > 0"
|
||
class="dish-member shrink min-w-0"
|
||
>
|
||
<text class="dish-member-inner">{{ t('pages-store.store.members') }}: $ {{ item.memberPrice }}</text>
|
||
</view>
|
||
<view v-else class="flex-1 min-w-0"></view>
|
||
<view class="dish-add-btn center shrink-0">
|
||
<image
|
||
src="@img/chef/1285.png"
|
||
class="w-28rpx h-28rpx"
|
||
></image>
|
||
</view>
|
||
</view>
|
||
<!-- 营销标签 -->
|
||
<view
|
||
v-if="getDishPromoLabel(item)"
|
||
class="dish-promo mt-16rpx"
|
||
>
|
||
<text class="dish-promo-text">{{ getDishPromoLabel(item) }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
</view>
|
||
<template v-else>
|
||
<view class="py-100rpx center">
|
||
<image class="w-250rpx h-250rpx" src="@img/chef/100.png"></image>
|
||
</view>
|
||
</template>
|
||
</view>
|
||
|
||
<!-- 底部购物车浮窗 -->
|
||
<view
|
||
v-if="userStore.isLogin && cartDataList.length > 0"
|
||
class="store-cart-float"
|
||
@click="navigateToCart"
|
||
>
|
||
<view class="store-cart-float-inner">
|
||
<view class="relative mr-16rpx">
|
||
<view class="i-carbon:shopping-cart text-44rpx text-#333"></view>
|
||
<view class="store-cart-badge">{{ cartDataList.length > 99 ? '99+' : cartDataList.length }}</view>
|
||
</view>
|
||
<text class="text-28rpx lh-28rpx text-#333 font-500">{{ t('pages-user.cart.viewCart') }}</text>
|
||
<view class="text-28rpx text-#999 ml-55rpx"></view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 会员省钱提示条 -->
|
||
<view
|
||
@click="navigateTo('/pages-user/pages/member/index')"
|
||
v-if="cartDataList.length > 0 && cartSavingsData && cartSavingsData.savings > 0"
|
||
class="store-savings-bar"
|
||
>
|
||
<image
|
||
src="@img/chef/1289.png"
|
||
class="mr-10rpx w-32rpx h-32rpx shrink-0"
|
||
></image>
|
||
<text class="text-[#fff] text-24rpx lh-24rpx">
|
||
{{ t('pages-store.store.use') }} {{ Config.appName }} {{ t('pages-store.store.tips3') }} ${{ cartSavingsData.savings }} {{ t('pages-store.store.discount') }}
|
||
</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<coupon-popup
|
||
ref="couponPopupRef"
|
||
:coupon-list="storeCouponList"
|
||
@confirm="getMerchantCouponReceiveList"
|
||
/>
|
||
</template>
|
||
|
||
<style>
|
||
page {
|
||
background-color: #F6F6F6;
|
||
}
|
||
</style>
|
||
|
||
<style scoped lang="scss">
|
||
/* ====== 配送信息卡片 ====== */
|
||
.delivery-info-card {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-top: 30rpx;
|
||
padding: 24rpx 40rpx;
|
||
border: 2rpx solid #D8D8D8;
|
||
border-radius: 20rpx;
|
||
min-height: 140rpx;
|
||
}
|
||
|
||
.delivery-info-left {
|
||
flex: 1;
|
||
text-align: center;
|
||
font-size: 24rpx;
|
||
line-height: 36rpx;
|
||
color: #CE7138;
|
||
padding-right: 30rpx;
|
||
}
|
||
|
||
.delivery-info-divider {
|
||
width: 2rpx;
|
||
height: 100rpx;
|
||
background: #D8D8D8;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.delivery-info-right {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
padding-left: 30rpx;
|
||
}
|
||
|
||
/* ====== 优惠券标签 ====== */
|
||
.coupon-scroll {
|
||
width: 100%;
|
||
}
|
||
|
||
.coupon-container {
|
||
display: flex;
|
||
align-items: center;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.coupon-item {
|
||
margin-right: 15rpx;
|
||
flex-shrink: 0;
|
||
|
||
&:last-child {
|
||
margin-right: 0;
|
||
}
|
||
}
|
||
|
||
.coupon-tag {
|
||
min-width: 110rpx;
|
||
height: 52rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 0 18rpx;
|
||
position: relative;
|
||
background-image: url("/static/images/5008.png");
|
||
background-size: 100% 100%;
|
||
background-repeat: no-repeat;
|
||
}
|
||
|
||
.coupon-text {
|
||
font-size: 24rpx;
|
||
line-height: 24rpx;
|
||
color: #CE7138;
|
||
font-weight: 400;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
/* ====== 胶囊标签 ====== */
|
||
.tab-chip {
|
||
height: 60rpx;
|
||
line-height: 60rpx;
|
||
padding: 0 32rpx;
|
||
border-radius: 30rpx;
|
||
font-size: 26rpx;
|
||
color: #333;
|
||
border: 2rpx solid #E0E0E0;
|
||
white-space: nowrap;
|
||
flex-shrink: 0;
|
||
margin-right: 20rpx;
|
||
text-align: center;
|
||
|
||
&:last-child {
|
||
margin-right: 0;
|
||
}
|
||
|
||
&--active {
|
||
background: #333;
|
||
color: #fff;
|
||
border-color: #333;
|
||
}
|
||
}
|
||
|
||
/* ====== 商品卡片 ====== */
|
||
.dish-card {
|
||
width: 100%;
|
||
border-radius: 24rpx;
|
||
overflow: hidden;
|
||
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
|
||
background: #fff;
|
||
|
||
&--soldout {
|
||
opacity: 0.7;
|
||
}
|
||
}
|
||
|
||
.dish-card-image {
|
||
position: relative;
|
||
width: 100%;
|
||
height: 330rpx;
|
||
background: #f0f0f0;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.dish-card-img {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: block;
|
||
z-index: 1;
|
||
}
|
||
|
||
.dish-card-body {
|
||
padding: 20rpx 20rpx 22rpx;
|
||
}
|
||
|
||
.dish-price {
|
||
color: #e02e24;
|
||
font-size: 32rpx;
|
||
font-weight: 600;
|
||
line-height: 1.2;
|
||
}
|
||
|
||
.dish-original-price {
|
||
margin-left: 10rpx;
|
||
color: #b3b3b3;
|
||
font-size: 22rpx;
|
||
font-weight: 400;
|
||
text-decoration: line-through;
|
||
vertical-align: baseline;
|
||
}
|
||
|
||
.dish-sales {
|
||
color: #999;
|
||
font-size: 24rpx;
|
||
line-height: 1.35;
|
||
max-width: 48%;
|
||
text-align: right;
|
||
}
|
||
|
||
.dish-title {
|
||
color: #1a1a1a;
|
||
font-size: 28rpx;
|
||
font-weight: 500;
|
||
line-height: 1.45;
|
||
}
|
||
|
||
.dish-member {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
max-width: calc(100% - 88rpx);
|
||
}
|
||
|
||
.dish-member-inner {
|
||
display: inline-block;
|
||
padding: 6rpx 18rpx;
|
||
border-radius: 999rpx;
|
||
background: linear-gradient(180deg, #fff5eb 0%, #ffe8d6 100%);
|
||
color: #c45c1a;
|
||
font-size: 24rpx;
|
||
font-weight: 500;
|
||
line-height: 1.35;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.dish-add-btn {
|
||
width: 56rpx;
|
||
height: 56rpx;
|
||
border-radius: 50%;
|
||
background: #14181b;
|
||
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.12);
|
||
}
|
||
|
||
.dish-promo {
|
||
padding: 12rpx 16rpx;
|
||
border-radius: 12rpx;
|
||
background: #fff0f0;
|
||
}
|
||
|
||
.dish-promo-text {
|
||
color: #e02e24;
|
||
font-size: 22rpx;
|
||
font-weight: 500;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
/* NEW 绑带标签 */
|
||
.dish-new-ribbon {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 184rpx;
|
||
height: 184rpx;
|
||
overflow: hidden;
|
||
z-index: 5;
|
||
pointer-events: none;
|
||
|
||
&__text {
|
||
position: absolute;
|
||
top: 26rpx;
|
||
left: -66rpx;
|
||
width: 240rpx;
|
||
text-align: center;
|
||
font-size: 22rpx;
|
||
font-weight: 700;
|
||
color: #fff;
|
||
letter-spacing: 2rpx;
|
||
line-height: 44rpx;
|
||
background: #E23636;
|
||
transform: rotate(-45deg);
|
||
}
|
||
}
|
||
|
||
/* 已售完遮罩 */
|
||
.dish-sold-dim {
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
z-index: 2;
|
||
background: rgba(20, 24, 27, 0.42);
|
||
pointer-events: none;
|
||
}
|
||
|
||
/* 已售完标签 */
|
||
.dish-sold-tag {
|
||
position: absolute;
|
||
z-index: 3;
|
||
left: 16rpx;
|
||
top: 16rpx;
|
||
padding: 0 14rpx;
|
||
height: 48rpx;
|
||
border-radius: 24rpx;
|
||
background: rgba(20, 24, 27, 0.75);
|
||
color: #fff;
|
||
font-size: 24rpx;
|
||
font-weight: 500;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
pointer-events: none;
|
||
}
|
||
|
||
/* ====== 底部购物车浮窗 ====== */
|
||
.store-cart-float {
|
||
position: fixed;
|
||
bottom: calc(40rpx + env(safe-area-inset-bottom));
|
||
left: 50%;
|
||
width: 90%;
|
||
transform: translateX(-50%);
|
||
z-index: 9;
|
||
}
|
||
|
||
.store-cart-float-inner {
|
||
justify-content: space-between;
|
||
display: flex;
|
||
align-items: center;
|
||
height: 96rpx;
|
||
padding: 0 36rpx;
|
||
border-radius: 48rpx;
|
||
background: rgba(255, 255, 255, 0.75);
|
||
backdrop-filter: blur(20px);
|
||
-webkit-backdrop-filter: blur(20px);
|
||
box-shadow: 0 8rpx 40rpx rgba(0, 0, 0, 0.12);
|
||
border: 1rpx solid rgba(255, 255, 255, 0.6);
|
||
}
|
||
|
||
.store-cart-badge {
|
||
position: absolute;
|
||
top: -8rpx;
|
||
right: -12rpx;
|
||
min-width: 32rpx;
|
||
height: 32rpx;
|
||
padding: 0 8rpx;
|
||
font-size: 20rpx;
|
||
line-height: 32rpx;
|
||
font-weight: 600;
|
||
color: #fff;
|
||
text-align: center;
|
||
background: #e23636;
|
||
border-radius: 999rpx;
|
||
}
|
||
|
||
/* ====== 会员省钱提示条 ====== */
|
||
.store-savings-bar {
|
||
position: fixed;
|
||
bottom: calc(160rpx + env(safe-area-inset-bottom));
|
||
left: 50%;
|
||
width: 90%;
|
||
transform: translateX(-50%);
|
||
z-index: 8;
|
||
height: 64rpx;
|
||
border-radius: 32rpx;
|
||
background: #CE7138;
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 0 32rpx;
|
||
white-space: nowrap;
|
||
}
|
||
</style> |