|
|
|
|
@ -1,6 +1,6 @@ |
|
|
|
|
<template> |
|
|
|
|
<view class="goods-sku-popup" catchtouchmove="true" :class="valueCom && complete ? 'show' : 'none'" @touchmove.stop.prevent="moveHandle" |
|
|
|
|
@click.stop="stop"> |
|
|
|
|
<view class="goods-sku-popup" catchtouchmove="true" :class="valueCom && complete ? 'show' : 'none'" |
|
|
|
|
@touchmove.stop.prevent="moveHandle" @click.stop="stop"> |
|
|
|
|
<!-- 页面内容开始 --> |
|
|
|
|
<view class="mask" @click="close('mask')"></view> |
|
|
|
|
<view class="layer attr-content" :class="{'safe-area-inset-bottom':safeAreaInsetBottom }" |
|
|
|
|
@ -9,8 +9,10 @@ |
|
|
|
|
<scroll-view class="specification-wrapper-content" scroll-y="true"> |
|
|
|
|
<view class="specification-header"> |
|
|
|
|
<view class="specification-left"> |
|
|
|
|
<image class="product-img" :src="selectShop.image ? selectShop.image : goodsInfo[goodsThumbName]" |
|
|
|
|
:style="{ backgroundColor: goodsThumbBackgroundColor }" mode="aspectFill" @click="previewImage"></image> |
|
|
|
|
<image class="product-img" |
|
|
|
|
:src="selectShop.image ? selectShop.image : goodsInfo[goodsThumbName]" |
|
|
|
|
:style="{ backgroundColor: goodsThumbBackgroundColor }" mode="aspectFill" |
|
|
|
|
@click="previewImage"></image> |
|
|
|
|
</view> |
|
|
|
|
<view class="specification-right"> |
|
|
|
|
<view class="price-content" :style="{ color: themeColorFn('priceColor') }"> |
|
|
|
|
@ -25,11 +27,13 @@ |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
<view class="specification-content"> |
|
|
|
|
<view v-show="isManyCom" class="specification-item" v-for="(item, index1) in goodsInfo[specListName]" :key="index1"> |
|
|
|
|
<view v-show="isManyCom" class="specification-item" |
|
|
|
|
v-for="(item, index1) in goodsInfo[specListName]" :key="index1"> |
|
|
|
|
<view class="item-title">{{ item.name }}</view> |
|
|
|
|
<view class="item-wrapper"> |
|
|
|
|
<view class="item-content" v-for="(item_value, index2) in item.list" :key="index2" |
|
|
|
|
:class="[item_value.ishow ? '' : 'noactived', subIndex[index1] == index2 ? 'actived' : '']" :style="[ |
|
|
|
|
:class="[item_value.ishow ? '' : 'noactived', subIndex[index1] == index2 ? 'actived' : '']" |
|
|
|
|
:style="[ |
|
|
|
|
item_value.ishow ? '' : themeColorFn('disableStyle'), |
|
|
|
|
item_value.ishow ? themeColorFn('btnStyle') : '', |
|
|
|
|
subIndex[index1] == index2 ? themeColorFn('activedStyle') : '' |
|
|
|
|
@ -41,8 +45,9 @@ |
|
|
|
|
<view class="number-box-view" v-if="!userInfo.user_type || userInfo.user_type != 40"> |
|
|
|
|
<view style="flex: 1;">数量</view> |
|
|
|
|
<view style="flex: 4;text-align: right;"> |
|
|
|
|
<number-box v-model="selectNum" :min="minBuyNum || 1" :max="maxBuyNumCom" :step="stepBuyNum || 1" |
|
|
|
|
:step-strictly="stepStrictly" :positive-integer="true" @change="numChange" /> |
|
|
|
|
<number-box v-model="selectNum" :min="minBuyNum || 1" :max="maxBuyNumCom" |
|
|
|
|
:step="stepBuyNum || 1" :step-strictly="stepStrictly" :positive-integer="true" |
|
|
|
|
@change="numChange" /> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
@ -97,8 +102,12 @@ |
|
|
|
|
var goodsCache = {}; // 本地商品缓存 |
|
|
|
|
export default { |
|
|
|
|
name: 'GoodsSkuPopup', |
|
|
|
|
components: { NumberBox }, |
|
|
|
|
emits: ['update:modelValue', 'input', 'update-goods', 'open', 'close', 'add-cart', 'buy-now', 'cart', 'buy', 'num-change'], |
|
|
|
|
components: { |
|
|
|
|
NumberBox |
|
|
|
|
}, |
|
|
|
|
emits: ['update:modelValue', 'input', 'update-goods', 'open', 'close', 'add-cart', 'buy-now', 'cart', 'buy', |
|
|
|
|
'num-change' |
|
|
|
|
], |
|
|
|
|
props: { |
|
|
|
|
// true 组件显示 false 组件隐藏 |
|
|
|
|
value: { |
|
|
|
|
@ -328,6 +337,7 @@ |
|
|
|
|
}, |
|
|
|
|
data() { |
|
|
|
|
return { |
|
|
|
|
skuItem: '', |
|
|
|
|
userInfo: {}, |
|
|
|
|
complete: false, // 组件是否加载完成 |
|
|
|
|
goodsInfo: {}, // 商品信息 |
|
|
|
|
@ -451,7 +461,7 @@ |
|
|
|
|
that.selectArr.push(''); |
|
|
|
|
that.subIndex.push(-1); |
|
|
|
|
}); |
|
|
|
|
console.log(notAutoClick,that.specListName) |
|
|
|
|
console.log(notAutoClick, that.specListName) |
|
|
|
|
console.log(that.goodsInfo) |
|
|
|
|
that.checkItem(); // 计算sku里面规格形成路径 |
|
|
|
|
that.checkInpath(-1); // 传-1是为了不跳过循环 |
|
|
|
|
@ -460,12 +470,16 @@ |
|
|
|
|
// 使用vk路由模式框架获取商品信息 |
|
|
|
|
findGoodsInfo(obj = {}) { |
|
|
|
|
let that = this; |
|
|
|
|
let { useCache } = obj; |
|
|
|
|
let { |
|
|
|
|
useCache |
|
|
|
|
} = obj; |
|
|
|
|
if (typeof vk == 'undefined') { |
|
|
|
|
that.toast('custom-action必须是function', 'none'); |
|
|
|
|
return false; |
|
|
|
|
} |
|
|
|
|
let { actionTips } = that; |
|
|
|
|
let { |
|
|
|
|
actionTips |
|
|
|
|
} = that; |
|
|
|
|
let actionTitle = ''; |
|
|
|
|
let actionAoading = false; |
|
|
|
|
if (actionTips !== 'custom') { |
|
|
|
|
@ -509,8 +523,11 @@ |
|
|
|
|
// goodsInfo.sku_list.map((item, index) => { |
|
|
|
|
// item.sku_name_arr = ["20ml/瓶"]; |
|
|
|
|
// }); |
|
|
|
|
let { skuListName } = that; |
|
|
|
|
if (JSON.stringify(that.goodsInfo) === '{}' || that.goodsInfo[that.goodsIdName] !== goodsInfo[that.goodsIdName]) { |
|
|
|
|
let { |
|
|
|
|
skuListName |
|
|
|
|
} = that; |
|
|
|
|
if (JSON.stringify(that.goodsInfo) === '{}' || that.goodsInfo[that.goodsIdName] !== goodsInfo[that |
|
|
|
|
.goodsIdName]) { |
|
|
|
|
that.goodsInfo = goodsInfo; |
|
|
|
|
that.initKey = true; |
|
|
|
|
} else { |
|
|
|
|
@ -526,7 +543,8 @@ |
|
|
|
|
that.init(!autoClickSku) |
|
|
|
|
} |
|
|
|
|
// 更新选中sku的库存信息 |
|
|
|
|
let select_sku_info = that.getListItem(that.goodsInfo[skuListName], that.skuIdName, that.selectShop[that.skuIdName]); |
|
|
|
|
let select_sku_info = that.getListItem(that.goodsInfo[skuListName], that.skuIdName, that.selectShop[that |
|
|
|
|
.skuIdName]); |
|
|
|
|
Object.assign(that.selectShop, select_sku_info); |
|
|
|
|
that.defaultSelectSku(); |
|
|
|
|
that.complete = true; |
|
|
|
|
@ -564,7 +582,9 @@ |
|
|
|
|
}, 500); |
|
|
|
|
}); |
|
|
|
|
} catch (err) { |
|
|
|
|
let { message = '' } = err; |
|
|
|
|
let { |
|
|
|
|
message = '' |
|
|
|
|
} = err; |
|
|
|
|
if (message.indexOf('.catch is not a function') > -1) { |
|
|
|
|
that.toast('custom-action必须返回一个Promise', 'none'); |
|
|
|
|
setTimeout(function() { |
|
|
|
|
@ -575,7 +595,7 @@ |
|
|
|
|
} |
|
|
|
|
// 更新缓存 |
|
|
|
|
goodsCache[that.goodsId] = goodsInfo; |
|
|
|
|
console.log("goodsCache",goodsCache[that.goodsId]) |
|
|
|
|
console.log("goodsCache", goodsCache[that.goodsId]) |
|
|
|
|
if (goodsInfo && typeof goodsInfo == 'object' && JSON.stringify(goodsInfo) != '{}') { |
|
|
|
|
findGoodsInfoRun = false; |
|
|
|
|
that.updateGoodsInfo(goodsInfo); |
|
|
|
|
@ -597,7 +617,9 @@ |
|
|
|
|
return false; |
|
|
|
|
} |
|
|
|
|
} else { |
|
|
|
|
if (findGoodsInfoRun) that.findGoodsInfo({ useCache }); |
|
|
|
|
if (findGoodsInfoRun) that.findGoodsInfo({ |
|
|
|
|
useCache |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
// 监听 - 弹出层收起 |
|
|
|
|
@ -622,7 +644,7 @@ |
|
|
|
|
//禁止父元素滑动 |
|
|
|
|
}, |
|
|
|
|
// sku按钮的点击事件 |
|
|
|
|
skuClick(value, index1, index2,item) { |
|
|
|
|
skuClick(value, index1, index2, item) { |
|
|
|
|
let that = this; |
|
|
|
|
if (value.ishow) { |
|
|
|
|
if (that.selectArr[index1] != value.name) { |
|
|
|
|
@ -632,7 +654,12 @@ |
|
|
|
|
that.$set(that.selectArr, index1, ''); |
|
|
|
|
that.$set(that.subIndex, index1, -1); |
|
|
|
|
} |
|
|
|
|
this.$emit('selectedOld',{title:item,value:value,}) |
|
|
|
|
this.skuItem = item; |
|
|
|
|
this.skuIValue = value |
|
|
|
|
this.$emit('selectedOld', { |
|
|
|
|
title: this.skuItem, |
|
|
|
|
value: this.skuIValue, |
|
|
|
|
}) |
|
|
|
|
that.checkInpath(index1); |
|
|
|
|
// 如果全部选完 |
|
|
|
|
that.checkSelectShop(); |
|
|
|
|
@ -696,7 +723,9 @@ |
|
|
|
|
checkItem() { |
|
|
|
|
let that = this; |
|
|
|
|
// console.time('计算有多小种可选路径需要的时间是'); |
|
|
|
|
let { stockName } = that; |
|
|
|
|
let { |
|
|
|
|
stockName |
|
|
|
|
} = that; |
|
|
|
|
let skuListName = that.skuListName; |
|
|
|
|
// 去除库存小于等于0的商品sku |
|
|
|
|
let originalSkuList = that.goodsInfo[skuListName]; |
|
|
|
|
@ -721,8 +750,11 @@ |
|
|
|
|
arr.map(item2 => { |
|
|
|
|
// 利用对象属性的唯一性实现二维数组去重 |
|
|
|
|
//console.log(1,that.shopItemInfo,that.getArrayToSting([...item2, item]),item2,item,items); |
|
|
|
|
if (!that.shopItemInfo.hasOwnProperty(that.getArrayToSting([...item2, item]))) { |
|
|
|
|
that.shopItemInfo[that.getArrayToSting([...item2, item])] = items; |
|
|
|
|
if (!that.shopItemInfo.hasOwnProperty(that.getArrayToSting([... |
|
|
|
|
item2, item |
|
|
|
|
]))) { |
|
|
|
|
that.shopItemInfo[that.getArrayToSting([...item2, item])] = |
|
|
|
|
items; |
|
|
|
|
} |
|
|
|
|
return [...item2, item]; |
|
|
|
|
}) |
|
|
|
|
@ -760,7 +792,12 @@ |
|
|
|
|
return false; |
|
|
|
|
} |
|
|
|
|
that.clickTime = clickTime; |
|
|
|
|
let { selectShop, selectNum, stockText, stockName } = that; |
|
|
|
|
let { |
|
|
|
|
selectShop, |
|
|
|
|
selectNum, |
|
|
|
|
stockText, |
|
|
|
|
stockName |
|
|
|
|
} = that; |
|
|
|
|
if (!selectShop || !selectShop[that.skuIdName]) { |
|
|
|
|
that.toast('请先选择对应规格', 'none'); |
|
|
|
|
return false; |
|
|
|
|
@ -784,6 +821,10 @@ |
|
|
|
|
selectShop.buy_num = that.selectNum; |
|
|
|
|
that.$emit('add-cart', selectShop); |
|
|
|
|
that.$emit('cart', selectShop); |
|
|
|
|
that.$emit('selectedOld', { |
|
|
|
|
title: that.skuItem, |
|
|
|
|
value: that.skuIValue, |
|
|
|
|
}) |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
}, |
|
|
|
|
@ -796,6 +837,10 @@ |
|
|
|
|
console.log(selectShop) |
|
|
|
|
that.$emit('buy-now', selectShop); |
|
|
|
|
that.$emit('buy', selectShop); |
|
|
|
|
that.$emit('selectedOld', { |
|
|
|
|
title: that.skuItem, |
|
|
|
|
value: that.skuIValue, |
|
|
|
|
}) |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
}, |
|
|
|
|
@ -839,7 +884,9 @@ |
|
|
|
|
// 自动选择sku前提是只有一组sku,默认自动选择最前面的有库存的sku |
|
|
|
|
autoClickSku() { |
|
|
|
|
let that = this; |
|
|
|
|
let { stockName } = that; |
|
|
|
|
let { |
|
|
|
|
stockName |
|
|
|
|
} = that; |
|
|
|
|
let skuList = that.goodsInfo[that.skuListName]; |
|
|
|
|
let specListArr = that.goodsInfo[that.specListName]; |
|
|
|
|
if (specListArr.length == 1) { |
|
|
|
|
@ -856,13 +903,18 @@ |
|
|
|
|
// 主题颜色 |
|
|
|
|
themeColorFn(name) { |
|
|
|
|
let that = this; |
|
|
|
|
let { theme, themeColor } = that; |
|
|
|
|
let { |
|
|
|
|
theme, |
|
|
|
|
themeColor |
|
|
|
|
} = that; |
|
|
|
|
let color = that[name] ? that[name] : themeColor[theme][name]; |
|
|
|
|
return color; |
|
|
|
|
}, |
|
|
|
|
defaultSelectSku() { |
|
|
|
|
let that = this; |
|
|
|
|
let { defaultSelect } = that; |
|
|
|
|
let { |
|
|
|
|
defaultSelect |
|
|
|
|
} = that; |
|
|
|
|
if (defaultSelect && defaultSelect.sku && defaultSelect.sku.length > 0) { |
|
|
|
|
that.selectSku(defaultSelect); |
|
|
|
|
} |
|
|
|
|
@ -876,7 +928,10 @@ |
|
|
|
|
*/ |
|
|
|
|
selectSku(obj = {}) { |
|
|
|
|
let that = this; |
|
|
|
|
let { sku: skuArr, num: selectNum } = obj; |
|
|
|
|
let { |
|
|
|
|
sku: skuArr, |
|
|
|
|
num: selectNum |
|
|
|
|
} = obj; |
|
|
|
|
let specListArr = that.goodsInfo[that.specListName]; |
|
|
|
|
if (skuArr && specListArr.length === skuArr.length) { |
|
|
|
|
// 先清空 |
|
|
|
|
@ -919,7 +974,9 @@ |
|
|
|
|
}, |
|
|
|
|
pushGoodsCache(goodsInfo) { |
|
|
|
|
let that = this; |
|
|
|
|
let { goodsIdName } = that; |
|
|
|
|
let { |
|
|
|
|
goodsIdName |
|
|
|
|
} = that; |
|
|
|
|
goodsCache[goodsInfo[goodsIdName]] = goodsInfo; |
|
|
|
|
}, |
|
|
|
|
// 用于阻止冒泡 |
|
|
|
|
@ -927,7 +984,11 @@ |
|
|
|
|
// 图片预览 |
|
|
|
|
previewImage() { |
|
|
|
|
let that = this; |
|
|
|
|
let { selectShop, goodsInfo, goodsThumbName } = that; |
|
|
|
|
let { |
|
|
|
|
selectShop, |
|
|
|
|
goodsInfo, |
|
|
|
|
goodsThumbName |
|
|
|
|
} = that; |
|
|
|
|
let src = selectShop.image ? selectShop.image : goodsInfo[goodsThumbName]; |
|
|
|
|
if (src) { |
|
|
|
|
uni.previewImage({ |
|
|
|
|
@ -938,7 +999,9 @@ |
|
|
|
|
getMaxStock() { |
|
|
|
|
let maxStock = 0; |
|
|
|
|
let that = this; |
|
|
|
|
let { selectShop = {}, goodsInfo = {}, skuListName, stockName } = that; |
|
|
|
|
let { |
|
|
|
|
selectShop = {}, goodsInfo = {}, skuListName, stockName |
|
|
|
|
} = that; |
|
|
|
|
if (selectShop[stockName]) { |
|
|
|
|
maxStock = selectShop[stockName]; |
|
|
|
|
} else { |
|
|
|
|
@ -983,7 +1046,11 @@ |
|
|
|
|
// 是否是多规格 |
|
|
|
|
isManyCom() { |
|
|
|
|
let that = this; |
|
|
|
|
let { goodsInfo, defaultSingleSkuName, specListName } = that; |
|
|
|
|
let { |
|
|
|
|
goodsInfo, |
|
|
|
|
defaultSingleSkuName, |
|
|
|
|
specListName |
|
|
|
|
} = that; |
|
|
|
|
let isMany = true; |
|
|
|
|
if ( |
|
|
|
|
goodsInfo[specListName] && |
|
|
|
|
@ -999,7 +1066,9 @@ |
|
|
|
|
priceCom() { |
|
|
|
|
let str = ''; |
|
|
|
|
let that = this; |
|
|
|
|
let { selectShop = {}, goodsInfo = {}, skuListName, skuIdName } = that; |
|
|
|
|
let { |
|
|
|
|
selectShop = {}, goodsInfo = {}, skuListName, skuIdName |
|
|
|
|
} = that; |
|
|
|
|
if (selectShop[skuIdName]) { |
|
|
|
|
str = that.priceFilter(selectShop.price); |
|
|
|
|
} else { |
|
|
|
|
@ -1024,7 +1093,9 @@ |
|
|
|
|
stockCom() { |
|
|
|
|
let str = ''; |
|
|
|
|
let that = this; |
|
|
|
|
let { selectShop = {}, goodsInfo = {}, skuListName, stockName } = that; |
|
|
|
|
let { |
|
|
|
|
selectShop = {}, goodsInfo = {}, skuListName, stockName |
|
|
|
|
} = that; |
|
|
|
|
if (selectShop[stockName]) { |
|
|
|
|
str = selectShop[stockName]; |
|
|
|
|
} else { |
|
|
|
|
@ -1057,8 +1128,11 @@ |
|
|
|
|
immediate: true, |
|
|
|
|
handler: function(newVal, oldValue) { |
|
|
|
|
let that = this; |
|
|
|
|
let { goodsIdName } = that; |
|
|
|
|
if (typeof newVal === 'object' && newVal && newVal[goodsIdName] && !goodsCache[newVal[goodsIdName]]) { |
|
|
|
|
let { |
|
|
|
|
goodsIdName |
|
|
|
|
} = that; |
|
|
|
|
if (typeof newVal === 'object' && newVal && newVal[goodsIdName] && !goodsCache[newVal[ |
|
|
|
|
goodsIdName]]) { |
|
|
|
|
that.pushGoodsCache(newVal); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
shuxiaoquan
11 months ago