搜索取消

发布时间 2023-10-21 23:44:33作者: 樱花馆长
<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;
}