<view class="search">
<view class="search_top">
<input placeholder="请输入搜索内容" bindinput="handleInput" value="{{value}}"></input>
<button bindtap="handleSearch">{{isSearching ? '取消' : '搜索'}}</button>
</view>
<navigator class="goods_item" wx:for="{{goods}}" url="/pages/details/details?goods_id={{item.goods_id}}" wx:if="{{isSearching}}">{{item.goods_name}}</navigator>
</view>
const { registerUniformDesc } = require("XrFrame/xrFrameSystem")
Page({
data: {
goods: [],
value: '',
isSearching: false
},
onLoad: function(options) {
this.requestCategories()
},
handleInput(e) {
this.setData({
value: e.detail.value
})
},
handleSearch() {
const { value, isSearching } = this.data
if (isSearching) {
this.setData({
value: '',
isSearching: false,
goods: []
})
} else {
if (!value) {
registerUniformDesc
}
this.requestGoods(value)
this.setData({
isSearching: true
})
}
},
requestCategories() {
wx.request({
url: 'https://api-hmugo-web.itheima.net/api/public/v1/categories',
success(res) {
console.log(res)
}
})
},
requestGoods(query) {
const that = this
wx.request({
url: 'https://api-hmugo-web.itheima.net/api/public/v1/goods/qsearch',
data: {
query: query
},
success(res) {
that.setData({
goods: res.data.message
})
}
})
}
})
page{
background-color: #ddd;
}
.search_top{
padding: 20rpx;
height: 70rpx;
display: flex;
}
.search_top input{
flex: 4;
background-color: #fff;
height: 100%;
font-size: 25rpx;
padding-left: 20rpx;
}
.search_top button{
flex:1;
width: 150rpx;
font-size: 20rpx;
}
.goods_item{
font-size: 32rpx;
padding: 10rpx;
border-bottom: 2rpx solid #eee;
height: 60rox;
line-height: 60rpx;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
overflow: hidden;
}