|
|
<template>
|
|
|
<div class="fav-type" v-infinite-scroll="loadMore()" infinite-scroll-disabled="busy" infinite-scroll-distance="10" >
|
|
|
<div class="fav-type" v-infinite-scroll="loadMore()" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
|
|
|
<ul class="fav-product-list">
|
|
|
<li v-for="item in productData" track-by="fav_id" id="li-{{item.fav_id}}"
|
|
|
v-touch-options:pan="{ direction: 'horizontal', threshold: 100}"
|
|
|
v-touch:panstart="panstart(item.fav_id)"
|
|
|
v-touch:panmove="panmove(item.fav_id)"
|
|
|
v-touch:panend="panend(item.fav_id)">
|
|
|
<div class="fav-del-left {{editmodel ? 'delshow': ''}}" @click="showDelBtn(item.fav_id)">
|
|
|
<span class="fav-del-span"><span class="icon icon-edit-del"></span></span>
|
|
|
</div>
|
|
|
<a :href="item | goodsUrl 'collection'">
|
|
|
<div class="fav-img-box">
|
|
|
<img :src="item.imgUrl | resize 152 203" alt=""/>
|
|
|
<div v-for="item in productData">
|
|
|
<li track-by="fav_id" id="li-{{item.fav_id}}" v-touch-options:pan="{ direction: 'horizontal', threshold: 100}" v-touch:panstart="panstart(item.fav_id)"
|
|
|
v-touch:panmove="panmove(item.fav_id)" v-touch:panend="panend(item.fav_id)">
|
|
|
<div class="fav-del-left {{editmodel ? 'delshow': ''}}" @click="showDelBtn(item.fav_id)">
|
|
|
<span class="fav-del-span"><span class="icon icon-edit-del"></span></span>
|
|
|
</div>
|
|
|
<div class="fav-info-list">
|
|
|
<span class="title line-clamp-2">{{item.title}}</span>
|
|
|
<br/>
|
|
|
<div class="fav-price">
|
|
|
<span class="new-price" v-if="item.discountPrice">{{item.discountPrice}}</span>
|
|
|
<span class="{{ item.discountPrice ? 'price-underline' : ''}}">{{item.price}}</span>
|
|
|
<a :href="item | goodsUrl 'collection'">
|
|
|
<div class="fav-img-box">
|
|
|
<img :src="item.imgUrl | resize 152 203" alt="" />
|
|
|
</div>
|
|
|
<br/>
|
|
|
<div class="save-price">
|
|
|
<span class="sell-out" v-if="item.sellOut || item.invalidGoods">{{item.sellOut ? '已售罄' : '已下架'}}</span>
|
|
|
<div class="fav-info-list">
|
|
|
<span class="title line-clamp-2">{{item.title}}</span>
|
|
|
<div class="fav-price">
|
|
|
<span class="new-price" v-if="item.discountPrice">{{item.discountPrice}}</span>
|
|
|
<span class="{{ item.discountPrice ? 'price-underline' : ''}}">{{item.price}}</span>
|
|
|
</div>
|
|
|
<br/>
|
|
|
<div class="save-price">
|
|
|
<span class="sell-out" v-if="item.sellOut || item.invalidGoods">{{item.sellOut ? '已售罄' : '已下架'}}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</a>
|
|
|
<div class="fav-del-right hide" id="del-{{item.fav_id}}" @click="delItem($index, item.fav_id)">
|
|
|
<span class="icon icon-delete"></span>
|
|
|
<br/>
|
|
|
<span class="fav-del-txt">删除</span>
|
|
|
</div>
|
|
|
</a>
|
|
|
<div class="fav-del-right hide" id="del-{{item.fav_id}}" @click="delItem($index, item.fav_id)">
|
|
|
<span class="icon icon-delete"></span>
|
|
|
<br/>
|
|
|
<span class="fav-del-txt">删除</span>
|
|
|
</div>
|
|
|
</li>
|
|
|
</li>
|
|
|
<hr>
|
|
|
</div>
|
|
|
</ul>
|
|
|
<div class="fav-null-box {{ nullbox }}">
|
|
|
<span class="fav-null">您暂无收藏任何商品</span>
|
...
|
...
|
@@ -266,13 +265,19 @@ |
|
|
}
|
|
|
|
|
|
.fav-product-list {
|
|
|
padding-left: 20px;
|
|
|
list-style: none;
|
|
|
overflow: hidden;
|
|
|
|
|
|
hr {
|
|
|
margin-right: 30px;
|
|
|
border: 1px solid #eee;
|
|
|
border-bottom: 0;
|
|
|
}
|
|
|
|
|
|
li {
|
|
|
position: relative;
|
|
|
height: 205px;
|
|
|
margin: 20px 0;
|
|
|
}
|
|
|
|
|
|
.fav-del-left {
|
...
|
...
|
@@ -301,18 +306,18 @@ |
|
|
|
|
|
.fav-del-right {
|
|
|
position: absolute;
|
|
|
top: 0;
|
|
|
top: -20px;
|
|
|
right: -126px;
|
|
|
background: #ff3b30;
|
|
|
width: 126px;
|
|
|
height: 200px;
|
|
|
height: 245px;
|
|
|
text-align: center;
|
|
|
|
|
|
.icon-delete {
|
|
|
display: inline-block;
|
|
|
color: white;
|
|
|
font-size: 35px;
|
|
|
margin-top: 55px;
|
|
|
margin-top: 85px;
|
|
|
}
|
|
|
|
|
|
.fav-del-txt {
|
...
|
...
|
@@ -342,7 +347,6 @@ |
|
|
.fav-info-list {
|
|
|
color: #444;
|
|
|
font-size: 24px;
|
|
|
border-bottom: 1px solid #e0e0e0;
|
|
|
padding-bottom: 20px;
|
|
|
height: 203px;
|
|
|
overflow: hidden;
|
...
|
...
|
@@ -352,11 +356,10 @@ |
|
|
width: 98%;
|
|
|
text-overflow: ellipsis;
|
|
|
font-size: 28px;
|
|
|
margin-top: 10px;
|
|
|
}
|
|
|
|
|
|
.fav-price {
|
|
|
margin-top: 20px;
|
|
|
margin-top: 30px;
|
|
|
}
|
|
|
|
|
|
.new-price {
|
...
|
...
|
@@ -381,7 +384,7 @@ |
|
|
|
|
|
.sell-out {
|
|
|
float: right;
|
|
|
padding: 5px 18px;
|
|
|
padding: 5px 30px;
|
|
|
color: #b0b0b0;
|
|
|
border-radius: 20px;
|
|
|
font-size: 22px;
|
...
|
...
|
|