You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
281 lines
8.8 KiB
281 lines
8.8 KiB
<template>
|
|
<view>
|
|
<lf-nav :spreadOut="true" :showIcon="true" bgColor="#fff" title="收藏"></lf-nav>
|
|
<view v-if="title_tab.length">
|
|
<u-tabs :list="title_tab" active-color="#15716E" inactive-color='#777777' :is-scroll="true" :current="title_current" @change="titletabChange"></u-tabs>
|
|
</view>
|
|
|
|
<view v-if="title_current==0">
|
|
<view class="lf-p-30 lf-flex" v-for="i of 8">
|
|
<image class="collect-img" src="https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png" mode="aspectFill"></image>
|
|
<view class="lf-flex-column lf-m-l-20" style="width: 480rpx;min-height: 160rpx;justify-content: space-between;">
|
|
<view class="lf-font-36 lf-color-black lf-line-1">luckin coffee 瑞幸瑞幸咖啡瑞幸咖啡瑞幸咖啡瑞幸咖啡咖啡</view>
|
|
<view class="lf-font-24 lf-color-777">餐饮·美食｜18件在售</view>
|
|
<view class="lf-font-24 lf-color-777">
|
|
<text class="lf-iconfont icon-dizhi lf-font-20 lf-color-primary"></text>
|
|
<text class="lf-m-l-10">L2</text>
|
|
</view>
|
|
</view>
|
|
<view class="lf-iconfont icon-shoucang lf-font-38" style="color: #FF9D9D;"></view>
|
|
</view>
|
|
</view>
|
|
<view class="lf-p-b-30 lf-m-t-30" v-else>
|
|
<lf-waterfall :list="list" :ifsale="false" ref="uWaterfall"></lf-waterfall>
|
|
<!-- <u-loadmore v-if="recomm_list.length" status="已加载全部数据~" @loadmore="addRandomData"></u-loadmore> -->
|
|
<view class="loading-more">
|
|
<text :class="{'loading-more-text': loading_class}" v-if="list.length">{{ loading_text }}</text>
|
|
<lf-nocontent v-else></lf-nocontent>
|
|
</view>
|
|
</view>
|
|
<u-back-top :scrollTop="pageScrollTop"></u-back-top>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import lfWaterfall from '@/components/lf-waterfall-shopdetails/lf-waterfall.vue';
|
|
export default {
|
|
data() {
|
|
return {
|
|
title_tab: [
|
|
{name:'推荐'},
|
|
{name:'商品'}
|
|
],
|
|
title_current:0,
|
|
list: [
|
|
{
|
|
id: 10,
|
|
original_price: "4111.00",
|
|
picture: "https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png",
|
|
pictures: ["https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png"],
|
|
price: "2412.00",
|
|
product_id: 1008,
|
|
sale: 0,
|
|
title: "三亚悦榕庄(Banyan Tree Sanya Resort and Spa)"
|
|
},
|
|
{
|
|
id: 10,
|
|
original_price: "4111.00",
|
|
picture: "https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png",
|
|
pictures: ["https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png"],
|
|
price: "2412.00",
|
|
product_id: 1008,
|
|
sale: 0,
|
|
title: "三亚悦榕庄(Banyan Tree Sanya Resort and Spa)"
|
|
},
|
|
{
|
|
id: 10,
|
|
original_price: "4111.00",
|
|
picture: "https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png",
|
|
pictures: ["https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png"],
|
|
price: "2412.00",
|
|
product_id: 1008,
|
|
sale: 0,
|
|
title: "三亚悦榕庄(Banyan Tree Sanya Resort and Spa)"
|
|
},
|
|
{
|
|
id: 10,
|
|
original_price: "4111.00",
|
|
picture: "https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png",
|
|
pictures: ["https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png"],
|
|
price: "2412.00",
|
|
product_id: 1008,
|
|
sale: 0,
|
|
title: "三亚悦榕庄(Banyan Tree Sanya Resort and Spa)"
|
|
}
|
|
],
|
|
show_count: 0,
|
|
windowHeight: 0,
|
|
loading_text: '没有更多数据啦~',
|
|
loading_class: false
|
|
}
|
|
},
|
|
components: {
|
|
lfWaterfall
|
|
},
|
|
onShow(){
|
|
this.windowHeight = getApp().globalData.windowHeight;
|
|
},
|
|
methods: {
|
|
titletabChange(index){
|
|
this.title_current = index;
|
|
},
|
|
getData() {
|
|
let tab_item = this.tab_list[this.current];
|
|
let isPage = false;
|
|
tab_item.isPage = isPage;
|
|
if(!isPage){
|
|
tab_item.loadingClass = false;
|
|
tab_item.loadingText = '没有更多数据啦~';
|
|
}
|
|
tab_item.isRefresher = false;
|
|
},
|
|
// 滑块下标值变化
|
|
swiperChange(event){
|
|
this.current = event.detail.current;
|
|
if(event.detail.source == '') return; // 如果是被动出发，没有事件类型则不做处理
|
|
},
|
|
// 页面触底，加载下一页
|
|
onScrolltolower(){
|
|
let tab_item = this.tab_list[this.current];
|
|
if(tab_item.isPage){
|
|
tab_item.page = tab_item.page + 1;
|
|
this.getData();
|
|
}
|
|
},
|
|
// scroll-view 下拉刷新
|
|
onRefresherrefresh(){
|
|
this.$u.throttle(() => {
|
|
this.clearTabItem();
|
|
this.getData();
|
|
}, 200);
|
|
},
|
|
clearTabItem(){
|
|
let tab_item = this.tab_list[this.current];
|
|
tab_item.page = 1;
|
|
tab_item.isPage = true;
|
|
tab_item.isRefresher = true;
|
|
tab_item.loadingClass = true;
|
|
tab_item.loadingText = '正在加载中';
|
|
tab_item.list = [];
|
|
this.$set(this.tab_list, this.current, tab_item);
|
|
// this.$refs.uWaterfallFather[this.current].clear();
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.collect-img {
|
|
width: 150rpx;
|
|
height: 150rpx;
|
|
border-radius: 5rpx;
|
|
}
|
|
/deep/.u-scroll-box {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
|
|
}
|
|
/deep/.u-scroll-box .u-tab-bar {
|
|
background-color: #15716E!important;
|
|
width: 80rpx!important;
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: -12rpx;
|
|
}
|
|
/deep/ .u-tab-item {
|
|
font-size: 28rpx!important;
|
|
}
|
|
|
|
|
|
// loading加载
|
|
.loading-more {
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding-top: 10px;
|
|
padding-bottom: 10px;
|
|
text-align: center;
|
|
font-size: 28rpx;
|
|
color: #999;
|
|
}
|
|
.loading-more-text::before {
|
|
content: '';
|
|
width: 20px;
|
|
height: 20px;
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
-webkit-animation: weuiLoading 1s steps(12, end) infinite;
|
|
animation: weuiLoading 1s steps(12, end) infinite;
|
|
background-repeat: no-repeat;
|
|
background-image: url("data:image/svg+xml;charset=utf8, %3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 100 100'%3E%3Cpath fill='none' d='M0 0h100v100H0z'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23E9E9E9' rx='5' ry='5' transform='translate(0 -30)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23989697' rx='5' ry='5' transform='rotate(30 105.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%239B999A' rx='5' ry='5' transform='rotate(60 75.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23A3A1A2' rx='5' ry='5' transform='rotate(90 65 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23ABA9AA' rx='5' ry='5' transform='rotate(120 58.66 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23B2B2B2' rx='5' ry='5' transform='rotate(150 54.02 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23BAB8B9' rx='5' ry='5' transform='rotate(180 50 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23C2C0C1' rx='5' ry='5' transform='rotate(-150 45.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23CBCBCB' rx='5' ry='5' transform='rotate(-120 41.34 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23D2D2D2' rx='5' ry='5' transform='rotate(-90 35 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23DADADA' rx='5' ry='5' transform='rotate(-60 24.02 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23E2E2E2' rx='5' ry='5' transform='rotate(-30 -5.98 65)'/%3E%3C/svg%3E");
|
|
background-size: 100%;
|
|
}
|
|
@keyframes weuiLoading {
|
|
0% {
|
|
transform: rotate3d(0, 0, 1, 0deg);
|
|
}
|
|
100% {
|
|
transform: rotate3d(0, 0, 1, 360deg);
|
|
}
|
|
}
|
|
|
|
|
|
.list-warter {
|
|
border-radius: 20rpx;
|
|
margin: 10px 5px;
|
|
margin-top: 0px;
|
|
background-color: #ffffff;
|
|
// padding: 8px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
box-shadow: 0rpx 2rpx 8rpx 1rpx rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.u-close {
|
|
position: absolute;
|
|
top: 32rpx;
|
|
right: 32rpx;
|
|
}
|
|
|
|
.list-image {
|
|
width: 100%;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.list-title {
|
|
font-size: 28rpx;
|
|
font-weight: bold;
|
|
color: $u-main-color;
|
|
}
|
|
|
|
.list-label{
|
|
position: absolute;
|
|
bottom: 0;
|
|
right: 0;
|
|
background-color: rgba(0,0,0,0.5);
|
|
width: 140rpx;
|
|
height: 48rpx;
|
|
border-radius: 20rpx 0rpx 0rpx 0rpx;
|
|
font-size: 22rpx;
|
|
color: #FFFFFF;
|
|
line-height: 48rpx;
|
|
text-align: center;
|
|
}
|
|
|
|
.list-tag {
|
|
display: flex;
|
|
margin-top: 5px;
|
|
}
|
|
|
|
.list-tag-owner {
|
|
background-color: $u-type-error;
|
|
color: #FFFFFF;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 4rpx 14rpx;
|
|
border-radius: 50rpx;
|
|
font-size: 20rpx;
|
|
line-height: 1;
|
|
}
|
|
|
|
.list-tag-text {
|
|
border: 1px solid $u-type-primary;
|
|
color: $u-type-primary;
|
|
margin-left: 10px;
|
|
border-radius: 50rpx;
|
|
line-height: 1;
|
|
padding: 4rpx 14rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
border-radius: 50rpx;
|
|
font-size: 20rpx;
|
|
}
|
|
|
|
.list-price {
|
|
font-size: 30rpx;
|
|
color: $u-type-error;
|
|
margin-top: 5px;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
</style>
|