<view class="top">
? <view class="topsearch">
? ? <view class="frame">
? ? ? <input value="{{shoopingtext}}" bindinput="shoppinginput"></input>
? ? </view>
? ? <text bindtap="search">搜索</text>
? </view>
</view>
<view class="history" wx:if="{{history}}">
? <view class="history_title">
? ? <text>歷史搜索</text>
? ? <image src="/images/delete.png" mode="widthFix" style="width:5%;" bindtap="cleanhistory"></image>
? </view>
? <view class="history_text">
? ? <text wx:for="{{newArray}}" wx:key="key" data-text="{{item}}" bindtap="textfz">{{item}}</text>
? </view>
</view>
<view class="none" wx:if="{{noneview}}">
? <image src="/images/null.png" mode="widthFix" style="width:20%"></image>
? <text>抱歉，沒有相關(guān)商品</text>
</view>
<view class='swiper_con' wx:if="{{shoppinglist}}">
? <view class='swiper_con_view' wx:for="{{shoopingarray}}" wx:key="id" wx:if='{{item.status=="1"?true:false}}'>
? ? <image src="{{item.images}}" mode="widthFix" style="width:100%" data-status="{{item.status}}"></image>
? ? <view style="width:90%;margin:5%;">
? ? ? <text style="font-size:24rpx">{{item.title}}</text>
? ? ? <view class="swiper_con_view_view">
? ? ? ? <view style="width:80%;">
? ? ? ? ? <text style="font-size:24rpx;color:red;">￥{{item.money}}</text>
? ? ? ? ? <text style="font-size:18rpx;color:#B8B8B8;margin-left:5%;">已售{{item.sold}}</text>
? ? ? ? </view>
? ? ? ? <image src="/images/cart.png" mode="widthFix" style="width:10%;position:relative;left:8%;"></image>
? ? ? </view>
? ? </view>
? </view>
</view>

page{
? background-color: white;
}
?
.top {
? width: 100%;
? background-color: #f7f7f7;
}
?
.topsearch {
? width: 90%;
? margin-left: 5%;
? display: flex;
? padding: 2% 0;
? align-items: center;
}
?
.frame {
? background-color: white;
? width: 75%;
? border-radius: 20rpx;
? padding: 0 3%;
}
?
.frame>input {
? font-size: 24rpx;
? margin: 6rpx 0;
}
?
.topsearch>text {
? width: 10%;
? margin-left: 5%;
? color: #a8a7a7fa;
}
?
.history {
? background-color: white;
? padding: 4%;
}
?
.history_title {
? font-size: 30rpx;
? display: flex;
? justify-content: space-between;
? color: #a8a7a7fa;
? align-items: center;
}
?
.history_text {
? padding: 4% 0;
? display: flex;
? flex-wrap: wrap;
}
?
.history_text>text {
? background-color: #f7f7f7;
? padding: 1% 3%;
? margin: 2%;
? border-radius: 40rpx;
? font-size: 30rpx;
}
?
.history_text>text:first-child{
? margin-left: 0;
}
?
.none{
? margin-top: 10%;
? display: flex;
? align-items: center;
? justify-content: center;
? flex-direction: column;
}
?
.swiper_con {
? width: 96%;
? margin-left: 2%;
? display: flex;
? flex-wrap: wrap;
}
?
.swiper_con_view {
? width: 48%;
? height: 530rpx;
? background-color: white;
? margin: 10rpx 0;
}
?
.swiper_con_view:nth-child(even) {
? margin-left: 4%;
}
?
.swiper_con_view_view {
? margin-top: 5%;
? display: flex;
? align-items: center;
}

Page({
? //清除歷史記錄
? cleanhistory: function(e) {
? ? this.setData({
? ? ? history: false, //隱藏歷史記錄
? ? ? historyArray: [], //清空歷史記錄數(shù)組
? ? ? newArray: [],
? ? ? shoopingtext: "" //清空搜索框
? ? })
? },
? //搜索
? search: function(e) {
? ? var searchtext = this.data.shoopingtext; //搜索框的值
? ? var sss = true;
? ? if (searchtext != "") {
? ? ? //將搜索框的值賦給歷史數(shù)組
? ? ? this.data.historyArray.push(searchtext);
? ? ? //模糊查詢 循環(huán)查詢數(shù)組中的title字段
? ? ? for (var index in this.data.shoopingarray) {
? ? ? ? var num = this.data.shoopingarray[index].title.indexOf(searchtext);
? ? ? ? let temp = 'shoopingarray[' + index + '].status';
? ? ? ? if (num != -1) { //不匹配的不顯示
? ? ? ? ? this.setData({
? ? ? ? ? ? [temp]: 1,
? ? ? ? ? })
? ? ? ? ? sss = false //隱藏未找到提示
? ? ? ? }
? ? ? }
? ? ? this.setData({
? ? ? ? history: false, //隱藏歷史記錄
? ? ? ? noneview: sss, //隱藏未找到提示
? ? ? ? shoppinglist: true, //顯示商品列表
? ? ? ? newArray: this.data.historyArray //給新歷史記錄數(shù)組賦值
? ? ? })
? ? } else {
? ? ? this.setData({
? ? ? ? noneview: true, //顯示未找到提示
? ? ? ? shoppinglist: false, //隱藏商品列表
? ? ? ? history: false, //隱藏歷史記錄
? ? ? })
? ? }
? },
? data: {
? ? shoopingtext: "", //搜索框的值
? ? history: false, //顯示歷史記錄
? ? noneview: false, //顯示未找到提示
? ? shoppinglist: false, //顯示商品列表
? ? historyArray: [], //歷史記錄數(shù)組,
? ? newArray: [], //添加歷史記錄數(shù)組
? ? shoopingarray: [{ //商品
? ? ? id: 0,
? ? ? images: "/images/3201.png",
? ? ? title: "完達(dá)山甄選牧場酸奶飲品牛奶飲料常溫發(fā)酵乳包...",
? ? ? money: "88.00",
? ? ? sold: "78箱",
? ? ? status: 0
? ? }, {
? ? ? id: 1,
? ? ? images: "/images/3202.jpg",
? ? ? title: "網(wǎng)紅 天日鹽餅干 粗糧早餐 代餐宿舍小吃零食 130g*...",
? ? ? money: "26.80",
? ? ? sold: "34包",
? ? ? status: 0
? ? }]
? },
? //搜索框的值
? shoppinginput: function(e) {
? ? //當(dāng)刪除input的值為空時
? ? if (e.detail.value == "") {
? ? ? this.setData({
? ? ? ? history: true, //顯示歷史記錄
? ? ? ? shoppinglist: false //隱藏商品列表
? ? ? });
? ? ? //所有商品列表的狀態(tài)改為0
? ? ? for (var index in this.data.shoopingarray) {
? ? ? ? let temp = 'shoopingarray[' + index + '].status';
? ? ? ? this.setData({
? ? ? ? ? [temp]: 0,
? ? ? ? })
? ? ? }
? ? }
? ? this.setData({
? ? ? shoopingtext: e.detail.value
? ? })
? },
? //點擊歷史記錄賦值給搜索框
? textfz: function(e) {
? ? this.setData({
? ? ? shoopingtext: e.target.dataset.text
? ? })
? }
})