微信小程序图书交易商城云开发实例——书易（五）：图书详情

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

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

图书展示

根据所传参数查询book数据库获取对应图书数据并显示。

wxml

<!-- 图书展示 -->
<view class='book-box'>
  <view class='book-icon'>
    <image src='{{bookcover}}'></image>
  </view>
  <text class='book-name'>{{bookname}}</text>
  <text class='book-price'>￥{{bookprice}}</text>
</view>

wxss

/* 图书展示 */
.book-box{
  width:100%;
  height:100%;
  flex-direction: column;
  background-color:#fff;
}
.book-icon{
  width: 750rpx;
  height: 700rpx;
  justify-content: center;
  align-items:center;
  display: inline-flex;
  border-bottom:solid 5rpx;
  border-color:rgb(220,220,220);
}
.book-icon image{
  width:80%;
  height:100%;
}
.book-name{
  display:block;
  margin:20rpx 0 25rpx 30rpx;
  /* height:38rpx; */
  font-size:30rpx;
}
.book-price{
  display:block;
  padding-bottom:20rpx;
  margin:0 0 20rpx 30rpx;
  /* height:25rpx; */
  font-size:42rpx;
  color:#3bcab2;
  /* margin-top:5rpx; */
}

js

  onLoad(options) {
    // console.log(options)
    this.setData({
      bookname:options.name
    })
    db.collection('book').where({
      name:options.name
    }).get()
    .then(res => {
      this.setData({
        bookname:res.data[0].name,
        bookcover:res.data[0].cover,
        bookprice:res.data[0].price
       })
        // console.log("输出",res)
      })
      .catch(err => {
        console.log(err)
      })
  },

图文详情

该模块没有设计图书详情内容，只做了外观，可自行添加功能。

wxml

<!-- 图文详情 -->
<view class='detail-container'>
  <view class='detail-text'>
    <text class='detail-text'>图文详情</text>
  </view> 
  <view class='detail-book'>
  </view> 
</view> 

wxss

/* 图文详情 */
.detail-container{
  margin-top:20rpx;
  height: 200rpx;
  display: block;
  /* border-style:solid; 
  border-color: #3bcab2;  */
  background-color: #fff;
}
.detail-text{
  display:block;
  height:40%;
  background-color:#fff;
  border-bottom:solid;
  border-color:rgb(220,220,220);
  border-width:3rpx;
}
.detail-text text{
  height:100%;
  width:100%;
  font-size: 30rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing:20rpx;
  /* font-weight:bold; */
}
.detail-book{
  display: flex;
  height:60%;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center; 
  flex-direction: column;
}

底边栏

左一home图标绑定函数gotoshouye，单机跳转至首页；
左二cart图标绑定函数gotogouwuche，单机跳转至购物车；
“加入购物车”按键绑定函数goshop，点击按钮后判断是否存在本地缓存，若不存在则需要用户登录，之后根据cart数据库中用户购物车数据判断用户是否将该书加入过购物车，若书名用户名均相同则判断用户将该书加入过购物车，修改相应数据使数量num加一，否则将新数据写入cart数据库；
“立即购买”按键绑定函数buybook，点击按钮后判断是否存在本地缓存，若不存在则需要用户登录，并将数据加入purchase数据库，提示购买成功。

wxml

<!-- 底边栏 -->
<view class='bottom-container'>
  <view bindtap='gotoshouye'>
    <image src='../../image/home_off.png'></image>
  </view>
  <view bindtap='gotogouwuche'>
    <image src='../../image/cart.png'></image>
  </view>
  <view>
    <button class='goshop' bindtap='addbook'>加入购物车</button>
  </view>
  <view>
    <button class='go' bindtap='buybook'>立即购买</button>
    </view>
</view>

wxss

/* 底边栏 */
.bottom-container{
  height:90rpx;
  width:750rpx;
  display: flex;
  line-height:80rpx;
  position:fixed;
  bottom:0px;
  left:0px;
  background-color: #fff;
}
.bottom-container image{
  height:50%;
  width: 50%;
}
.bottom-container view:first-child{
  height:100%;
  width:12%;
  display:flex;
  align-items:center;
  justify-content: center;
  /* border-right:solid;
  border-color:rgb(220,220,220);
  border-width:1rpx;  */
}
.bottom-container view:nth-child(2){
  height:100%;
  width:12%;
  display:flex;
  align-items:center;
  justify-content: center;

}
button text{
  vertical-align: middle;
  align-items: center;
  justify-content: center;
}
.bottom-container view:nth-child(3){
  display:flex;
  height:100%;
  width:38%;
}
.goshop{
  width:100%;
  height:100%;
  font-size: 28rpx;
  letter-spacing:2rpx;
  background-color: #3bcab2;
  color:#fff;
  border-radius: 0rpx;
  border-style: none;
}
.goshop:active{
  background-color: #1cb69c;
}
.bottom-container view:nth-child(4){
  display:flex;
  height:100%;
  width:38%;
}
.go{
  width:100%;
  height:100%;
  font-size: 28rpx;
  letter-spacing:2rpx;
  background-color: #45b97c;
  color:#fff;
  border-radius: 0rpx;
  border-style: none;
}
.go:active{
  background-color: #52ac7c;
}

js

  // 首页->页面跳转
  gotoshouye(e){
    wx.switchTab({
      url: '/pages/shouye/shouye'
    })
  },

  // 购物车->页面跳转
  gotogouwuche(e){
    wx.navigateTo({
      url: '/pages/gouwuche/gouwuche',
    })
  },

  // 加入购物车
  addbook(e){
    // console.log(app.globalData.userInfo)
    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)
            })
      }
      })
    }
  },
  // 立即购买
  buybook(e){
    // console.log(app.globalData.userInfo)
    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('purchase').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)
            })
          },
        fail:res=>{
            wx.showToast({
              title: '授权失败',
              icon: "none",
            })
        }
      })
    }
    else{
      db.collection('purchase').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)
        })
    }

  },