SKU逻辑 vue实现一起学习交流

数据结构

// 属性数据
attribute: [{name: "容量", item: {4: {name: "1升"}, 5: {name: "0.5升"}}, attr_id: "2", len: 2},…]
0: {name: "容量", item: {4: {name: "1升"}, 5: {name: "0.5升"}}, attr_id: "2", len: 2}
1: {name: "重量", item: {1: {name: "1斤"}, 2: {name: "1.5斤"}, 3: {name: "2斤"}}, attr_id: "1", len: 3}
2: {name: "订购周期", item: {6: {name: "30天"}, 7: {name: "7天"}, 8: {name: "1天"}}, attr_id: "3", len: 3}
3: {name: "颜色", item: {9: {name: "白"}, 10: {name: "绿"}, 11: {name: "红"}}, attr_id: "4", len: 3}]// skulist
data: [{_id: 35, goods_id: 1, sku: "1_4_6_9", attr: {1: 1, 2: 4, 3: 6, 4: 9}, buy_limit: "", image: "",…},…]
0: {_id: 35, goods_id: 1, sku: "1_4_6_9", attr: {1: 1, 2: 4, 3: 6, 4: 9}, buy_limit: "", image: "",…}
attr: {1: 1, 2: 4, 3: 6, 4: 9}
buy_limit: ""
goods_id: 1
image: ""
is_show: true
old_stock: 1000
org_price: 100
price: 9
score_convert: ""
sku: "1_4_6_9"
stock: 0
_id: 35
1: {_id: 36, goods_id: 1, sku: "1_4_6_10", attr: {1: 1, 2: 4, 3: 6, 4: 10}, buy_limit: "", image: "",…}
2: {_id: 37, goods_id: 1, sku: "1_4_6_11", attr: {1: 1, 2: 4, 3: 6, 4: 11}, buy_limit: "", image: "",…}
3: {_id: 38, goods_id: 1, sku: "1_4_7_9", attr: {1: 1, 2: 4, 3: 7, 4: 9}, buy_limit: "", image: "",…}
4: {_id: 39, goods_id: 1, sku: "1_4_7_10", attr: {1: 1, 2: 4, 3: 7, 4: 10}, buy_limit: "", image: "",…}
5: {_id: 40, goods_id: 1, sku: "1_4_7_11", attr: {1: 1, 2: 4, 3: 7, 4: 11}, buy_limit: "", image: "",…}
6: {_id: 41, goods_id: 1, sku: "1_4_8_9", attr: {1: 1, 2: 4, 3: 8, 4: 9}, buy_limit: "", image: "",…}
7: {_id: 42, goods_id: 1, sku: "1_4_8_10", attr: {1: 1, 2: 4, 3: 8, 4: 10}, buy_limit: "", image: "",…}
8: {_id: 43, goods_id: 1, sku: "1_4_8_11", attr: {1: 1, 2: 4, 3: 8, 4: 11}, buy_limit: "", image: "",…}
9: {_id: 44, goods_id: 1, sku: "2_4_6_9", attr: {1: 2, 2: 4, 3: 6, 4: 9}, buy_limit: "", image: "",…}
10: {_id: 45, goods_id: 1, sku: "2_4_6_10", attr: {1: 2, 2: 4, 3: 6, 4: 10}, buy_limit: "", image: "",…}
11: {_id: 46, goods_id: 1, sku: "2_4_6_11", attr: {1: 2, 2: 4, 3: 6, 4: 11}, buy_limit: "", image: "",…}
12: {_id: 47, goods_id: 1, sku: "2_4_7_9", attr: {1: 2, 2: 4, 3: 7, 4: 9}, buy_limit: "", image: "",…}
13: {_id: 48, goods_id: 1, sku: "2_4_7_10", attr: {1: 2, 2: 4, 3: 7, 4: 10}, buy_limit: "", image: "",…}
14: {_id: 49, goods_id: 1, sku: "2_4_7_11", attr: {1: 2, 2: 4, 3: 7, 4: 11}, buy_limit: "", image: "",…}
15: {_id: 50, goods_id: 1, sku: "2_4_8_9", attr: {1: 2, 2: 4, 3: 8, 4: 9}, buy_limit: "", image: "",…}
16: {_id: 51, goods_id: 1, sku: "2_4_8_10", attr: {1: 2, 2: 4, 3: 8, 4: 10}, buy_limit: "", image: "",…}
17: {_id: 52, goods_id: 1, sku: "2_4_8_11", attr: {1: 2, 2: 4, 3: 8, 4: 11}, buy_limit: "", image: "",…}
18: {_id: 53, goods_id: 1, sku: "3_4_7_9", attr: {1: 3, 2: 4, 3: 7, 4: 9}, buy_limit: "", image: "",…}
19: {_id: 54, goods_id: 1, sku: "3_4_7_10", attr: {1: 3, 2: 4, 3: 7, 4: 10}, buy_limit: "", image: "",…}
20: {_id: 55, goods_id: 1, sku: "3_4_7_11", attr: {1: 3, 2: 4, 3: 7, 4: 11}, buy_limit: "", image: "",…}
21: {_id: 56, goods_id: 1, sku: "3_4_8_9", attr: {1: 3, 2: 4, 3: 8, 4: 9}, buy_limit: "", image: "",…}
22: {_id: 57, goods_id: 1, sku: "3_4_8_10", attr: {1: 3, 2: 4, 3: 8, 4: 10}, buy_limit: "", image: "",…}
23: {_id: 58, goods_id: 1, sku: "3_4_8_11", attr: {1: 3, 2: 4, 3: 8, 4: 11}, buy_limit: "", image: "",…}
24: {_id: 59, goods_id: 1, sku: "1_5_6_9", attr: {1: 1, 2: 5, 3: 6, 4: 9}, buy_limit: "", image: "",…}
25: {_id: 60, goods_id: 1, sku: "1_5_6_10", attr: {1: 1, 2: 5, 3: 6, 4: 10}, buy_limit: "", image: "",…}
26: {_id: 61, goods_id: 1, sku: "1_5_6_11", attr: {1: 1, 2: 5, 3: 6, 4: 11}, buy_limit: "", image: "",…}
27: {_id: 62, goods_id: 1, sku: "1_5_7_9", attr: {1: 1, 2: 5, 3: 7, 4: 9}, buy_limit: "", image: "",…}
28: {_id: 63, goods_id: 1, sku: "1_5_7_10", attr: {1: 1, 2: 5, 3: 7, 4: 10}, buy_limit: "", image: "",…}
29: {_id: 64, goods_id: 1, sku: "1_5_7_11", attr: {1: 1, 2: 5, 3: 7, 4: 11}, buy_limit: "", image: "",…}
30: {_id: 65, goods_id: 1, sku: "1_5_8_9", attr: {1: 1, 2: 5, 3: 8, 4: 9}, buy_limit: "", image: "",…}
31: {_id: 66, goods_id: 1, sku: "1_5_8_10", attr: {1: 1, 2: 5, 3: 8, 4: 10}, buy_limit: "", image: "",…}
32: {_id: 67, goods_id: 1, sku: "1_5_8_11", attr: {1: 1, 2: 5, 3: 8, 4: 11}, buy_limit: "", image: "",…}
33: {_id: 68, goods_id: 1, sku: "2_5_6_9", attr: {1: 2, 2: 5, 3: 6, 4: 9}, buy_limit: "", image: "",…}
34: {_id: 69, goods_id: 1, sku: "2_5_6_10", attr: {1: 2, 2: 5, 3: 6, 4: 10}, buy_limit: "", image: "",…}
35: {_id: 70, goods_id: 1, sku: "2_5_6_11", attr: {1: 2, 2: 5, 3: 6, 4: 11}, buy_limit: "", image: "",…}
36: {_id: 71, goods_id: 1, sku: "2_5_7_9", attr: {1: 2, 2: 5, 3: 7, 4: 9}, buy_limit: "", image: "",…}
37: {_id: 72, goods_id: 1, sku: "2_5_7_10", attr: {1: 2, 2: 5, 3: 7, 4: 10}, buy_limit: "", image: "",…}
38: {_id: 73, goods_id: 1, sku: "2_5_7_11", attr: {1: 2, 2: 5, 3: 7, 4: 11}, buy_limit: "", image: "",…}
39: {_id: 74, goods_id: 1, sku: "2_5_8_9", attr: {1: 2, 2: 5, 3: 8, 4: 9}, buy_limit: "", image: "",…}
40: {_id: 75, goods_id: 1, sku: "2_5_8_10", attr: {1: 2, 2: 5, 3: 8, 4: 10}, buy_limit: "", image: "",…}
41: {_id: 76, goods_id: 1, sku: "2_5_8_11", attr: {1: 2, 2: 5, 3: 8, 4: 11}, buy_limit: "", image: "",…}
42: {_id: 77, goods_id: 1, sku: "3_5_6_9", attr: {1: 3, 2: 5, 3: 6, 4: 9}, buy_limit: "", image: "",…}
43: {_id: 78, goods_id: 1, sku: "3_5_6_10", attr: {1: 3, 2: 5, 3: 6, 4: 10}, buy_limit: "", image: "",…}
44: {_id: 79, goods_id: 1, sku: "3_5_6_11", attr: {1: 3, 2: 5, 3: 6, 4: 11}, buy_limit: "", image: "",…}
45: {_id: 80, goods_id: 1, sku: "3_5_7_9", attr: {1: 3, 2: 5, 3: 7, 4: 9}, buy_limit: "", image: "",…}
46: {_id: 81, goods_id: 1, sku: "3_5_7_10", attr: {1: 3, 2: 5, 3: 7, 4: 10}, buy_limit: "", image: "",…}
47: {_id: 82, goods_id: 1, sku: "3_5_7_11", attr: {1: 3, 2: 5, 3: 7, 4: 11}, buy_limit: "", image: "",…}

直接上码

export class Sku{constructor(attr,skuList) {this.attr = attrthis.skuList = skuListthis.res = {price:0 , stock:0, item:null}this.setArr = []this.init()}init(){this.skuList.forEach((sku,colIndex) => {const vals = Object.values(sku.attr);sku['attr_val'] = {}vals.forEach(valId => {sku['attr_val'][''+valId]=1})// 初始化集合this.setArr.push(new Set(vals))})}/*** 从集合中取出 可选中的 属性值 数组 如果不在其中 则不能选中* * @param {Object} selectSet*/getSet(selectSet=[]) {selectSet = new Set(selectSet.map(v => +v))// 把值取整 后 创建为集合let resSet = [];const attrLen= this.attr.length;if (selectSet.size==attrLen && attrLen>0) {/*** 在有可选属性 且已经全部选中的情况下比较简单 比如：[4,3,8]* 1.先从所以集合中找出与[4,3,8]的差集 且差集的size=1(因为你只能切换一个属性，所以下次集合改变后的值 只可能与本次有一个值的差别)* 2. 把差集存入resSet中 resSet去重后可选属性值ID + [4,3,8]；就是全部能选中的集合 */this.setArr.forEach(s => {// 差集let difference = new Set([...s].filter(x => !selectSet.has(x)));// console.log('差集',difference,selectSet,s)if (difference.size==1)resSet = [...resSet,...difference]})} else if(selectSet.size>0) {const noAllInterSectArr = []/*** 在有选中某几项时的处理步骤 比如属性ID集合：[5,3]* 1.从集合中查出同时包含[5,3]值的集合 ，同时包含的条件是 交集的size==[5,3].size* 2.把符合条件的集合 与 [5,3]求出差集 并收集进输入resSet中 可以有重复，最后再去重* 3.把 第1步交集size为0的集合下标 收集进数组noAllInterSectArr。这表示与[5,3]一点交集都没有* 4.把 noAllInterSectArr 中收集的集合 与 resSet去重后的差集diff ；resSet=[...diff]重新置为空，求交集* 5.如果求出的交集size==属性长度-[5,3].size（比如一共 4个属性那属性长度就是4;如[颜色，尺寸...]）那么就把 diff差集 与之求并集 ，并存入resSet* 6.至此 resSet去重后可选属性值ID + [5,3]；就是全部能选中的集合 ，过程可能有逻辑冗余 先记录过程 后续在改进。*/this.setArr.forEach((s,i) => {// 先求交集let intersect = new Set([...selectSet].filter(x => s.has(x)));// 如果有交集 且全等// console.log('交集',intersect)if (intersect.size==selectSet.size) {// 在取出差集let difference = new Set([...s].filter(x => !selectSet.has(x)));// console.log('差集',difference,selectSet,s)resSet = [...resSet,...difference]} else if(intersect.size==0) {noAllInterSectArr.push(i)}})let diff = new Set(resSet);console.log('diff',diff)resSet = [...diff]noAllInterSectArr.forEach(i => {// 先求交集let intersect = new Set([...diff].filter(x => this.setArr[i].has(x)));// console.log('余交',intersect,this.setArr[i])if (intersect.size==attrLen-selectSet.size) {let union = new Set([...diff, ...this.setArr[i]]);resSet = [...resSet, ...union]}})} else if (selectSet.size==0) {/*** 这里是在上来啥也没干时，需要把skulist里所有存在的属性id集合拿出来 ，，这里没啥可叙述*/this.setArr.forEach((s,i) => {resSet = [...resSet,...s]})}resSet = Array.from(new Set([...resSet,...selectSet]))console.log('resSet',resSet)return resSet}// 传入已选中的 属性：值的对象集合check(attrObj) {const attrVals = Object.values(attrObj),allowCheckValIds = this.getSet(attrVals);const prices = []let stockSum = 0,successSku = null;this.skuList.forEach(sku => {let flag = true// 计算包含属性值的skufor(let i = 0; i < attrVals.length; i++) {if (!sku.attr_val[attrVals[i]]) {flag = falsebreak;}}if (flag) {const {price, old_stock} = sku// 说明选完毕全部skuprices.push(+price)stockSum += old_stockattrVals.length == this.attr.length && (successSku = sku)}})this.res = {price: prices.length?[Math.min(...prices), Math.max(...prices)]:[0], stock: stockSum, item: successSku}const obj = {}allowCheckValIds.forEach((valId,i) => {obj[''+valId] = 1})return obj;}
}

<template><view class="model ub ubv ubh-e" :class="[skuShow||value?'show':'','model-'+modelType, modelType?'ubc':'']" @tap="hide"><scroll-view class="box rel bg-bai p-bottom3" scroll-y @tap.stop><template v-if="modelType == 1"><view class="ubc close iconfont icon-guanbi text-gray round abs" @tap="hide" hover-class="iconfont-hover"></view><view class="img" ><image :src="goodsInfo.image||''" mode="widthFix"></image></view><view class="title p3 m-top3">{{goodsInfo.name||''}}</view><view v-for="(attr, index) in goodsInfo.attribute" :key="attr.attr_id" class="ub ub-sb attr t-s2"><view class="name text-gray2">{{attr.name}}</view><view class="vals ub ub-sb"><view class="tag" :class="[attrObj[attr.attr_id] == val_id ? 'success':(attrValObj[val_id]?'gray':'none')]" @touchstart="skuClick(val_id,attr.attr_id,val)" v-for="(val,val_id) in attr.item" :key="val_id">{{val.name}} {{val_id}}</view></view></view><view class="foot ub"><view class="uf1 info ub ubv ub-sb"><view class="money m-bottom3 t-s4">￥{{price&&price[0]?price[0]:price||0}} <template v-if="price[1]>price[0]"> - {{price[1]}}</template><text class="t-s1 m-left1">元</text></view><view class="stock t-s1 m-bottom1"><text v-if="goodsInfo.buy_limit">每人限购{{goodsInfo.buy_limit}}</text><text v-else>库存：{{stock}} </text>{{goodsInfo.unit||''}}</view><view class="t-s1 select-attr text-gray1"><text class="ai" v-if="Object.keys(attrNameObj).length">{{Object.values(attrNameObj).join(';')}}</text><text v-else>请选择规格</text></view></view><view class="action ub ubv ub-sb ubh-e m-left1"><m-number v-model="buyNum" :min="1" :max="buyMaxNum"></m-number><button class="btn-none bg-success submit-car ubc t-s2 m-top3" :disabled="canSubmit" hover-class="hover" @tap="addCar">加入购物车</button>       </view></view></template><template v-else><view class="header ub p2"><image :src="goodsInfo.image||''" class="logo s2 br0 border-err m-right2" mode="widthFix"></image><view class="info uf1"><view class="text-err">￥<text class="blod-6 t-s4 ">{{price&&price[0]?price[0]:price||0}} <template v-if="price[1]>price[0]"> - {{price[1]}}</template></text></view><view class="text-gray t-s1 m-top1">库存： {{stock||0}} {{goodsInfo.unit||''}}</view></view><view class="ubc close iconfont icon-guanbi1 round" hover-class="iconfont-hover" @touchstart="hide"></view></view><view class="moon-bottom p-top2 m-bottom2"></view><view v-for="(attr, index) in goodsInfo.attribute" :key="attr.attr_id" class="ub ub-sb attr t-s2"><view class="name text-gray2">{{attr.name}}</view><view class="vals ub ub-sb"><view class="tag" :class="[attrObj[attr.attr_id] == val_id ? 'success':(attrValObj[val_id]?'gray':'none')]" @touchstart="skuClick(val_id,attr.attr_id,val)" v-for="(val,val_id) in attr.item" :key="val_id">{{val.name}}</view></view></view><view class="moon-bottom p-top2 m-bottom2" v-if="goodsInfo.attribute"></view><view class="count ub ub-sb ubv-c p3"><view class="name text-gray2">数量</view><m-number v-model="buyNum" :min="1" :max="buyMaxNum"></m-number></view><view style="height: 200rpx;"></view><button class="bg-lv0 text-bai br7 abs submit" hover-class="hover" @tap="addCar" :disabled="canSubmit">确认</button></template></scroll-view></view>
</template><script>
import {computed,ref,watch} from 'vue'
import {Sku} from '@/utils/fn.js'
import R from '@/common/api.js'
import { useStore,mapGetters } from 'vuex'
export default {name: 'm-sku',props: {value:{type:Boolean,default: false},goodsInfo: {type:Object,default:()=>{}},modelType:{type: Number,// 0 是标准sku 1 是中间弹窗default: 0}},computed:{...mapGetters(['car','skuShow'])},setup(p,{emit}) {let skuObj= null;const API = new R('Goods'),store = useStore(),goodsInfo = ref({}),res = ref({}),attrObj = ref({}),attrNameObj = ref({}),attrValObj = ref({}),buyNum = ref(1),hide =() => {p.value?emit('input',false):store.dispatch('car/hideSku')},skuClick = (val_id,attr_id, item) => {// 初始化时 参数都为 0,0所以做判断if (val_id && attr_id && attrObj.value[attr_id] !== val_id && !attrValObj.value[val_id]) returnattr_id && (attrObj.value[attr_id] = val_id) && (attrNameObj.value[attr_id]=item?.name)attrValObj.value = skuObj.check(attrObj.value)res.value = skuObj.resif (res.value?.item) {res.value.item.attr = attrNameObj.valuebuyNum.value = store.getters.car?.[goodsInfo.value._id]?.data?.[res.value.item._id]?.num || 1}},price = computed(() => res.value?.price || goodsInfo.value.price),stock = computed(() => res.value?.stock || goodsInfo.value.stock),buyMaxNum = computed(() => {if (res.value?.item?.buy_limit) {return res.value?.item?.buy_limit}return res.value?.stock || goodsInfo.value.stock || 1}),canSubmit = computed(() => {if (!goodsInfo.value.sku_num) return falsereturn !res.value?.item}),getSku = () => API.other({ goods_id: goodsInfo._id, is_show: true, stock:true }, 'getSkuList').then(r => {skuObj = new Sku(goodsInfo.value.attribute, r.data || []);skuClick()}).catch(() => []),addCar = () => store.dispatch('car/addCar',[goodsInfo.value,res.value?.item,buyNum.value]).then(() => {hide()});watch([()=>p.value,()=>store.getters.skuShow,()=>store.getters.goodsInfo,()=>p.goodsInfo],([nV,nSV,nGs,nG]) => {// console.log('nV',nV,'nSV',nSV,'nGs',nGs,'p.goodsInfo',nG)goodsInfo.value = nG||nGs;if (!nV || !nSV || !goodsInfo.value?.attribute) {if (nV||nSV) buyNum.value = store.getters.car?.[nG?._id]?.data?.[0]?.num || 1// return}// console.log('getSku')(nV||nSV) && getSku()},{immediate:true})return {goodsInfo,hide,skuClick,attrObj,attrValObj,price,stock,buyNum,buyMaxNum,canSubmit,addCar,attrNameObj}}
}
</script><style lang="scss" scoped>
.model{position: fixed;top: 0;left: 0;bottom: 0;right: 0;width: 100vw;height: 100vh;background-color: rgba(0, 0, 0, 0.5);transition: transform .3s ease-in-out;box-sizing: border-box;&-0{transform: translateY(100%);&.show{transform: translateY(0);z-index: 999;}}&-1{transform: scale(0);&.show{transform: scale(1);z-index: 999;}}.submit{left: 30rpx;bottom: 0;width: calc(100% - 60rpx);}.box{bottom: 0;left: 0;max-height: 80vh;.close{$w: 50rpx;width: $w;height:$w;left: 0;top: 0;}.img{width: 100%;height: 360rpx;overflow: hidden;image{width: 100%;}}.title{font-weight: bold;}.attr{padding: 20rpx 30rpx;.vals{.tag {margin-left: 20rpx;}}}.foot{margin: 30rpx 30rpx 0 30rpx;padding: 30rpx 0;border-top: 1rpx solid $uni-text-color-grey3;.money{font-family: 'myFont';}.select-attr{.ai{&:after{content: '/';margin: 0 10rpx;color: $uni-text-color-grey1;}&:last-of-type:after{content: unset;}}}.action {.submit-car{width: 200rpx;height: 60rpx;border-radius: 30rpx;color: #FFFFFF;}}}}&-1{.box{width: calc(100% - 100rpx);}}}
</style>

SKU逻辑 vue实现一起学习交流相关推荐

ssm毕设项目学生出国境学习交流管理87153（java+VUE+Mybatis+Maven+Mysql+sprnig）
ssm毕设项目学生出国境学习交流管理87153(java+VUE+Mybatis+Maven+Mysql+sprnig) 项目运行环境配置: Jdk1.8 + Tomcat8.5 + Mysql + ...
springboot学习交流系统计算机专业毕业设计源码62600
摘要随着科学技术的飞速发展,社会的方方面面.各行各业都在努力与现代的先进技术接轨,通过科技手段来提高自身的优势,学习交流系统当然也不能排除在外.学习交流系统是以实际运用为开发背景,运用软件工程原 ...
Springboot学习交流系统毕业设计-附源码62600
摘要随着科学技术的飞速发展,社会的方方面面.各行各业都在努力与现代的先进技术接轨,通过科技手段来提高自身的优势,学习交流系统当然也不能排除在外.学习交流系统是以实际运用为开发背景,运用软件工程原 ...
java毕业生设计紫陶文化传播与学习交流网站计算机源码+系统+mysql+调试部署+lw
java毕业生设计紫陶文化传播与学习交流网站计算机源码+系统+mysql+调试部署+lw java毕业生设计紫陶文化传播与学习交流网站计算机源码+系统+mysql+调试部署+lw 本源码技术栈: 项目 ...
autojs 手游脚本UI demo【仅供学习交流】
autojs 问道手游脚本[仅供学习交流] 此处提供简易版悬浮窗demo 详情实现私聊博主 importClass(android.view.View); var entries = "主 ...
Vue源码学习之Computed与Watcher原理
前言 computed与watch是我们在vue中常用的操作,computed是一个惰性求值观察者,具有缓存性,只有当依赖发生变化,第一次访问computed属性,才会计算新的值.而watch则是当 ...
Vue源码学习 - 组件化(三) 合并配置
Vue源码学习 - 组件化(三) 合并配置合并配置外部调用场景组件场景总结学习内容和文章内容来自黄轶老师黄轶老师的慕课网视频教程地址:<Vue.js2.0 源码揭秘>. 黄轶 ...
VUE源码学习第一篇--前言
一.目的前端技术的发展,现在以vue,react,angular为代表的MVVM模式以成为主流,这三个框架大有三分天下之势.react和angular有facebook与谷歌背书,而vue是以一己之 ...
java计算机毕业设计紫陶文化传播与学习交流网站源码+mysql数据库+系统+lw文档+部署
java计算机毕业设计紫陶文化传播与学习交流网站源码+mysql数据库+系统+lw文档+部署 java计算机毕业设计紫陶文化传播与学习交流网站源码+mysql数据库+系统+lw文档+部署本源码技术栈 ...

SKU逻辑 vue实现一起学习交流

数据结构

直接上码

SKU逻辑 vue实现一起学习交流相关推荐

最新文章

热门文章