czg_team/cashier_app
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

代客下单修改

Browse Source
This commit is contained in:
YeMingfei666
2025-11-18 18:39:52 +08:00
parent e40b4fe8cc
commit 08e76b8897
39 changed files with 12932 additions and 4425 deletions
Download Patch File Download Diff File Expand all files Collapse all files

729
pagesCreateOrder/index/components/car.vue
View File

@@ -1,285 +1,402 @@
<template>
<view>
<view class="mask" @tap="hideGoods" v-if="switchGoods"></view>
<view class="car border-top u-flex u-row-between u-col-bottom u-relative">
<view class="u-absolute goods bg-fff">
<view class="u-p-t-32 color-666 border-bottom bg-fff u-absolute total u-p-r-28 u-p-b-32 u-p-l-28 u-flex u-row-between">
<view>已添加{{ goodsNumber.toFixed(0) }}件商品</view>
<view class="color-666">
<uni-icons color="#666" type="trash"></uni-icons>
<text class="u-m-l-10" @tap="setModalShow('clear', true, 'cart', '是否清空全部已添加的商品')">清空购物车</text>
</view>
</view>
<scroll-view scroll-y="true" class="tranistion" :style="{ height: switchGoods ? '50vh' : 0 }">
<!-- 占位 -->
<view class="u-p-t-32 color-666 border-bottom u-p-r-28 u-p-b-32 u-p-l-28 u-flex u-row-between" style="opacity: 0">
<view>已添加{{ goodsNumber.toFixed(0) }}件商品</view>
<view class="color-666">
<uni-icons color="#666" type="trash"></uni-icons>
<text class="u-m-l-10">清空</text>
</view>
</view>
<!-- 占位 -->
<view class="color-333 item border-top u-flex u-row-center u-row-between" v-for="(item, index) in data" :key="index">
<view>
<view class="up-line-1">{{ item.name }}</view>
<view class="u-m-t-10 u-font-24 color-666 up-line-1">{{ item.specInfo || '' }}</view>
</view>
<view class="u-flex" style="flex-shrink: 0">
<view class="font-bold red u-m-r-32">￥{{ formatPrice(item.lowPrice * item.number) }}</view>
<view class="u-flex" @tap="updateNumber(false, index, item)">
<image src="/pagesCreateOrder/static/images/icon-reduce-black.svg" class="icon" mode="" />
</view>
<view class="u-m-l-30 u-m-r-30 color-333">
{{ item.number.toFixed(2) }}
</view>
<view class="u-flex" @tap="updateNumber(true, index, item)">
<image
src="/pagesCreateOrder/static/images/icon-add-black.svg"
class="icon"
:class="{ grayscale: item.type == 'package' && item.groupType == 1 }"
mode=""
/>
</view>
</view>
</view>
<view style="margin: 50rpx auto 110rpx auto" v-if="!data.length">
<my-empty text="暂未有添加商品"></my-empty>
</view>
<!-- 历史订单 -->
<view v-if="historyOrder.length > 0" class="u-p-t-32 u-p-b-32 u-p-r-28 u-p-l-28 u-m-t-40 bg-fff u-flex u-row-between">
<view class="color-333" style="font-weight: bold">历史订单</view>
<view class="color-666">
<uni-icons color="#666" type="trash"></uni-icons>
<text class="u-m-l-10" @tap="setModalShow('clear', true, 'allHistoryOrder', '清空历史订单')">清空历史订单</text>
</view>
</view>
<view v-for="(item, index) in historyOrder" :key="index">
<view v-if="historyOrder.length > 0" class="u-p-t-32 border-top bg-fff u-p-r-28 u-p-b-32 u-p-l-28 u-flex u-row-between">
<view class="color-333" style="font-size: 30rpx">第{{ item.placeNum }}次下单</view>
<view class="color-666">
<uni-icons color="#666" type="trash"></uni-icons>
<text class="u-m-l-10" @tap="setModalShow('clear', true, item.placeNum, '清空第' + item.placeNum + '次下单历史订单')">清空</text>
</view>
</view>
<view class="color-333 item border-top u-flex u-row-center u-row-between" v-for="(v, i) in item.info" :key="i">
<view style="display: flex; align-items: center">
<view class="up-line-1" style="margin-right: 10rpx">{{ v.productName }}</view>
<uni-tag
v-if="v.returnNum > 0"
:text="'退菜X' + v.returnNum"
custom-style="background-color: #EB4F4F; border-color: #EB4F4F; color: #fff;"
></uni-tag>
</view>
<view class="u-flex" style="flex-shrink: 0">
<view class="font-bold red u-m-r-32">￥{{ formatPrice(v.price * (v.num - v.returnNum)) }}</view>
<view class="u-m-l-30 u-m-r-30 color-333">X{{ v.num.toFixed(2) }}</view>
</view>
</view>
</view>
</scroll-view>
</view>
<view class="icon-car-box" @tap="toggleGoods">
<image src="/pagesCreateOrder/static/images/icon-car.svg" class="icon-car" />
<view class="dot" v-if="goodsNumber > 0">{{ goodsNumber }}</view>
</view>
<view class="price font-bold u-flex">
<view>￥</view>
<view>{{ allPrice }}</view>
</view>
<my-button shape="circle" height="80" width="220" @tap="toConfimOrder">
<text class="u-font-32 font-bold">{{ table.type == 'add' ? '确认加菜' : '去下单' }}</text>
</my-button>
</view>
<up-modal
title="提示"
:content="modal.title"
:show="modal.clear"
showCancelButton
closeOnClickOverlay
@confirm="confirmModelConfirm"
@cancel="setModalShow('clear', false)"
@close="setModalShow('clear', false)"
width="300px"
></up-modal>
</view>
<view>
<view class="mask" @tap="hideGoods" v-if="switchGoods"></view>
<view class="car border-top u-flex u-row-between u-col-bottom u-relative">
<view class="u-absolute goods bg-fff">
<view
class="u-p-t-32 color-666 border-bottom bg-fff u-absolute total u-p-r-28 u-p-b-32 u-p-l-28 u-flex u-row-between"
>
<view>已添加{{ goodsNumber.toFixed(0) }}件商品</view>
<view class="color-666">
<uni-icons color="#666" type="trash"></uni-icons>
<text
class="u-m-l-10"
@tap="
setModalShow('clear', true, 'cart', '是否清空全部已添加的商品')
"
>清空购物车</text
>
</view>
</view>
<scroll-view
scroll-y="true"
class="tranistion"
:style="{ height: switchGoods ? '50vh' : 0 }"
>
<!-- 占位 -->
<view
class="u-p-t-32 color-666 border-bottom u-p-r-28 u-p-b-32 u-p-l-28 u-flex u-row-between"
style="opacity: 0"
>
<view>已添加{{ goodsNumber.toFixed(0) }}件商品</view>
<view class="color-666">
<uni-icons color="#666" type="trash"></uni-icons>
<text class="u-m-l-10">清空</text>
</view>
</view>
<!-- 占位 -->
<view
class="color-333 item border-top u-flex u-row-center u-row-between"
v-for="(item, index) in data"
:key="index"
>
<view>
<view class="up-line-1">{{ item.name }}</view>
<view class="u-m-t-10 u-font-24 color-666 up-line-1">{{
item.specInfo || ""
}}</view>
</view>
<view class="u-flex" style="flex-shrink: 0">
<view class="font-bold red" v-if="item.is_time_discount"
>￥{{ returnLimitTotalPrice(item) }}
</view>
<view
class="font-bold red u-m-r-32"
:class="[item.is_time_discount ? 'old-price' : '']"
>￥{{ formatPrice(item.lowPrice * item.number) }}</view
>
<view class="u-flex" @tap="updateNumber(false, index, item)">
<image
src="/pagesCreateOrder/static/images/icon-reduce-black.svg"
class="icon"
mode=""
/>
</view>
<view class="u-m-l-30 u-m-r-30 color-333">
{{ item.number.toFixed(2) }}
</view>
<view class="u-flex" @tap="updateNumber(true, index, item)">
<image
src="/pagesCreateOrder/static/images/icon-add-black.svg"
class="icon"
:class="[
item.type == 'package' && item.groupType == 1
? grayscale
: '',
]"
mode=""
/>
</view>
</view>
</view>
<view style="margin: 50rpx auto 110rpx auto" v-if="!data.length">
<my-empty text="暂未有添加商品"></my-empty>
</view>
<!-- 历史订单 -->
<view
v-if="historyOrder.length > 0"
class="u-p-t-32 u-p-b-32 u-p-r-28 u-p-l-28 u-m-t-40 bg-fff u-flex u-row-between"
>
<view class="color-333" style="font-weight: bold">历史订单</view>
<view class="color-666">
<uni-icons color="#666" type="trash"></uni-icons>
<text
class="u-m-l-10"
@tap="
setModalShow('clear', true, 'allHistoryOrder', '清空历史订单')
"
>清空历史订单</text
>
</view>
</view>
<view v-for="(item, index) in historyOrder" :key="index">
<view
v-if="historyOrder.length > 0"
class="u-p-t-32 border-top bg-fff u-p-r-28 u-p-b-32 u-p-l-28 u-flex u-row-between"
>
<view class="color-333" style="font-size: 30rpx"
>第{{ item.placeNum }}次下单</view
>
<view class="color-666">
<uni-icons color="#666" type="trash"></uni-icons>
<text
class="u-m-l-10"
@tap="
setModalShow(
'clear',
true,
item.placeNum,
'清空第' + item.placeNum + '次下单历史订单'
)
"
>清空</text
>
</view>
</view>
<view
class="color-333 item border-top u-flex u-row-center u-row-between"
v-for="(v, i) in item.info"
:key="i"
>
<view style="display: flex; align-items: center">
<view class="up-line-1" style="margin-right: 10rpx">{{
v.productName
}}</view>
<uni-tag
v-if="v.returnNum > 0"
:text="'退菜X' + v.returnNum"
custom-style="background-color: #EB4F4F; border-color: #EB4F4F; color: #fff;"
></uni-tag>
</view>
<view class="u-flex" style="flex-shrink: 0">
<view class="font-bold red u-m-r-32"
>￥{{ formatPrice(v.price * (v.num - v.returnNum)) }}</view
>
<view class="u-m-l-30 u-m-r-30 color-333"
>X{{ v.num.toFixed(2) }}</view
>
</view>
</view>
</view>
</scroll-view>
</view>
<view class="icon-car-box" @tap="toggleGoods">
<image
src="/pagesCreateOrder/static/images/icon-car.svg"
class="icon-car"
/>
<view class="dot" v-if="goodsNumber > 0">{{ goodsNumber }}</view>
</view>
<view class="price font-bold u-flex">
<view>￥</view>
<view>{{ allPrice }}</view>
</view>
<my-button shape="circle" height="80" width="220" @tap="toConfimOrder">
<text class="u-font-32 font-bold">{{
table.type == "add" ? "确认加菜" : "去下单"
}}</text>
</my-button>
</view>
<up-modal
title="提示"
:content="modal.title"
:show="modal.clear"
showCancelButton
closeOnClickOverlay
@confirm="confirmModelConfirm"
@cancel="setModalShow('clear', false)"
@close="setModalShow('clear', false)"
width="300px"
></up-modal>
</view>
</template>
<script setup>
import { computed, reactive, ref, watch } from 'vue';
import myButton from '@/components/my-components/my-button.vue';
import go from '@/commons/utils/go.js';
import infoBox from '@/commons/utils/infoBox.js';
import { formatPrice } from '@/commons/utils/format.js';
import { $trturnPayAfter } from '../util.js'
import { computed, reactive, ref, watch, inject } from "vue";
import myButton from "@/components/my-components/my-button.vue";
import go from "@/commons/utils/go.js";
import BigNumber from "bignumber.js";
import infoBox from "@/commons/utils/infoBox.js";
import { formatPrice } from "@/commons/utils/format.js";
import { $trturnPayAfter } from "../util.js";
const yskUtils = inject("yskUtils");
const shopInfo = uni.getStorageSync("shopInfo");
const props = defineProps({
data: {
type: Array,
default: () => {
return [];
}
},
historyOrder: {
type: Array,
default: () => {
return [];
}
},
isCreateOrderToDetail: {
type: Boolean,
default: false
},
orderInfo: {
type: Object,
default: () => {
return {
id: ''
};
}
},
table: {
type: Object,
default: () => {
return {
tableId: ''
};
}
}
data: {
type: Array,
default: () => {
return [];
},
},
historyOrder: {
type: Array,
default: () => {
return [];
},
},
isCreateOrderToDetail: {
type: Boolean,
default: false,
},
orderInfo: {
type: Object,
default: () => {
return {
id: "",
};
},
},
table: {
type: Object,
default: () => {
return {
tableId: "",
};
},
},
limitTimeDiscount: {
type: Object,
default: () => {
return {};
},
},
});
function returnLimitPrice(data) {
const price = yskUtils.limitUtils.returnPrice({
goods: data,
shopInfo: shopInfo,
limitTimeDiscountRes: props.limitTimeDiscount,
shopUserInfo: null,
idKey: "product_id",
});
return price;
}
function returnLimitTotalPrice(data) {
console.log('returnLimitTotalPrice',data)
const price = yskUtils.limitUtils.returnPrice({
goods: data,
shopInfo: shopInfo,
limitTimeDiscountRes: props.limitTimeDiscount,
shopUserInfo: null,
idKey: "product_id",
});
return BigNumber(price).times(data.number).toNumber();
}
let allHistoryOrder = ref([]);
const allPrice = computed(() => {
let cartPrice = props.data.reduce((prve, cur) => {
let price = Math.floor(cur.lowPrice * cur.number * 100) / 100;
return prve + price;
}, 0);
let historyOrderPrice = allHistoryOrder.value.reduce((prve, cur) => {
let price = Math.floor(cur.price * (cur.num - cur.returnNum) * 100) / 100;
return prve + price;
}, 0);
return (cartPrice + historyOrderPrice).toFixed(2);
let cartPrice = props.data.reduce((prve, cur) => {
let price =
(cur.is_time_discount ? returnLimitPrice(cur) : cur.lowPrice) *
cur.number;
return BigNumber(prve).plus(price);
}, 0);
let historyOrderPrice = allHistoryOrder.value.reduce((prve, cur) => {
let price =
(cur.isTimeDiscount
? returnLimitPrice({ ...cur, salePrice: cur.price })
: cur.price) *
(cur.num - cur.returnNum);
return BigNumber(prve).plus(price);
}, 0);
return BigNumber(cartPrice)
.plus(historyOrderPrice)
.decimalPlaces(2, BigNumber.ROUND_UP)
.toNumber();
});
const goodsNumber = computed(() => {
let result = 0;
let cart = props.data.reduce((prve, cur) => {
return prve + cur.number;
}, 0);
let result = 0;
let cart = props.data.reduce((prve, cur) => {
return prve + cur.number;
}, 0);
// let historyOrderNum = allHistoryOrder.value.reduce((prve, cur) => {
// return prve + cur.num;
// }, 0);
result = cart;
result = result > 0 ? result.toFixed(2) : 0;
return result >= 99 ? 99 : parseFloat(result);
// let historyOrderNum = allHistoryOrder.value.reduce((prve, cur) => {
// return prve + cur.num;
// }, 0);
result = cart;
result = result > 0 ? result.toFixed(2) : 0;
return result >= 99 ? 99 : parseFloat(result);
});
watch(
() => props.historyOrder,
(newval) => {
allHistoryOrder.value = [];
newval.forEach((item) => {
allHistoryOrder.value = [...allHistoryOrder.value, ...item.info];
});
}
() => props.historyOrder,
(newval) => {
allHistoryOrder.value = [];
newval.forEach((item) => {
allHistoryOrder.value = [...allHistoryOrder.value, ...item.info];
});
}
);
const modal = reactive({
key: '',
title: '',
type: '',
clear: false
key: "",
title: "",
type: "",
clear: false,
});
function confirmModelConfirm() {
if (modal.key == 'clear') {
clear();
}
if (modal.key == "clear") {
clear();
}
}
function setModalShow(key = 'show', show = true, type = '', title = '') {
// if (key == 'clear' && show && props.data.length <= 0) {
// return infoBox.showToast('购物车是空的！')
// }
if (title) {
modal.title = title;
}
if (type) {
modal.type = type;
}
modal.key = key;
modal[key] = show;
console.log(modal);
function setModalShow(key = "show", show = true, type = "", title = "") {
// if (key == 'clear' && show && props.data.length <= 0) {
// return infoBox.showToast('购物车是空的！')
// }
if (title) {
modal.title = title;
}
if (type) {
modal.type = type;
}
modal.key = key;
modal[key] = show;
console.log(modal);
}
const edmits = defineEmits(['clear', 'updateNumber']);
const edmits = defineEmits(["clear", "updateNumber"]);
// mask
let switchGoods = ref(false);
function hideGoods() {
switchGoods.value = false;
switchGoods.value = false;
}
function showGoods() {
switchGoods.value = true;
switchGoods.value = true;
}
function toggleGoods() {
switchGoods.value = !switchGoods.value;
switchGoods.value = !switchGoods.value;
}
function toConfimOrder() {
if (props.data.length <= 0 && allHistoryOrder.value.length <= 0) {
return infoBox.showToast('还没有选择商品');
}
const { name, status, type } = props.table;
if (props.data.length <= 0 && allHistoryOrder.value.length > 0) {
go.to('PAGES_ORDER_PAY', {
orderId: props.orderInfo.id
});
return;
}
if (props.data.length <= 0 && allHistoryOrder.value.length <= 0) {
return infoBox.showToast("还没有选择商品");
}
const { name, status, type } = props.table;
if (props.data.length <= 0 && allHistoryOrder.value.length > 0) {
go.to("PAGES_ORDER_PAY", {
orderId: props.orderInfo.id,
});
return;
}
if (props.table.id == '' && props.table.tableCode == '') {
go.to('PAGES_CONFIRM_ORDER', {
isCreateOrderToDetail: props.isCreateOrderToDetail ? 1 : 0
});
return;
}
if (props.table.id == "" && props.table.tableCode == "") {
go.to("PAGES_CONFIRM_ORDER", {
isCreateOrderToDetail: props.isCreateOrderToDetail ? 1 : 0,
});
return;
}
let shopInfo = uni.getStorageSync('shopInfo');
console.log($trturnPayAfter(shopInfo));
let shopInfo = uni.getStorageSync("shopInfo");
console.log($trturnPayAfter(shopInfo));
go.to('PAGES_CONFIRM_ORDER', {
type: type,
tableId: props.table.id,
tableCode: props.table.tableCode,
name: name,
status: status,
isCreateOrderToDetail: props.isCreateOrderToDetail ? 1 : 0
});
go.to("PAGES_CONFIRM_ORDER", {
type: type,
tableId: props.table.id,
tableCode: props.table.tableCode,
name: name,
status: status,
isCreateOrderToDetail: props.isCreateOrderToDetail ? 1 : 0,
});
}
function updateNumber(isAdd, index, goods) {
const step = isAdd ? 1 : -1;
const newval = goods.number + step;
if (goods.type == 'package' && goods.groupType == 1 && isAdd) {
return;
}
const par = {
num: newval,
index: index,
goods: goods
};
edmits('updateNumber', par);
const step = isAdd ? 1 : -1;
const newval = goods.number + step;
if (goods.type == "package" && goods.groupType == 1 && isAdd) {
return;
}
const par = {
num: newval,
index: index,
goods: goods,
};
edmits("updateNumber", par);
}
function clear() {
if (modal.type == 'cart') {
hideGoods();
}
setModalShow('clear', false);
edmits('clear', modal.type);
if (modal.type == "cart") {
hideGoods();
}
setModalShow("clear", false);
edmits("clear", modal.type);
}
</script>
@@ -288,104 +405,108 @@ $car-size: 96rpx;
$car-top: -16rpx;
@mixin fixedAll {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.total {
left: 0;
right: 0;
top: 0;
z-index: 1;
left: 0;
right: 0;
top: 0;
z-index: 1;
}
.icon {
width: 40rpx;
height: 40rpx;
width: 40rpx;
height: 40rpx;
}
.grayscale {
filter: opacity(60%);
filter: opacity(60%);
}
.mask {
@include fixedAll;
background: rgba(51, 51, 51, 0.5);
@include fixedAll;
background: rgba(51, 51, 51, 0.5);
}
.goods {
position: absolute;
bottom: 100%;
left: 0;
right: 0;
transition: all 0.2s ease-in-out;
overflow: hidden;
position: absolute;
bottom: 100%;
left: 0;
right: 0;
transition: all 0.2s ease-in-out;
overflow: hidden;
.item {
padding: 32rpx 28rpx;
}
.item {
padding: 32rpx 28rpx;
}
}
.border-bottom {
border-bottom: 1px solid #e5e5e5;
border-bottom: 1px solid #e5e5e5;
}
.border-top {
border-top: 1px solid #e5e5e5;
border-top: 1px solid #e5e5e5;
}
.red {
color: #eb4f4f;
color: #eb4f4f;
}
.car {
padding: 0 28rpx;
position: relative;
background-color: #fff;
padding-top: 10rpx;
padding-bottom: calc(40rpx + env(safe-area-inset-bottom));
/* #ifdef H5 */
padding-bottom: 68rpx;
padding: 0 28rpx;
position: relative;
background-color: #fff;
padding-top: 10rpx;
padding-bottom: calc(40rpx + env(safe-area-inset-bottom));
/* #ifdef H5 */
padding-bottom: 68rpx;
/* #endif */
.icon-car-box {
position: absolute;
left: 28rpx;
top: $car-top;
display: flex;
width: $car-size;
height: $car-size;
justify-content: center;
align-items: center;
z-index: 2;
/* #endif */
.icon-car-box {
position: absolute;
left: 28rpx;
top: $car-top;
display: flex;
width: $car-size;
height: $car-size;
justify-content: center;
align-items: center;
z-index: 2;
.dot {
position: absolute;
right: 0;
top: 0;
width: 28rpx;
height: 28rpx;
background: #eb4f4f;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
font-size: 20rpx;
font-weight: bold;
color: #ffffff;
}
}
.dot {
position: absolute;
right: 0;
top: 0;
width: 28rpx;
height: 28rpx;
background: #eb4f4f;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
font-size: 20rpx;
font-weight: bold;
color: #ffffff;
}
}
.price {
color: #eb4f4f;
margin-left: calc(38rpx + $car-size);
transform: translateY(calc($car-top / 2));
}
.price {
color: #eb4f4f;
margin-left: calc(38rpx + $car-size);
transform: translateY(calc($car-top / 2));
}
.icon-car {
width: $car-size;
height: $car-size;
}
.icon-car {
width: $car-size;
height: $car-size;
}
}
.old-price {
color: #999;
text-decoration: line-through;
}
</style>

492
pagesCreateOrder/index/components/guige.vue
View File

@@ -1,233 +1,299 @@
<template>
<my-model ref="model" borderRadius="12" :title="title">
<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 up-line-1" >{{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">
<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 up-line-1">{{ 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="is_time_discount"
>￥{{ returnLimitPrice() }}</text
>
<text :class="{ oldPrice: is_time_discount }"
>￥{{ goods.salePrice }}</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: () => {}
},
title: {
type: String,
default: ''
},
skuMap: {
type: Object,
default: () => {
return {}
}
},
skus: {
type: Array,
default: () => {
return []
}
},
})
const emits = defineEmits(['confirm', 'updateSku'])
const model = ref(null)
let number = ref(1)
function to2(number) {
return Number(number).toFixed(2)
}
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 shopUserInfo = uni.getStorageSync("shopUserInfo");
const selSku = computed(() => {
return props.skus.reduce((prve, cur) => {
prve.push(cur.sel)
return prve
}, []).join()
})
const props = defineProps({
goodsData: {
type: Object,
default: () => {},
},
title: {
type: String,
default: "",
},
skuMap: {
type: Object,
default: () => {
return {};
},
},
skus: {
type: Array,
default: () => {
return [];
},
},
limitTimeDiscount: {
type: Object,
default: () => {
return {};
},
},
});
const emits = defineEmits(["confirm", "updateSku"]);
const model = ref(null);
let number = ref(1);
function to2(number) {
return Number(number).toFixed(2);
}
const goods = computed(() => {
return props.skuMap[selSku.value]
})
watch(() => goods.value, (newval) => {
number.value = newval.suitNum || 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
}
return util.isCanBuy(
goods.value,
props.goodsData
)
const goods = computed(() => {
return props.skuMap[selSku.value];
});
watch(
() => goods.value,
(newval) => {
number.value = newval.suitNum || 1;
}
);
})
const isCanBuy = computed(() => {
if (!goods.value) {
return false;
}
return util.isCanBuy(goods.value, props.goodsData);
});
/**
* 全部规格是否都无法使用
*/
const isAllDisabled = computed(() => {
return props.skus.reduce((prve, cur) => {
return prve && cur.values.filter(v => v.disabled).length === cur.values.length
}, true)
})
/**
* 全部规格是否都无法使用
*/
const isAllDisabled = computed(() => {
return props.skus.reduce((prve, cur) => {
return (
prve && cur.values.filter((v) => v.disabled).length === cur.values.length
);
}, true);
});
/**
* 规格选择
* @param {Object} skusIndex
* @param {Object} skd
*/
function chooseSkd(skusIndex, skd) {
const { name, disabled } = skd
if (disabled) {
return
}
if (props.skus[skusIndex].sel != name) {
emits('updateSku', skusIndex, name)
}
}
/**
* 规格选择
* @param {Object} skusIndex
* @param {Object} skd
*/
function chooseSkd(skusIndex, skd) {
const { name, disabled } = skd;
if (disabled) {
return;
}
if (props.skus[skusIndex].sel != name) {
emits("updateSku", skusIndex, name);
}
}
/**
* 禁止操作
*/
const isDisabled = computed(() => {
return isAllDisabled.value || !isCanBuy.value
})
/**
* 数量减少
*/
function reduce() {
if (isDisabled.value) {
return
}
const suitNum = goods.value.suitNum || 1
const newval = number.value - 1
if (newval < suitNum) {
return infobox.showToast(suitNum + '个起售')
}
number.value = newval <= 1 ? 1 : newval
}
/**
* 数量增加
*/
function add() {
if (isDisabled.value) {
return
}
number.value = number.value + 1
}
/**
* 都规格选择确认
*/
function confirm() {
close()
if (isDisabled.value) {
return
}
emits('confirm', goods.value, number.value)
}
function open() {
model.value.open()
}
function close() {
model.value.close()
}
defineExpose({
open,
close
})
/**
* 禁止操作
*/
const isDisabled = computed(() => {
return isAllDisabled.value || !isCanBuy.value;
});
/**
* 数量减少
*/
function reduce() {
if (isDisabled.value) {
return;
}
const suitNum = goods.value.suitNum || 1;
const newval = number.value - 1;
if (newval < suitNum) {
return infobox.showToast(suitNum + "个起售");
}
number.value = newval <= 1 ? 1 : newval;
}
/**
* 数量增加
*/
function add() {
if (isDisabled.value) {
return;
}
number.value = number.value + 1;
}
/**
* 都规格选择确认
*/
function confirm() {
close();
if (isDisabled.value) {
return;
}
emits("confirm", goods.value, number.value,is_time_discount.value?1:0);
}
function open() {
model.value.open();
}
function close() {
model.value.close();
}
const is_time_discount = computed(() => {
if (!props.limitTimeDiscount || !props.limitTimeDiscount.id) {
return false;
}
const isCanuse = yskUtils.limitUtils.canUseLimitTimeDiscount(
goods.value,
props.limitTimeDiscount,
shopInfo,
shopUserInfo,
"productId"
);
console.log('isCanuse');
console.log( goods.value);
return isCanuse;
});
function returnLimitPrice() {
const price = yskUtils.limitUtils.returnPrice({
goods: goods.value,
shopInfo: shopInfo,
limitTimeDiscountRes: props.limitTimeDiscount,
shopUserInfo: shopUserInfo,
idKey: "productId",
});
return BigNumber(price).times(number.value).toNumber();
}
defineExpose({
open,
close,
});
</script>
<style lang="scss">
.border-top {}
.border-top {
}
.icon {
width: 40rpx;
height: 40rpx;
}
.icon {
width: 40rpx;
height: 40rpx;
}
.guigeModel {
.item {
color: #666;
font-size: 24rpx;
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: 24rpx;
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;
}
.border-top {
border-top: 1px solid #E5E5E5;
}
.price {
color: #eb4f4f;
}
.oldPrice {
color: #999;
text-decoration: line-through;
}
.border-top {
border-top: 1px solid #e5e5e5;
}
</style>

527
pagesCreateOrder/index/components/list-goods-item.vue
View File

@@ -1,232 +1,345 @@
<template>
<view class="u-relative u-flex item">
<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 class="limit-discount" v-if="is_time_discount">限时折扣</view>
<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>
<view>
<text class="up-line-1">{{ data.name }}</text>
</view>
<view>
<text class="u-font-32 font-bold u-m-t-16" v-if="is_time_discount"> ￥{{ limitPrice }} </text>
<text
class="u-font-32 font-bold u-m-t-16"
:class="[is_time_discount ? 'line-through' : '']"
>
￥{{ data.lowPrice }}
</text>
</view>
</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 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
}
}
}
})
import { computed, toRef, inject } from "vue";
import util from "../util.js";
import dayjs from "dayjs";
import isBetween from "dayjs/plugin/isBetween.js";
const yskUtils = inject("yskUtils");
const shopInfo = inject("shopInfo");
dayjs.extend(isBetween);
/**
* 判断是否是菜品
*/
function isGoods() {
return props.data.hasOwnProperty('id')
}
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,
};
},
},
limitTimeDiscount: {
type: Object,
default: () => {
return {};
},
},
});
/**
* 判断商品是否售尽
*/
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 is_time_discount = computed(() => {
if (!props.limitTimeDiscount || !props.limitTimeDiscount.id) {
return false;
}
    const isInRange = now.isBetween(startTime, endTime, null, '[)');
    // console.log('当前时间是否在可售时间范围内:', isInRange);
const isCanuse = yskUtils.limitUtils.canUseLimitTimeDiscount(
props.data,
props.limitTimeDiscount,
shopInfo,
null,
"id"
);
return isCanuse;
});
    return isInRange;
const limitPrice = computed(() => {
if (!is_time_discount.value) {
return 0;
}
console.log("props.data", props.data);
const price = yskUtils.limitUtils.returnPrice({
goods: props.data,
shopInfo: shopInfo,
limitTimeDiscountRes: props.limitTimeDiscount,
shopUserInfo: null,
idKey: "id",
});
return price;
});
}
/**
* 判断是否是菜品
*/
function isGoods() {
return props.data.hasOwnProperty("id");
}
const emits = defineEmits(['add', 'reduce', 'chooseGuige','tapweigh'])
/**
* 判断商品是否售尽
*/
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"); // 检查当前周几是否在可售周几列表中
function emitEvent(emitName) {
if (isGoods()) {
emits(emitName, props.index)
}
}
// 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('开始时间:', startTime.format('YYYY-MM-DD HH:mm:ss')); // console.log('结束时间:', endTime.format('YYYY-MM-DD HH:mm:ss'));
// console.log('当前时间:', now.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 {
width: 48rpx;
height: 48rpx;
}
.icon-btn {
gap: 14rpx;
}
.icon-btn {
gap: 14rpx;
}
.btn {
background: #EB4F4F;
border-radius: 100rpx;
font-size: 28rpx;
height: 56rpx;
line-height: 56rpx;
color: #fff;
}
.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;
}
.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;
}
.btn-hover-class {
opacity: 0.6;
}
image {
will-change: transform
}
image {
will-change: transform;
}
.item {
// width: 250rpx;
// height: 272rpx;
background: #F9B798;
border-radius: 8rpx 8rpx 8rpx 8rpx;
overflow: hidden;
.item {
// width: 250rpx;
// height: 272rpx;
background: #f9b798;
border-radius: 8rpx 8rpx 8rpx 8rpx;
overflow: hidden;
.img {
width: 250rpx;
height: 272rpx;
}
.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%;
}
}
.info {
position: absolute;
left: 0;
right: 0;
bottom: 0;
color: #fff;
padding: 52rpx 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%;
}
}
.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: 24rpx;
color: #ffffff;
border-radius: 0 0rpx 20rpx 0rpx;
color: #fff;
}
.line-through{
font-size: 24rpx;
color: rgba(255, 255, 255, 0.8);
text-decoration: line-through;
}
</style>

2530
pagesCreateOrder/index/index.vue
View File

File diff suppressed because it is too large Load Diff