232 lines
5.8 KiB
Vue
232 lines
5.8 KiB
Vue
<template>
|
||
<view class="u-relative u-flex item">
|
||
|
||
<up-image :src="data.coverImg" mode="aspectFill" :width="img.width" :height="img.height"></up-image>
|
||
<view class="info u-flex u-row-between u-col-top u-flex-col" >
|
||
<view >
|
||
<view >
|
||
<text class="up-line-1">{{data.name}}</text>
|
||
</view>
|
||
<view class="u-font-32 font-bold u-m-t-16">
|
||
￥{{data.lowPrice}}
|
||
</view>
|
||
<template v-if="data.type=='weight'">
|
||
<view class="btnweigh">称重</view>
|
||
</template>
|
||
</view>
|
||
<view class="u-flex" v-if="!isSellout">
|
||
<template v-if="data.type == 'sku'||data.groupType==1">
|
||
<button class="btn" hover-class="btn-hover-class" @tap="emitEvent('chooseGuige')">选规格</button>
|
||
</template>
|
||
<template v-else>
|
||
<view class="u-flex icon-btn">
|
||
<view class="u-flex" @tap.stop="emitEvent(data.type=='weight'?'tapweigh':'add')">
|
||
<image src="/pagesCreateOrder/static/images/icon-add.svg" class="icon" mode=""></image>
|
||
</view>
|
||
<template v-if="data.chooseNumber">
|
||
<view class="u-font-32">
|
||
{{(data.chooseNumber).toFixed(2)}}
|
||
</view>
|
||
<view class="u-flex" @tap.stop="emitEvent('reduce')">
|
||
<image src="/pagesCreateOrder/static/images/icon-reduce.svg" class="icon" mode="">
|
||
</image>
|
||
</view>
|
||
</template>
|
||
</view>
|
||
</template>
|
||
|
||
|
||
|
||
</view>
|
||
<template v-if="isSellout">
|
||
<view class="isSellout" v-if="data.isSale == 0" >
|
||
<image class="isSellout_icon" src="/pagesCreateOrder/static/images/no-toDown.svg" mode=""></image>
|
||
</view>
|
||
<view class="isSellout" v-else-if="!isProductAvailable(data.days,data.startTime,data.endTime)" >
|
||
<image class="isSellout_icon" src="/pagesCreateOrder/static/images/no-saleTime.svg" mode=""></image>
|
||
</view>
|
||
<view class="isSellout" v-else-if="data.isSoldStock == 1" >
|
||
<image class="isSellout_icon" src="/pagesCreateOrder/static/images/no-sold.svg" mode=""></image>
|
||
</view>
|
||
<view class="isSellout" v-else-if="data.isStock == 1 && data.stockNumber <= 0" >
|
||
<image class="isSellout_icon" src="/pagesCreateOrder/static/images/no-stock.svg" mode=""></image>
|
||
</view>
|
||
</template>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { computed, toRef } from 'vue';
|
||
import util from '../util.js';
|
||
import dayjs from "dayjs";
|
||
import isBetween from "dayjs/plugin/isBetween.js";
|
||
dayjs.extend(isBetween)
|
||
|
||
const props = defineProps({
|
||
img: {
|
||
type: Object,
|
||
default: {
|
||
width: '250rpx',
|
||
height: '272rpx'
|
||
}
|
||
},
|
||
index: {
|
||
type: [Number, String],
|
||
},
|
||
isSeatFee: {
|
||
//是否为餐位费
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
data: {
|
||
type: Object,
|
||
default: () => {
|
||
return {
|
||
chooseNumber: 0
|
||
}
|
||
}
|
||
}
|
||
})
|
||
|
||
/**
|
||
* 判断是否是菜品
|
||
*/
|
||
function isGoods() {
|
||
return props.data.hasOwnProperty('id')
|
||
}
|
||
|
||
/**
|
||
* 判断商品是否售尽
|
||
*/
|
||
const isSellout = computed(() => {
|
||
const item = props.data
|
||
if (!isGoods()) {
|
||
return false
|
||
}
|
||
return (
|
||
(item.isStock == 1 && item.stockNumber <= 0) || item.isSoldStock == 1 || item.isSale == 0 || !isProductAvailable(item.days,item.startTime,item.endTime)
|
||
);
|
||
})
|
||
// 判断商品是否在可售时间内
|
||
function isProductAvailable(sellDaysStr, startTimeStr, endTimeStr) {
|
||
// 将后端返回的字符串转换为数组
|
||
const sellDays = sellDaysStr.split(',');
|
||
const now = dayjs();
|
||
const days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
|
||
const currentDay = days[now.day()];
|
||
const currentTime = now.format('HH:mm:ss');
|
||
|
||
// console.log('当前日期:', currentDay);
|
||
// console.log('可售日期列表:', sellDays);
|
||
// 检查当前周几是否在可售周几列表中
|
||
if (!sellDays.includes(currentDay)) {
|
||
// console.log('当前日期不在可售日期列表中');
|
||
return false;
|
||
}
|
||
const startTime = dayjs(`${now.format('YYYY-MM-DD')} ${startTimeStr}`);
|
||
let endTime = dayjs(`${now.format('YYYY-MM-DD')} ${endTimeStr}`);
|
||
// 处理跨天情况
|
||
if (endTime.isBefore(startTime)) {
|
||
endTime = endTime.add(1, 'day');
|
||
}
|
||
|
||
// console.log('当前时间:', now.format('YYYY-MM-DD HH:mm:ss'));
|
||
// console.log('开始时间:', startTime.format('YYYY-MM-DD HH:mm:ss'));
|
||
// console.log('结束时间:', endTime.format('YYYY-MM-DD HH:mm:ss'));
|
||
|
||
const isInRange = now.isBetween(startTime, endTime, null, '[)');
|
||
// console.log('当前时间是否在可售时间范围内:', isInRange);
|
||
|
||
return isInRange;
|
||
|
||
}
|
||
|
||
const emits = defineEmits(['add', 'reduce', 'chooseGuige','tapweigh'])
|
||
|
||
function emitEvent(emitName) {
|
||
if (isGoods()) {
|
||
emits(emitName, props.index)
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.icon {
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
}
|
||
|
||
.icon-btn {
|
||
gap: 14rpx;
|
||
}
|
||
|
||
.btn {
|
||
background: #EB4F4F;
|
||
border-radius: 100rpx;
|
||
font-size: 28rpx;
|
||
height: 56rpx;
|
||
line-height: 56rpx;
|
||
color: #fff;
|
||
}
|
||
|
||
.btnweigh {
|
||
margin: 5rpx 0;
|
||
width: 100rpx;
|
||
background: linear-gradient(124deg, #73c969 6%, #27921b 93%);
|
||
border-radius: 10rpx;
|
||
font-size: 24rpx;
|
||
padding: 6rpx 0;
|
||
text-align: center;
|
||
}
|
||
|
||
.btn-hover-class {
|
||
opacity: .6;
|
||
}
|
||
|
||
image {
|
||
will-change: transform
|
||
}
|
||
|
||
.item {
|
||
// width: 250rpx;
|
||
// height: 272rpx;
|
||
background: #F9B798;
|
||
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
||
overflow: hidden;
|
||
|
||
.img {
|
||
width: 250rpx;
|
||
height: 272rpx;
|
||
}
|
||
|
||
.info {
|
||
position: absolute;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
color: #fff;
|
||
padding: 32rpx 24rpx 24rpx 24rpx;
|
||
top: 0;
|
||
background: rgba(37, 22, 15, 0.5);
|
||
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
||
overflow: hidden;
|
||
}
|
||
}
|
||
|
||
.isSellout{
|
||
width: 100%;
|
||
height: 100%;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
background-color: rgba(0, 0, 0, 0.6);
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
.isSellout_icon{
|
||
height: 60%;
|
||
width: 60%;
|
||
}
|
||
}
|
||
</style> |