礼物帮手项目(4)- 购物车列表

在这里插入图片描述

<div class="cart-item">
 <img src="https://img.yzcdn.cn/public_files/2017/10/24/2f9a36046449dafb8608e99990b3c205.jpeg" alt="">
  <div class="goods-info">
    <p class="goods-title">cdascds</p>
    <p class="goods-desc">cdascds</p>
    <p class="goods-money">¥22</p>
    <div class="btn-group">
        <button class="decrease" >-</button>
        <input type="number">
        <button class="increase" >+</button>
    </div>
  </div>
  <van-button class="operate-delete" size="mini"
                    type="danger">删除</van-button>
  <!-- <div class="operate-delete" >删除</div> -->
</div>

css
.cart-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #ccc;
  // padding: 10px 0;
  img {
    width: 100px;
    height: 100px;
  }
  .goods-desc{
    width: 180px;
  }
  .goods-title{
    font-size:18px;
    width: 180px;
  }
  .goods-money {
    color: #f13329;
  }
  .operate-delete {
    color: white;
  }
  .btn-group {
    input {
      display: inline-block;
      width: 30px;
      height: 30px;
    }
    button{
      display: inline-block;
      margin-top: 5px;
      width: 30px;
      height: 30px;
      border: none;
      background-color: #fff;
      border: 1px solid #ccc;
    }
  }
}

在这里插入图片描述

{
      path: '/cart',
      name: 'Cart',
      component: Cart
    }

后台

router.get('/cartList', function (req, res, next) {
  var userId = req.cookies.userId;
  console.log(userId)
  db.User.findOne({ userId: userId }, function (err, doc) {
    console.log(doc)
    if (err) {
      res.json({
        status: '1',
        msg: err.message,
        result: ''
      })
    } else {
      if (doc) {
        res.json({
          status: '0',
          msg: '',
          result: doc.cartList
        })
      }
    }
  })
})

猜你喜欢

转载自blog.csdn.net/fengtingYan/article/details/89502182