|
@@ -37,15 +37,16 @@
|
|
|
|
|
|
|
|
<van-empty description="暂无对比商品" v-else />
|
|
<van-empty description="暂无对比商品" v-else />
|
|
|
|
|
|
|
|
- <div class="contrast-content" v-if="list.length > 0">
|
|
|
|
|
|
|
+ <div class="contrast-content" v-if="showList.length > 0">
|
|
|
<div class="title">同类别推荐</div>
|
|
<div class="title">同类别推荐</div>
|
|
|
<div class="product-list">
|
|
<div class="product-list">
|
|
|
<product-row
|
|
<product-row
|
|
|
:checked="[...addList].includes(item.id)"
|
|
:checked="[...addList].includes(item.id)"
|
|
|
- v-for="item in list"
|
|
|
|
|
|
|
+ v-for="item in showList"
|
|
|
:key="item.id"
|
|
:key="item.id"
|
|
|
:info="item"
|
|
:info="item"
|
|
|
- @choose="choose"
|
|
|
|
|
|
|
+ @choose="chooseAdd"
|
|
|
|
|
+ :hasDel="false"
|
|
|
></product-row>
|
|
></product-row>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
@@ -58,15 +59,28 @@
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
</van-dialog>
|
|
</van-dialog>
|
|
|
|
|
+
|
|
|
|
|
+ <fixed-button :btnList="true">
|
|
|
|
|
+ <van-button
|
|
|
|
|
+ block
|
|
|
|
|
+ :radius="4"
|
|
|
|
|
+ @click="navigateTo('/pagesProduct/FilterVendor?categoryIds=' + (category.id || ''))"
|
|
|
|
|
+ >添加产品</van-button
|
|
|
|
|
+ >
|
|
|
|
|
+ <van-button block :color="$colors.warn" :radius="4" :disabled="chooseIds.length < 2"
|
|
|
|
|
+ >开始对比({{ chooseIds.length }})</van-button
|
|
|
|
|
+ >
|
|
|
|
|
+ </fixed-button>
|
|
|
</div>
|
|
</div>
|
|
|
</template>
|
|
</template>
|
|
|
<script>
|
|
<script>
|
|
|
|
|
+import FixedButton from '../components/FixedButton.vue';
|
|
|
import ProductRow from '../components/product/RowMini.vue';
|
|
import ProductRow from '../components/product/RowMini.vue';
|
|
|
|
|
+import { mapState } from 'vuex';
|
|
|
export default {
|
|
export default {
|
|
|
data() {
|
|
data() {
|
|
|
return {
|
|
return {
|
|
|
productId: '',
|
|
productId: '',
|
|
|
- contrastInfo: {},
|
|
|
|
|
chooseIds: [],
|
|
chooseIds: [],
|
|
|
list: [],
|
|
list: [],
|
|
|
addList: []
|
|
addList: []
|
|
@@ -79,11 +93,21 @@ export default {
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
|
computed: {
|
|
computed: {
|
|
|
|
|
+ ...mapState(['contrastInfo']),
|
|
|
contrastList() {
|
|
contrastList() {
|
|
|
return this.contrastInfo.product || [];
|
|
return this.contrastInfo.product || [];
|
|
|
},
|
|
},
|
|
|
category() {
|
|
category() {
|
|
|
return this.contrastInfo.category || {};
|
|
return this.contrastInfo.category || {};
|
|
|
|
|
+ },
|
|
|
|
|
+ showList() {
|
|
|
|
|
+ const list = [...this.list];
|
|
|
|
|
+ const contrastList = [...this.contrastList];
|
|
|
|
|
+ return list.filter(item => {
|
|
|
|
|
+ return !contrastList.find(child => {
|
|
|
|
|
+ return child.id === item.id;
|
|
|
|
|
+ });
|
|
|
|
|
+ });
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
|
watch: {
|
|
watch: {
|
|
@@ -98,15 +122,10 @@ export default {
|
|
|
methods: {
|
|
methods: {
|
|
|
loginMethods() {
|
|
loginMethods() {
|
|
|
this.chooseIds = [this.productId];
|
|
this.chooseIds = [this.productId];
|
|
|
- this.getContrastInfo()
|
|
|
|
|
|
|
+ this.$store
|
|
|
|
|
+ .dispatch('getContrastInfo')
|
|
|
.then(() => {
|
|
.then(() => {
|
|
|
- return this.$http.post('/intentionList/add', {
|
|
|
|
|
- productId: this.productId,
|
|
|
|
|
- type: 'PRODUCT_COMPARISON'
|
|
|
|
|
- });
|
|
|
|
|
- })
|
|
|
|
|
- .then(() => {
|
|
|
|
|
- this.getContrastInfo();
|
|
|
|
|
|
|
+ return this.addContrast(this.productId);
|
|
|
})
|
|
})
|
|
|
.catch(res => {
|
|
.catch(res => {
|
|
|
if (res.error === '已添加') {
|
|
if (res.error === '已添加') {
|
|
@@ -117,21 +136,24 @@ export default {
|
|
|
return this.clearAllContrast();
|
|
return this.clearAllContrast();
|
|
|
})
|
|
})
|
|
|
.then(() => {
|
|
.then(() => {
|
|
|
- return this.$http.post('/intentionList/add', {
|
|
|
|
|
- productId: this.productId,
|
|
|
|
|
- type: 'PRODUCT_COMPARISON'
|
|
|
|
|
- });
|
|
|
|
|
- })
|
|
|
|
|
- .then(() => {
|
|
|
|
|
- this.getContrastInfo();
|
|
|
|
|
|
|
+ return this.addContrast(this.productId);
|
|
|
})
|
|
})
|
|
|
.catch(e => {
|
|
.catch(e => {
|
|
|
- console.log('取消');
|
|
|
|
|
this.chooseIds = [];
|
|
this.chooseIds = [];
|
|
|
});
|
|
});
|
|
|
}
|
|
}
|
|
|
});
|
|
});
|
|
|
},
|
|
},
|
|
|
|
|
+ addContrast(productId) {
|
|
|
|
|
+ return this.$http
|
|
|
|
|
+ .post('/intentionList/add', {
|
|
|
|
|
+ productId: productId,
|
|
|
|
|
+ type: 'PRODUCT_COMPARISON'
|
|
|
|
|
+ })
|
|
|
|
|
+ .then(() => {
|
|
|
|
|
+ this.$store.dispatch('getContrastInfo');
|
|
|
|
|
+ });
|
|
|
|
|
+ },
|
|
|
clearAllContrast() {
|
|
clearAllContrast() {
|
|
|
return this.$http.post('/intentionList/delAll', {
|
|
return this.$http.post('/intentionList/delAll', {
|
|
|
type: 'PRODUCT_COMPARISON'
|
|
type: 'PRODUCT_COMPARISON'
|
|
@@ -146,15 +168,13 @@ export default {
|
|
|
});
|
|
});
|
|
|
})
|
|
})
|
|
|
.then(() => {
|
|
.then(() => {
|
|
|
|
|
+ if (this.chooseIds.includes(id)) {
|
|
|
|
|
+ this.choose(id);
|
|
|
|
|
+ }
|
|
|
this.toast('删除成功!', 'success');
|
|
this.toast('删除成功!', 'success');
|
|
|
- this.getContrastInfo();
|
|
|
|
|
|
|
+ this.$store.dispatch('getContrastInfo');
|
|
|
});
|
|
});
|
|
|
},
|
|
},
|
|
|
- getContrastInfo() {
|
|
|
|
|
- return this.$http.get('/intentionList/myCompared').then(res => {
|
|
|
|
|
- this.contrastInfo = res || {};
|
|
|
|
|
- });
|
|
|
|
|
- },
|
|
|
|
|
choose(id) {
|
|
choose(id) {
|
|
|
console.log(id);
|
|
console.log(id);
|
|
|
const chooseIds = [...this.chooseIds];
|
|
const chooseIds = [...this.chooseIds];
|
|
@@ -173,10 +193,17 @@ export default {
|
|
|
.then(res => {
|
|
.then(res => {
|
|
|
this.list = res;
|
|
this.list = res;
|
|
|
});
|
|
});
|
|
|
|
|
+ },
|
|
|
|
|
+ chooseAdd(id) {
|
|
|
|
|
+ this.addContrast(id).then(() => {
|
|
|
|
|
+ this.chooseIds.push(id);
|
|
|
|
|
+ this.$store.dispatch('getContrastInfo');
|
|
|
|
|
+ });
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
|
components: {
|
|
components: {
|
|
|
- ProductRow
|
|
|
|
|
|
|
+ ProductRow,
|
|
|
|
|
+ FixedButton
|
|
|
}
|
|
}
|
|
|
};
|
|
};
|
|
|
</script>
|
|
</script>
|
|
@@ -241,7 +268,7 @@ export default {
|
|
|
&::after {
|
|
&::after {
|
|
|
content: '';
|
|
content: '';
|
|
|
position: absolute;
|
|
position: absolute;
|
|
|
- bottom: 0;
|
|
|
|
|
|
|
+ top: 0;
|
|
|
left: 28px;
|
|
left: 28px;
|
|
|
right: 0px;
|
|
right: 0px;
|
|
|
height: 1px;
|
|
height: 1px;
|