214 lines
4.4 KiB
Vue
214 lines
4.4 KiB
Vue
<template>
|
|
<view class="flex-1 px-30">
|
|
<view
|
|
class="search-content flex-row"
|
|
style="align-items: center;"
|
|
>
|
|
<view class="search-center flex-row">
|
|
<u-search
|
|
v-model="keyword"
|
|
bg-color="transparent"
|
|
class="flex-1"
|
|
:show-action="false"
|
|
height="80rpx"
|
|
placeholder="输入你想看的剧名"
|
|
@search="searchHandler"
|
|
/>
|
|
<view
|
|
class="search-btn flex-center"
|
|
@click="searchHandler"
|
|
>
|
|
<text class="search-btn-text">
|
|
搜索
|
|
</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view
|
|
v-if="status === 2"
|
|
class="searchResult"
|
|
>
|
|
<text class="searchResult-title">
|
|
搜索结果
|
|
</text>
|
|
<view
|
|
v-if="searchList.length !== 0"
|
|
class="flex-row"
|
|
style="flex-wrap: wrap;"
|
|
>
|
|
<GpursueItem
|
|
v-for="(item, index) in searchList"
|
|
:key="index"
|
|
:class="{'mr-26':(index + 1) % 3 !==0}"
|
|
:data="item"
|
|
/>
|
|
</view>
|
|
<GNoData
|
|
v-else
|
|
image="no-search"
|
|
text="没有搜到相关短剧~"
|
|
/>
|
|
</view>
|
|
<view
|
|
v-else
|
|
class="search-history"
|
|
>
|
|
<view
|
|
class="search-history-title flex-row"
|
|
style="align-items: center;justify-content: space-between;"
|
|
>
|
|
<text class="search-history-title-text">
|
|
历史搜索
|
|
</text>
|
|
<u-icon
|
|
name="/static/icon/delete.png"
|
|
size="40rpx"
|
|
@click="clearHistoryList"
|
|
/>
|
|
</view>
|
|
<view
|
|
class="historyData flex-row py-20"
|
|
style="flex-wrap: wrap;"
|
|
>
|
|
<view
|
|
v-for="(item, index) in historySearch"
|
|
:key="index"
|
|
class="historyItem"
|
|
@click="navigator(item)"
|
|
>
|
|
<text class="historyItem-text">
|
|
{{ item }}
|
|
</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
<GModal ref="modal" />
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { searchFilm } from '@/api/index.js';
|
|
export default {
|
|
data() {
|
|
return {
|
|
status: 0, // 状态 0 未搜索 1 搜索中 2 搜索结果
|
|
keyword: '',
|
|
historySearch: [],
|
|
searchList: []
|
|
};
|
|
},
|
|
onLoad() {
|
|
this.historySearch = uni.getStorageSync('historySearch') || [];
|
|
},
|
|
methods: {
|
|
|
|
setHistorySearch(historySearch = []) {
|
|
this.historySearch = historySearch;
|
|
uni.setStorageSync('historySearch', this.historySearch);
|
|
},
|
|
clearHistoryList() {
|
|
this.$refs.modal.open('你确定要删除历史记录吗').then(() => {
|
|
this.setHistorySearch([]);
|
|
});
|
|
},
|
|
searchHandler() {
|
|
|
|
if (this.keyword.trim()) {
|
|
|
|
this.navigator(this.keyword);
|
|
} else {
|
|
uni.showToast({
|
|
title: '搜索内容不能为空',
|
|
icon: 'none'
|
|
});
|
|
}
|
|
},
|
|
navigator(item) {
|
|
const index = this.historySearch.indexOf(item);
|
|
this.keyword = item;
|
|
this.status = 2;
|
|
uni.hideKeyboard();
|
|
if (index !== -1) {
|
|
this.historySearch.splice(index, 1);
|
|
this.historySearch.unshift(item);
|
|
} else if (this.historySearch.length >= 10) {
|
|
this.historySearch.pop();
|
|
this.historySearch.unshift(item);
|
|
} else {
|
|
this.historySearch.unshift(item);
|
|
}
|
|
|
|
uni.setStorageSync('historySearch', this.historySearch);
|
|
uni.hideKeyboard();
|
|
searchFilm({ keyword: this.keyword }).then(res => {
|
|
this.searchList = res || [];
|
|
});
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.search-content {
|
|
height: 144rpx;
|
|
}
|
|
.search-center {
|
|
width: 690rpx;
|
|
height: 80rpx;
|
|
background: #f3f4f6;
|
|
border-radius: 52rpx;
|
|
align-items: center;
|
|
}
|
|
.search-btn {
|
|
width: 136rpx;
|
|
height: 72rpx;
|
|
background: linear-gradient(158deg, #ff8197 0%, #ff3364 100%);
|
|
border-radius: 36rpx;
|
|
.search-btn-text {
|
|
font-size: 36rpx;
|
|
font-weight: 400;
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
.search-history-title-text {
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
color: #1a1a1a;
|
|
}
|
|
.historyItem {
|
|
padding: 8rpx 20rpx;
|
|
background: #f3f3f3;
|
|
border-radius: 58rpx;
|
|
margin-right: 20rpx;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
.historyItem-text {
|
|
font-size: 28rpx;
|
|
font-weight: 400;
|
|
color: #1a1a1a;
|
|
}
|
|
.inTheSearch-img {
|
|
width: 244rpx;
|
|
height: 136rpx;
|
|
border-radius: 16rpx;
|
|
}
|
|
.inTheSearch-title {
|
|
font-size: 36rpx;
|
|
font-weight: 400;
|
|
color: #1a1a1a;
|
|
}
|
|
.inTheSearch-num {
|
|
font-size: 28rpx;
|
|
font-weight: 400;
|
|
color: #999999;
|
|
}
|
|
.searchResult-title {
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
color: #1a1a1a;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
</style>
|