小程序类似外卖下单功能实现

<view class="jisuan">
	<view class="jisuanZon" wx:for='{{shopListgoods}}' wx:key='index'>
		<view class="jisuanImgIcon" bindtap="dkhopDeatels" data-item="{{item}}">
			<image mode="aspectFill" src="{{item.cover == '' ? morenIcon : item.cover}}"></image>
			<view class="jisuanXq">详情</view>
		</view>
		<view class="jisuanRigth">
			<view class="jisuanRigthName">{{item.name}}</view>
			<view class="jisuanRigthMiddn">
				已售{{item.sale_num}} <text wx:if='{{item.is_stock == 1}}'>库存{{item.stock}}</text> <text class="jisuanRigthRed" wx:if='{{item.is_limit == 1}}'>(每人限购{{item.limit_num}}次)</text>
			</view>
			<view class="jisuanRigthBton">
				<view class="jisuanRigthPrice">
					￥{{item.money}} <text class="jisuanRigthRed">/次</text>
				</view>
				<view class="jisuanRigthWXpl">
					<view bindtap="jianshao" data-id='{{item.id}}' data-index='{{index}}' wx:if='{{item.num > 0}}' class="jianshao">
					</view>
					<text wx:if='{{item.num > 0}}'>{{item.num}}</text>
					<view class="zenjia" wx:if='{{item.num < item.limit_num || item.is_limit == 0}}' data-is_limit='{{item.is_limit}}' bindtap="zengjia" data-id='{{item.id}}' data-index='{{index}}'>
					</view>
					<view class="jinzhizenjia" wx:if='{{item.num == item.limit_num && item.is_limit == 1}}'>
					</view>
				</view>
			</view>
		</view>
	</view>
</view>

data:{
morenIcon:"https://sucai.suoluomei.cn/sucai_zs/images/20200612183201-item_cover.svg",
shopListgoods:[
      {
        cover: "https://sucai.suoluomei.cn/sucai_zs/images/2020/04/27/789a4e2cce669eef01f663f545bd97a5.jpg",//图片
        id: 1,
        is_limit: 1,//是否限制购买次数 1是0否 （是0就可以买无数个）
        is_stock: 1,//是否设置库存 1是0否
        limit_num: 2,//可购买的数量
        money: "0.01",//金额
        name: "橙色",//名称
        sale_num: "6",//已售
        stock:"95",//库存
      },
      {
        cover: "https://sucai.suoluomei.cn/sucai_zs/images/2020/04/27/789a4e2cce669eef01f663f545bd97a5.jpg",//图片
        id: 1,
        is_limit: 0,//是否限制购买次数 1是0否 （是0就可以买无数个）
        is_stock: 0,//是否设置库存 1是0否
        limit_num: 0,//可购买的数量
        money: "0.01",//金额
        name: "橙色",//名称
        sale_num: "6",//已售
        stock:"95",//库存
      }
],
}

  // 增加
   zengjia(e){
    let that = this
    let id = e.currentTarget.dataset.id
    let index = e.currentTarget.dataset.index
    let item = that.data.shopListgoods
    let stock = e.currentTarget.dataset.stock
    let is_limit = e.currentTarget.dataset.is_limit
    if(item[index].limit_num >= item[index].num || is_limit == 0){
      console.log('+1')
      if(item[index].num >= stock ){
        console.log('不能加了')
        wx.showToast({
          title: '最多只能买' + stock + '份',
          icon:'none'
        })
        return false
      }
      item[index].num ++
      that.setData({
        shopListgoods:item
      })
    }
    console.log(item[index].limit_num, item[index].num)
  },
  // 减少
  jianshao(e){
    let that = this
    let id = e.currentTarget.dataset.id
    let index = e.currentTarget.dataset.index
    let item = that.data.shopListgoods
      console.log('不走近来？')
      item[index].num --
      that.setData({
        shopListgoods:item
      })
    console.log(item[index].limit_num, item[index].num)
  },

   // 支付
  wxpaley(){
    let that = this
    let item = that.data.shopListgoods
    let goodsIds = {}
    for(let i = 0;i < item.length;i++){
      if(item[i].num > 0){
        goodsIds[item[i].id] = item[i].num
      }
    }
    let arr =  Object.keys(goodsIds)
    if(arr.length == "0"){
      wx.showToast({
        title: '请至少选择一个商品!',
        icon:"none"
      })
      return false
    }
    console.log(goodsIds)
    // return false
    api.wxRequest({
      method: 'POST',
      url: 'app/order/add',
      data: {
        activityId: 1,
        goodsIds : JSON.stringify(goodsIds),
      },
    }).then(res => {
      console.log(res)
      if(res.errcode == 0){
        wx.navigateTo({
          url: '../jielongPayl/jielongPayl',
        })
      }else{
        wx.showToast({
          title: res.msg,
          icon:'none'
        })
      }
    })

  },

.jisuan {
  padding: 20rpx;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  background: #fff;
  margin: 20rpx 0;
  border-radius: 10rpx;
}
.jisuanZon {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 20rpx 0;
  box-sizing: border-box;
  border-bottom: 1rpx solid#eee;
}
.jisuanImgIcon image {
  width: 100%;
  height: 100%;
}
.jisuanImgIcon {
  height: 120rpx;
  width: 120rpx;
  margin-right: 20rpx;
  position: relative;
  border-radius: 15rpx;
  overflow: hidden;
}
.jisuanXq {
  position: absolute;
  padding: 3rpx 7rpx;
  font-size: 16rpx;
  color: #fff;
  background: #F8BC94;
  top: 0;
  left: 0;
}
.jisuanRigth {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 120rpx;
  width: 557rpx;
}
.jisuanRigthName {
  font-size: 28rpx;
}

.jisuanRigthMiddn {
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: 22rpx;
}
.jisuanRigthRed {
  color: #FA4753;
}

.jisuanRigthBton {
  display: flex;
  justify-content: space-between;
}
.jisuanRigthPrice {
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: 22rpx;
}
.jisuanRigthWXpl {
  display: flex;
  align-items: center;
  flex-direction: row;
  font-size: 22rpx;
}

.jisuanRigthWXpl text {
  margin: 0 15rpx;
}
.zenjia{
  width: 30rpx;
  height: 30rpx;
  background: url('https://sucai.suoluomei.cn/sucai_zs/images/20200612111810-zengjia.png');
  background-size: 100% 100%;
}
.jinzhizenjia{
  width: 30rpx;
  height: 30rpx;
  background: url('https://sucai.suoluomei.cn/sucai_zs/images/20200612162116-fsdbnnn.png');
  background-size: 100% 100%;
}
.jianshao{
  width: 30rpx;
  height: 30rpx;
  background: url('https://sucai.suoluomei.cn/sucai_zs/images/20200612113236-fsadbcbn.png');
  background-size: 100% 100%;
}