mirror of
https://gitee.com/niucloud-team/niucloud-admin.git
synced 2026-02-22 00:20:26 +00:00
275 lines
9.2 KiB
Vue
275 lines
9.2 KiB
Vue
<template>
|
|
<view :style="themeColor()" class="bg-[var(--page-bg-color)] min-h-[100vh]">
|
|
<view class="flex items-center px-[20rpx] h-[120rpx]">
|
|
<view class="h-[68rpx] bg-[#fff] px-[30rpx] flex items-center rounded-[100rpx] flex-1">
|
|
<text class="nc-iconfont nc-icon-sousuo-duanV6xx1 text-[var(--text-color-light9)] text-[26rpx] mr-[18rpx]"></text>
|
|
<input class="text-[28rpx] flex-1" maxlength="50" type="text" v-model="inputValue"
|
|
:placeholder="config.default_word ? config.default_word : '请搜索您想要的商品'"
|
|
confirm-type="search"
|
|
placeholderClass="text-[var(--text-color-light9)] text-[28rpx]" @confirm="search">
|
|
<text v-if="inputValue"
|
|
class="nc-iconfont nc-icon-cuohaoV6xx1 text-[24rpx] text-[var(--text-color-light9)]" @click="inputValue = ''"></text>
|
|
</view>
|
|
<text @click.stop="search()" class="text-[26rpx] ml-[32rpx] -mb-[2rpx]">搜索</text>
|
|
</view>
|
|
|
|
<view class="search-content">
|
|
<!-- 历史搜索 -->
|
|
<view class="history" v-if="historyList.length">
|
|
<view class="history-box">
|
|
<view class="history-top">
|
|
<view class="title font-500">历史搜索</view>
|
|
<view class="icon nc-iconfont nc-icon-shanchu-yuangaizhiV6xx !text-[24rpx] text-[var(--text-color-light6)]" @click="deleteHistoryList"></view>
|
|
</view>
|
|
<view class="history-bottom " id="history-list" :style="{ maxHeight: !isAllHistory ? '100%' : '148rpx' }">
|
|
<template v-for="(item, index) in historyList" :key="index">
|
|
<view class="history-li" @click="otherSearch(item)" v-if="item">
|
|
<view>{{ item }}</view>
|
|
</view>
|
|
</template>
|
|
<view class="history-li history_more" v-if="isAllHistory" @click="isAllHistory = false">
|
|
<view class="content-box">
|
|
<text class="text-[30rpx] nc-iconfont nc-icon-xiaV6xx"></text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="history" v-if="config.search_words && config.search_words.length">
|
|
<view class="history-box">
|
|
<view class="history-top">
|
|
<view class="title font-500">热门搜索</view>
|
|
</view>
|
|
<view class="history-bottom">
|
|
<template v-for="(item, index) in config.search_words" :key="index">
|
|
<view class="history-li" @click="otherSearch(item)" v-if="item">
|
|
<view>{{ item }}</view>
|
|
</view>
|
|
</template>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- <view class="px-[20rpx] pt-[10rpx]">-->
|
|
<!-- <diy-shop-goods-ranking :component="rankingComponent" />-->
|
|
<!-- </view>-->
|
|
</view>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import { onLoad, onShow } from '@dcloudio/uni-app'
|
|
import { ref, nextTick } from 'vue';
|
|
import { redirect } from '@/utils/common';
|
|
import { getGoodsConfigSearch } from '@/addon/shop/api/goods';
|
|
import useConfigStore from "@/stores/config";
|
|
import diyShopGoodsRanking from '@/addon/shop/components/diy/shop-goods-ranking/index.vue';
|
|
|
|
const inputValue = ref('') //搜索框的值
|
|
const historyList = ref([]) //历史搜索记录
|
|
const isAllHistory = ref(false)
|
|
const config = ref<any>({})
|
|
|
|
onLoad((options: any) => {
|
|
uni.getStorageSync('goodsSearchHistory') ? '' : uni.setStorageSync('goodsSearchHistory', []);
|
|
});
|
|
|
|
onShow(() => {
|
|
inputValue.value = ''
|
|
findHistoryList()
|
|
getGoodsConfigSearchFn()
|
|
nextTick(() => {
|
|
getHistoryHeight();
|
|
});
|
|
})
|
|
|
|
//获取历史搜索记录
|
|
const findHistoryList = () => {
|
|
historyList.value = uni.getStorageSync('goodsSearchHistory').reverse();
|
|
}
|
|
|
|
// 删除所有历史记录
|
|
const deleteHistoryList = () => {
|
|
uni.showModal({
|
|
title: '提示',
|
|
content: '确认删除全部历史记录？',
|
|
confirmColor: useConfigStore().themeColor['--primary-color'],
|
|
success: res => {
|
|
if (res.confirm) {
|
|
uni.setStorageSync('goodsSearchHistory', []);
|
|
findHistoryList();
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
const getGoodsConfigSearchFn = () => {
|
|
getGoodsConfigSearch().then((res: any) => {
|
|
config.value = res.data;
|
|
if (config.value.search_words) {
|
|
config.value.search_words = config.value.search_words.filter((word: string) => word && word.trim() !== '');
|
|
}
|
|
})
|
|
}
|
|
|
|
//搜索
|
|
const search = () => {
|
|
// if (inputValue.value.trim() != '') {
|
|
if (config.value.default_word && inputValue.value.trim() == '') inputValue.value = config.value.default_word;
|
|
// 对历史搜索处理,判断有无,最近搜索显示在最前
|
|
let historyList = uni.getStorageSync('goodsSearchHistory');
|
|
let array = [];
|
|
if (historyList.length) {
|
|
array = historyList.filter(v => {
|
|
return v != inputValue.value.trim();
|
|
});
|
|
if(inputValue.value.trim()) array.push(inputValue.value.trim());
|
|
} else if(inputValue.value.trim()) {
|
|
array.push(inputValue.value.trim());
|
|
}
|
|
uni.setStorageSync('goodsSearchHistory', array);
|
|
|
|
redirect({
|
|
url: '/addon/shop/pages/goods/list',
|
|
param: { goods_name: encodeURIComponent(inputValue.value) },
|
|
mode: 'navigateTo'
|
|
})
|
|
// }
|
|
}
|
|
|
|
// 点击历史搜索
|
|
const otherSearch = (e: any) => {
|
|
inputValue.value = e;
|
|
search();
|
|
}
|
|
|
|
// 获取元素高度
|
|
const getHistoryHeight = () => {
|
|
const query = uni.createSelectorQuery().in(this);
|
|
query.select('#history-list').boundingClientRect((data: any) => {
|
|
if (data && data.height > uni.upx2px(70) * 2 + uni.upx2px(35) * 2) {
|
|
isAllHistory.value = true;
|
|
}
|
|
}).exec();
|
|
}
|
|
|
|
// 排行榜初始数据
|
|
const rankingComponent = {
|
|
"list": [
|
|
{
|
|
"bgUrl": "addon/shop/rank/rank_bg_01.jpg",
|
|
"text": "热销排行榜",
|
|
"textColor": "#FFFFFF",
|
|
"imgUrl": "addon/shop/rank/rank_trophy.png",
|
|
"subTitle": {
|
|
"text": "查看更多",
|
|
"textColor": "#FFFFFF",
|
|
"link": {
|
|
"name": "SHOP_GOODS_RANK",
|
|
"parent": "SHOP_LINK",
|
|
"title": "商品排行榜",
|
|
"url": "/addon/shop/pages/goods/rank",
|
|
"action": ""
|
|
}
|
|
},
|
|
"listFrame": {
|
|
"startColor": "#FEA715",
|
|
"endColor": "#FE1E00"
|
|
},
|
|
"source": "default",
|
|
"rankIds": []
|
|
}
|
|
]
|
|
}
|
|
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.content {
|
|
width: 100vw;
|
|
/* #ifdef MP */
|
|
height: 100vh;
|
|
/* #endif */
|
|
/* #ifdef H5 */
|
|
height: calc(100vh - env(safe-area-inset-bottom) - var(--status-bar-height));
|
|
height: calc(100vh - constant(safe-area-inset-bottom) - var(--status-bar-height));
|
|
/* #endif */
|
|
/* #ifdef APP-PLUS */
|
|
height: calc(100vh - 44px - env(safe-area-inset-bottom));
|
|
height: calc(100vh - 44px - constant(safe-area-inset-bottom));
|
|
/* #endif */
|
|
background: #ffffff;
|
|
}
|
|
|
|
.search-content {
|
|
box-sizing: border-box;
|
|
background: #f6f6f6;
|
|
}
|
|
|
|
.history {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
|
|
.history-box {
|
|
width: 100%;
|
|
height: 100%;
|
|
background: #f6f6f6;
|
|
padding: 16rpx 20rpx 0 20rpx;
|
|
|
|
box-sizing: border-box;
|
|
overflow: hidden;
|
|
|
|
.history-top {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
.title {
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
.iconfont {
|
|
color: var(--text-color-light9);
|
|
font-size: 28rpx;
|
|
}
|
|
}
|
|
|
|
.history-bottom {
|
|
width: 100%;
|
|
padding-top: 20rpx;
|
|
position: relative;
|
|
|
|
.history-li {
|
|
display: inline-block;
|
|
margin-right: 20rpx;
|
|
margin-bottom: 15rpx;
|
|
max-width: 100%;
|
|
|
|
view {
|
|
line-height: 56rpx;
|
|
background: var(--temp-bg) !important;
|
|
height: 56rpx;
|
|
color: #333 !important;
|
|
margin: 0 0 4rpx 0 !important;
|
|
padding: 0 24rpx;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
border-radius: 100rpx;
|
|
font-size: 24rpx;
|
|
}
|
|
|
|
&.history_more {
|
|
margin-right: 0;
|
|
position: absolute;
|
|
bottom: 0;
|
|
right: 0;
|
|
|
|
.content-box {
|
|
box-shadow: 2rpx 2rpx 8rpx rgba(0, 0, 0, .1);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|