代码提交
This commit is contained in:
黄少君
@ -1,103 +1,186 @@
|
||||
<template>
|
||||
<layout>
|
||||
<uv-navbar
|
||||
:fixed="false"
|
||||
title="搜索"
|
||||
left-arrow
|
||||
@leftClick="$onClickLeft"
|
||||
:fixed="false"
|
||||
title="搜索"
|
||||
left-arrow
|
||||
@leftClick="goBack"
|
||||
/>
|
||||
<view class="search-bar">
|
||||
<uv-search
|
||||
v-model="keyword"
|
||||
shape="round"
|
||||
placeholder="搜索商品"
|
||||
show-action
|
||||
@search="onSearch"
|
||||
@cancel="onCancel"
|
||||
v-model="keywordData"
|
||||
shape="round"
|
||||
placeholder="搜索商品"
|
||||
actionText="搜索"
|
||||
show-action
|
||||
@clear="onCancel"
|
||||
@custom="searchByKeyword"
|
||||
@search="searchByKeyword"
|
||||
@cancel="onCancel"
|
||||
>
|
||||
<template #action>
|
||||
<view>
|
||||
<text @tap="onSearch">搜索</text>
|
||||
</view>
|
||||
</template>
|
||||
</uv-search>
|
||||
</view>
|
||||
<!--
|
||||
<view class="search-box">
|
||||
<view class="search-box-header">
|
||||
<view class="search-box-title">热门搜索</view>
|
||||
</view>
|
||||
<view>
|
||||
<space warp>
|
||||
<uv-tag type="primary">标签</uv-tag>
|
||||
<uv-tag type="primary">标签</uv-tag>
|
||||
<uv-tag type="primary">标签</uv-tag>
|
||||
<uv-tag type="primary">标签</uv-tag>
|
||||
</space>
|
||||
|
||||
<!-- 热门搜索 -->
|
||||
<view class="hotSearchBox tipsBox" v-if="hotSearchList.length>0">
|
||||
<view class="boxTitle mar-leftgetList-30">
|
||||
<label>热门搜索</label>
|
||||
<image
|
||||
class="seeIcon hotSearchListSee-icon"
|
||||
:src="!hideHotFlag?'../../static/images/see.png':'../../static/images/notSee.png'"
|
||||
@click="hideHotFlag = !hideHotFlag"
|
||||
/>
|
||||
</view>
|
||||
<viewhot
|
||||
class="hot-flex-list"
|
||||
v-if="!hideHotFlag"
|
||||
>
|
||||
<view
|
||||
v-for="(item, index) in hotSearchList"
|
||||
:key="index"
|
||||
class="historySearDel-box flex-items-plus mar-right-30"
|
||||
>
|
||||
<view
|
||||
class="boxContent"
|
||||
@click="handleClickHistoryOrHot(item)"
|
||||
>{{ item }}
|
||||
</view>
|
||||
</view>
|
||||
</viewhot>
|
||||
<view
|
||||
v-else
|
||||
class="notSeeContent"
|
||||
>当前热门搜索已隐藏
|
||||
</view>
|
||||
</view>
|
||||
<blank size="10"></blank>
|
||||
<view class="search-box">
|
||||
<view class="search-box-header">
|
||||
<view class="search-box-title">历史搜索</view>
|
||||
<view class="search-box-action">
|
||||
<image src="@/static/images/delete.png" />
|
||||
<!-- 历史搜索 -->
|
||||
<view class="historyBox tipsBox" v-if="historyList.length>0">
|
||||
<view class="boxTitle">
|
||||
<label class="title">历史搜索</label>
|
||||
<image
|
||||
class="historyDel-icon"
|
||||
@click="delSearchHistory(1)"
|
||||
src="../../static/images/delete.png"
|
||||
/>
|
||||
</view>
|
||||
<view class="historySear-box hot-flex-list">
|
||||
<view
|
||||
v-for="item in historyList"
|
||||
:key="index"
|
||||
class="historySearDel-box flex-items-plus"
|
||||
>
|
||||
<view
|
||||
class="boxContent historyText line1"
|
||||
@click="handleClickHistoryOrHot(item)"
|
||||
>{{ item }}
|
||||
</view>
|
||||
<!-- <label class="ertical-lines">|</label>-->
|
||||
<!-- <view-->
|
||||
<!-- class="historyIconBox"-->
|
||||
<!-- @click="delSearchHistory(2,item.searchId)"-->
|
||||
<!-- >-->
|
||||
<!-- <image-->
|
||||
<!-- class="historySearDel-icon text-align"-->
|
||||
<!-- src="https://ceres.zkthink.com/static/img/index/historySearDel_icon.png"-->
|
||||
<!-- />-->
|
||||
<!-- </view>-->
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view>
|
||||
<space warp>
|
||||
<uv-tag type="primary">标签</uv-tag>
|
||||
<uv-tag type="primary">标签</uv-tag>
|
||||
<uv-tag type="primary">标签</uv-tag>
|
||||
<uv-tag type="primary">标签</uv-tag>
|
||||
</space>
|
||||
|
||||
</view>
|
||||
</view> -->
|
||||
|
||||
</view>
|
||||
</layout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import { onReady, onReachBottom } from '@dcloudio/uni-app'
|
||||
import * as router from '@/utils/router'
|
||||
import { useGlobalProperties } from '@/hooks';
|
||||
import { useRouter } from "@/hooks/useRouter";
|
||||
import { onShow } from '@dcloudio/uni-app'
|
||||
import { hotSearch, historySearch, clearHistorySearch } from "@/api/product";
|
||||
const {push, goBack} = useRouter()
|
||||
|
||||
const searchRef = ref();
|
||||
const keyword = ref('');
|
||||
|
||||
|
||||
const { $yrouter } = useGlobalProperties()
|
||||
const hotSearchList = ref([])
|
||||
const getHotKeywordList = async () => {
|
||||
hotSearchList.value = await hotSearch(0, 10)
|
||||
// return request(API.SelectHotSearch, {}, 'GET').then(res => {
|
||||
// hotSearchList.value = res.data
|
||||
// })
|
||||
}
|
||||
|
||||
|
||||
const onSearch = () => {
|
||||
console.log("--> % keyword:\n", keyword.value)
|
||||
// refresh()
|
||||
$yrouter.navigateTo({
|
||||
url: '/pages/goodsList/goodsList',
|
||||
query: {
|
||||
keyword: keyword.value
|
||||
const historyList = ref([])
|
||||
const hideHotFlag = ref(false); // 是否隐藏热门
|
||||
const getHistoryKeywordList = async () => {
|
||||
let historData = await historySearch()
|
||||
historyList.value = historData.slice(0, 20)
|
||||
}
|
||||
|
||||
// const onSearch = () => {
|
||||
// // refresh()
|
||||
// push({url: '/pages/goodsList/goodsList'}, {
|
||||
// data: {
|
||||
// keyword: keyword.value
|
||||
// }
|
||||
// })
|
||||
// }
|
||||
|
||||
/**
|
||||
* 删除历史记录
|
||||
* @param status 1全部 2单条
|
||||
* @param searchId
|
||||
*/
|
||||
function delSearchHistory(status = 1, searchId = undefined) {
|
||||
const tips = status === 1 ? '您确定要清空搜索记录吗？' : '您确定要删除这一条记录吗？'
|
||||
uni.showModal({
|
||||
title: '温馨提示',
|
||||
content: tips,
|
||||
success: async (res) => {
|
||||
if (res.confirm) {
|
||||
await clearHistorySearch()
|
||||
uni.showToast({
|
||||
title: '已清空',
|
||||
duration: 2000
|
||||
});
|
||||
await getHistoryKeywordList()
|
||||
} else if (res.cancel) {
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
const onCancel = () => {
|
||||
|
||||
const keywordData = ref('')
|
||||
function handleClickHistoryOrHot(key) {
|
||||
keywordData.value = key
|
||||
searchByKeyword()
|
||||
}
|
||||
|
||||
function searchByKeyword() {
|
||||
if (!keywordData.value) {
|
||||
return uni.showToast({
|
||||
title: '请输入要搜索内容！',
|
||||
duration: 2000,
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
push({url: '/pages/goodsList/goodsList'}, {
|
||||
data: {
|
||||
keyword: keywordData.value
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// onReady(() => {
|
||||
// searchRef.value?.focus();
|
||||
// })
|
||||
const onCancel = () => {
|
||||
}
|
||||
|
||||
onShow(() => {
|
||||
Promise.all(getHotKeywordList(), getHistoryKeywordList())
|
||||
})
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
<style lang="scss">
|
||||
.search-box {
|
||||
&-header {
|
||||
display: flex;
|
||||
@ -128,4 +211,113 @@ const onCancel = () => {
|
||||
background: #fff;
|
||||
padding: 40rpx 35rpx 30rpx;
|
||||
}
|
||||
// 热门搜索
|
||||
.hotSearchBox {
|
||||
padding: 0 36rpx;
|
||||
|
||||
.historyText {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.hotSearchListSee-icon {
|
||||
height: 24rpx;
|
||||
}
|
||||
|
||||
.hotSearchListNotSee-icon {
|
||||
height: 36rpx;
|
||||
}
|
||||
|
||||
.seeIcon {
|
||||
width: 40rpx;
|
||||
position: absolute;
|
||||
right: 30rpx;
|
||||
}
|
||||
|
||||
.notSeeContent {
|
||||
margin-top: 20rpx;
|
||||
text-align: center;
|
||||
font-size: 24rpx;
|
||||
color: #CCCCCC;
|
||||
}
|
||||
}
|
||||
|
||||
.line {
|
||||
margin: 70rpx 0;
|
||||
height: 2rpx;
|
||||
background: #F3F4F5;
|
||||
}
|
||||
|
||||
// 历史搜索
|
||||
.historyBox {
|
||||
padding: 0 36rpx;
|
||||
|
||||
.historySear-box {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.historyDel-icon {
|
||||
width: 30rpx;
|
||||
height: 30rpx;
|
||||
position: absolute;
|
||||
right: 30rpx;
|
||||
}
|
||||
|
||||
.historyIconBox {
|
||||
width: 50rpx;
|
||||
|
||||
.historySearDel-icon {
|
||||
position: relative;
|
||||
width: 16rpx;
|
||||
height: 16rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tipsBox {
|
||||
padding: 15rpx 24rpx;
|
||||
background: #ffffff;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.boxTitle {
|
||||
margin: 30rpx 0;
|
||||
label {
|
||||
color: #333333;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.historySearDel-box {
|
||||
height: 54rpx;
|
||||
line-height: 54rpx;
|
||||
margin: 15rpx 15rpx;
|
||||
background-color: #F1F1F1;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-right: 30rpx;
|
||||
.boxContent {
|
||||
font-size: 24rpx;
|
||||
padding: 0 30rpx;
|
||||
color: #333333;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
.hot-flex-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: row;
|
||||
.ertical-lines {
|
||||
color: #DDDDDD;
|
||||
text-align: center;
|
||||
font-size: 24rpx;
|
||||
padding: 10rpx 0;
|
||||
}
|
||||
}
|
||||
.flex-items-plus {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user