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.
 
 
 
 

145 lines
4.1 KiB

<template>
<view>
<view class="product-window" :class="attr.cartAttr === true ? 'on' : ''">
<view class="textpic acea-row row-between-wrapper">
<view class="pictrue">
<image @tap="previewImage" :src="attr.productSelect.image" class="image" />
</view>
<view class="text">
<view class="line1">{{ attr.productSelect.store_name }}</view>
<view class="money font-color-red" v-if="!isIntegral">
<text class="num">{{ attr.productSelect.price }}</text>
<text class="stock">库存: {{ attr.productSelect.stock }}</text>
</view>
<view class="money font-color-red" v-if="isIntegral">
<text class="num">{{ attr.productSelect.integral }}积分</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: {
isIntegral:Boolean,
attr: {
type: Object,
default: () => {},
},
cartNum: {
type: Number,
default: () => 1,
},
},
data: function () {
return {};
},
mounted: function () {
console.log(this);
},
watch: {
attr(nextAttr) {
},
},
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[indexw].index = 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;
},
previewImage() {
uni.previewImage({
current: 0,
urls: [this.attr.productSelect.image],
});
},
},
};
</script>
<style scoped lang="less">
.product-window{
padding-bottom: 190rpx;
}
</style>