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
2026-01-17 10:36:33 +08:00
parent 0990e08201
commit f090d59dc6
5 changed files with 403 additions and 323 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
config/appConfig.js
View File

@@ -1,5 +1,5 @@
//当前环境 test,prod //当前环境 test,prod
export const ENV = 'test' export const ENV = 'prod'
export const ENV_BASE_URL = { export const ENV_BASE_URL = {
java: { java: {
prod: 'https://cashier.sxczgkj.com/', prod: 'https://cashier.sxczgkj.com/',
@@ -15,6 +15,7 @@ export const ENV_BASE_URL = {
} }
} }
/** /**
* @param {String} env 环境，测试或者正式 * @param {String} env 环境，测试或者正式
* @param {String} apiType 语言，java或者php * @param {String} apiType 语言，java或者php

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

@@ -41,7 +41,7 @@
:key="index" :key="index"
> >
<view> <view>
<view class="up-line-1">{{ item.name }}</view> <view class="up-line-1" style="max-width: 240rpx;">{{ item.name }}</view>
<view class="u-m-t-10 u-font-24 color-666 up-line-1">{{ <view class="u-m-t-10 u-font-24 color-666 up-line-1">{{
item.specInfo || "" item.specInfo || ""
}}</view> }}</view>
@@ -62,7 +62,7 @@
mode="" mode=""
/> />
</view> </view>
<view class="u-m-l-30 u-m-r-30 color-333"> <view class="u-m-l-30 u-m-r-30 color-333" @tap="changeNumber(item)">
{{ item.number.toFixed(2) }} {{ item.number.toFixed(2) }}
</view> </view>
<view class="u-flex" @tap="updateNumber(true, index, item)"> <view class="u-flex" @tap="updateNumber(true, index, item)">
@@ -328,7 +328,11 @@ function setModalShow(key = "show", show = true, type = "", title = "") {
console.log(modal); console.log(modal);
} }
const edmits = defineEmits(["clear", "updateNumber"]); const edmits = defineEmits(["clear", "updateNumber","changeNumber"]);
function changeNumber(goods){
edmits('changeNumber',goods)
}
// mask // mask
let switchGoods = ref(false); let switchGoods = ref(false);

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

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

90
pagesCreateOrder/index/components/popup-change-number.vue Normal file
View File

@@ -0,0 +1,90 @@
<template>
<view>
<up-popup :show="show" mode="center" @close="show=flase" :close-on-click-overlay="true">
<view class="box">
<view class="u-flex u-row-between">
<text class="u-font-32 font-bold">修改数量</text>
<up-icon name="close" @click="show=false"></up-icon>
</view>
<view class="form-box">
<up-form label-position="left" label-width="auto">
<up-form-item label="数量" required>
<up-number-box inputWidth="200rpx" :step="1"
:integer="integer"
v-model="number"></up-number-box>
</up-form-item>
</up-form>
</view>
<view class="u-m-t-12 u-flex gap-20">
<view class="u-flex-1">
<my-button type="default" @click="show=false">取消</my-button>
</view>
<view class="u-flex-1">
<my-button type="primary" @click="confirm">确认</my-button>
</view>
</view>
</view>
</up-popup>
</view>
</template>
<script setup>
import {
watch,ref, computed
} from 'vue';
const show = defineModel(false)
const props = defineProps({
min: {
type: Number,
default: 0
},
max: {
type: Number,
default: 9999
},
goods: {
type: Object,
default: ()=>{number:0}
}
})
const integer=computed(()=>{
if(props.goods.product_type=="weight"){
return false
}
return true
})
const number = ref(0)
const emits=defineEmits('confirm')
function confirm(){
emits('confirm',{
goods:props.goods,
num:number.value
})
show.value=false
}
watch(() => show.value, (newval) => {
if (newval) {
number.value = props.goods.number||0
} else {
number.value = 0
}
})
</script>
<style lang="scss" scoped>
.box {
width: 690rpx;
border-radius: 16rpx;
padding: 32rpx 28rpx;
}
.form-box {
padding: 20rpx;
}
</style>

29
pagesCreateOrder/index/index.vue
View File

@@ -79,9 +79,9 @@
<view class="u-flex u-m-t-20 u-flex-wrap u-row-between"> <view class="u-flex u-m-t-20 u-flex-wrap u-row-between">
<view class="u-m-b-30" v-for="(goodsItem, goodsIndex) in searchResult" :key="goodsIndex"> <view class="u-m-b-30" v-for="(goodsItem, goodsIndex) in searchResult" :key="goodsIndex">
<list-goods-item :img="{ width: '330rpx', height: '330rpx' }" <list-goods-item :img="{ width: '330rpx', height: '330rpx' }"
:limitTimeDiscount="data.limitTimeDiscount" @chooseGuige=" :limitTimeDiscount="data.limitTimeDiscount"
chooseGuige(goodsItem.goodsIndex, goodsItem.index) @chooseGuige="chooseGuige(goodsItem.goodsIndex, goodsItem.index)"
" @add="searchGoodsUpdate(goodsItem, goodsIndex, true)" @add="searchGoodsUpdate(goodsItem, goodsIndex, true)"
@reduce="searchGoodsUpdate(goodsItem, goodsIndex, false)" @reduce="searchGoodsUpdate(goodsItem, goodsIndex, false)"
@tapweigh="tapweigh(goodsItem.goodsIndex, goodsItem.index)" @tapweigh="tapweigh(goodsItem.goodsIndex, goodsItem.index)"
:index="goodsItem.goodsIndex" :data="goodsItem"></list-goods-item> :index="goodsItem.goodsIndex" :data="goodsItem"></list-goods-item>
@@ -96,6 +96,7 @@
<view class="bottom w-full"> <view class="bottom w-full">
<my-car :isCreateOrderToDetail="isCreateOrderToDetail" @updateNumber="carsNumberChange" :table="data.table" <my-car :isCreateOrderToDetail="isCreateOrderToDetail" @updateNumber="carsNumberChange" :table="data.table"
:data="cars" :orderInfo="data.orderInfo" :limitTimeDiscount="data.limitTimeDiscount" :data="cars" :orderInfo="data.orderInfo" :limitTimeDiscount="data.limitTimeDiscount"
@changeNumber="goodsChangeNumber"
@clear="cleaCart"></my-car> @clear="cleaCart"></my-car>
</view> </view>
<!-- 套餐选择规格 --> <!-- 套餐选择规格 -->
@@ -112,6 +113,9 @@
<text>历史订单</text> <text>历史订单</text>
<text class="num">{{ data.historyOrderNum }}</text> <text class="num">{{ data.historyOrderNum }}</text>
</view> </view>
<!-- 修改购物车数量 -->
<popupChangeNumber v-model="popupChangeNumberData.show" :goods="popupChangeNumberData.data" @confirm="carsNumberChange"></popupChangeNumber>
</view> </view>
</template> </template>
<script setup> <script setup>
@@ -137,6 +141,13 @@
import { import {
stickCount stickCount
} from '@/http/api/product/stick.js' } from '@/http/api/product/stick.js'
import popupChangeNumber from './components/popup-change-number.vue'
const popupChangeNumberData=reactive({
show:false,
data:null
})
import guigeModel from "./components/guige"; import guigeModel from "./components/guige";
import taocanModel from "./components/taocanModel.vue"; import taocanModel from "./components/taocanModel.vue";
import weighItem from "./components/weigh.vue"; import weighItem from "./components/weigh.vue";
@@ -845,7 +856,17 @@
return; return;
} }
} }
function goodsChangeNumber(e){
console.log(e);
popupChangeNumberData.data=e;
popupChangeNumberData.show=true
}
/** /**
* socket通知购物车商品数量修改处理 * socket通知购物车商品数量修改处理
*/ */