400 lines
7.8 KiB
Vue
400 lines
7.8 KiB
Vue
|
<template>
|
|||
|
|
<view class="page">
|
|||
|
|
<view :style="{ height: statusBarHeight + 'px' }">
|
|||
|
|
<!-- 这里是状态栏, 每个页面都需要有, 目的不让页面覆盖状态栏 -->
|
|||
|
|
</view>
|
|||
|
|
<view class="big-search-wrapper">
|
|||
|
|
<image
|
|||
|
|
class="header-right-search icon-search"
|
|||
|
|
src="/static/images/icon-back.png"
|
|||
|
|
@click="back"
|
|||
|
|
/>
|
|||
|
|
<view class="search-box">
|
|||
|
|
<view class="search-box-left">
|
|||
|
|
<image
|
|||
|
|
class="header-right-search search-image"
|
|||
|
|
src="/static/images/icon-search.png"
|
|||
|
|
/>
|
|||
|
|
</view>
|
|||
|
|
<input
|
|||
|
|
type="text"
|
|||
|
|
:model="searchContent"
|
|||
|
|
:value="searchContent"
|
|||
|
|
@input="typingContent"
|
|||
|
|
placeholder="请输入内容~"
|
|||
|
|
maxlength="10"
|
|||
|
|
class="search-input"
|
|||
|
|
/>
|
|||
|
|
</view>
|
|||
|
|
<view
|
|||
|
|
class="sbtn"
|
|||
|
|
@click="doSearch"
|
|||
|
|
>
|
|||
|
|
搜索
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="mainCont">
|
|||
|
|
<view
|
|||
|
|
class="wrap"
|
|||
|
|
:style="{ height: screenHeight - statusBarHeight - 50 + 'px' }"
|
|||
|
|
>
|
|||
|
|
<view class="u-tabs-box">
|
|||
|
|
<u-tabs-swiper
|
|||
|
|
bgColor=" #F5F5F5"
|
|||
|
|
activeColor="#FF3229"
|
|||
|
|
ref="tabs"
|
|||
|
|
:list="list"
|
|||
|
|
:current="current"
|
|||
|
|
@change="change"
|
|||
|
|
:is-scroll="false"
|
|||
|
|
swiperWidth="750"
|
|||
|
|
font-size="30rpx"
|
|||
|
|
barWidth="24"
|
|||
|
|
barHeight="8"
|
|||
|
|
></u-tabs-swiper>
|
|||
|
|
</view>
|
|||
|
|
<swiper
|
|||
|
|
class="swiper-box"
|
|||
|
|
:current="swiperCurrent"
|
|||
|
|
@transition="transition"
|
|||
|
|
@animationfinish="animationfinish"
|
|||
|
|
>
|
|||
|
|
<swiper-item class="swiper-item">
|
|||
|
|
<scroll-view
|
|||
|
|
scroll-y
|
|||
|
|
class="no-scrollbar"
|
|||
|
|
style="height: 100%; width: 100%"
|
|||
|
|
@scrolltolower="reachBottom"
|
|||
|
|
>
|
|||
|
|
<view class="page-box">
|
|||
|
|
<!--视频-->
|
|||
|
|
<search-vd
|
|||
|
|
ref="vd"
|
|||
|
|
:keywords="searchContent"
|
|||
|
|
></search-vd>
|
|||
|
|
</view>
|
|||
|
|
</scroll-view>
|
|||
|
|
</swiper-item>
|
|||
|
|
|
|||
|
|
<swiper-item class="swiper-item">
|
|||
|
|
<scroll-view
|
|||
|
|
scroll-y
|
|||
|
|
class="no-scrollbar"
|
|||
|
|
style="height: 100%; width: 100%"
|
|||
|
|
@scrolltolower="reachBottom"
|
|||
|
|
>
|
|||
|
|
<view class="page-box">
|
|||
|
|
<!--商品-->
|
|||
|
|
<shop
|
|||
|
|
ref="shop"
|
|||
|
|
:keywords="searchContent"
|
|||
|
|
></shop>
|
|||
|
|
</view>
|
|||
|
|
</scroll-view>
|
|||
|
|
</swiper-item>
|
|||
|
|
|
|||
|
|
<swiper-item class="swiper-item">
|
|||
|
|
<scroll-view
|
|||
|
|
scroll-y
|
|||
|
|
class="no-scrollbar"
|
|||
|
|
style="height: 100%; width: 100%"
|
|||
|
|
@scrolltolower="reachBottom"
|
|||
|
|
>
|
|||
|
|
<view class="page-box">
|
|||
|
|
<!--用户-->
|
|||
|
|
<user
|
|||
|
|
ref="user"
|
|||
|
|
:keywords="searchContent"
|
|||
|
|
></user>
|
|||
|
|
</view>
|
|||
|
|
</scroll-view>
|
|||
|
|
</swiper-item>
|
|||
|
|
|
|||
|
|
<swiper-item class="swiper-item">
|
|||
|
|
<scroll-view
|
|||
|
|
scroll-y
|
|||
|
|
class="no-scrollbar"
|
|||
|
|
style="height: 100%; width: 100%"
|
|||
|
|
@scrolltolower="reachBottom"
|
|||
|
|
>
|
|||
|
|
<view class="page-box">
|
|||
|
|
<!--团购-->
|
|||
|
|
<tuangou
|
|||
|
|
ref="tuangou"
|
|||
|
|
:keywords="searchContent"
|
|||
|
|
></tuangou>
|
|||
|
|
</view>
|
|||
|
|
</scroll-view>
|
|||
|
|
</swiper-item>
|
|||
|
|
</swiper>
|
|||
|
|
|
|||
|
|
<!-- <view class="page-footer">
|
|||
|
|
<view class="contract-button">
|
|||
|
|
自定义底部栏
|
|||
|
|
</view>
|
|||
|
|
</view> -->
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
let system = uni.getSystemInfoSync();
|
|||
|
|
console.log(system);
|
|||
|
|
import { isStrEmpty } from '@/utils/tools.js';
|
|||
|
|
import storage from '@/utils/storage.js'; //缓存
|
|||
|
|
import searchVd from './searchVd.vue';
|
|||
|
|
import shop from './shop';
|
|||
|
|
import user from './user';
|
|||
|
|
import tuangou from './tuangou';
|
|||
|
|
export default {
|
|||
|
|
components: {
|
|||
|
|
searchVd,
|
|||
|
|
shop,
|
|||
|
|
user,
|
|||
|
|
tuangou
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
screenHeight: 0,
|
|||
|
|
statusBarHeight: 0,
|
|||
|
|
search: '',
|
|||
|
|
searchContent: '',
|
|||
|
|
// tabs
|
|||
|
|
list: [
|
|||
|
|
{
|
|||
|
|
name: '视频'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '商品'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '用户'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '团购'
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
listValue: ['vd', 'shop', 'user', 'tuangou'],
|
|||
|
|
current: 0,
|
|||
|
|
swiperCurrent: 0,
|
|||
|
|
dx: 0
|
|||
|
|
// tabs-end
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
onLoad(params) {
|
|||
|
|
this.statusBarHeight = system.statusBarHeight;
|
|||
|
|
let screenHeight = system.safeArea.bottom;
|
|||
|
|
this.screenHeight = screenHeight;
|
|||
|
|
// 搜索的关键字
|
|||
|
|
let search = params.search || ''.trim();
|
|||
|
|
this.searchContent = params.search;
|
|||
|
|
},
|
|||
|
|
watch: {
|
|||
|
|
current(n) {
|
|||
|
|
this.initCurrentData();
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
methods: {
|
|||
|
|
// 初始化数据
|
|||
|
|
initCurrentData() {
|
|||
|
|
console.log(this.current);
|
|||
|
|
var prop = this.listValue[this.current];
|
|||
|
|
var dom = this.$refs[prop];
|
|||
|
|
var child = dom.search; //子组件内部的关键字
|
|||
|
|
console.log('子关键字：' + child);
|
|||
|
|
var flag = dom.flag; // 子组件内部索引
|
|||
|
|
var parent = this.searchContent;
|
|||
|
|
console.log('fu关键字：' + parent);
|
|||
|
|
if (parent != child && this.swiperCurrent == flag && this.searchContent != '') {
|
|||
|
|
dom.initData();
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// tab栏切换
|
|||
|
|
change(index) {
|
|||
|
|
this.swiperCurrent = index;
|
|||
|
|
},
|
|||
|
|
transition({ detail: { dx } }) {
|
|||
|
|
this.$refs.tabs.setDx(dx);
|
|||
|
|
},
|
|||
|
|
animationfinish({ detail: { current } }) {
|
|||
|
|
this.$refs.tabs.setFinishCurrent(current);
|
|||
|
|
this.swiperCurrent = current;
|
|||
|
|
this.current = current;
|
|||
|
|
},
|
|||
|
|
reachBottom() {
|
|||
|
|
console.log('触底' + this.current);
|
|||
|
|
var prop = this.listValue[this.current];
|
|||
|
|
var dom = this.$refs[prop];
|
|||
|
|
dom.getData();
|
|||
|
|
},
|
|||
|
|
doSearch() {
|
|||
|
|
let me = this;
|
|||
|
|
let searchContent = this.searchContent;
|
|||
|
|
if (isStrEmpty(searchContent)) {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '搜索为空!',
|
|||
|
|
icon: 'none',
|
|||
|
|
duration: 2000
|
|||
|
|
});
|
|||
|
|
this.searchContent = '';
|
|||
|
|
return;
|
|||
|
|
} else {
|
|||
|
|
this.initCurrentData();
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
typingContent(e) {
|
|||
|
|
this.searchContent = e.detail.value || ''.trim();
|
|||
|
|
},
|
|||
|
|
back() {
|
|||
|
|
uni.navigateBack({
|
|||
|
|
delta: 1
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss">
|
|||
|
|
.page {
|
|||
|
|
// position: absolute;
|
|||
|
|
// left: 0;
|
|||
|
|
// right: 0;
|
|||
|
|
// top: 0;
|
|||
|
|
// bottom: 0;
|
|||
|
|
background-color: #181b27;
|
|||
|
|
|
|||
|
|
.big-search-wrapper {
|
|||
|
|
padding: 14px;
|
|||
|
|
height: 50px;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: flex-start;
|
|||
|
|
flex-direction: row;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
.header-right-search {
|
|||
|
|
height: 50px;
|
|||
|
|
}
|
|||
|
|
.icon-search {
|
|||
|
|
width: 25px;
|
|||
|
|
height: 25px;
|
|||
|
|
opacity: 0.8;
|
|||
|
|
}
|
|||
|
|
.search-box {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: row;
|
|||
|
|
.search-box-left {
|
|||
|
|
padding: 0 10rpx;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: row;
|
|||
|
|
background-color: #55565e;
|
|||
|
|
border-top-left-radius: 6rpx;
|
|||
|
|
border-bottom-left-radius: 6rpx;
|
|||
|
|
.search-image {
|
|||
|
|
width: 25px;
|
|||
|
|
height: 25px;
|
|||
|
|
opacity: 0.8;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.search-input {
|
|||
|
|
width: 410rpx;
|
|||
|
|
height: 25px;
|
|||
|
|
background-color: #55565e;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #ffffff;
|
|||
|
|
border-top-right-radius: 6rpx;
|
|||
|
|
border-bottom-right-radius: 6rpx;
|
|||
|
|
}
|
|||
|
|
.search-box-right {
|
|||
|
|
padding: 0 16rpx;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: row;
|
|||
|
|
background-color: #55565e;
|
|||
|
|
border-top-right-radius: 6rpx;
|
|||
|
|
border-bottom-right-radius: 6rpx;
|
|||
|
|
.scan-image {
|
|||
|
|
width: 25px;
|
|||
|
|
height: 25px;
|
|||
|
|
opacity: 0.8;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.sbtn {
|
|||
|
|
height: 25px;
|
|||
|
|
line-height: 25px;
|
|||
|
|
color: #ffffff;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
// 隐藏ios端滚动条
|
|||
|
|
::-webkit-scrollbar {
|
|||
|
|
display: none;
|
|||
|
|
width: 0 !important;
|
|||
|
|
height: 0 !important;
|
|||
|
|
-webkit-appearance: none;
|
|||
|
|
background: transparent;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
//
|
|||
|
|
.mainCont {
|
|||
|
|
background: #f5f5f5;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.u-tabs-box {
|
|||
|
|
height: 40px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.page-box {
|
|||
|
|
width: 710rpx;
|
|||
|
|
margin: 0 auto;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.wrap {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
width: 100%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.swiper-box {
|
|||
|
|
flex: 1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.swiper-item {
|
|||
|
|
height: 100%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// footer config
|
|||
|
|
// .page-footer {
|
|||
|
|
// width: 750rpx;
|
|||
|
|
// height: 128rpx;
|
|||
|
|
// background: #ffffff;
|
|||
|
|
// box-shadow: 0rpx -4rpx 16rpx rgba(219, 208, 208, 0.61);
|
|||
|
|
// opacity: 1;
|
|||
|
|
// border-radius: 0rpx;
|
|||
|
|
|
|||
|
|
// .contract-button {
|
|||
|
|
// width: 686rpx;
|
|||
|
|
// height: 80rpx;
|
|||
|
|
|
|||
|
|
// margin-top: 24rpx;
|
|||
|
|
// margin-left: 32rpx;
|
|||
|
|
|
|||
|
|
// font-size: 34rpx;
|
|||
|
|
// font-family: PingFang SC;
|
|||
|
|
// font-weight: 500;
|
|||
|
|
|
|||
|
|
// text-align: center;
|
|||
|
|
|
|||
|
|
// line-height: 80rpx;
|
|||
|
|
// color: #ffffff;
|
|||
|
|
// letter-spacing: 5rpx;
|
|||
|
|
|
|||
|
|
// background: linear-gradient(137deg, #ff3229 0%, #ff7b59 100%);
|
|||
|
|
// opacity: 1;
|
|||
|
|
// border-radius: 40rpx;
|
|||
|
|
// }
|
|||
|
|
// }
|
|||
|
|
}
|
|||
|
|
</style>
|