diff --git a/api/store.js b/api/store.js index 55a6e35..423461f 100644 --- a/api/store.js +++ b/api/store.js @@ -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 }); } diff --git a/components/ProductWindow.vue b/components/ProductWindow.vue index a4b50ef..c6a0f0f 100644 --- a/components/ProductWindow.vue +++ b/components/ProductWindow.vue @@ -2,27 +2,27 @@ - - + + ￥ - {{ attr.productSelect.price }} + {{ attrObj.productSelect.price }} ￥ - {{ attr.productSelect.otPrice }} + {{ attrObj.productSelect.otPrice }} 会员价 - + - {{ attr.productSelect.store_name }} + {{ attrObj.productSelect.store_name }} {{ item.attrName }} @@ -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 } } diff --git a/pages/shop/GoodsCon/index.vue b/pages/shop/GoodsCon/index.vue index 5b6e9e3..2b59e21 100644 --- a/pages/shop/GoodsCon/index.vue +++ b/pages/shop/GoodsCon/index.vue @@ -455,8 +455,8 @@ @@ -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) } }) },