iuu/doc-mini-app
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

处理搜索

Browse Source
This commit is contained in:
建超
2024-08-22 22:30:52 +08:00
parent b43246074a
commit 49226941c4
13 changed files with 628 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
app.json
View File

@@ -3,7 +3,10 @@
"pages/index/index",
"pages/list/list",
"pages/222",
"pages/details/details"
"pages/details/details",
"pages/search/index",
"pages/s-list/s-list"
],
"window": {
"navigationBarTextStyle": "black",

BIN
images/del.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.0 KiB

15
pages/index/index.js
View File

@@ -31,8 +31,8 @@ Page({
]
},
// 页面跳转
jumpPage(e) {
let jumpType = e.currentTarget.dataset.jumptype;
console.log(jumpType == 1);
if(jumpType == 1){
@@ -40,8 +40,21 @@ Page({
url: "/pages/list/list?id=1"
})
}
if(jumpType == 2){
wx.navigateTo({
url: "/pages/list/list?id=1"
})
}
if(jumpType == 3){
wx.navigateTo({
url: "/pages/search/index"
})
}
// wx.navigateTo({
// url: this.data.category[index].url
// })
},
bindFocus(e){
console.log(e);
}
})

3
pages/index/index.wxml
View File

@@ -6,7 +6,8 @@
<view class="search">
<view class="search_in">
<image src="../../images/search.png"></image>
<input type="text" placeholder="请输入故障代码或关键词" />
<view style="width: 600rpx;color: #b5b5b5;" bind:tap="jumpPage" data-jumpType="3">请输入故障代码或关键词</view>
<!-- <input type="text" bindfocus="bindFocus" bindblur="bindFocus" placeholder="请输入故障代码或关键词" /> -->
</view>
</view>
</view>

2
pages/index/index.wxss
View File

@@ -50,7 +50,7 @@ page {
/* 搜索 start */
.search-box {
padding-top: 20px;
padding-top: 45rpx;
}
.search {

86
pages/s-list/s-list.js Normal file
View File

@@ -0,0 +1,86 @@
// pages/list/list.js
Page({
/**
* 页面的初始数据
*/
data: {
searchName : "",
},
jumpPage(e) {
let jumpType = e.currentTarget.dataset.jumptype;
console.log(jumpType == 2);
if (jumpType == 2) {
wx.navigateTo({
url: "/pages/details/details?id=1"
})
}
// wx.navigateTo({
// url: this.data.category[index].url
// })
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
let that = this;
console.log(options);
that.setData({searchName:options.search})
// that.data.searchName = options.search;
// if (that.sea)
// console.log(options);
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
}
})

5
pages/s-list/s-list.json Normal file
View File

@@ -0,0 +1,5 @@
{
"usingComponents": {
"list-nav-bar": "/components/list-nav-bar/list-nav-bar"
}
}

178
pages/s-list/s-list.wxml Normal file
View File

@@ -0,0 +1,178 @@
<!-- <list-nav-bar title="Weixin" back="{{false}}" color="black" background="#3c8bf6"></list-nav-bar> -->
<!-- <navigation-bar title="Weixin" back="{{false}}" color="black" background="#3c8bf6"></navigation-bar> -->
<list-nav-bar title="WeixinWeixinWeixin" background="#3c8bf6" showNavBtn="{{true}}"></list-nav-bar>
<!-- <view class="index-search-box dis-flex">
<view class="index-cont-search">
<icon class="text-center" color="rgba(0,0,0,0.4)" size="15" type="search"></icon>
<text>搜索商品</text>
</view>
</navigator>
<view bindtap="onChangeShowState" class="list-right f-28">
<text class="iconfont icon-tubiao_kuaizhuangpailie" wx:if="{{showView}}"></text>
<text class="iconfont icon-tubiao_liebiaopailie" wx:else></text>
</view>
</view> -->
<view class="search-box">
<navigator hover-class="none" openType="navigateBack" url="../search/index">
<view class="search">
<view class="search_in">
<image src="../../images/search.png"></image>
<view style="width:600rpx;color:#b5b5b5;padding-left:15rpx;" bind:tap="jumpPage">{{searchName}}</view>
<!-- <input type="text" bindfocus="bindFocus" bindblur="bindFocus" placeholder="请输入故障代码或关键词" /> -->
</view>
</view>
</navigator>
</view>
<scroll-view style="height: 100%;overflow:hidden;" scroll-y type="list">
<view class="container">
<view class="card" bind:tap="jumpPage" data-jumpType="2">
<view class="card-header">
<view class="dot"></view>
<text class="title">超出焊接时间</text>
</view>
<view class="details">
<!-- 查看详情 -->
<text class="group-item-header-tip-txt">查看详情</text>
<image class="details-icon" src="../../images/jt.png"></image>
</view>
</view>
<view class="card" bind:tap="jumpPage" data-jumpType="2">
<view class="card-header">
<view class="dot"></view>
<text class="title">超出焊接时间</text>
</view>
<view class="details">
<!-- 查看详情 -->
<text class="group-item-header-tip-txt">查看详情</text>
<image class="details-icon" src="../../images/jt.png"></image>
</view>
</view>
<view class="card" bind:tap="jumpPage" data-jumpType="2">
<view class="card-header">
<view class="dot"></view>
<text class="title">超出焊接时间</text>
</view>
<view class="details">
<!-- 查看详情 -->
<text class="group-item-header-tip-txt">查看详情</text>
<image class="details-icon" src="../../images/jt.png"></image>
</view>
</view>
<view class="card" bind:tap="jumpPage" data-jumpType="2">
<view class="card-header">
<view class="dot"></view>
<text class="title">超出焊接时间</text>
</view>
<view class="details">
<!-- 查看详情 -->
<text class="group-item-header-tip-txt">查看详情</text>
<image class="details-icon" src="../../images/jt.png"></image>
</view>
</view>
<view class="card" bind:tap="jumpPage" data-jumpType="2">
<view class="card-header">
<view class="dot"></view>
<text class="title">超出焊接时间</text>
</view>
<view class="details">
<!-- 查看详情 -->
<text class="group-item-header-tip-txt">查看详情</text>
<image class="details-icon" src="../../images/jt.png"></image>
</view>
</view>
<view class="card" bind:tap="jumpPage" data-jumpType="2">
<view class="card-header">
<view class="dot"></view>
<text class="title">超出焊接时间</text>
</view>
<view class="details">
<!-- 查看详情 -->
<text class="group-item-header-tip-txt">查看详情</text>
<image class="details-icon" src="../../images/jt.png"></image>
</view>
</view>
<view class="card" bind:tap="jumpPage" data-jumpType="2">
<view class="card-header">
<view class="dot"></view>
<text class="title">超出焊接时间</text>
</view>
<view class="details">
<!-- 查看详情 -->
<text class="group-item-header-tip-txt">查看详情</text>
<image class="details-icon" src="../../images/jt.png"></image>
</view>
</view>
<view class="card" bind:tap="jumpPage" data-jumpType="2">
<view class="card-header">
<view class="dot"></view>
<text class="title">超出焊接时间</text>
</view>
<view class="details">
<!-- 查看详情 -->
<text class="group-item-header-tip-txt">查看详情</text>
<image class="details-icon" src="../../images/jt.png"></image>
</view>
</view>
<view class="card" bind:tap="jumpPage" data-jumpType="2">
<view class="card-header">
<view class="dot"></view>
<text class="title">超出焊接时间</text>
</view>
<view class="details">
<!-- 查看详情 -->
<text class="group-item-header-tip-txt">查看详情</text>
<image class="details-icon" src="../../images/jt.png"></image>
</view>
</view>
<view class="card" bind:tap="jumpPage" data-jumpType="2">
<view class="card-header">
<view class="dot"></view>
<text class="title">超出焊接时间</text>
</view>
<view class="details">
<!-- 查看详情 -->
<text class="group-item-header-tip-txt">查看详情</text>
<image class="details-icon" src="../../images/jt.png"></image>
</view>
</view>
<view class="card" bind:tap="jumpPage" data-jumpType="2">
<view class="card-header">
<view class="dot"></view>
<text class="title">超出焊接时间</text>
</view>
<view class="details">
<!-- 查看详情 -->
<text class="group-item-header-tip-txt">查看详情</text>
<image class="details-icon" src="../../images/jt.png"></image>
</view>
</view>
</view>
</scroll-view>

95
pages/s-list/s-list.wxss Normal file
View File

@@ -0,0 +1,95 @@
page {
height: 100vh;
display: flex;
flex-direction: column;
background: #f3f2f4;
min-height: 100vh;
}
/* 搜索 start */
.search-box {
/* padding-top: 45rpx; */
/* margin-bottom: 20rpx; */
background: #f3f2f4;
padding-top: 45rpx;
z-index: 99;
}
.search {
display: flex;
align-items: center;
justify-content: center;
height: 100rpx;
background: #f3f2f4;
}
.search .search_in {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 20rpx;
/* box-sizing: border-box; */
height: 70rpx;
background-color: #ffffff;
border-radius: 10rpx;
}
.search_in image {
height: 45rpx;
width: 45rpx;
}
.search input {
width: 600rpx;
}
/* 搜索 end */
.container{
margin-top: 45rpx;
margin-left: 30rpx;
margin-right: 30rpx;
}
.card {
background-color: #ffffff;
border-radius: 10rpx;
padding: 30rpx;
margin-bottom: 20rpx;
/* box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); */
}
.card-header {
display: flex;
align-items: center;
margin-bottom: 20rpx;
}
.dot {
width: 16rpx;
height: 16rpx;
background-color: #3c8bf6; /* 蓝色圆点 */
border-radius: 50%;
margin-right: 20rpx;
}
.title {
font-size: 30rpx;
font-weight: bold;
}
.details {
display: flex;
align-items: center;
color: #737373; /* 灰色文本 */
font-size: 24rpx;
}
.details-icon{
height: 20rpx;
width: 25rpx;
}

82
pages/search/index.js Normal file
View File

@@ -0,0 +1,82 @@
let App = getApp();
Page({
/**
* 页面的初始数据
*/
data: {
recentSearch: [],
searchValue: '',
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
// 获取历史搜索
this.getRecentSearch();
},
/**
* 获取历史搜索
*/
getRecentSearch: function () {
let recentSearch = wx.getStorageSync('recentSearch');
this.setData({
recentSearch
});
},
/**
* 绑定输入值
*/
getSearchContent: function (e) {
this.data.searchValue = e.detail.value;
},
/**
* 搜索提交
*/
search: function () {
if (this.data.searchValue) {
// 记录最近搜索
let recentSearch = wx.getStorageSync('recentSearch') || [];
let searchValue = this.data.searchValue.trim(); // 去掉前后的空格
if (searchValue && !recentSearch.includes(searchValue)) {
recentSearch.unshift(searchValue);
}
// recentSearch.unshift(this.data.searchValue);
wx.setStorageSync('recentSearch', recentSearch)
// 跳转到列表页
wx.navigateTo({
url: '../s-list/s-list?search=' + this.data.searchValue,
})
}
},
/**
* 清空最近搜索记录
*/
clearSearch: function () {
wx.removeStorageSync('recentSearch');
this.getRecentSearch();
},
/**
* 跳转到最近搜索
*/
goSearch: function (e) {
console.log(e.target.dataset.text);
wx.navigateTo({
url: '../s-list/s-list?search=' + e.target.dataset.text,
})
},
})

5
pages/search/index.json Normal file
View File

@@ -0,0 +1,5 @@
{
"usingComponents": {
"list-nav-bar": "/components/list-nav-bar/list-nav-bar"
}
}

29
pages/search/index.wxml Normal file
View File

@@ -0,0 +1,29 @@
<list-nav-bar title="WeixinWeixinWeixin" background="#3c8bf6" showNavBtn="{{true}}"></list-nav-bar>
<view class="cont-box">
<view class="dis-flex search-input-box">
<view class="search-input">
<view class="dis-flex search-box">
<view class="left">
<icon color="rgba(180,180,180,1)" size="15" type="search"></icon>
</view>
<view class="right">
<input bindinput="getSearchContent" class="input" focus="true" placeholder="请输入您搜索的商品" placeholderStyle="color:#aba9a9" type="text"></input>
</view>
</view>
</view>
<view class="serch-button">
<button bindtap="search" type="default" hover-class="none">搜索</button>
</view>
</view>
<view wx:if="{{recentSearch.length}}">
<view class="title-box">
<view class="title-box-title ">最近搜索</view>
<image src="../../images/del.png" bindtap="clearSearch" class="title-box-image"></image>
</view>
<view class="sale-button-box">
<view class="seconds-kill-li" wx:for="{{recentSearch}}" wx:for-index="idx" wx:for-item="recent" wx:key="hotrecent">
<view bindtap="goSearch" class="recent-button" data-text="{{recent}}">{{recent}}</view>
</view>
</view>
</view>
</view>

127
pages/search/index.wxss Normal file
View File

@@ -0,0 +1,127 @@
page {
background: #f7f7f7;
}
.cont-box {
padding: 20rpx;
}
.dis-flex {
display: flex;
}
.search-input-box {
height: 64rpx;
}
.search-input {
width: 80%;
background: #fff;
border-radius: 10rpx 0 0 10rpx;
padding-left: 10rpx;
box-sizing: border-box;
overflow: hidden;
}
.search-box .left {
width: 60rpx;
}
.search-box .left icon {
padding: 18rpx;
}
.search-box .right {
flex: 1;
}
.search-input input {
font-size: 30rpx;
height: 64rpx;
line-height: 64rpx;
}
.serch-button {
width: 25%;
box-sizing: border-box;
}
.serch-button button {
color: #fff;
background: #3c8bf6;
width: 100%;
line-height: 64rpx;
height: 64rpx;
font-size: 28rpx;
border-radius: 0 10rpx 10rpx 0;
}
.title-box {
display: flex;
justify-content: space-between;
padding: 50rpx 0 0 0;
}
.title-box-title {
color: #777;
font-size: 28rpx;
}
.title-box-image {
width: 30rpx;
height: 30rpx;
}
.sale-button-box {
display: flex;
padding: 10rpx 0;
flex-flow: wrap;
overflow: hidden;
}
/* .seconds-kill-li {
padding: 10rpx;
box-sizing: border-box;
} */
.seconds-kill-li {
display: block;
padding: 10rpx;
box-sizing: border-box;
/* width: 33.3%; */
min-width: 33.3%;
float: left;
}
.recent-button {
background: #fff;
/* padding:10rpx 10rpx 10rpx 10rpx; */
padding-left: 15rpx;
padding-right: 15rpx;
color: #777;
border-radius: 50rpx;
justify-content: center;
text-align: center;
font-size: 26rpx;
border: 1rpx solid #eee;
overflow: hidden!important;
white-space: nowrap!important;
text-overflow: ellipsis!important;
height: 60rpx;
line-height: 60rpx;
}