微信小程序图书交易商城云开发实例——书易（十五）：我的订单、发布、发帖

本文链接：https://blog.csdn.net/qq_44827933/article/details/131345663

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

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

我的订单

请添加图片描述
界面加载时查询purchase数据库查询用户的购买信息并显示；
点击图书跳转至相应图书详情页。

wxml

<view class='container'>
    <block wx:for="{{book}}" wx:key="index">
      <view class='together-box' bindtap="gotoxiangqing" data-bookname="{{item.bookname}}">
        <view class='together-left'>
          <image src="{{item.bookcover}}"></image>
        </view>
        <view class='together-right'>  
          <text>{{item.bookname}}</text>
          <text>￥{{filters.toFix(item.price)}}</text>
          <text>×{{item.num}}</text>
          <text>实付款￥{{filters.toFix(item.price*item.num)}}</text>
        </view>
      </view>
    </block>
  </view>

wxss

.together-box{
  display: flex;
  height:250rpx;
  margin:0 0 10rpx 0;
  border:5rpx solid rgba(220,220,220,1);
  border-radius:10rpx;
  background:#fff;
}
.together-left{
  display: flex;
  align-items:center;
  display: inline-flex;
  justify-content: center;  
  flex-direction:column;
  width:30%;
  height:100%;
}
.together-left image{
  width: 90%;
  height: 80%;
  margin: auto;
}
.together-right{
  width: 70%;
  height:100%;
  margin:30rpx 0 0 10rpx;
  flex-flow: column;
  justify-content: space-between;
  display:flex;
  flex-wrap:wrap;
  position: relative;
}
.together-right text:first-child{
  font-size: 30rpx;
  margin:10rpx 10rpx 0 10rpx; 
  color: #000;
  /* letter-spacing:7rpx; */
}
.together-right text:nth-child(2){
  position:absolute;
  right:20rpx;
  top:10rpx;
  font-size: 30rpx;
  /* text-decoration:line-through; */
}
.together-right text:nth-child(3){
  position:absolute;
  right:20rpx;
  top:50rpx;
  font-size: 28rpx;
  color: rgb(165, 165, 165);

}
.together-right text:nth-child(4){
  position:absolute;
  right:20rpx;
  top:130rpx;
  font-size: 36rpx;
  color: #3bcab2;
}

js

onLoad(options) {
    db.collection('purchase').where({
      username:app.globalData.userInfo.nickName
    }).get()
    .then(res => {
      this.setData({
        book:res.data.reverse()
      })
    })
  },

  // 跳转详情
  gotoxiangqing(e){
    wx.navigateTo({
      url: '/pages/xiangqing/xiangqing?name='+e.currentTarget.dataset.bookname
    })
  },

我的发布

请添加图片描述
界面加载时查询secondhand数据库查询用户发布的二手书信息并显示；
点击图书跳转至相应二手书详情页；
点击右上角删除图标删除数据库中数据并修改book变量。

wxml

<view class='container'>
    <block wx:for="{{book}}" wx:key="index">
      <view class='together-box' bindtap="gotoxiangqing" data-id="{{item._id}}">
        <view class='together-left'>
          <image src="{{item.bookcover}}"></image>
        </view>
        <view class='together-right'>  
          <text>{{item.bookname}}</text>
          <text>￥{{item.bookprice}}</text>
          <image src="../../image/delete.png" catchtap="delete" data-id="{{item._id}}" data-index="{{index}}"></image>
        </view>
      </view>
    </block>
  </view>

wxss

.together-box{
  display: flex;
  height:280rpx;
  margin:0 0 10rpx 0;
  border:5rpx solid rgba(220,220,220,1);
  border-radius:10rpx;
  background:#fff;
}
.together-left{
  display: flex;
  align-items:center;
  display: inline-flex;
  justify-content: center;  
  flex-direction:column;
  width:30%;
  height:100%;
}
.together-left image{
  width: 90%;
  height: 80%;
  margin: auto;
}
.together-right{
  width: 70%;
  height:100%;
  margin:30rpx 0 0 10rpx;
  flex-flow: column;
  justify-content: space-between;
  display:flex;
  flex-wrap:wrap;
  position: relative;
}
.together-right text:first-child{
  font-size: 30rpx;
  margin:10rpx 10rpx 0 10rpx; 
  color: #000;
  /* letter-spacing:7rpx; */
}
.together-right text:nth-child(2){
  position:absolute;
  right:20rpx;
  top:170rpx;
  font-size: 40rpx;
  color: #3bcab2;
}
.together-right image{
  position:absolute;
  right:20rpx;
  top:10rpx;
  height:40rpx;
  width:40rpx;
}

js

  onLoad(options) {
    db.collection('secondhand').where({
      username:app.globalData.userInfo.nickName
    }).get()
    .then(res => {
      this.setData({
        book:res.data.reverse()
      })
    })
  },

  // 跳转详情
  gotoxiangqing(e){
    wx.navigateTo({
      url: '/pages/ershouxiangqing/ershouxiangqing?id='+e.currentTarget.dataset.id,
    })
  },

  // 删除
  delete(e){
    db.collection('secondhand').where({
      _id:e.currentTarget.dataset.id
    }).remove()
    .then(res => {
      var newbook= this.data.book
      newbook.splice(e.currentTarget.dataset.index,1)
      this.setData({
      book:newbook
      })
    })
    .catch(err => {
      console.log(err)
    })
  },

我的发帖

请添加图片描述
功能参考动态展示界面，没有评论功能；
增加删除动态功能，点击右上角删除图标删除数据库中数据并修改view变量。

wxml

<view class='view'>
  <block wx:for="{{view}}" wx:key="index">
    <view class="view-box">
      <view class='user'>
        <view class="left">
          <image class="userpro" src="{{item.userprofile}}"></image>
        </view>
        <view class="right">
          <text>{{item.username}}</text>
          <text>{{item.time}}</text>
        </view>
        <image  class="delete" src="../../image/delete.png" catchtap="delete" data-id="{{item._id}}" data-index="{{index}}"></image>
      </view>
      <textarea disabled>{{item.detail}}</textarea>
      <block wx:for="{{item.image}}" wx:key="index" wx:for-index="index2">
        <image class='picture' bindtap='showImg' data-key="{{index2}}" data-index="{{index}}" mode="aspectFill" src="{{item}}"></image>
      </block>
      <!-- <input placeholder="评论" value="{{inputValue}}" confirm-type='send' bindinput="getreview" bindconfirm="sendreview" data-index="{{index}}"></input> -->
      <block wx:for="{{item.review}}" wx:key="index" wx:for-index="index2">
        <text bindtap='deletereview' data-item="{{item}}" data-key="{{index2}}" data-index="{{index}}" class='review'>{{item}}</text>
      </block>
    </view>
  </block>
</view>

wxss

.view-box{
  display:flex;
  width:750rpx;
  background-color: #fff;
  flex-wrap: wrap;
  align-content: flex-start;
  margin-bottom:20rpx;
  padding-bottom:20rpx;
}
.user{
  height:100rpx;
  width:750rpx;
  margin-bottom:20rpx;
  display:flex;
  padding:10rpx 0 10rpx 20rpx;
  vertical-align: middle;
  align-items: center;
  position: relative;
  /* border-bottom: 3rpx solid rgb(220,220,220); */
}
.userpro{
  display:flex;
  height:80rpx;
  width:80rpx;
  border-radius: 50%;
}
.delete{
  position:absolute;
  right:30rpx;
  top:30rpx;
  height:50rpx;
  width:50rpx;
}
.user text:first-child{
  margin-top:10rpx;
  font-size:35rpx;
  color:#3bcab2;
  line-height:60rpx;
  display:flex;
  margin-left:30rpx;
}
.user text:nth-child(2){
  margin-top:-10rpx;
  font-size:26rpx;
  color:#515151;
  line-height:60rpx;
  display:flex;
  margin-left:30rpx;
}
.view textarea{
  width:690rpx;
  line-height:1.5;
  padding:20rpx 0 20rpx 30rpx;
  height:auto;
  letter-spacing:3rpx;
  white-space:pre-wrap;
  white-space:-moz-pre-wrap;
  white-space:-o-pre-wrap;
  word-wrap:break-word;
}
.picture{
  height:200rpx;
  width:200rpx;
  display:inline-block;
  margin-left:30rpx;
  margin-right:10rpx;
}

.review{
  width:690rpx;
  display:block;
  margin:10rpx 0 0 30rpx;
  font-size: 26rpx;
  white-space:normal;
  word-break:break-all;
  word-wrap:break-word;
}
.review:active{
  background-color: rgb(245, 245, 245);
}

js

  onLoad(options) {
    db.collection('view').where({
      username:app.globalData.userInfo.nickName,
    }).orderBy('time', 'desc')
    .get()
    .then(res => {
      this.setData({
        view:res.data,
       })
      //  console.log("输出",this.data.view)
      })
      .catch(err => {
        console.log(err)
      })

  },

  showImg(e) {
    // console.log(e.currentTarget.dataset)
    wx.previewImage({
      urls: this.data.view[e.currentTarget.dataset.index].image,
      current: this.data.view[e.currentTarget.dataset.index].image[e.currentTarget.dataset.key]
    })
  },

  deletereview(e){
    // console.log(e.currentTarget.dataset)
    var thisview=this.data.view[e.currentTarget.dataset.index]
    var reviewuser=e.currentTarget.dataset.item.split('：')[0]
    // console.log(reviewuser)
    if(thisview.username==app.globalData.userInfo.nickName||reviewuser==app.globalData.userInfo.nickName){
      wx.showModal({
        title: '',
        content: '是否确认删除',
        success:res=>{
          if (res.confirm) {
            var newreview=thisview.review
            newreview.splice(e.currentTarget.dataset.key,1)
            db.collection('view').where({
              _id:this.data.view[e.currentTarget.dataset.index]._id
            }).update({
              data:{
                review:newreview
              }
            })
            .then(res => {
              db.collection('view').where({
                _id:e.currentTarget.dataset.id
              }).orderBy('time', 'desc')
              .get()
              .then(res => {
                this.setData({
                  view:res.data,
                })
              })
             .catch(err => {
                console.log(err)
              })
            })
           .catch(err => {
            console.log(err)
           })
          }
          else if (res.cancel) {
          }
        }  
       })
      // console.log(thisview.username)
      // console.log(reviewuser)
    }
  },

  delete(e){
    db.collection('view').where({
      _id:e.currentTarget.dataset.id
    }).remove()
    .then(res => {
      var newview= this.data.view
      newview.splice(e.currentTarget.dataset.index,1)
      this.setData({
        view:newview
      })
    })
    .catch(err => {
      console.log(err)
    })
  },