264 lines
7.6 KiB
Vue
264 lines
7.6 KiB
Vue
<template>
|
|
<view>
|
|
<view class="product-window" :class="attr.cartAttr === true ? 'on' : ''" :style="{paddingBottom: paddingBottom}">
|
|
<view class="textpic acea-row row-between-wrapper">
|
|
<view class="pictrue" @click="previewImg(attrObj.productSelect.image)">
|
|
<image :src="attrObj.productSelect.image" class="image" />
|
|
</view>
|
|
<view class="text">
|
|
<view v-if="!isNegotiable" class="money font-color-lightred v12-font-">
|
|
￥
|
|
<text class="num v12-font-40">{{ attrObj.productSelect.price }}</text>
|
|
<text class="v12-ml-2 v12-font-weight-300 v12-font-22" style="color: #BBBBBB; text-decoration: line-through;">￥</text>
|
|
<text class="v12-mr-2 v12-font-weight-300 v12-font-22" style="color: #BBBBBB; text-decoration: line-through;">{{ attrObj.productSelect.otPrice }}</text>
|
|
<text class="v12-white-text v12-red v12-font-22 v12-radius-40 v12-px-1 v12-font-weight-400">会员价</text>
|
|
<!-- <text class="stock">库存: {{ attrObj.productSelect.stock }}</text> -->
|
|
</view>
|
|
<view class="v12-primary-text" v-else>价格面议</view>
|
|
<view class="more-t">{{ attrObj.productSelect.store_name }}</view>
|
|
</view>
|
|
<view class="iconfont icon-guanbi" @click="closeAttr"></view>
|
|
</view>
|
|
<view class="productWinList">
|
|
<view
|
|
v-for="(item, index) in attrObj.productAttr"
|
|
:key="index"
|
|
class="item"
|
|
>
|
|
<view class="title">{{ item.attrName }}</view>
|
|
<view class="listn acea-row v12-justify-start">
|
|
<view
|
|
v-for="(subItem, subIndex) in item.attrValue"
|
|
:key="subIndex"
|
|
:class="{
|
|
'actived': subItem.check,
|
|
'disabled': !subItem.canUsed
|
|
}"
|
|
class="itemn v12-radius-40"
|
|
@click="tapAttr(index, subIndex, subItem)"
|
|
>
|
|
{{ subItem.attr }}
|
|
<text v-if="!subItem.canUsed" class="less-tag" style="color: #fff !important;">缺货</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="cart v12-justify-between v12-align-center">
|
|
<view class="titlev12-dark-text f12-font-32">购买数量</view>
|
|
<view class="carnum acea-row row-left">
|
|
<view style="border-radius: 40rpx 0rpx 0rpx 40rpx" class="cart-btn item reduce v12-font-36 v12-font-bold v12-white-text v12-dark1 v12-dark1-border" :class="cartNum <= 1 ? 'on' : ''" @click="CartNumDes">-</view>
|
|
<input
|
|
type="number"
|
|
:min="1"
|
|
:max="attrObj.productSelect.stock"
|
|
@blur="inputNumer(cartNumber)"
|
|
v-model="cartNumber"
|
|
style="height: 55rpx !important; width:80rpx !important"
|
|
class="item v12-font-36 v12-font-bold v12-dark-text cart-btn" />
|
|
<view
|
|
style="border-radius:0 40rpx 40rpx 0"
|
|
class="item plus v12-font-bold v12-white-text v12-primary v12-primary-border v12-font-36 cart-btn"
|
|
:class="
|
|
cartNum >= attrObj.productSelect.stock
|
|
? 'on'
|
|
: ''
|
|
"
|
|
@click="CartNumAdd"
|
|
>+</view>
|
|
</view>
|
|
</view>
|
|
<view class="v12-px-2 v12-mt-3" v-if="showOk">
|
|
<u-button
|
|
shape="circle"
|
|
color="#C52733"
|
|
@click="$emit('ok')"
|
|
:disabled="(attr.productSelect.stock === 0 && attr.cartAttr)"
|
|
>加入购物车</u-button>
|
|
</view>
|
|
<view class="v12-px-2 v12-mt-3" v-if="isGift">
|
|
<u-button
|
|
shape="circle"
|
|
color="#C52733"
|
|
@click="$emit('gift')"
|
|
:disabled="(attr.productSelect.stock === 0 && attr.cartAttr)"
|
|
>送给朋友</u-button>
|
|
</view>
|
|
</view>
|
|
<view class="mask" @touchmove.prevent :hidden="attr.cartAttr === false" @click="closeAttr"></view>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
name: "ProductWindow",
|
|
props: {
|
|
isNegotiable: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
isGift: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
paddingBottom: {
|
|
type: String,
|
|
default: '160rpx'
|
|
},
|
|
showOk: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
attr: {
|
|
type: Object,
|
|
default: () => {
|
|
return {
|
|
productAttr: []
|
|
}
|
|
}
|
|
},
|
|
cartNum: {
|
|
type: Number,
|
|
default: () => 1
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
cartNumber: this.cartNum,
|
|
attrObj: {
|
|
productSelect: {},
|
|
productAttr: []
|
|
}
|
|
}
|
|
},
|
|
watch: {
|
|
'attr.cartAttr': {
|
|
handler(val) {
|
|
console.log(val);
|
|
if(!val) {
|
|
this.cartNumber = 1
|
|
}
|
|
},
|
|
deep: true,
|
|
immediate: true
|
|
},
|
|
cartNum: {
|
|
handler(val) {
|
|
this.cartNumber = val || 1
|
|
},
|
|
deep: true,
|
|
immediate: true
|
|
},
|
|
cartNumber(val) {
|
|
if (val > this.attrObj.productSelect.stock) {
|
|
val = this.attrObj.productSelect.stock
|
|
}
|
|
this.$emit('input', +val)
|
|
this.$emit("changeFun", { action: "ChangeCartNum", value: +val })
|
|
}
|
|
},
|
|
created() {
|
|
this.$set(this, 'attrObj', JSON.parse(JSON.stringify(this.attr)))
|
|
},
|
|
methods: {
|
|
inputNumer(e) {
|
|
if(e === '') {
|
|
this.cartNumber = 1
|
|
this.$forceUpdate()
|
|
}
|
|
if(+e > this.attrObj.productSelect.stock) {
|
|
this.cartNumber = this.attrObj.productSelect.stock
|
|
this.$forceUpdate()
|
|
}
|
|
},
|
|
reRender(data) {
|
|
this.$set(this, 'attrObj', JSON.parse(JSON.stringify(data)))
|
|
// console.log(this.attrObj.productAttr)
|
|
this.$forceUpdate()
|
|
},
|
|
previewImg(imgUrl) {
|
|
uni.previewImage({
|
|
urls:[imgUrl]
|
|
})
|
|
},
|
|
closeAttr() {
|
|
this.$emit("changeFun", { action: "changeattr", value: false })
|
|
},
|
|
CartNumDes() {
|
|
if(this.cartNumber === 1) return
|
|
console.log(this.cartNumber, 'cartNumber');
|
|
this.cartNumber--
|
|
this.$emit("changeFun", { action: "ChangeCartNum", value: this.cartNumber })
|
|
},
|
|
CartNumAdd() {
|
|
if(this.cartNumber >= this.attrObj.productSelect.stock) return
|
|
this.cartNumber++
|
|
this.$emit("changeFun", { action: "ChangeCartNum", value: this.cartNumber })
|
|
},
|
|
tapAttr(index, subIndex, subItem) {
|
|
// 缺货的点击了没效果
|
|
if (!subItem.canUsed || subItem.check) {
|
|
return
|
|
}
|
|
this.attrObj.productAttr[index].attrValue.map((subItem, subIdx) => {
|
|
subItem.check= false
|
|
if (subIndex === subIdx) {
|
|
subItem.check = true
|
|
}
|
|
})
|
|
const value = this.getCheckedValue().sort().join(",")
|
|
this.cartNumber = 1
|
|
this.$emit("changeFun", {
|
|
action: "ChangeAttr",
|
|
value: {
|
|
value,
|
|
index,
|
|
subIndex
|
|
}
|
|
})
|
|
},
|
|
// 获取被选中属性
|
|
getCheckedValue() {
|
|
const productAttr = this.attrObj.productAttr
|
|
const value = []
|
|
productAttr.map(item => {
|
|
item.attrValue.map(subItem => {
|
|
if (subItem.check) {
|
|
value.push(subItem.attr)
|
|
}
|
|
})
|
|
})
|
|
return value
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style scope>
|
|
.itemn{
|
|
margin: 28rpx 0 0 34rpx !important;
|
|
width: auto;
|
|
}
|
|
.money{
|
|
margin-top: 0 !important
|
|
}
|
|
.actived{
|
|
border-color: #C52733 !important;
|
|
color: #fff !important;
|
|
background: #C52733
|
|
}
|
|
.cart-btn{
|
|
height:52rpx !important;
|
|
width:52rpx !important
|
|
}
|
|
.less-tag{
|
|
position: absolute;
|
|
background: #FF5562;
|
|
border-radius: 8rpx;
|
|
height: 38rpx;
|
|
line-height: 38rpx;
|
|
right: -15px;
|
|
top: -10px;
|
|
padding: 0 3px;
|
|
font-size: 24rpx;
|
|
font-weight:400
|
|
}
|
|
</style>
|