代客下单修改
This commit is contained in:
@@ -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>
|
||||
Reference in New Issue
Block a user