shopping客户端

最新推荐文章于 2021-09-14 20:09:59 发布

晓雪小姐姐

最新推荐文章于 2021-09-14 20:09:59 发布

阅读量107

点赞数

本文链接：https://blog.csdn.net/weixin_46960783/article/details/109729860

版权

在这里插入图片描述

xml

<view class="box" style="{{bdcolor}}" wx:for="{{data}}" wx:for-item="arritem" wx:for-index="arrindex" data-key1="{{arrindex}}" bind:tap="commodityDetails" data-detailData="{{arrindex}}" wx:key="goodlist">
  <view class="tx" >
    <block>
      <image src="{{arritem.image}}" class="img-1" />
    </block>
  </view>
  <view class="box1">
    <text class="text1">{{arritem.name}}</text>
    <text class="text2">￥：{{arritem.price}}</text>
  </view>
  <view class="mybutton" catch:tap="buy" hover-class="hover" data-index="{{arrindex}}">购买</view>
</view>
<view class="bottombox">
  <image src="/images/gouwuchekong.png" style="width:50rpx;height:55rpx;" mode="aspectFill"></image>
  <view style="font-size:28rpx">{{buyid}} 件商品</view>
  <view style="font-size:28rpx;color:#FFA500">￥ {{money}}</view>
  <view class="mybutton1" catch:tap="clear" hover-class="hover1">清空</view>
  <view class="mybutton2" catch:tap="result" hover-class="hover2">结算</view>
</view>

wxss

page{
  box-sizing: border-box;
  padding-bottom: 100rpx;
}
.box{
  width: 100%;
  margin: 0 auto;
  border-bottom:2rpx solid	#D3D3D3;
  display: flex;
  flex-direction: row;
  padding: 25rpx 25rpx;
  box-sizing: border-box;
  align-items: center;
  justify-content: space-between;
}
.box1{
  width: 380rpx;
  overflow: hidden;
  position: relative;
}
.box1 .time{
  color: #B0B0B0;
  position: absolute;
  right: 0rpx;
  line-height: 60rpx;
  font-size: 26rpx;
}
.box .tx{
  position: relative;
  width: 100rpx;
  height: 100rpx;
  border-radius: 5%;
  background-color: #DADFDE;
  margin-right: 20rpx;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  align-content: space-around;
}
.box:nth-of-type(2n){
  background-color: rgba(237,237,237, .6);
}
.box .tx .img-1{
  width: 100%;
  height: 100%;
}
.box .tx image{
  width: 30rpx;
  height: 30rpx;
  border-radius: 5%;
}
.box .tx .tx-dot{
  width: 35rpx;
  height: 35rpx;
  border-radius: 50%;
  background-color: #ff0000;
  position: absolute;
  right: -10rpx;
  top: -10rpx;
  text-align: center;
  color: white;
  font-size: 18rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
.box .tx .tx-dot .tx-dot-99{
  font-size: 15rpx;
}
.box .text1{
  display: block;
  color: black;
  font-weight: bold;
  font-size: 26rpx;
  line-height: 60rpx;
  width: 300rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.box .text2{
  display: block;
  color: #FFA500;
  font-size: 35rpx;
  width: 300rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.searchbox{
  width: 600rpx;
  display: flex;
  border: 2rpx solid	#C0C0C0;
  border-radius: 10px;
  align-items: center; 
  margin: 30rpx auto;
}
.searchbox input{
  width: 600rpx;
  height: 60rpx;
  padding: 0 15rpx;
  font-size: 28rpx;
}
.bottombox{
  background-color: #fff;
  width: 100vw;
  height: 120rpx;
  box-sizing: border-box;
  padding: 10rpx;
  border-top: 2rpx solid #B0B0B0;
  position: fixed;
  bottom: 0rpx;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.mybutton1{
  width: 120rpx;
  height: 70rpx;
  border: 2rpx solid #DCDCDC;
  background-color:	#F5F5F5;
  font-size: 28rpx;
  border-radius: 12rpx;
  text-align: center;
  line-height: 70rpx;
}
.mybutton2{
  width: 120rpx;
  height: 80rpx;
  background-color: red;
  color: white;
  font-size: 28rpx;
  border-radius: 16rpx;
  text-align: center;
  line-height: 80rpx;
}

json

{
“enablePullDownRefresh”:true,
“onReachBottomDistance”:20
}

var current = 1
var count
Page({
  // 商品详情
  commodityDetails: function (e) {
    var detailIndex = e.currentTarget.dataset.detaildata
    var detailData = JSON.stringify(this.data.data[detailIndex])
    wx.navigateTo({
      url: '/pages/detail/detail?detailData=' + detailData,
    })
  },
  // 购买
  buy: function (e) {
    console.log(getApp().globalData.userInfo.userId)
    var that = this
    // 获取当前列表下标，对应服务器数据列表下标
    var index = e.currentTarget.dataset.index
    // 点击一次，请求服务器添加一次对应的商品
    wx.request({
      url: getApp().globalData.host + 'cart/add',
      method: 'POST',
      data: {
        userId: getApp().globalData.userInfo.userId,
        goodsId: that.data.data[index].goodsId
      },
      success: (res) => {
        getApp().globalData.flag = true
        wx.showToast({
          title: '已添加到购物车',
          icon: 'none',
        })
        // 请求购物车信息
        wx.request({
          url: getApp().globalData.host + 'cart/getAll',
          method: 'POST',
          data: {
            userId: getApp().globalData.userInfo.userId
          },
          success: (res) => {
            // 获取成功，渲染页面数据
            that.setData({
              buyid: res.data.data.total_num,
              money: res.data.data.total_money
            })
          }
        })
      }
    })
  },
  // 清空
  clear: function () {
    // 清空购物车数据
    wx.request({
      url: getApp().globalData.host + 'cart/delete',
      method: 'POST',
      data: {
        userId: getApp().globalData.userInfo.userId
      },
      success: (res) => {
        getApp().globalData.flag = false
        getApp().globalData.goodsList = null
        // 成功清空后，清空页面数据
        wx.showToast({
          title: '已清空',
          icon: 'success'
        })
        this.setData({
          buyid: 0,
          money: "0.00"
        })
      }
    })
  },
  // 结算
  result: function () {
    // 判断购物车是否为空
    if (getApp().globalData.flag) {
      // 请求当前购物车信息
      wx.request({
        url: getApp().globalData.host + 'cart/getAll',
        method: 'POST',
        data: {
          userId: getApp().globalData.userInfo.userId
        },
        success: (res) => {
          //获取goods——list准备请求结算页信息
          getApp().globalData.goodsList = res.data.data.goods_list
          wx.navigateTo({
            url: '/pages/shoppingResult/shoppingResult',
          })
        }
      })
    } else {
      wx.showToast({
        title: '请选择商品',
        icon: 'none'
      })
    }
  },
  // 上拉加载下拉刷新
  initialData: function () {
    current = 1
    wx.showLoading({
      title: 'loging'
    })
    wx.request({
      url: getApp().globalData.host + 'goods/getGoodsByPage',
      data: {
        page: 1,
        pageSize: 8 * current
      },
      method: 'POST',
      success: (res) => {
        wx.hideLoading()
        wx.stopPullDownRefresh()
        var data = res.data.data
        var reg = RegExp(/^u/)
        for (const key in data) {
          if (reg.exec(data[key].image)) {
            var item = data[key]
            item.image = this.data.imgurl + item.image
            data.splice(key, 1, item)
          }
        }
        this.setData({
          data: data
        })
      }
    })
  },
  loadData: function () {
    current++;
    wx.request({
      url: getApp().globalData.host + 'goods/getGoodsByPage',
      data: {
        page: 1,
        pageSize: 8 * current
      },
      method: 'POST',
      success: (res) => {
        if (res.data.data.length == count) {
          wx.showToast({
            title: '已加载全部数据',
            icon: 'none'
          })
        } else {
          count = res.data.data.length
          var data = res.data.data
          var reg = RegExp(/^u/)
          for (const key in data) {
            if (reg.exec(data[key].image)) {
              var item = data[key]
              item.image = this.data.imgurl + item.image
              data.splice(key, 1, item)
            }
          }
          this.setData({
            data: data
          })
        }

      }
    })
  },

  data: {
    imgurl: "http://116.62.201.243:8080/wxxcx/"
  },

  onLoad: function (options) {
    this.initialData()
  },
 
  onPullDownRefresh: function () {
    this.initialData()
    wx.showToast({
      title: '刷新成功',
    })
  },

  onReachBottom: function () {
    this.loadData()
  },

  onReady: function () {

  },

  onShow: function () {
    wx.request({
      url: getApp().globalData.host + 'cart/getAll',
      method: 'POST',
      data: {
        userId: getApp().globalData.userInfo.userId
      },
      success: (res) => {
        if (res.data.data.total_money == 0) {
          this.setData({
            buyid: "0",
            money: "0.00"
          })
        } else {
          // 有商品的时候才能结算
          this.setData({
            buyid: res.data.data.total_num,
            money: res.data.data.total_money
          })
          getApp().globalData.flag = true
        }
      },
      fail:res=>{
        console.log(res)
      }
    })

  },
  onHide: function () {

  },
  onUnload: function () {

  },
  onShareAppMessage: function () {

  }
})

晓雪小姐姐

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
shopping客户端

xml<view class="box" style="{{bdcolor}}" wx:for="{{data}}" wx:for-item="arritem" wx:for-index="arrindex" data-key1="{{arrindex}}" bind:tap="commodityDetails" data-detailData="{{arrindex}}" wx:key="goodlist"> <view class="tx" > <block.
复制链接

扫一扫