107 lines
3.4 KiB
Vue
107 lines
3.4 KiB
Vue
<template>
|
|
<div>
|
|
<headerNav title="我的收藏"/>
|
|
<van-list
|
|
v-model="loading"
|
|
:finished="finished"
|
|
@load="onLoad"
|
|
>
|
|
<div v-for="(item,index) in list" :key="index">
|
|
<van-swipe-cell :right-width="65" :on-close="onClose(item)">
|
|
<van-card
|
|
:price="formatPrice(item.price)"
|
|
:desc="item.sellPoint"
|
|
:title="item.spuName"
|
|
:thumb="item.spuImage"
|
|
@click="skipProductSpuInfo(item.spuId)"
|
|
>
|
|
</van-card>
|
|
<template slot="right">
|
|
<van-button square type="danger" text="删除"/>
|
|
</template>
|
|
|
|
</van-swipe-cell>
|
|
</div>
|
|
</van-list>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {GetFavoritePage, DelFavorite} from "../../../api/user.js";
|
|
export default {
|
|
data() {
|
|
return {
|
|
loading: false,
|
|
finished: false,
|
|
list: [],
|
|
page: 0,
|
|
pageSize: 10
|
|
}
|
|
},
|
|
methods: {
|
|
formatPrice(data) {
|
|
return (data / 100).toFixed(2);
|
|
},
|
|
skipProductSpuInfo(data) {
|
|
// return getProductSpuInfo(data);
|
|
this.$router.push('/product/'+data);
|
|
},
|
|
onClose(item) {
|
|
return function (clickPosition, instance) {
|
|
switch (clickPosition) {
|
|
case 'left':
|
|
case 'cell':
|
|
case 'outside':
|
|
instance.close();
|
|
break;
|
|
case 'right':
|
|
this.$dialog.confirm({
|
|
message: '确定删除吗？'
|
|
}).then(() => {
|
|
DelFavorite(item.spuId).then(response => {
|
|
this.$toast('删除成功');
|
|
this.$router.go(0);
|
|
})
|
|
instance.close();
|
|
}).catch(() => {
|
|
// on cancel
|
|
});
|
|
break;
|
|
}
|
|
}
|
|
},
|
|
onLoad() {
|
|
let pageNo = this.page + 1;
|
|
GetFavoritePage(pageNo, this.pageSize).then(response => {
|
|
this.page = pageNo;
|
|
this.list.push(...response.list);
|
|
// response.list.forEach(item => {
|
|
// this.list.push(item);
|
|
// });
|
|
this.loading = false;
|
|
if (this.list.length >= response.total) {
|
|
this.finished = true;
|
|
}
|
|
|
|
})
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="less">
|
|
.van-swipe-cell {
|
|
&__left,
|
|
&__right {
|
|
color: #FFFFFF;
|
|
font-size: 15px;
|
|
width: 65px;
|
|
height: 100px;
|
|
display: inline-block;
|
|
text-align: center;
|
|
line-height: 100px;
|
|
background-color: #F44;
|
|
}
|
|
}
|
|
</style>
|