增加购物车编辑数量功能
This commit is contained in:
@@ -41,7 +41,7 @@
|
||||
:key="index"
|
||||
>
|
||||
<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">{{
|
||||
item.specInfo || ""
|
||||
}}</view>
|
||||
@@ -62,7 +62,7 @@
|
||||
mode=""
|
||||
/>
|
||||
</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) }}
|
||||
</view>
|
||||
<view class="u-flex" @tap="updateNumber(true, index, item)">
|
||||
@@ -328,7 +328,11 @@ function setModalShow(key = "show", show = true, type = "", title = "") {
|
||||
console.log(modal);
|
||||
}
|
||||
|
||||
const edmits = defineEmits(["clear", "updateNumber"]);
|
||||
const edmits = defineEmits(["clear", "updateNumber","changeNumber"]);
|
||||
|
||||
function changeNumber(goods){
|
||||
edmits('changeNumber',goods)
|
||||
}
|
||||
|
||||
// mask
|
||||
let switchGoods = ref(false);
|
||||
|
||||
@@ -1,345 +1,309 @@
|
||||
<template>
|
||||
<view class="u-relative u-flex item">
|
||||
<up-image
|
||||
:src="data.coverImg"
|
||||
mode="aspectFill"
|
||||
:width="img.width"
|
||||
:height="img.height"
|
||||
></up-image>
|
||||
<view class="info u-flex u-row-between u-col-top u-flex-col">
|
||||
<view class="limit-discount" v-if="is_time_discount">限时折扣</view>
|
||||
<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>
|
||||
|
||||
<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>
|
||||
<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>
|
||||
|
||||
<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="
|
||||
<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">
|
||||
<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.toFixed(2) }}
|
||||
</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>
|
||||
</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>
|
||||
">
|
||||
<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, 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);
|
||||
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);
|
||||
|
||||
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 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 is_time_discount = computed(() => {
|
||||
if (!props.limitTimeDiscount || !props.limitTimeDiscount.id) {
|
||||
return false;
|
||||
}
|
||||
//判断是否是时间折扣商品
|
||||
const is_time_discount = computed(() => {
|
||||
if (!props.limitTimeDiscount || !props.limitTimeDiscount.id) {
|
||||
return false;
|
||||
}
|
||||
|
||||
const isCanuse = yskUtils.limitUtils.canUseLimitTimeDiscount(
|
||||
props.data,
|
||||
props.limitTimeDiscount,
|
||||
shopInfo,
|
||||
null,
|
||||
"id"
|
||||
);
|
||||
return isCanuse;
|
||||
});
|
||||
const isCanuse = yskUtils.limitUtils.canUseLimitTimeDiscount(
|
||||
props.data,
|
||||
props.limitTimeDiscount,
|
||||
shopInfo,
|
||||
null,
|
||||
"id"
|
||||
);
|
||||
return isCanuse;
|
||||
});
|
||||
|
||||
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;
|
||||
});
|
||||
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");
|
||||
}
|
||||
/**
|
||||
* 判断是否是菜品
|
||||
*/
|
||||
function isGoods() {
|
||||
return props.data.hasOwnProperty("id");
|
||||
}
|
||||
|
||||
/**
|
||||
* 判断商品是否售尽
|
||||
*/
|
||||
const isSellout = computed(() => {
|
||||
const item = props.data;
|
||||
if (!isGoods()) {
|
||||
return false;
|
||||
}
|
||||
return (
|
||||
(item.isStock == 1 && item.stockNumber <= 0) ||
|
||||
item.isSoldStock == 1 ||
|
||||
item.isSale == 0 ||
|
||||
!isProductAvailable(item.days, item.startTime, item.endTime)
|
||||
);
|
||||
});
|
||||
// 判断商品是否在可售时间内
|
||||
function isProductAvailable(sellDaysStr, startTimeStr, endTimeStr) {
|
||||
// 将后端返回的字符串转换为数组
|
||||
const sellDays = sellDaysStr.split(",");
|
||||
const now = dayjs();
|
||||
const days = [
|
||||
"Sunday",
|
||||
"Monday",
|
||||
"Tuesday",
|
||||
"Wednesday",
|
||||
"Thursday",
|
||||
"Friday",
|
||||
"Saturday",
|
||||
];
|
||||
const currentDay = days[now.day()];
|
||||
const currentTime = now.format("HH:mm:ss"); // 检查当前周几是否在可售周几列表中
|
||||
/**
|
||||
* 判断商品是否售尽
|
||||
*/
|
||||
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('开始时间:', startTime.format('YYYY-MM-DD HH:mm:ss')); // console.log('结束时间:', endTime.format('YYYY-MM-DD 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('开始时间:', 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;
|
||||
}
|
||||
// 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"]);
|
||||
const emits = defineEmits(["add", "reduce", "chooseGuige", "tapweigh"]);
|
||||
|
||||
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: 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: 0.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: 52rpx 24rpx 24rpx 24rpx;
|
||||
top: 0;
|
||||
background: rgba(37, 22, 15, 0.5);
|
||||
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.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>
|
||||
90
pagesCreateOrder/index/components/popup-change-number.vue
Normal file
90
pagesCreateOrder/index/components/popup-change-number.vue
Normal 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>
|
||||
Reference in New Issue
Block a user