402 lines
7.9 KiB
Vue
Executable File
402 lines
7.9 KiB
Vue
Executable File
<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"
|
||
@confirm="doSearch"
|
||
confirm-type="search"
|
||
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>
|