426 lines
10 KiB
Vue
426 lines
10 KiB
Vue
<template>
|
||
<view
|
||
class="u-relative u-flex item box-shadow"
|
||
@tap="emitEvent('showDetail')"
|
||
>
|
||
<view class="limit-discount" v-if="data.is_time_discount">限时折扣</view>
|
||
<!-- 已下架 -->
|
||
<view
|
||
v-if="!data.isSale"
|
||
style="
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 100%;
|
||
height: 100%;
|
||
z-index: 9999;
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
background-color: rgba(0, 0, 0, 0.6);
|
||
"
|
||
>
|
||
<image
|
||
style="width: 220px; height: 220px"
|
||
src="@/static/iconImg/icon_goods_yxj.svg"
|
||
/>
|
||
</view>
|
||
<!-- 未开售 -->
|
||
<view
|
||
v-else-if="
|
||
!isProductAvailable(
|
||
data.days,
|
||
data.startTime.substring(11),
|
||
data.endTime.substring(11)
|
||
)
|
||
"
|
||
style="
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 100%;
|
||
height: 100%;
|
||
z-index: 9999;
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
background-color: rgba(0, 0, 0, 0.6);
|
||
"
|
||
>
|
||
<image
|
||
style="width: 220px; height: 220px"
|
||
src="@/static/iconImg/icon_goods_wks.svg"
|
||
/>
|
||
</view>
|
||
|
||
<!-- 已售罄 -->
|
||
<view
|
||
v-else-if="data.isStock && data.stockNumber <= 0"
|
||
style="
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 100%;
|
||
height: 100%;
|
||
z-index: 9999;
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
background-color: rgba(0, 0, 0, 0.6);
|
||
"
|
||
>
|
||
<image
|
||
style="width: 220px; height: 220px"
|
||
src="@/static/iconImg/icon_goods_sq.svg"
|
||
/>
|
||
</view>
|
||
<!-- 库存不足 -->
|
||
<view
|
||
v-else-if="data.isSoldStock"
|
||
style="
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 100%;
|
||
height: 100%;
|
||
z-index: 9999;
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
background-color: rgba(0, 0, 0, 0.6);
|
||
"
|
||
>
|
||
<image
|
||
style="width: 220px; height: 220px"
|
||
src="@/static/iconImg/Insufficient_inventory.svg"
|
||
/>
|
||
</view>
|
||
|
||
<view class="img">
|
||
<image lazy-load :src="data.coverImg" mode="aspectFill"></image>
|
||
</view>
|
||
<!-- <image lazy-load class="img" :src="data.coverImg" mode="" ></image> -->
|
||
<view class="info u-flex u-flex-col u-row-right">
|
||
<view
|
||
class="u-flex w-full u-row-right u-p-r-20 u-p-b-16 u-flex-1 u-flex-col"
|
||
>
|
||
<template v-if="!isSellout">
|
||
<template v-if="data.type == 'sku' || data.groupType == 1">
|
||
<view class="u-flex u-row-right w-full">
|
||
<view class="u-flex">
|
||
<button
|
||
class="btn"
|
||
hover-class="btn-hover-class"
|
||
@tap.stop="emitEvent('chooseGuige')"
|
||
>
|
||
选规格
|
||
</button>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<template v-else-if="data.type == 'weight'">
|
||
<view class="u-flex u-row-right w-full">
|
||
<view class="u-flex">
|
||
<button
|
||
class="btn"
|
||
hover-class="btn-hover-class"
|
||
@tap.stop="emitEvent('tapweigh')"
|
||
>
|
||
称重
|
||
</button>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<template v-else>
|
||
<view class="u-flex w-full u-row-right">
|
||
<view class="u-flex icon-btn">
|
||
<template v-if="data.chooseNumber">
|
||
<view class="u-flex" @tap.stop="emitEvent('reduce')">
|
||
<image
|
||
src="/pagesCreateOrder/static/images/icon-reduce.svg"
|
||
class="icon"
|
||
mode=""
|
||
>
|
||
</image>
|
||
</view>
|
||
<view class="u-font-32">
|
||
{{ data.chooseNumber }}
|
||
</view>
|
||
</template>
|
||
<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>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
</template>
|
||
<template v-else>
|
||
<view class="u-m-t-16 u-row-center u-col-center"> 已售罄 </view>
|
||
</template>
|
||
</view>
|
||
<view class="bg-fff u-p-20 w-full">
|
||
<view class="u-flex u-row-between u-font-16">
|
||
<view>{{ data.name }}</view>
|
||
<view class="u-flex" v-if="data.is_time_discount">
|
||
<view class="font-bold u-m-t-16">
|
||
￥{{ data.timeLimitPrice }}
|
||
</view>
|
||
<view class="u-m-t-16 old-price"> ￥{{ data.lowPrice }} </view>
|
||
</view>
|
||
|
||
<view class="font-bold u-m-t-16" v-else> ￥{{ data.lowPrice }} </view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { computed, toRef, toRefs, inject, watch } from "vue";
|
||
import dayjs from "dayjs";
|
||
import isBetween from "dayjs/plugin/isBetween";
|
||
const yskUtils = inject("yskUtils");
|
||
dayjs.extend(isBetween);
|
||
import { onLoad } from "@dcloudio/uni-app";
|
||
const props = defineProps({
|
||
limitTimeDiscount: {
|
||
type: Object,
|
||
default: () => {
|
||
return null;
|
||
},
|
||
},
|
||
img: {
|
||
type: Object,
|
||
default: {
|
||
width: "250rpx",
|
||
height: "272rpx",
|
||
},
|
||
},
|
||
windowWidth: {
|
||
//px
|
||
type: Number,
|
||
default: 0,
|
||
},
|
||
windowHeight: {
|
||
//px
|
||
type: Number,
|
||
default: 0,
|
||
},
|
||
layout: {
|
||
type: String,
|
||
default: "default",
|
||
},
|
||
index: {
|
||
type: [Number, String],
|
||
},
|
||
isSeatFee: {
|
||
//是否为餐位费
|
||
type: Boolean,
|
||
default: false,
|
||
},
|
||
data: {
|
||
type: Object,
|
||
default: () => {
|
||
return {
|
||
chooseNumber: 0,
|
||
};
|
||
},
|
||
},
|
||
gap: {
|
||
//px
|
||
type: Number,
|
||
default: 20,
|
||
},
|
||
});
|
||
|
||
watch(
|
||
() => props.windowWidth,
|
||
(newval) => {
|
||
console.log(newval);
|
||
}
|
||
);
|
||
|
||
const computedImgStyle = computed(() => {
|
||
const stylobj = {
|
||
width: props.img.width,
|
||
height: props.img.height,
|
||
};
|
||
if (props.layout == "default") {
|
||
stylobj.width = (props.windowWidth - props.gap * 3) / 2 + "px";
|
||
stylobj.height = (props.windowHeight - props.gap * 2 - 40) / 2 + "px";
|
||
console.log(stylobj);
|
||
return stylobj;
|
||
}
|
||
return stylobj;
|
||
});
|
||
|
||
// const asd = computed(()=>{
|
||
|
||
// })
|
||
// function computedImgStyle() {
|
||
// return {
|
||
// width: props.img.width,
|
||
// height: props.img.height
|
||
// }
|
||
// }
|
||
|
||
//判断是否是菜品
|
||
function isGoods() {
|
||
return props.data.hasOwnProperty("id");
|
||
}
|
||
|
||
//判断商品是否售尽
|
||
const isSellout = computed(() => {
|
||
const item = props.data;
|
||
if (!isGoods()) {
|
||
return false;
|
||
}
|
||
return (
|
||
item.isPauseSale ||
|
||
(item.typeEnum !== "sku" && item.isStock == 1 && item.stockNumber <= 0)
|
||
);
|
||
});
|
||
|
||
const emits = defineEmits([
|
||
"add",
|
||
"reduce",
|
||
"chooseGuige",
|
||
"showDetail",
|
||
"tapweigh",
|
||
]);
|
||
// 判断商品是否在可售时间内
|
||
// 判断商品是否在可售时间内
|
||
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()]; // 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;
|
||
}
|
||
// 新增兼容了隔天时间区域兼容，需引入isBetween插件
|
||
|
||
function emitEvent(emitName) {
|
||
if (isGoods()) {
|
||
emits(emitName, props.index);
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.icon {
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
}
|
||
|
||
.icon-btn {
|
||
gap: 14rpx;
|
||
}
|
||
|
||
.btn {
|
||
background: #eb4f4f;
|
||
border-radius: 100rpx;
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
padding: 0 50rpx;
|
||
color: #fff;
|
||
}
|
||
|
||
.btn-hover-class {
|
||
opacity: 0.6;
|
||
}
|
||
|
||
.item {
|
||
// width: 250rpx;
|
||
// height: 272rpx;
|
||
background: #f9b798;
|
||
border-radius: 12px;
|
||
overflow: hidden;
|
||
width: 100%;
|
||
height: 100%;
|
||
position: relative;
|
||
|
||
.img {
|
||
position: absolute;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
top: 0;
|
||
z-index: 1;
|
||
object-fit: contain;
|
||
|
||
image {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: contain;
|
||
}
|
||
}
|
||
|
||
.info {
|
||
position: absolute;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
top: 0;
|
||
// background: rgba(37, 22, 15, 0.5);
|
||
border-radius: 0 0 12px 12px;
|
||
overflow: hidden;
|
||
z-index: 2;
|
||
}
|
||
.limit-discount {
|
||
background-color: #cc5617;
|
||
padding: 10rpx 20rpx;
|
||
white-space: nowrap;
|
||
text-align: center;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #ffffff;
|
||
border-radius: 20rpx 0rpx 20rpx 0rpx;
|
||
z-index: 9;
|
||
color: #fff;
|
||
}
|
||
}
|
||
.old-price {
|
||
text-decoration: line-through;
|
||
color: #999;
|
||
}
|
||
</style> |