Refactor(商品详情):规格是否无库存通过接口查询
This commit is contained in:
lifizer
+2
-2
@@ -28,8 +28,8 @@ export function getProductDetail(id, data) {
|
||||
/*
|
||||
* 商品规格选中
|
||||
* */
|
||||
export function getProductSkuBySelected(id, data) {
|
||||
return request.get("api/product/getSkuBySelected/" + id, data, {
|
||||
export function getProductSkuBySelected(data) {
|
||||
return request.post("/product/getSkuBySelected", data, {
|
||||
login: true
|
||||
});
|
||||
}
|
||||
|
||||
@@ -2,27 +2,27 @@
|
||||
<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 class="pictrue" @click="previewImg(attrObj.productSelect.image)">
|
||||
<image :src="attrObj.productSelect.image" class="image" />
|
||||
</view>
|
||||
<view class="text">
|
||||
<view class="money font-color-lightred v12-font-">
|
||||
￥
|
||||
<text class="num v12-font-40">{{ attr.productSelect.price }}</text>
|
||||
<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;">{{ attr.productSelect.otPrice }}</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">库存: {{ attr.productSelect.stock }}</text> -->
|
||||
<!-- <text class="stock">库存: {{ attrObj.productSelect.stock }}</text> -->
|
||||
</view>
|
||||
<view class="more-t">{{ attr.productSelect.store_name }}</view>
|
||||
<view class="more-t">{{ attrObj.productSelect.store_name }}</view>
|
||||
</view>
|
||||
<view class="iconfont icon-guanbi" @click="closeAttr"></view>
|
||||
</view>
|
||||
<view class="productWinList">
|
||||
<view
|
||||
class="item"
|
||||
v-for="(item, index) in attr.productAttr"
|
||||
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">
|
||||
@@ -30,7 +30,7 @@
|
||||
v-for="(subItem, subIndex) in item.attrValue"
|
||||
:key="subIndex"
|
||||
:class="{
|
||||
'actived': item.index == subIndex,
|
||||
'actived': subItem.check,
|
||||
'disabled': !subItem.canUsed
|
||||
}"
|
||||
class="itemn v12-radius-40"
|
||||
@@ -51,7 +51,7 @@
|
||||
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 >= attr.productSelect.stock
|
||||
cartNum >= attrObj.productSelect.stock
|
||||
? 'on'
|
||||
: ''
|
||||
"
|
||||
@@ -75,23 +75,29 @@ export default {
|
||||
}
|
||||
}
|
||||
},
|
||||
// 使用字符串再转成对象的原因是，当key='2.5g'时，会变成key='2'，导致数据丢失
|
||||
productValueStr: {
|
||||
type: String,
|
||||
default: '{}'
|
||||
},
|
||||
productValueArr: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return []
|
||||
}
|
||||
},
|
||||
cartNum: {
|
||||
type: Number,
|
||||
default: () => 1
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
attrObj: {
|
||||
productSelect: {},
|
||||
productAttr: []
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.$set(this, 'attrObj', JSON.parse(JSON.stringify(this.attr)))
|
||||
console.log(this.attrObj)
|
||||
},
|
||||
methods: {
|
||||
reRender(data) {
|
||||
this.$set(this, 'attrObj', JSON.parse(JSON.stringify(data)))
|
||||
// console.log(this.attrObj.productAttr)
|
||||
this.$forceUpdate()
|
||||
},
|
||||
previewImg(imgUrl) {
|
||||
uni.previewImage({
|
||||
urls:[imgUrl]
|
||||
@@ -108,14 +114,15 @@ export default {
|
||||
},
|
||||
tapAttr(index, subIndex, subItem) {
|
||||
// 缺货的点击了没效果
|
||||
if (!subItem.canUsed) {
|
||||
if (!subItem.canUsed || subItem.check) {
|
||||
return
|
||||
}
|
||||
// 修改商品规格不生效的原因：
|
||||
// H5端下面写法，attr更新，但是除H5外其他端不支持，
|
||||
// 尽量避免下面的骚写法，不要在子组件内更新props
|
||||
// 这里修改是为了能获取到被选中的属性
|
||||
this.attr.productAttr[index].index = subIndex
|
||||
this.attrObj.productAttr[index].attrValue.map((subItem, subIdx) => {
|
||||
subItem.check= false
|
||||
if (subIndex === subIdx) {
|
||||
subItem.check = true
|
||||
}
|
||||
})
|
||||
const value = this.getCheckedValue().sort().join(",")
|
||||
this.$emit("changeFun", {
|
||||
action: "ChangeAttr",
|
||||
@@ -128,15 +135,15 @@ export default {
|
||||
},
|
||||
// 获取被选中属性
|
||||
getCheckedValue() {
|
||||
const productAttr = this.attr.productAttr
|
||||
const productAttr = this.attrObj.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])
|
||||
productAttr.map(item => {
|
||||
item.attrValue.map(subItem => {
|
||||
if (subItem.check) {
|
||||
value.push(subItem.attr)
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
return value
|
||||
}
|
||||
}
|
||||
|
||||
@@ -455,8 +455,8 @@
|
||||
|
||||
<ProductWindow
|
||||
v-if="productValueArr.length > 0"
|
||||
ref="attrWindow"
|
||||
:attr="attr"
|
||||
:product-value-arr="productValueArr"
|
||||
:cartNum="cart_num"
|
||||
@changeFun="changeFun"
|
||||
/>
|
||||
@@ -1119,15 +1119,22 @@ export default {
|
||||
// 默认选中属性
|
||||
DefaultSelect() {
|
||||
const productAttr = this.attr.productAttr
|
||||
for (let i = 0; i < productAttr.length; i++) {
|
||||
this.$set(productAttr[i], "index", this.attr.defaultSkuIndex[i])
|
||||
}
|
||||
const productAttrLength = productAttr.length
|
||||
this.attr.productAttr.map((item, index) => {
|
||||
item.attrValue.map((subItem, subIndex) => {
|
||||
if (this.attr.defaultSkuIndex[index] === subIndex) {
|
||||
subItem.check = true
|
||||
} else {
|
||||
subItem.check = false
|
||||
}
|
||||
})
|
||||
})
|
||||
const skuKey = (this.attr.defaultSku || []).join(',')
|
||||
if (!skuKey) {
|
||||
return
|
||||
}
|
||||
const productSelect = this.getAttrItemData(skuKey)
|
||||
if (productSelect && productAttr.length) {
|
||||
if (productSelect && productAttrLength) {
|
||||
this.$set(
|
||||
this.attr.productSelect,
|
||||
'store_name',
|
||||
@@ -1143,7 +1150,7 @@ export default {
|
||||
this.$set(this, 'attrValue', skuKey)
|
||||
this.$set(this, 'attrTxt', '已选择')
|
||||
this.getSkuActiveStatus(skuKey)
|
||||
} else if (!productSelect && productAttr.length) {
|
||||
} else if (!productSelect && productAttrLength) {
|
||||
this.$set(
|
||||
this.attr.productSelect,
|
||||
'store_name',
|
||||
@@ -1157,7 +1164,7 @@ export default {
|
||||
this.$set(this.attr.productSelect, 'cart_num', 0)
|
||||
this.$set(this, 'attrValue', '')
|
||||
this.$set(this, 'attrTxt', '请选择')
|
||||
} else if (!productSelect && !productAttr.length) {
|
||||
} else if (!productSelect && !productAttrLength) {
|
||||
this.$set(
|
||||
this.attr.productSelect,
|
||||
'store_name',
|
||||
@@ -1233,6 +1240,7 @@ export default {
|
||||
this.attr.cartAttr = true
|
||||
this.isOpen = true
|
||||
},
|
||||
// 关闭属性
|
||||
changeattr(msg) {
|
||||
// 修改了规格
|
||||
this.attr.cartAttr = msg
|
||||
@@ -1240,11 +1248,16 @@ export default {
|
||||
},
|
||||
// 选择属性
|
||||
ChangeAttr(res) {
|
||||
const value = res.value
|
||||
const { index, subIndex, value } = res
|
||||
// 修改了规格
|
||||
let productSelect = this.getAttrItemData(value)
|
||||
const productSelect = this.getAttrItemData(value)
|
||||
if (productSelect) {
|
||||
this.attr.productAttr[res.index].index = res.subIndex
|
||||
this.attr.productAttr[index].attrValue.map((subItem, subIdx) => {
|
||||
subItem.check= false
|
||||
if (subIndex === subIdx) {
|
||||
subItem.check = true
|
||||
}
|
||||
})
|
||||
this.$set(this.attr.productSelect, 'image', productSelect.image)
|
||||
this.$set(this.attr.productSelect, 'price', productSelect.price)
|
||||
this.$set(this.attr.productSelect, 'otPrice', productSelect.otPrice)
|
||||
@@ -1267,7 +1280,7 @@ export default {
|
||||
},
|
||||
// 获取规格组是否能点击(右上角是否有缺货标识)
|
||||
getSkuActiveStatus(selectedSku) {
|
||||
getProductSkuBySelected(this.id, { selectedSku }).then(res => {
|
||||
getProductSkuBySelected({ id: this.id, selectedSku }).then(res => {
|
||||
const { success, data } = res
|
||||
if (success) {
|
||||
for (const key in data) {
|
||||
@@ -1285,6 +1298,7 @@ export default {
|
||||
})
|
||||
}
|
||||
}
|
||||
this.$refs.attrWindow.reRender(this.attr)
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user