订单结算修改
This commit is contained in:
File diff suppressed because it is too large
Load Diff
@@ -1,310 +1,426 @@
|
||||
<template>
|
||||
<view class="u-relative u-flex item box-shadow " @tap="emitEvent('showDetail')">
|
||||
<!-- 已下架 -->
|
||||
<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, .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, .6);">
|
||||
<image style="width: 220px;height: 220px;" src="@/static/iconImg/icon_goods_wks.svg" />
|
||||
</view>
|
||||
<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, .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, .6);">
|
||||
<image style="width: 220px;height: 220px;" src="@/static/iconImg/Insufficient_inventory.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="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=" font-bold u-m-t-16">
|
||||
￥{{data.lowPrice}}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
</view>
|
||||
</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,
|
||||
watch
|
||||
} from 'vue';
|
||||
import dayjs from "dayjs";
|
||||
import isBetween from "dayjs/plugin/isBetween";
|
||||
dayjs.extend(isBetween)
|
||||
import {
|
||||
onLoad
|
||||
} from '@dcloudio/uni-app'
|
||||
const props = defineProps({
|
||||
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
|
||||
}
|
||||
})
|
||||
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);
|
||||
})
|
||||
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 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(()=>{
|
||||
|
||||
// const asd = computed(()=>{
|
||||
// })
|
||||
// function computedImgStyle() {
|
||||
// return {
|
||||
// width: props.img.width,
|
||||
// height: props.img.height
|
||||
// }
|
||||
// }
|
||||
|
||||
// })
|
||||
// function computedImgStyle() {
|
||||
// return {
|
||||
// width: props.img.width,
|
||||
// height: props.img.height
|
||||
// }
|
||||
// }
|
||||
//判断是否是菜品
|
||||
function isGoods() {
|
||||
return props.data.hasOwnProperty("id");
|
||||
}
|
||||
|
||||
//判断是否是菜品
|
||||
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 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'])
|
||||
// 判断商品是否在可售时间内
|
||||
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()];
|
||||
// 将后端返回的字符串转换为数组
|
||||
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); // 检查当前周几是否在可售周几列表中
|
||||
|
||||
// console.log('当前日期:', currentDay);
|
||||
// console.log('可售日期列表:', sellDays);
|
||||
if (!sellDays.includes(currentDay)) {
|
||||
// console.log('当前日期不在可售日期列表中');
|
||||
return false;
|
||||
}
|
||||
|
||||
// 检查当前周几是否在可售周几列表中
|
||||
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}`); // 处理跨天情况
|
||||
|
||||
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'));
|
||||
|
||||
// 处理跨天情况
|
||||
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 isInRange = now.isBetween(startTime, endTime, null, "[)"); // console.log('当前时间是否在可售时间范围内:', isInRange);
|
||||
return isInRange;
|
||||
}
|
||||
// 新增兼容了隔天时间区域兼容，需引入isBetween插件
|
||||
|
||||
function emitEvent(emitName) {
|
||||
if (isGoods()) {
|
||||
emits(emitName, props.index)
|
||||
}
|
||||
}
|
||||
function emitEvent(emitName) {
|
||||
if (isGoods()) {
|
||||
emits(emitName, props.index);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.icon {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
}
|
||||
.icon {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
}
|
||||
|
||||
.icon-btn {
|
||||
gap: 14rpx;
|
||||
}
|
||||
.icon-btn {
|
||||
gap: 14rpx;
|
||||
}
|
||||
|
||||
.btn {
|
||||
background: #EB4F4F;
|
||||
border-radius: 100rpx;
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
padding: 0 50rpx;
|
||||
color: #fff;
|
||||
}
|
||||
.btn {
|
||||
background: #eb4f4f;
|
||||
border-radius: 100rpx;
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
padding: 0 50rpx;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.btn-hover-class {
|
||||
opacity: .6;
|
||||
}
|
||||
.btn-hover-class {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.item {
|
||||
// width: 250rpx;
|
||||
// height: 272rpx;
|
||||
background: #F9B798;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
.item {
|
||||
// width: 250rpx;
|
||||
// height: 272rpx;
|
||||
background: #f9b798;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
|
||||
&.default {
|
||||
.img {}
|
||||
}
|
||||
.img {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
object-fit: contain;
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
.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>
|
||||
@@ -1,249 +1,282 @@
|
||||
<template>
|
||||
<my-model ref="model" borderRadius="12" :title="title" width="50vw">
|
||||
<template #desc>
|
||||
<scroll-view scroll-y="true" style="height: 50vh;" class="u-p-30 guigeModel">
|
||||
<view class="u-m-b-40" v-for="(item,index) in skus" :key="index">
|
||||
<view class="u-text-left">
|
||||
<view class="color-333">{{item.name}}</view>
|
||||
</view>
|
||||
<view class="u-flex u-m-t-20 u-flex-wrap">
|
||||
<view class="item" @tap="chooseSkd(index,skd)"
|
||||
:class="{active:item.sel===skd.name,disabled:skd.disabled}"
|
||||
v-for="(skd,skdIndex) in item.values" :key="skdIndex">
|
||||
{{skd.name}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</template>
|
||||
<template #btn>
|
||||
<view class="u-p-30 border-top ">
|
||||
<view class="u-flex u-p-b-30 u-row-between">
|
||||
<view class="price">
|
||||
<template v-if="goods&&goods.isGrounding">
|
||||
<text>￥</text>
|
||||
<text>{{to2(goods.salePrice*number) }}</text>
|
||||
</template>
|
||||
</view>
|
||||
<view class="u-flex">
|
||||
<view class="u-flex" @tap="reduce">
|
||||
<image src="/pagesCreateOrder/static/images/icon-reduce-black.svg" class="icon" mode="">
|
||||
</image>
|
||||
</view>
|
||||
<view class="u-m-l-30 u-m-r-30 color-333">
|
||||
{{number}}
|
||||
</view>
|
||||
<view class="u-flex" @tap="add">
|
||||
<image src="/pagesCreateOrder/static/images/icon-add-black.svg" class="icon" mode="">
|
||||
</image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-m-t-10">
|
||||
<my-button @tap="close" type="cancel" v-if="isDisabled">
|
||||
<view class="color-999">已下架/售罄</view>
|
||||
</my-button>
|
||||
<my-button @tap="confirm" v-else>添加</my-button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</my-model>
|
||||
<my-model ref="model" borderRadius="12" :title="title" width="50vw">
|
||||
<template #desc>
|
||||
<scroll-view
|
||||
scroll-y="true"
|
||||
style="height: 50vh"
|
||||
class="u-p-30 guigeModel"
|
||||
>
|
||||
<view class="u-m-b-40" v-for="(item, index) in skus" :key="index">
|
||||
<view class="u-text-left">
|
||||
<view class="color-333">{{ item.name }}</view>
|
||||
</view>
|
||||
<view class="u-flex u-m-t-20 u-flex-wrap">
|
||||
<view
|
||||
class="item"
|
||||
@tap="chooseSkd(index, skd)"
|
||||
:class="{ active: item.sel === skd.name, disabled: skd.disabled }"
|
||||
v-for="(skd, skdIndex) in item.values"
|
||||
:key="skdIndex"
|
||||
>
|
||||
{{ skd.name }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</template>
|
||||
<template #btn>
|
||||
<view class="u-p-30 border-top">
|
||||
<view class="u-flex u-p-b-30 u-row-between">
|
||||
<view class="price">
|
||||
<template v-if="goods && goods.isGrounding">
|
||||
<text v-if="goodsData.is_time_discount">￥{{ returnLimitPrice() }}</text>
|
||||
<text :class="{'old-price':goodsData.is_time_discount}">￥{{ to2(goods.salePrice * number) }}</text>
|
||||
</template>
|
||||
</view>
|
||||
<view class="u-flex">
|
||||
<view class="u-flex" @tap="reduce">
|
||||
<image
|
||||
src="/pagesCreateOrder/static/images/icon-reduce-black.svg"
|
||||
class="icon"
|
||||
mode=""
|
||||
>
|
||||
</image>
|
||||
</view>
|
||||
<view class="u-m-l-30 u-m-r-30 color-333">
|
||||
{{ number }}
|
||||
</view>
|
||||
<view class="u-flex" @tap="add">
|
||||
<image
|
||||
src="/pagesCreateOrder/static/images/icon-add-black.svg"
|
||||
class="icon"
|
||||
mode=""
|
||||
>
|
||||
</image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-m-t-10">
|
||||
<my-button @tap="close" type="cancel" v-if="isDisabled">
|
||||
<view class="color-999">已下架/售罄</view>
|
||||
</my-button>
|
||||
<my-button @tap="confirm" v-else>添加</my-button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</my-model>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
computed,
|
||||
reactive,
|
||||
ref,
|
||||
watch
|
||||
} from 'vue';
|
||||
import util from '../util.js';
|
||||
import infobox from '@/commons/utils/infoBox.js'
|
||||
import myModel from '@/components/my-components/my-model.vue'
|
||||
import myButton from '@/components/my-components/my-button.vue'
|
||||
const props = defineProps({
|
||||
goodsData: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
import { computed, reactive, ref, watch,inject } from "vue";
|
||||
import util from "../util.js";
|
||||
import infobox from "@/commons/utils/infoBox.js";
|
||||
import myModel from "@/components/my-components/my-model.vue";
|
||||
import myButton from "@/components/my-components/my-button.vue";
|
||||
import BigNumber from "bignumber.js";
|
||||
const yskUtils = inject("yskUtils");
|
||||
const shopInfo = uni.getStorageSync("shopInfo");
|
||||
|
||||
const props = defineProps({
|
||||
limitTimeDiscount:{
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {};
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
skuMap: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
skus: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return []
|
||||
}
|
||||
},
|
||||
defaultIndex: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return []
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
goodsData: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
skuMap: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {};
|
||||
},
|
||||
},
|
||||
skus: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return [];
|
||||
},
|
||||
},
|
||||
defaultIndex: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return [];
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
function to2(number) {
|
||||
return Number(number).toFixed(2)
|
||||
}
|
||||
function to2(number) {
|
||||
return Number(number).toFixed(2);
|
||||
}
|
||||
function returnLimitPrice(){
|
||||
const price= yskUtils.limitUtils.returnPrice({
|
||||
goods: goods.value,
|
||||
shopInfo: shopInfo,
|
||||
limitTimeDiscountRes: props.limitTimeDiscount,
|
||||
shopUserInfo: null,
|
||||
idKey: "id",
|
||||
});
|
||||
|
||||
return BigNumber(price).times(number.value).toNumber()
|
||||
}
|
||||
const selSku = computed(() => {
|
||||
return props.skus
|
||||
.reduce((prve, cur) => {
|
||||
prve.push(cur.sel);
|
||||
return prve;
|
||||
}, [])
|
||||
.join();
|
||||
});
|
||||
|
||||
const goods = computed(() => {
|
||||
return props.skuMap[selSku.value];
|
||||
});
|
||||
watch(
|
||||
() => goods.value,
|
||||
(newval) => {
|
||||
console.log(props.goodsData.isStock);
|
||||
number.value = newval.suit || 1;
|
||||
}
|
||||
);
|
||||
|
||||
const selSku = computed(() => {
|
||||
return props.skus.reduce((prve, cur) => {
|
||||
prve.push(cur.sel)
|
||||
return prve
|
||||
}, []).join()
|
||||
})
|
||||
const isCanBuy = computed(() => {
|
||||
if (!goods.value) {
|
||||
return false;
|
||||
}
|
||||
console.log(
|
||||
util.isCanBuy({
|
||||
...goods.value,
|
||||
isStock: props.goodsData.isStock,
|
||||
})
|
||||
);
|
||||
return util.isCanBuy({
|
||||
...goods.value,
|
||||
isStock: props.goodsData.isStock,
|
||||
});
|
||||
});
|
||||
|
||||
//全部规格是否都无法使用
|
||||
const isAllDisabled = computed(() => {
|
||||
console.log(props.skus);
|
||||
return props.skus.reduce((prve, cur) => {
|
||||
return (
|
||||
prve && cur.values.filter((v) => v.disabled).length === cur.values.length
|
||||
);
|
||||
}, true);
|
||||
});
|
||||
|
||||
const goods = computed(() => {
|
||||
return props.skuMap[selSku.value]
|
||||
})
|
||||
watch(() => goods.value, (newval) => {
|
||||
console.log(props.goodsData.isStock);
|
||||
number.value = newval.suit || 1
|
||||
})
|
||||
|
||||
|
||||
const isCanBuy=computed(()=>{
|
||||
if(!goods.value) {
|
||||
return false
|
||||
}
|
||||
console.log(util.isCanBuy({
|
||||
...goods.value,
|
||||
isStock: props.goodsData.isStock
|
||||
}));
|
||||
return util.isCanBuy({
|
||||
...goods.value,
|
||||
isStock: props.goodsData.isStock
|
||||
})
|
||||
|
||||
})
|
||||
const emits = defineEmits(["confirm", "updateSku"]);
|
||||
let number = ref(1);
|
||||
|
||||
//全部规格是否都无法使用
|
||||
const isAllDisabled = computed(() => {
|
||||
console.log(props.skus);
|
||||
return props.skus.reduce((prve, cur) => {
|
||||
return prve && cur.values.filter(v => v.disabled).length === cur.values.length
|
||||
}, true)
|
||||
})
|
||||
function chooseSkd(skusIndex, skd) {
|
||||
const { name, disabled } = skd;
|
||||
if (disabled) {
|
||||
return;
|
||||
}
|
||||
if (props.skus[skusIndex].sel != name) {
|
||||
emits("updateSku", skusIndex, name);
|
||||
}
|
||||
}
|
||||
const defaultIndex = reactive(new Array(props.skus.length).fill(""));
|
||||
for (let i in props.defaultIndex) {
|
||||
defaultIndex[i] = props.defaultIndex[i];
|
||||
}
|
||||
const activeArr = defaultIndex;
|
||||
|
||||
const emits = defineEmits(['confirm', 'updateSku'])
|
||||
let number = ref(1)
|
||||
const model = ref(null);
|
||||
|
||||
function open() {
|
||||
model.value.open();
|
||||
}
|
||||
|
||||
function chooseSkd(skusIndex, skd) {
|
||||
const {
|
||||
name,
|
||||
disabled
|
||||
} = skd
|
||||
if (disabled) {
|
||||
return
|
||||
}
|
||||
if (props.skus[skusIndex].sel != name) {
|
||||
emits('updateSku', skusIndex, name)
|
||||
}
|
||||
}
|
||||
const defaultIndex = reactive(new Array(props.skus.length).fill(''))
|
||||
for (let i in props.defaultIndex) {
|
||||
defaultIndex[i] = props.defaultIndex[i]
|
||||
}
|
||||
const activeArr = defaultIndex
|
||||
function close() {
|
||||
model.value.close();
|
||||
}
|
||||
|
||||
const isDisabled = computed(() => {
|
||||
return isAllDisabled.value || !isCanBuy.value;
|
||||
});
|
||||
|
||||
const model = ref(null)
|
||||
function reduce() {
|
||||
if (isDisabled.value) {
|
||||
return;
|
||||
}
|
||||
const suit = goods.value.suit || 1;
|
||||
const newval = number.value - 1;
|
||||
if (newval < suit) {
|
||||
return infobox.showToast(suit + "个起售");
|
||||
}
|
||||
number.value = newval <= 1 ? 1 : newval;
|
||||
}
|
||||
|
||||
function open() {
|
||||
model.value.open()
|
||||
}
|
||||
function add() {
|
||||
if (isDisabled.value) {
|
||||
return;
|
||||
}
|
||||
const newval = number.value + 1;
|
||||
number.value = newval;
|
||||
}
|
||||
|
||||
function close() {
|
||||
model.value.close()
|
||||
}
|
||||
|
||||
const isDisabled=computed(()=>{
|
||||
return isAllDisabled.value || !isCanBuy.value
|
||||
})
|
||||
|
||||
function reduce() {
|
||||
if (isDisabled.value) {
|
||||
return
|
||||
}
|
||||
const suit = goods.value.suit || 1
|
||||
const newval = number.value - 1
|
||||
if (newval < suit) {
|
||||
return infobox.showToast(suit + '个起售')
|
||||
}
|
||||
number.value = newval <= 1 ? 1 : newval
|
||||
}
|
||||
|
||||
function add() {
|
||||
if (isDisabled.value) {
|
||||
return
|
||||
}
|
||||
const newval = number.value + 1
|
||||
number.value = newval
|
||||
}
|
||||
|
||||
|
||||
|
||||
function confirm() {
|
||||
close()
|
||||
if (isDisabled.value) {
|
||||
return
|
||||
}
|
||||
emits('confirm', goods.value, number.value)
|
||||
}
|
||||
defineExpose({
|
||||
open,
|
||||
close
|
||||
})
|
||||
function confirm() {
|
||||
close();
|
||||
if (isDisabled.value) {
|
||||
return;
|
||||
}
|
||||
emits("confirm", goods.value, number.value);
|
||||
}
|
||||
defineExpose({
|
||||
open,
|
||||
close,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.border-top {}
|
||||
.border-top {
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
}
|
||||
.icon {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
}
|
||||
|
||||
.guigeModel {
|
||||
.item {
|
||||
color: #666;
|
||||
font-size: 28rpx;
|
||||
padding: 4rpx 28rpx;
|
||||
border: 1px solid #E5E5E5;
|
||||
border-radius: 8rpx;
|
||||
margin-right: 20rpx;
|
||||
margin-bottom: 20rpx;
|
||||
transition: all .2s ease-in-out;
|
||||
.guigeModel {
|
||||
.item {
|
||||
color: #666;
|
||||
font-size: 28rpx;
|
||||
padding: 4rpx 28rpx;
|
||||
border: 1px solid #e5e5e5;
|
||||
border-radius: 8rpx;
|
||||
margin-right: 20rpx;
|
||||
margin-bottom: 20rpx;
|
||||
transition: all 0.2s ease-in-out;
|
||||
|
||||
&.active {
|
||||
border-color: $my-main-color;
|
||||
color: $my-main-color;
|
||||
}
|
||||
&.active {
|
||||
border-color: $my-main-color;
|
||||
color: $my-main-color;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
color: #ccc;
|
||||
border-color: #eee;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.disabled {
|
||||
color: #ccc;
|
||||
border-color: #eee;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.price {
|
||||
color: #EB4F4F;
|
||||
}
|
||||
.price {
|
||||
color: #eb4f4f;
|
||||
}
|
||||
|
||||
.border-top {
|
||||
border-top: 1px solid #E5E5E5;
|
||||
}
|
||||
.border-top {
|
||||
border-top: 1px solid #e5e5e5;
|
||||
}
|
||||
.old-price{
|
||||
color: #999;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user