144 lines
4.3 KiB
Vue
144 lines
4.3 KiB
Vue
<template>
|
|
<view>
|
|
<view class="product-window" :class="attr.cartAttr === true ? 'on' : ''">
|
|
<view class="textpic acea-row row-between-wrapper">
|
|
<view class="pictrue" @click="previewImg(attr.productSelect.image)">
|
|
<image :src="attr.productSelect.image" class="image" />
|
|
</view>
|
|
<view class="text">
|
|
<view class="line1">{{ attr.productSelect.store_name }}</view>
|
|
<view class="money font-color-lightred">
|
|
￥
|
|
<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
|
|
v-for="(itemn, indexn) in item.attrValue"
|
|
:key="indexn"
|
|
:class="{
|
|
'on': item.index == indexn,
|
|
'disabled': getAttrItemData(itemn.attr).stock === 0
|
|
}"
|
|
class="itemn"
|
|
@click="tapAttr(indexw, indexn, itemn)"
|
|
>
|
|
{{ itemn.attr }}
|
|
<text
|
|
v-if="getAttrItemData(itemn.attr).stock === 0"
|
|
class="tag"
|
|
>缺货</text>
|
|
</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: () => {}
|
|
},
|
|
// 使用字符串再转成对象的原因是，当key='2.5g'时，会变成key='2'，导致数据丢失
|
|
productValueStr: {
|
|
type: String,
|
|
default: '{}'
|
|
},
|
|
productValueArr: {
|
|
type: Array,
|
|
default: () => {
|
|
return []
|
|
}
|
|
},
|
|
cartNum: {
|
|
type: Number,
|
|
default: () => 1
|
|
}
|
|
},
|
|
methods: {
|
|
previewImg:function(imgUrl){
|
|
uni.previewImage({
|
|
urls:[imgUrl]
|
|
})
|
|
},
|
|
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 })
|
|
},
|
|
getAttrItemData(attr) {
|
|
let result = {}
|
|
this.productValueArr.map(item => {
|
|
if (item.attrItemkey === attr) {
|
|
result = item
|
|
}
|
|
})
|
|
return result
|
|
},
|
|
tapAttr: function(indexw, indexn, itemn) {
|
|
if (this.getAttrItemData(itemn.attr).stock === 0) {
|
|
return
|
|
}
|
|
// 修改商品规格不生效的原因：
|
|
// H5端下面写法，attr更新，但是除H5外其他端不支持，
|
|
// 尽量避免下面的骚写法，不要在子组件内更新props
|
|
// 这里修改是为了能获取到被选中的属性
|
|
this.attr.productAttr[indexw].index = indexn
|
|
const value = this.getCheckedValue().sort().join(",")
|
|
this.$emit("changeFun", {
|
|
action: "ChangeAttr",
|
|
value: {
|
|
value,
|
|
indexw,
|
|
indexn
|
|
}
|
|
})
|
|
},
|
|
// 获取被选中属性
|
|
getCheckedValue: function() {
|
|
const productAttr = this.attr.productAttr
|
|
const 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>
|