You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
114 lines
3.5 KiB
114 lines
3.5 KiB
<template> |
|
<view> |
|
<view class="product-window" :class="attr.cartAttr === true ? 'on' : ''"> |
|
<view class="textpic acea-row row-between-wrapper"> |
|
<view class="pictrue"> |
|
<image :src="attr.productSelect.image" class="image" /> |
|
</view> |
|
<view class="text"> |
|
<view class="line1">{{ attr.productSelect.store_name }}</view> |
|
<view class="money font-color-red"> |
|
￥ |
|
<text class="num">{{ attr.productSelect.price }}</text> |
|
<text class="stock">库存: {{ attr.productSelect.stock }}</text> |
|
</view> |
|
</view> |
|
<view class="iconfont icon-guanbi" @click="closeAttr"></view> |
|
</view> |
|
<view class="productWinList"> |
|
<view class="item" v-for="(item, indexw) in attr.productAttr" :key="indexw"> |
|
<view class="title">{{ item.attrName }}</view> |
|
<view class="listn acea-row row-middle"> |
|
<view |
|
class="itemn" |
|
:class="item.index == indexn ? 'on' : ''" |
|
v-for="(itemn, indexn) in item.attrValue" |
|
@click="tapAttr(indexw, indexn)" |
|
:key="indexn" |
|
>{{ itemn.attr }}</view> |
|
</view> |
|
</view> |
|
</view> |
|
<view class="cart"> |
|
<view class="title">数量</view> |
|
<view class="carnum acea-row row-left"> |
|
<view class="item reduce" :class="cartNum <= 1 ? 'on' : ''" @click="CartNumDes">-</view> |
|
<view class="item num">{{ cartNum }}</view> |
|
<view |
|
class="item plus" |
|
:class=" |
|
cartNum >= attr.productSelect.stock |
|
? 'on' |
|
: '' |
|
" |
|
@click="CartNumAdd" |
|
>+</view> |
|
</view> |
|
</view> |
|
</view> |
|
<view class="mask" @touchmove.prevent :hidden="attr.cartAttr === false" @click="closeAttr"></view> |
|
</view> |
|
</template> |
|
<script> |
|
export default { |
|
name: "ProductWindow", |
|
props: { |
|
attr: { |
|
type: Object, |
|
default: () => {} |
|
}, |
|
cartNum: { |
|
type: Number, |
|
default: () => 1 |
|
} |
|
}, |
|
data: function() { |
|
return {}; |
|
}, |
|
mounted: function() { |
|
}, |
|
methods: { |
|
closeAttr: function() { |
|
this.$emit("changeFun", { action: "changeattr", value: false }); |
|
}, |
|
CartNumDes: function() { |
|
this.$emit("changeFun", { action: "ChangeCartNum", value: false }); |
|
}, |
|
CartNumAdd: function() { |
|
this.$emit("changeFun", { action: "ChangeCartNum", value: 1 }); |
|
}, |
|
tapAttr: function(indexw, indexn) { |
|
// 修改商品规格不生效的原因： |
|
// H5端下面写法，attr更新，但是除H5外其他端不支持， |
|
// 尽量避免下面的骚写法，不要在子组件内更新props |
|
// this.attr.productAttr[res.indexw].index = res.indexn; |
|
let that = this; |
|
let value = that |
|
.getCheckedValue() |
|
.sort() |
|
.join(","); |
|
that.$emit("changeFun", { |
|
action: "ChangeAttr", |
|
value: { |
|
value, |
|
indexw, |
|
indexn |
|
} |
|
}); |
|
}, |
|
//获取被选中属性； |
|
getCheckedValue: function() { |
|
let productAttr = this.attr.productAttr; |
|
let value = []; |
|
for (let i = 0; i < productAttr.length; i++) { |
|
for (let j = 0; j < productAttr[i].attrValueArr.length; j++) { |
|
if (productAttr[i].index === j) { |
|
value.push(productAttr[i].attrValueArr[j]); |
|
} |
|
} |
|
} |
|
return value; |
|
} |
|
} |
|
}; |
|
</script>
|
|
|