微信小程序图书交易商城云开发实例——书易（六）：图书搜索

最新推荐文章于 2024-02-07 14:49:56 发布

原创最新推荐文章于 2024-02-07 14:49:56 发布 · 442 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #小程序 #微信 #github

微信小程序商城云开发实例——书易

总览博客地址：https://blog.csdn.net/qq_44827933/article/details/130672061
项目github地址：https://github.com/xsfmGenius/BookChange

请添加图片描述

搜索栏

在界面加载时查找book数据库中书名包含所传参数的书并显示。
搜索栏左侧为输入框，右侧为搜索图标。bindinput绑定输入框的输入值，在输入框回车确认或单击搜索图标时触发searchbook函数，查找book数据库中书名name字段包含所传参数的数据返回并显示。

wxml

<!-- 搜索 -->
<wxs module="filters" src="../../utils/filter.wxs"></wxs>
<view class='search'>
  <input value="{{inputValue}}" confirm-type='search' placeholder='搜索图书' bindinput="getname" bindconfirm="searchbook"></input>
  <image class="search_image" src='../../image/search.png' bindtap="searchbook"></image>
</view>

wxss

/* 搜索 */
.search{
  margin-bottom: 10rpx;
  display: flex;
  height:70rpx;
  background-color:#fff;
  padding:20rpx 40rpx 20rpx 40rpx;
}
.search input{
  padding-left:25rpx;
  display:inline-block;
  width:630rpx;
  height:70%;
  border-radius:40rpx 0 0 40rpx;
  border-style: solid;
  border-right-style: none;
  border-color:#a6a6a6;
  align-self: center;
}
.search image{
  display:inline-block;
  margin-left:-5rpx;
  height:70%;
  width:50rpx;
  align-self: center;
  border-style: solid;
  border-color:#a6a6a6;
  border-radius:0 40rpx 40rpx 0;
  border-left-style: none;
}

js

  onLoad(options) {
    // console.log(options)
    this.setData({
      inputValue:options.name,
      oldbook:Boolean(options.oldbook)
    })
    const db = wx.cloud.database()
    db.collection('book').where({
      name:db.RegExp({
        regexp: options.name,
        options: 'i',
        }),
        old:this.data.oldbook
    }).get()
    .then(res => {
      this.setData({
        categoryBook:res.data
       })
        // console.log("输出",res)
      })
      .catch(err => {
        console.log(err)
      })
  },
// 搜索
  getname(e){
    this.setData({
      userinput:e.detail.value
    })
  },
  searchbook(e){
    // console.log(this.data.userinput)
    const db = wx.cloud.database()
    db.collection('book').where({
      name:db.RegExp({
        regexp: this.data.userinput,
        options: 'i',
        }),
        old:this.data.oldbook
    }).get()
    .then(res => {
      this.setData({
        categoryBook:res.data
       })
        // console.log("输出",res)
      })
      .catch(err => {
        console.log(err)
      })
  },

搜索结果

在界面加载和触发searchbook函数时查找book数据库中书名包含所传参数的书并显示。
点击图书进入相应图书详情页，点击加号判断是否存在本地缓存，若不存在则需要用户登录，之后根据cart数据库中用户购物车数据判断用户是否将该书加入过购物车，若书名用户名均相同则判断用户将该书加入过购物车，修改相应数据使数量num加一，否则将新数据写入cart数据库。

wxml

<!-- 搜索结果 -->
<view class='right-container'>
    <block wx:for="{{categoryBook}}" wx:key="key">
      <view class='category-box' bindtap='gotoxiangqing' data-bookname="{{item.name}}">
        <view class='category-left'>
          <image src="{{item.cover}}"></image>
        </view>
        <view class='category-right'>  
          <text>{{item.name}}</text>
          <text>￥{{filters.toFix(item.price)}}</text>
          <button class='go' catchtap="goshop" data-bookname="{{item.name}}" data-bookprice="{{item.price}}" data-bookcover="{{item.cover}}">+</button>
        </view>
      </view>
    </block>
  </view>

wxss

/* 搜索结果 */
.right-container{
  width:750rpx;
  display: block;
  justify-content: center;
  align-items: center;
  background-color: #fff;
}
.category-box{
  display: flex;
  height:250rpx;
  background:#fff;
}
.category-left{
  display: flex;
  width:30%;
  height:100%;
}
.category-left image{
  width: 90%;
  height: 90%;
  margin: auto;
}
.category-right{
  width: 70%;
  height:100%;
  margin:34rpx 0 0 10rpx;
  flex-flow: column;
  justify-content: space-between;
}
.category-right text{
  display:block;
}
.category-right text:first-child{
  font-size: 30rpx;
  margin:20rpx 40rpx 0 10rpx; 
  color: #000;
}
.category-right text:nth-child(2){
  margin:50rpx 10rpx 0 10rpx;
  font-size: 33rpx;
  color: #3bcab2;
  display:inline-block;
}
.category-right button{
  display:inline;
  font-size: 32rpx;
  margin-left:230rpx;
  /* margin:15rpx 0 -16rpx 55rpx; */
  /* padding:10rpx; */
  background-color: #3bcab2;
  color:#fff
}
.category-right button:active{
  background-color: #1cb69c;
}

js

// 精选图书->界面跳转
  gotoxiangqing(e){
      // console.log(e.currentTarget.dataset.bookname)
      wx.navigateTo({
        url: '/pages/xiangqing/xiangqing?name='+e.currentTarget.dataset.bookname,
      })
  },

  // 加入购物车
  goshop(e){
    // console.log(app.globalData.userInfo)
    this.setData({
      bookname:e.currentTarget.dataset.bookname,
      bookcover:e.currentTarget.dataset.bookcover,
      bookprice:e.currentTarget.dataset.bookprice,
    })
    if(!app.globalData.userInfo){
      wx.getUserProfile({
        desc: '请授权登录',
        success:res=>{
          // console.log(res)
          app.globalData.userInfo=res.userInfo
          wx.setStorageSync('user', app.globalData.userInfo)

          db.collection('cart').where({
            username:app.globalData.userInfo.nickName,
            bookname:this.data.bookname,
          }).get()
          .then(res => {
            // console.log(res)
            if(res.data.length!=0){
              this.setData({
                cartbooknum:res.data[0].num
              })
              db.collection('cart').where({
                username:app.globalData.userInfo.nickName,
                bookname:this.data.bookname,
              }).update({
                data:{
                  // bookname:this.data.bookname,
                  // username:app.globalData.userInfo.nickName,
                  num:this.data.cartbooknum+parseInt(1)
                }
              }).then(res => {
                wx.showToast({
                  title: '已加入购物车',
                })
              })
                .catch(err => {
                  console.log(err)
                })
            }
            else{
              db.collection('cart').add({
                data:{
                  bookname:this.data.bookname,
                  username:app.globalData.userInfo.nickName,
                  bookcover:this.data.bookcover,
                  num:parseInt(1),
                  price:this.data.bookprice
                }
              }).then(res => {
                wx.showToast({
                  title: '已加入购物车',
                })
              })
                .catch(err => {
                  console.log(err)
                })

            }
              // console.log("输出",res)
            })
            .catch(err => {
              console.log(err)
            })

          
          },
        fail:res=>{
            wx.showToast({
              title: '授权失败',
              icon: "none",
            })
        }
      })
    }
    else{
      db.collection('cart').where({
        username:app.globalData.userInfo.nickName,
        bookname:this.data.bookname,
      }).get()
      .then(res => {
        // console.log(res)
        if(res.data.length!=0){
          this.setData({
            cartbooknum:res.data[0].num
          })
          db.collection('cart').where({
            username:app.globalData.userInfo.nickName,
            bookname:this.data.bookname,
          }).update({
            data:{
              // bookname:this.data.bookname,
              // username:app.globalData.userInfo.nickName,
              num:this.data.cartbooknum+parseInt(1)
            }
          }).then(res => {
            wx.showToast({
              title: '已加入购物车',
            })
          })
            .catch(err => {
              console.log(err)
            })
        }
        else{
          db.collection('cart').add({
            data:{
              bookname:this.data.bookname,
              username:app.globalData.userInfo.nickName,
              bookcover:this.data.bookcover,
              num:parseInt(1),
              price:this.data.bookprice
            }
          }).then(res => {
            wx.showToast({
              title: '已加入购物车',
            })
          })
            .catch(err => {
              console.log(err)
            })
      }
      })
    }
  },