您的位置:首页 > 编程学习 > > 正文

小程序实现购物车功能前后端代码(小程序实现购物车完整版)

更多 时间:2021-09-29 03:13:42 类别:编程学习 浏览量:797

小程序实现购物车功能前后端代码

小程序实现购物车完整版

小程序实现完整购物车[全选/反选计算金额/加减计算数量跟金额],供大家参考,具体内容如下

一、wxml页面代码模块

  • <view wx:if="{{hasList}}">
      <view class="order_list">
        <view class="order" wx:for="{{list}}" wx:key="{{index}}">
          <view class="xuanze" wx:if="{{item.selected}}" catchtap="selectList" data-index="{{index}}">
            <image src="/images/serch/xuanze.png" />
          </view>
          <view class="xuanze" catchtap="selectList" data-index="{{index}}" wx:else>
            <image src="/images/serch/gouxuan.png" />
          </view>
          <!--列表商品图片-->
          <view class="order_img">
            <image src="{{item.image}}" />
          </view>
          <view class="order_text">
            <view class="text_top">
              <!--列表标题-->
              <view class="title">{{item.title}}</view>
              <view class="detel" catchtap="deletes" data-index="{{index}}">
                <image src="/images/serch/detel.png" />
              </view>
            </view>
            <!--规格-->
            <view class="size">规格:{{item.pro_name}}</view>
            <view class="text_bottom">
              <!--价格-->
              <view class="money">¥{{item.price}}</view>
              <!--商品数量加减-->
              <view class="number">
                <!--减按钮-->
                <view class="reduce" catchtap="btn_minus" data-obj="{{obj}}" data-index="{{index}}">
                  <!--按钮图片-->
                  <image src="/images/serch/jian-1.png" />
                </view>
                <!--数量-->
                <view class="numb">{{item.num}}</view>
                <!--加按钮-->
                <view class="add" catchtap="btn_add" data-index="{{index}}">
                  <!--按钮图片-->
                  <image src="/images/serch/add-1.png" />
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    
      <!--固定底部-->
      <view class="buy">
        <view class="buy_top">
          <view class="top_left">
            <view class="left_img" catchtap="selectAll" wx:if="{{selectAllStatus}}">
              <image src="/images/serch/gouxuan.png" />
            </view>
            <view class="left_img" catchtap="selectAll" wx:else>
              <image src="/images/serch/gouxuan.png" />
            </view>
            <view class="left_name">全选</view>
          </view>
          <view class="top_left">
            <view class="left_img">
              <image src="/images/serch/fenxiang.png" />
            </view>
            <view class="left_name">分享</view>
          </view>
        </view>
        <view class="buy_bottom">
          <view class="buy_left">
            <view class="heji">合计:¥{{totalPrice}}</view>
          </view>
          <view class="buy_right">
            <!--提交订单-->
            <view class="liji " catchtap="btn_submit_order">立即购买</view>
            <view class="liji two active">预约试衣</view>
          </view>
        </view>
      </view>
    </view>
    <!--购物车没订单-->
    <view wx:else>
      <view class="list_none">购物车是空的哦~</view>
    </view>
    
  • 二、样式代码

  • page {
      background-color: rgba(238, 238, 238, 0.5);
    }
    
    .order {
      height: 238rpx;
      background-color: #fefeff;
      margin: 27rpx;
      border-radius: 4rpx;
      display: flex;
      align-items: center;
    }
    
    .xuanze {
      width: 40rpx;
      height: 40rpx;
      /* background-color: darkgoldenrod; */
      border-radius: 50%;
      margin: 0 11rpx;
    }
    
    .xuanze image {
      width: 100%;
      height: 100%;
      display: block;
      border-radius: 50%;
    }
    
    .order_img {
      width: 180rpx;
      height: 180rpx;
    }
    
    .order_img image {
      width: 100%;
      height: 100%;
      display: block;
    }
    
    .order_text {
      margin-left: 20rpx;
      width: 58%;
      height: 180rpx;
    }
    
    .text_top {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .title {
      width: 70%;
      font-size: 28rpx;
      color: #4b5248;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      overflow: hidden;
    }
    
    .detel {
      width: 30rpx;
      height: 30rpx;
    }
    
    .detel image {
      width: 100%;
      height: 100%;
      display: block;
    }
    
    .size {
      font-size: 24rpx;
      color: #a8ada6;
    }
    
    .text_bottom {
      display: flex;
      margin-top: 50rpx;
      align-items: center;
      justify-content: space-between;
    }
    
    .money {
      font-size: 30rpx;
      color: #a5937f;
    }
    
    .number {
      display: flex;
      justify-content: space-around;
      align-items: center;
      width: 170rpx;
    }
    
    .reduce {
      width: 46rpx;
      height: 46rpx;
    }
    
    .reduce image {
      width: 100%;
      height: 100%;
      display: block;
    }
    
    .numb {
      font-size: 30rpx;
      color: #a5937f;
    }
    
    .add {
      width: 46rpx;
      height: 46rpx;
    }
    
    .add image {
      width: 100%;
      height: 100%;
      display: block;
    }
    
    /*购买按钮*/
    
    .buy {
      height: 180rpx;
      width: 696rpx;
      position: fixed;
      left: 27rpx;
      bottom: 41rpx;
      background-color: #555555f3;
      border-radius: 4rpx;
    }
    
    .buy_top {
      border-bottom: 1px solid rgb(98, 98, 99);
      height: 75rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    
    .top_left {
      display: flex;
      align-items: center;
    }
    
    .left_img {
      width: 37rpx;
      height: 37rpx;
      margin: 11rpx;
    }
    
    .left_img image {
      width: 100%;
      height: 100%;
      display: block;
    }
    
    .left_name {
      font-size: 24rpx;
      color: #fefeff;
      margin-right: 29rpx;
    }
    
    .buy_bottom {
      display: flex;
      height: 104rpx;
      justify-content: space-between;
      align-items: center;
      padding: 0rpx 30rpx 0rpx 12rpx;
    }
    
    .buy_left {
      font-size: 26rpx;
      color: #fff;
    }
    
    .buy_right {
      display: flex;
      align-items: center;
    }
    
    .liji {
      width: 180rpx;
      height: 70rpx;
      border: 2rpx solid rgba(248, 248, 248, 1);
      box-sizing: border-box;
      border-radius: 4rpx;
      line-height: 70rpx;
      text-align: center;
      font-size: 26rpx;
      color: #FEFEFF;
    }
    .two{
      margin-left: 12rpx;
    }
    .active{
      background-color: #A5937F;
      border: none;
    }
    
  • 三、js代码模块

  • Page({
    
      /**
       * 页面的初始数据
       */
      data: {
        hasList: true, //默认展示列表数据
        //商品列表数据
        list: [{
            id: 1,
            title: '园艺大师抗皱精华露',
            image: '/images/serch/2.png',
            pro_name: "30ml",
            num: 1,
            price: 180,
            selected: true
          },
          {
            id: 2,
            title: '伊芙琳玫瑰护手霜',
            image: '/images/serch/1.png',
            pro_name: "25g",
            num: 1,
            price: 62,
            selected: true
          },
          {
            id: 2,
            title: '燕麦山羊乳舒缓护手霜',
            image: '/images/serch/2.png',
            pro_name: "75ml",
            num: 1,
            price: 175,
            selected: true
          }
        ],
        //金额
        totalPrice: 0, //总价,初始为0
        //全选状态
        selectAllStatus: true, // 全选状态,默认全选
      },
    
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function(options) {
    
      },
    
      /**
       * 生命周期函数--监听页面显示
       */
      onShow: function() {
        wx.showToast({
          title: '加载中',
          icon: "loading",
          duration: 1000
        })
        // 价格方法
        this.count_price();
    
      },
    
      /** 当前商品选中事件 */
      selectList(e) {
        var that = this;
        //获取选中的 radio索引
        var index = e.currentTarget.dataset.index;
        //获取到商品列表数据
        var list = that.data.list;
        //默认全选
        that.data.selectAllStatus = true;
        //循环数组数据,判断--选中/未选中[selected]
        list[index].selected = !list[index].selected;
        //如果数组数据全部为selected[true],全选
        for (var i = list.length - 1; i >= 0; i--) {
          if (!list[i].selected) {
            that.data.selectAllStatus = false;
            break;
          }
        }
        // 重新渲染数据
        that.setData({
          list: list,
          selectAllStatus: that.data.selectAllStatus
        })
        // 调用计算金额方法
        that.count_price();
      },
    
      // 删除
      deletes(e) {
        var that = this;
        // 获取索引
        const index = e.currentTarget.dataset.index;
        // 获取商品列表数据
        let list = this.data.list;
        wx.showModal({
          title: '提示',
          content: '确认删除吗',
          success: function(res) {
            if (res.confirm) {
              // 删除索引从1
              list.splice(index, 1);
              // 页面渲染数据
              that.setData({
                list: list
              });
              // 如果数据为空
              if (!list.length) {
                that.setData({
                  hasList: false
                });
              } else {
                // 调用金额渲染数据
                that.count_price();
              }
            } else {
              console.log(res);
            }
          },
          fail: function(res) {
            console.log(res);
          }
        })
      },
    
      /** 购物车全选事件 */
      selectAll(e) {
        // 全选ICON默认选中
        let selectAllStatus = this.data.selectAllStatus;
        // true  -----   false
        selectAllStatus = !selectAllStatus;
        // 获取商品数据
        let list = this.data.list;
        // 循环遍历判断列表中的数据是否选中
        for (let i = 0; i < list.length; i++) {
          list[i].selected = selectAllStatus;
        }
        // 页面重新渲染
        this.setData({
          selectAllStatus: selectAllStatus,
          list: list
        });
        // 计算金额方法
        this.count_price();
      },
    
      /** 绑定加数量事件 */
      btn_add(e) {
        // 获取点击的索引
        const index = e.currentTarget.dataset.index;
        // 获取商品数据
        let list = this.data.list;
        // 获取商品数量
        let num = list[index].num;
        // 点击递增
        num = num + 1;
        list[index].num = num;
        // 重新渲染 ---显示新的数量
        this.setData({
          list: list
        });
        // 计算金额方法
        this.count_price();
      },
    
      /**
       * 绑定减数量事件
       */
      btn_minus(e) {
        //   // 获取点击的索引
        const index = e.currentTarget.dataset.index;
        // const obj = e.currentTarget.dataset.obj;
        // console.log(obj);
        // 获取商品数据
        let list = this.data.list;
        // 获取商品数量
        let num = list[index].num;
        // 判断num小于等于1  return; 点击无效
        if (num <= 1) {
          return false;
        }
        // else  num大于1  点击减按钮  数量--
        num = num - 1;
        list[index].num = num;
        // 渲染页面
        this.setData({
          list: list
        });
        // 调用计算金额方法
        this.count_price();
      },
    
      // 提交订单
      btn_submit_order() {
        var that = this;
        console.log(that.data.totalPrice);
    
        // 调起支付
        // wx.requestPayment(
        //   {
        //     'timeStamp': '',
        //     'nonceStr': '',
        //     'package': '',
        //     'signType': 'MD5',
        //     'paySign': '',
        //     'success': function (res) { },
        //     'fail': function (res) { },
        //     'complete': function (res) { }
        //   })
        wx.showModal({
          title: '提示',
          content: '合计金额-' + that.data.totalPrice + "暂未开发",
        })
      },
    
      /**
       * 计算总价
       */
      count_price() {
        // 获取商品列表数据
        let list = this.data.list;
        // 声明一个变量接收数组列表price
        let total = 0;
        // 循环列表得到每个数据
        for (let i = 0; i < list.length; i++) {
          // 判断选中计算价格
          if (list[i].selected) {
            // 所有价格加起来 count_money
            total += list[i].num * list[i].price;
          }
        }
        // 最后赋值到data中渲染到页面
        this.setData({
          list: list,
          totalPrice: total.toFixed(2)
        });
      },
    
    })
    
  • 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。

    您可能感兴趣