152 lines
4.5 KiB
Vue
152 lines
4.5 KiB
Vue
<template>
|
||
<view class="main">
|
||
<view class="head" :style="{'padding-top':headerHeight+4+'px'}">
|
||
<view class="head_top">
|
||
<view class="head_back" @click="handleBack()" :style="{'width': statusHeight+'px','height':statusHeight+'px'}">
|
||
<image class="head_back_img" src="https://zhkj1.oss-cn-shanghai.aliyuncs.com/newPD/zhBack.png" mode="widthFix"></image>
|
||
</view>
|
||
<view class="head_search" :style="{'width':searchWidth+'px','height':statusHeight+5+'px'}">
|
||
<image class="head_search_img" src="../../static/search_img.png" mode="widthFix"></image>
|
||
<input class="head_search_input" :focus="focus" type="text" confirm-type="search" placeholder="请输入搜索内容" v-model="searchtext" @input="onKeyInput" @confirm="confirm"/>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="cont" :style="{'padding-top':statusHeight+headerHeight+19+'px'}">
|
||
<block v-if="searchList.length">
|
||
<view class="cont_ul">
|
||
<view class="cont_li" v-for="(item,index) in searchList" :key="index" @click="goSearch(item.storeName)">{{item.storeName}}</view>
|
||
</view>
|
||
</block>
|
||
<block v-else>
|
||
<block v-if="searchStorage.length">
|
||
<view class="cont_title">历史搜索</view>
|
||
<view class="cont_keyword">
|
||
<view class="cont_keyword_item" v-for="(item,index) in searchStorage" :key="index" @click="goSearch(item)">{{item}}</view>
|
||
</view>
|
||
</block>
|
||
<block v-if="keyList.length">
|
||
<view class="cont_title">搜索发现</view>
|
||
<view class="cont_keyword">
|
||
<view class="cont_keyword_item" v-for="(item,index) in keyList" :key="index" @click="goSearch(item.title)">{{item.title}}</view>
|
||
</view>
|
||
</block>
|
||
</block>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { computed,ref,onMounted,onUnmounted,getCurrentInstance,nextTick } from 'vue';
|
||
import { useCounterStore } from '@/store/counter'; // 引入 Pinia Store
|
||
import { storeToRefs } from 'pinia';//实现解构付值
|
||
import { onLoad,onShow,onPullDownRefresh,onPageScroll,onReachBottom,onReady } from "@dcloudio/uni-app"
|
||
import { searchkeyword,frontproducts } from '@/server/api'
|
||
const counterStore = useCounterStore(); // 使用 Store
|
||
const { proxy } = getCurrentInstance();
|
||
//使用pinia：storeToRefs方法包裹(保持响应式更新，不使用视图无法更新)
|
||
const {statusHeight,headerHeight,statusBartop,ButtonWidth,ButtonHeight } = storeToRefs(counterStore);
|
||
// 定义响应式数据，存储页面宽度
|
||
const pageWidth = ref(0);
|
||
const focus = ref(false);
|
||
const searchtext = ref('');
|
||
const searchList= ref([]);
|
||
const keyList = ref([]);
|
||
const searchStorage = ref([])
|
||
// 获取页面宽度
|
||
const updatePageWidth = () => {
|
||
const systemInfo = uni.getSystemInfoSync();
|
||
pageWidth.value = systemInfo.windowWidth;
|
||
};
|
||
|
||
const searchWidth = computed(() => {
|
||
return pageWidth.value - statusHeight.value - ButtonWidth.value - 35;
|
||
});
|
||
// 判断是否有上一页
|
||
const getPages = () => {
|
||
const pages = getCurrentPages();
|
||
return pages.length > 1;
|
||
};
|
||
const handleBack = () => {
|
||
if (getPages()) {
|
||
// 如果有上一页，返回上一页
|
||
uni.navigateBack();
|
||
} else {
|
||
// 如果没有上一页，返回首页
|
||
uni.switchTab({
|
||
url: '/pages/index/index',
|
||
});
|
||
}
|
||
};
|
||
const api_searchkeyword = () => {
|
||
return searchkeyword().then(({data})=>{
|
||
keyList.value = data;
|
||
}).catch(({message}) => {
|
||
uni.showModal({
|
||
content:message,
|
||
showCancel: false
|
||
})
|
||
})
|
||
}
|
||
const onKeyInput=(e)=>{
|
||
if(e.detail.value){
|
||
api_frontproducts()
|
||
}else{
|
||
searchList.value = []
|
||
}
|
||
};
|
||
const api_frontproducts=()=>{
|
||
const params = {
|
||
page:1,
|
||
limit:10,
|
||
keyword:searchtext.value||""
|
||
}
|
||
return frontproducts(params).then(({data}) => {searchList.value = data.list;})
|
||
}
|
||
const goSearch=(name)=>{
|
||
uni.navigateTo({
|
||
url:`/userserve/SearchList/SearchList?text=${name}`
|
||
})
|
||
}
|
||
const confirm=(e)=>{
|
||
let arr = searchStorage.value;
|
||
uni.navigateTo({
|
||
url:`/userserve/SearchList/SearchList?text=${searchtext.value}`,
|
||
success: () => {
|
||
arr.forEach((item,index)=>{
|
||
if(e.detail.value == item){
|
||
arr.splice(index,1)
|
||
}
|
||
})
|
||
if(e.detail.value){
|
||
arr.unshift(e.detail.value)
|
||
uni.setStorage({
|
||
key: 'searchStorage',
|
||
data: arr
|
||
});
|
||
}
|
||
}
|
||
|
||
})
|
||
};
|
||
const StorageList=()=>{
|
||
let getlist = uni.getStorageSync('searchStorage');
|
||
if(getlist.length){
|
||
searchStorage.value = getlist;
|
||
}
|
||
}
|
||
onLoad((options) => {
|
||
focus.value = true;
|
||
updatePageWidth();
|
||
});
|
||
onShow(() => {
|
||
StorageList();
|
||
api_searchkeyword();
|
||
});
|
||
onReady(()=>{})
|
||
onPullDownRefresh(()=>{})
|
||
onReachBottom(()=>{})
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
@import './style.scss';
|
||
</style> |