|
|
<template> <view> <view class="lf-p-t-30 lf-p-b-30"> <view class="lf-m-b-30 lf-flex lf-w-100"> <u-icon name="search" class="search-icon"></u-icon> <input class="rom-search" type="text" placeholder="请输入商品名称" @confirm="startSearch()" v-model="search_content" /> </view> <view class="special_tab"> <u-tabs :list="tab_list" active-color="#1998FE" inactive-color='#777777' :is-scroll="true" @click="clicksort" :current="current" @change="tabChange"></u-tabs> <view style="position: absolute;right: 30rpx;top: 140rpx;display: flex;flex-direction: column;"> <u-icon name="arrow-up" style="font-size: 20rpx;" :class="sort==0?'':'lf-color-blue'"></u-icon> <u-icon name="arrow-down" style="font-size: 20rpx;" :class="sort==0?'lf-color-blue':''"></u-icon> </view> </view> <swiper :style="{height: '1300rpx', width: '750rpx'}" :current="current" @change="swiperChange"> <swiper-item v-for="(tabItem, tabIndex) in tab_list" :key="tabIndex"> <scroll-view class="com" :scroll-y="true" :refresher-enabled="true" :refresher-triggered="tabItem.isRefresher" @scrolltolower="onScrolltolower" @refresherrefresh="onRefresherrefresh"> <view class="lf-m-t-20"></view> <view> <!-- 活动列表 --> <view class="content"> <view class="item" v-for="(item,index) of tabItem.list" :key="index" @click="$url('/pages/goodsDetail/index?goods_id='+item.id)"> <view class="cover"> <image :src="item.picture" class="lf-w-100 lf-h-100" mode="aspectFill"></image> </view> <view style="width: 420rpx;"> <view class="lf-font-28 lf-color-333 lf-line-2">{{item.title}}</view> <view class="lf-font-24 lf-color-gray lf-line-2 lf-m-t-10" style="min-height: 64rpx;">本套票只包含两个成人不可带小孩本套票只包含两个成人不可带小孩本套票只包含两个成人不可带小孩</view> <view class="lf-flex lf-m-t-25"> <lf-price :price="item.price"></lf-price> <text class="lf-font-24 lf-color-gray lf-line-through lf-m-l-15">¥{{item.original_price}}</text> </view> </view> </view> </view> <!-- 加载 --> <view class="loading-more"> <text v-if="tabItem.list.length" :class="{'loading-more-text': loadingClass}">{{ loadingText }}</text> <lf-nocontent v-else></lf-nocontent> </view> <!-- 回到顶部 --> <u-back-top :scroll-top="pageScrollTop" :custom-style="{background: 'rgba(51, 51 51, 0.3)'}"></u-back-top> </view> </scroll-view> </swiper-item> </swiper> </view> </view></template>
<script> export default { data() { return { search_content: '', tab_list: [ { id: 1, name: '综合', list: [], isRefresher: false, loadingClass: true, loadingText: '正在加载中', page: 1, isPage: true }, { id: 2, name: '销量', list: [], isRefresher: false, loadingClass: true, loadingText: '正在加载中', page: 1, isPage: true }, { id: 3, name: '上新', list: [], isRefresher: false, loadingClass: true, loadingText: '正在加载中', page: 1, isPage: true }, { id: 4, name: '价格', list: [], isRefresher: false, loadingClass: true, loadingText: '正在加载中', page: 1, isPage: true }, ], current: 0, windowHeight: 0, list: [], loadingClass: false, loadingText: '已加载全部数据~', page: 1, isPage: true, pageSize: 20, isRefresher: false, sort: 0, } }, methods: { changeSort(sort) { console.log('排序') this.sort != this.sort this.getActivityList() }, // scroll-view 下拉刷新
onRefresherrefresh(){ this.tab_list[this.current].isRefresher = true; this.$u.throttle(() => { this.getActivityList(); }, 200); }, // 页面触底，加载下一页
onScrolltolower(){ let tab_item = this.tab_list[this.current]; if(tab_item.isPage){ tab_item.page = tab_item.page + 1; this.getActivityList(); } }, getActivityList(){ let tab_item = this.tab_list[this.current]; this.$http(this.API.API_SEARCH_GOODS,{keywords:this.search_content,type:this.current,by: this.sort}).then(res => { let isPage = res.data.prev_page_url == null?false:true; tab_item.isPage = isPage; if(!isPage){ tab_item.loadingClass = false; tab_item.loadingText = '没有更多数据啦~'; } tab_item.isRefresher = false; if(tab_item.page == 1){ tab_item.list = res.data.data; }else{ tab_item.list.push(...res.data.data); } }) }, clicksort(index) { if(index == 3) { if(this.sort == 0) { this.sort = 1 }else { this.sort = 0 } this.getActivityList() }else { return } }, tabChange(index){ this.current = index; console.log('重复只想') this.getActivityList() }, // 滑块下标值变化
swiperChange(event){ this.current = event.detail.current; if(event.detail.source == '') return; // 如果是被动出发，没有事件类型则不做处理
}, startSearch() { console.log('当前值',this.search_content) this.getActivityList() }, }, onShow(){ this.windowHeight = getApp().globalData.windowHeight; }, onLoad(e) { this.search_content = e.serach_content if(this.search_content) { this.getActivityList() } console.log('传来的搜索',e) } }</script>
<style lang="scss" scoped> .content{ padding: 0; box-sizing: border-box; width: 750rpx; height: max-content; .item{ width: 100%; height: auto; border-bottom: 1rpx solid #E5E5E5; padding: 30rpx 0; display: flex; &:last-child{ border-bottom: none; } .cover{ width: 250rpx; height: 210rpx; border-radius: 20rpx; overflow: hidden; margin-right: 15rpx; } } } .search-icon { position: relative; bottom: 0; left: 54rpx; } /deep/.input-placeholder{ color: #777; font-size: 28rpx; } .rom-search { width: 686rpx; height: 60rpx; background: #f5f5f5; border-radius: 30rpx; padding-left: 74rpx; font-size: 28rpx; } .goods-rom { border-radius: 20rpx; width: 333rpx; height: 497rpx; background-color: white; box-shadow: 0px 2rpx 8rpx 1rpx rgba(0, 0, 0, 0.1); &:nth-child(2n) { margin-right: 0; } &:nth-child(n + 3) { margin-top: 20rpx; } } .introduct { padding: 0 0 30rpx 32rpx; } .com{ width: 100%; height: 100%; box-sizing: border-box; padding: 0rpx 28rpx; } .shop-head { width: 100%; height: 400rpx; position: relative; } .shop-flex { display: flex; padding: 30rpx; } .shop-title { width: 686rpx; height: 274rpx; border-radius: 20rpx; background-color: white; box-shadow: 0rpx 2rpx 8rpx 1rpx rgba(0, 0, 0, 0.1); margin: 0 auto; position: relative; top: -32rpx; } .shop-img { width: 90rpx; height: 90rpx; margin-right: 15rpx; } .shop-function { width: 80rpx; height: 80rpx; border-radius: 50%; font-size: 40rpx; } .function-total { display: flex; justify-content: space-between; padding: 0 65rpx 0 65rpx; } /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: #1998FE!important; width: 80rpx!important; position: absolute; left: 0; bottom: -12rpx; } /deep/.special_tab .u-tabs .u-scroll-box .u-tab-bar { background-color: #1998FE!important; width: 56rpx!important; position: absolute; height: 5rpx!important; left: 8rpx; bottom: -4rpx; } /deep/ .u-tab-item { font-size: 28rpx!important; } //价格筛选伪类
// /deep/.special_tab .u-tab-item:nth-child(4n) ::after{
// font-size: 48rpx!important;
// content: '';
// color: red;
// }
// 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>
|
