feat: 增加介质材料模块及案例展示模块
This commit is contained in:
245
pages_tool/seal/medium/search.vue
Normal file
245
pages_tool/seal/medium/search.vue
Normal file
@@ -0,0 +1,245 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="content">
|
||||
<view class="cate-search">
|
||||
<view class="search-box">
|
||||
<input class="uni-input" maxlength="50" confirm-type="search" :focus="true" placeholder="请输入介质名称 '如汽油'" v-model="inputValue" @focus="inputFocus" @confirm="search" @input="inputChange" />
|
||||
<text @tap="search" class="iconfont icon-sousuo3"></text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="search-content">
|
||||
<block v-if="g0">
|
||||
<view class="history">
|
||||
<view class="history-box">
|
||||
<view class="history-top">
|
||||
<view class="title">搜索结果</view>
|
||||
</view>
|
||||
<view class="history-bottom">
|
||||
<block v-for="(item, index) in list" :key="index">
|
||||
<view @tap="otherSearch(item, index)" @longtap="deleteItem(item, index)" class="history-li">
|
||||
<view>{{item.name}}</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
<view>
|
||||
<ns-empty v-if="list.length === 0" isIndex="false" text="暂无数据"></ns-empty>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import nsEmpty from '@/components/ns-empty/ns-empty';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
nsEmpty
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
inputValue: "",
|
||||
historyList: [],
|
||||
searchList: [],
|
||||
alikeList: [],
|
||||
isIndex: false,
|
||||
searchWords: "",
|
||||
hotList: [],
|
||||
isAllHistory: false,
|
||||
list: []
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
themeColor() {
|
||||
return '#ffffff';
|
||||
},
|
||||
g0() {
|
||||
return this.list.length;
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
if (options.keyword) {
|
||||
this.inputValue = options.keyword;
|
||||
}
|
||||
// 初始化搜索历史记录
|
||||
if (!uni.getStorageSync("search")) {
|
||||
uni.setStorageSync("search", []);
|
||||
}
|
||||
this.findHistoryList();
|
||||
// 可以在这里调用获取热门搜索列表的方法
|
||||
this.findHotList();
|
||||
},
|
||||
onShow() {
|
||||
this.$nextTick(() => {
|
||||
this.getHistoryHeight();
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
findHistoryList() {
|
||||
this.historyList = uni.getStorageSync("search").reverse();
|
||||
},
|
||||
deleteHistoryList() {
|
||||
uni.showModal({
|
||||
title: "提示",
|
||||
content: "确认删除全部历史记录？",
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
uni.setStorageSync("search", []);
|
||||
this.findHistoryList();
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
deleteItem(item, index) {
|
||||
uni.showModal({
|
||||
title: "提示",
|
||||
content: "确认删除该条历史记录？",
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
let search = uni.getStorageSync("search");
|
||||
search = search.filter((val) => val != item);
|
||||
uni.setStorageSync("search", search);
|
||||
this.findHistoryList();
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
findHotList() {
|
||||
// 获取热门搜索列表
|
||||
this.$api.sendRequest({
|
||||
url: '/api/seal/hotlist',
|
||||
success: (res) => {
|
||||
this.hotList = res.data;
|
||||
}
|
||||
});
|
||||
},
|
||||
inputFocus() {
|
||||
// 输入框聚焦事件
|
||||
},
|
||||
inputChange(e) {
|
||||
this.inputValue = e.target.value;
|
||||
},
|
||||
search() {
|
||||
if (!this.inputValue.trim()) {
|
||||
uni.showToast({ title: '请输入搜索关键词', icon: 'none' });
|
||||
return;
|
||||
}
|
||||
// 保存搜索历史
|
||||
this.saveSearchHistory(this.inputValue);
|
||||
// 执行搜索
|
||||
this.$api.sendRequest({
|
||||
url: '/api/seal/search',
|
||||
data: { keyword: this.inputValue },
|
||||
success: (res) => {
|
||||
this.list = res.data;
|
||||
}
|
||||
});
|
||||
},
|
||||
otherSearch(item, index) {
|
||||
// 其他搜索方式处理
|
||||
this.inputValue = item.name;
|
||||
this.search();
|
||||
},
|
||||
saveSearchHistory(keyword) {
|
||||
let search = uni.getStorageSync("search");
|
||||
// 去重
|
||||
search = search.filter((val) => val != keyword);
|
||||
search.unshift(keyword);
|
||||
// 限制历史记录数量
|
||||
if (search.length > 20) {
|
||||
search = search.slice(0, 20);
|
||||
}
|
||||
uni.setStorageSync("search", search);
|
||||
this.findHistoryList();
|
||||
},
|
||||
getHistoryHeight() {
|
||||
// 获取历史记录高度（如果需要）
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.content {
|
||||
padding: 20rpx;
|
||||
background-color: #f8f8f8;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.cate-search {
|
||||
padding: 20rpx;
|
||||
background-color: #fff;
|
||||
border-radius: 10rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.search-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 25rpx;
|
||||
padding: 10rpx 20rpx;
|
||||
}
|
||||
|
||||
.uni-input {
|
||||
flex: 1;
|
||||
height: 60rpx;
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
padding: 0 20rpx;
|
||||
}
|
||||
|
||||
.iconfont.icon-sousuo3 {
|
||||
font-size: 32rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.search-content {
|
||||
background-color: #fff;
|
||||
border-radius: 10rpx;
|
||||
padding: 20rpx;
|
||||
}
|
||||
|
||||
.history {
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.history-box {
|
||||
border: 1rpx solid #f1f1f1;
|
||||
border-radius: 10rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.history-top {
|
||||
padding: 20rpx;
|
||||
border-bottom: 1rpx solid #f1f1f1;
|
||||
}
|
||||
|
||||
.history-top .title {
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.history-bottom {
|
||||
padding: 20rpx;
|
||||
}
|
||||
|
||||
.history-li {
|
||||
padding: 20rpx;
|
||||
border-bottom: 1rpx solid #f1f1f1;
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.history-li:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.history-li:active {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user