微信小程序图书交易商城云开发实例——书易（四）：精选图书

于 2023-06-09 13:56:27 发布
阅读量744 收藏 3
点赞数 1
文章标签： 微信小程序 javascript 小程序 github 微信
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44827933/article/details/131046621
版权

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

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

头图

请添加图片描述

wxml
<!-- 头图 -->
<view class="banner">
  <image src='https://s1.imagehub.cc/images/2023/02/14/0625d780fb9d4551c147692860c0ec00.png' style="width:100%;height:100%"></image>
</view>
wxss
/* 头图 */
.banner{
  height:350rpx;
}

搜索

请添加图片描述
搜索栏分两部分，左侧为输入框，右侧为搜索图标。bindinput绑定输入框的输入值，在输入框回车确认或单击搜索图标时跳转至搜索界面，并将输入内容作为参数传递。

wxml
<!-- 搜索 -->
<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-top: 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
  // 搜索
  getname(e){
    this.setData({
      userinput:e.detail.value
    })
  },
  searchbook(e){
    // console.log(this.data.userinput)
    wx.navigateTo({
      url: '/pages/sousuo/sousuo?name='+this.data.userinput+"&oldbook=",
    })
  },

分类图书

请添加图片描述

根据全局变量menuSelect的值判断当前所选分类，查询book数据库获取所选分类图书数据并显示，左侧导航栏同样根据menuSelect的值进行外观修改。
点击图书进入相应图书详情页，点击加号判断是否存在本地缓存，若不存在则需要用户登录，之后根据cart数据库中用户购物车数据判断用户是否将该书加入过购物车，若书名用户名均相同则判断用户将该书加入过购物车，修改相应数据使数量num加一，否则将新数据写入cart数据库。

wxml
<!-- 分类图书 -->
<view class='container'>
  <scroll-view class='left-container' scroll-y="true">
    <block wx:for="{{menuCategories}}" wx:key="key">
      <view class="categoryBar {{ menuSelect==item.category_type?'active':''}}" bindtap='choosecategory' data-cat='{{item.category_type}}'>
        <text >{{item.category_name}}</text>
      </view>
    </block>  
  </scroll-view>
   <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>
</view>
wxss
/* 分类图书 */
.container{
  margin-top:10rpx;
  display: inline-flex;
  width: 100%;
  height: 100%;
  background-color: #f6f6f6;
  /* align-items:flex-start;
  flex-direction:row; */
}
.left-container{
  width:25%;
  height: 100%;
  background:#f6f6f6;
}
.categoryBar{
  display: inline-flex;
  width:100%;
  height:100rpx;
  justify-content: center;
  align-items: center;
  color:#515151;
  border-bottom:3rpx solid rgb(220,220,220);
}
.categoryBar text{
  font-size:26rpx;
}
.active{
  background:#fff;
  border-left:8rpx solid #3bcab2;
}
.active text{
  color: #3bcab2;
}


.right-container{
  width:75%;
  display: block;
  justify-content: center;
  align-items: center;
  background-color: #fff;
}
.category-box{
  display: flex;
  height:200rpx;
  background:#fff;
}
.category-left{
  display: flex;
  width:35%;
  height:100%;
}
.category-left image{
  width: 90%;
  height: 90%;
  margin: auto;
}
.category-right{
  width: 60%;
  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:0 10rpx 0 10rpx; 
  color: #000;
}
.category-right text:nth-child(2){
  margin:30rpx 10rpx 0 10rpx;
  font-size: 33rpx;
  color: #3bcab2;
  display:inline-block;
}
.category-right button{
  display:inline;
  font-size: 32rpx;
  margin-left:100rpx;
  /* margin:15rpx 0 -16rpx 55rpx; */
  /* padding:10rpx; */
  background-color: #3bcab2;
  color:#fff
}
.category-right button:active{
  background-color: #1cb69c;
}
js
  data: {
    menuCategories: [
      { category_name: '教材', category_type: 1 },
      { category_name: '教辅', category_type: 2 },
      { category_name: '课外读物', category_type: 3 },
      { category_name: '专业书籍', category_type: 4 },
    ],
    menuSelect:app.globalData.menuSelect
  },

  // 选择分类
  choosecategory(e){
    // console.log(e.currentTarget.dataset.cat)
    app.globalData.menuSelect=e.currentTarget.dataset.cat
    this.setData({
      menuSelect:e.currentTarget.dataset.cat
    })
    const db = wx.cloud.database()
    db.collection('book').where({
      category:this.data.menuSelect
    }).get()
    .then(res => {
      this.setData({
        categoryBook:res.data
       })
        // console.log("输出",res.data)
      })
      .catch(err => {
        console.log(err)
      })
  },

  // 精选图书->界面跳转
  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)
            })
      }
      })
    }
  },

购物车

请添加图片描述
购物车小图标固定在界面左下角，点击后跳转至购物车界面

wxml
<!-- 购物车 -->
<view class="cart" bindtap="gotogouwuche">
  <image src='../../image/cart_2.png'></image>
</view>
wxss
/* 购物车 */
.cart{
  height:80rpx;
  width:80rpx;
  position:fixed;
  bottom:30rpx;
  left:30rpx;
  /* background-color: black; */
}
.cart image{
  width:100%;
  height:100%;
}
js
  // 购物车->页面跳转
  gotogouwuche(e){
    wx.navigateTo({
      url: '/pages/gouwuche/gouwuche'
    })
  },
小思非陌
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值