黑马小程序商城实战

2020-03-24  本文已影响0人  随风飞2019
//首页商品列表部分页面
<block wx:for="{{goods}}" wx:key="_openid">
  <navigator url="/pages/detail/detail?id={{item._id}}">
    <van-card num="{{item.count}}" price="{{item.price}}" title="{{item.title}}" thumb="{{ item.imageSrc }}">
      <view slot="footer">
        <van-button size="mini" catchtap="buy" data-item="{{item}}">下单</van-button>
      </view>
    </van-card>
  </navigator>
</block>

特别注意,跳转详情页的写法
<navigator url="/pages/detail/detail?id={{item._id}}">
下单传参的写法
<van-button size="mini" catchtap="buy" data-item="{{item}}">下单</van-button>
这里因为整块加了跳转连接,只能使用catchtap捕获方式绑定时间,不会冒泡,不会跳转到详情页

//首页逻辑,包括渲染数据,上拉加载,下拉刷新
const db=wx.cloud.database();
const goods_col = db.collection("goods");
Page({
  data:{
    goods:[],
    page:0,
    hasMore:true,
  },
  getGoodsList(){
    let LIMIT = 5;
    goods_col.limit(LIMIT).skip(this.data.page*LIMIT).get().then(res=>{
      wx.stopPullDownRefresh();
      if (!this.data.hasMore){
        console.log("没有数据了");
        return
      }
      this.setData({
        goods: [...this.data.goods, ...res.data],
        page: ++this.data.page,
        hasMore: res.data.length === LIMIT
      })
    })
  },
  onLoad(){
    this.getGoodsList()
  },
  onReachBottom(){
    this.getGoodsList();
    console.log(this.data.page)
  },
  onPullDownRefresh(){
    this.setData({
      page: 0,
      hasMore: true,
      goods: [],
    })
    this.getGoodsList();
  }
})
//详情页页面
<van-cell title="{{item.title}}" value="{{item.price}}" label="访问量:{{item.count}}" />
//详情页逻辑
<navigator url="/pages/detail/detail?id={{item._id}}">
onLoad(e) {
    this.getItem(e.id)   //进来需要通过传进来的参数id,请求数据库
}
还需要把访问量+1
async getItem(val) {
    let temp = goods_col.doc(val);
    await temp.update({
      data: {
        count: db.command.inc(1)
      }
    });
    let {data} = await temp.get();
    this.setData({
      item: data
    });
},

await temp.update是重点,数据库访问量+1的部分
上一篇下一篇

猜你喜欢

热点阅读