|
|
<template> <view> <view class="lf-p-t-30 lf-p-b-30"> <view class="lf-m-b-30 lf-flex lf-w-100" v-if="!start_place && !target_place"> <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 :class="!start_place?'shop_search':'target_search'"> <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, start_place: '', target_place: '' } }, methods: { searchTarget() { let tab_item = this.tab_list[this.current]; this.$http(this.API.API_SEARCHTARGET,{ departure_place: this.start_place, destination: this.target_place, type:this.current, by: this.sort }).then(res => { console.log('==========',res.data.data) 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); } console.log('==========',tab_item.list) }).catch(err => { }) }, changeSort(sort) { console.log('排序') this.sort != this.sort if(this.start_place && this.target_place) { this.searchTarget(); }else { this.getActivityList() } }, // scroll-view 下拉刷新
onRefresherrefresh(){ this.tab_list[this.current].isRefresher = true; this.$u.throttle(() => { if(this.start_place && this.target_place) { this.searchTarget(); }else { this.getActivityList() } }, 200); }, // 页面触底，加载下一页
onScrolltolower(){ let tab_item = this.tab_list[this.current]; if(tab_item.isPage){ tab_item.page = tab_item.page + 1; if(this.start_place && this.target_place) { this.searchTarget(); }else { 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 } if(this.start_place && this.target_place) { this.searchTarget(); }else { this.getActivityList() } }else { return } }, tabChange(index){ this.current = index; console.log('重复只想') if(this.start_place && this.target_place) { this.searchTarget(); }else { 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; this.start_place = e.start_place; this.target_place = e.target_place; if(this.search_content) { this.getActivityList(); } if(this.start_place && this.target_place) { this.searchTarget(); } console.log('传来的搜索',e) } }</script>
<style lang="scss" scoped> .shop_search { position: absolute;right: 30rpx;top: 140rpx;display: flex;flex-direction: column; } .target_search { position: absolute;right: 30rpx;top: 50rpx;display: flex;flex-direction: column; } .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>
|
