小程序购物学习案例

最新推荐文章于 2024-08-11 14:14:22 发布

itxiaolong3

最新推荐文章于 2024-08-11 14:14:22 发布

阅读量755

点赞数

分类专栏：小程序

小程序专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文章属于转载内容。原博客：https://blog.csdn.net/qq_35695041/article/details/81130933，用于学习笔记。

wxml:

<!-- 最外层视图pages -->
<view class="pages">
 
  <view wx:if="{{hasList}}">
  <!-- 编辑 -->
  <view class='edit'>
  <label class='edit_btn' bindtap='btn_edit'>{{edit_name}}</label>
  </view>
      <!-- 列表 -->
      <view class="list" wx:for="{{list}}" wx:key="{{index}}">
        <!-- radio选择IOCN -->
        <!-- <icon wx:if="{{item.selected}}"   type="success" color="#405A8F;" data-index="{{index}}" class="radio_chek" bindtap="selectList" /> -->
        <image class='dele_edit' bindtap='deletes' data-index='{{index}}' style='display:{{edit_show}}' src='../image/del.png'></image>
        <image  wx:if="{{item.selected}}"  data-index="{{index}}" class="radio_chek" bindtap="selectList" src='../image/check.png'></image>
        <!-- <icon wx:else type="circle" class="radio_chek" data-index="{{index}}" bindtap="selectList" /> -->
<!-- else -->
                <image wx:else src='../image/nocheck.png'  class="radio_chek" data-index="{{index}}" bindtap="selectList"></image>
        <!-- 列表标题 -->
        <text class="list_name">{{item.title}}</text>
        <!-- 列表商品图片 -->
        <image class="list_img" src="{{item.image}}"></image>
        <!-- 规格 -->
        <text class="cart_g_name">规格 : {{item.pro_name}}</text>
        <!-- 收藏 -->
        <label class='collert' bindtap='btn_collert'>
          <image class='collert_img'src='../image/love.png'></image> 收藏</label>
        <!-- 价格 -->
        <text class="list_price">￥{{item.price}}</text>
        <!-- 商品数量加减  style='display:{{show_edit}}'-->
        <view style='display:{{show_edit}}'>
        <view class="carts-num">
          <!--减按钮  -->
          <lable class="minus" bindtap="btn_minus" data-obj="{{obj}}" data-index="{{index}}">-</lable>
          <!-- 文本框值 -->
          <!-- <input class="view_text_center" disabled='disabled' value="{{item.num}}" bindinput='input_num' data-index="{{index}}"></input> -->
          <label class="view_text_center"  bindinput='input_num' data-index="{{index}}">{{item.num}}</label>
          <!-- <text class="cart-count-num">{{item.num}}</text> -->
          <!-- 加按钮-->
          <lable class="plus" bindtap="btn_add" data-index="{{index}}">+</lable>
        </view></view>
        <!-- 删除 -->
        <!-- <text class="list_del" bindtap="deleteList" data-index="{{index}}">×</text> -->
    </view>
<!-- 固定底部 -->
    <view class="cont_bot">
    <!-- 全选ICON -->
    <image wx:if="{{selectAllStatus}}"  class="total-select" bindtap="selectAll" src='../image/check.png'></image>
 
      <!-- <icon wx:if="{{selectAllStatus}}" type="success_circle" color="#999" class="total-select" bindtap="selectAll" /> -->
      <!-- else -->
          <image  wx:else  class="total-select" bindtap="selectAll"src='../image/nocheck.png'></image>
      <!-- <icon wx:else type="circle" color="#999" class="total-select" bindtap="selectAll" /> -->
         <!-- 全选标题 -->
      <text class='sel_count_name'>全选</text>
      <!-- 合计金额 -->
      <lable class="count_price">合计：<text>￥{{totalPrice}}</text></lable>
      <!-- 提交订单 -->
      <label class='submit' bindtap='btn_submit_order'>提交订单</label>
      </view>
     
  </view>
  <view wx:else>
    <view class="list_none">购物车是空的哦~</view>
  </view>
 
</view>

wxss:

 
/* 列表 */
.list{
    position: relative;
   width: 100%;
    height: 185rpx;
    /* background-color: red; */
    border-bottom: 1rpx solid #e9e9e9;
}
/* 编辑 */
.edit{
  position: relative;
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  background-color: #f6f6f6;
}
/* 删除 */
.dele_edit{
  position: absolute;
  width: 40rpx;
  height: 40rpx;
  right: 30rpx;
  bottom: 25rpx;
}
/* 编辑标题 */
.edit_btn{
  position: absolute;
  font-size: 26rpx;
  color: #888;
  right: 30rpx;
}
/* 单选状态 */
.radio_chek{
    position: absolute;
    left: 30rpx;
    top: 70rpx;
    width: 40rpx;
    height: 40rpx;
}
/* 列表商品图片 */
.list_img{
    position: absolute;
    top: 20rpx;
    left: 100rpx;
    width: 144rpx;
    height: 144rpx;
}
/* 列表规格 */
.cart_g_name{
  position: absolute;
  left: 280rpx;
  font-size: 26rpx;
  color: #aaa;
  top: 75rpx;
}
/* 收藏 */
.collert{
  position: absolute;
  font-size: 28rpx;
  right: 40rpx;
 top: 30rpx;
}
/* 收藏图标 */
.collert_img{
  position: relative;
  top: 2rpx;
width: 28rpx;
height: 28rpx;
}
/* 列表商品名称 */
.list_name{
  position: absolute;
  left: 280rpx;
  top: 30rpx;
  width: 300rpx;
  /* background-color: red; */
    font-size: 30rpx;
    overflow: hidden;    
text-overflow:ellipsis;    
white-space: nowrap;
}
/* 列表商品价格 */
 .list_price{
position: absolute;
font-size: 32rpx;
color:  #D66058;
left: 280rpx;
bottom: 20rpx;
}
 
/* 列表商品删除 */
.list_del{
    position: absolute;
    right: 220rpx;
    bottom: 20rpx;
    width: 40rpx;
    height: 40rpx;
    line-height: 40rpx;
    text-align: center;
    font-size: 44rpx;
}
/* 固定底部 */
.cont_bot{
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 104rpx;
    line-height:104rpx;
    background: #fff;
    border-top: 2rpx solid #ebebeb;
}
/* 全选ICON */
.total-select{
    position: absolute;
    left: 30rpx;
    top: 34rpx;
    width: 40rpx;
    height: 40rpx;
}
/* 全选标题 */
.sel_count_name{
  position: absolute;
  left: 90rpx;
  top: 6rpx;
  font-size: 30rpx;
  color: #333;
}
 
/* 合计金额 */
.count_price{
 position: absolute;
 font-size:28rpx;
 left: 200rpx;
 color: #aaa;
}
.count_price text{
  font-size: 34rpx;
  color: #D66058;
}
/* 购物车为空 */
.list_none{
    padding:40rpx 0;
    color: #999;
    text-align: center;
}
/* 提交 */
.submit{
position: absolute;
width: 232rpx;
height: 104rpx;
line-height: 104rpx;
right: 0rpx;
font-size: 30rpx;
text-align: center;
color:#fff;
background-color:#495A8F;
}
.navigator-hover{
    background: none;
}
 
 
 
 
/*数量加减*/
.carts-num{
  position: absolute;
  right: 30rpx;
  bottom: 23rpx;
  /* background-color: red; */
  display: flex; align-items: center; text-align: center; height: 50rpx;}
.view_text_center{border: 1rpx solid #ebebeb;font-size: 30rpx;  
display: inline-block;color: #333;height: 50rpx;line-height: 50rpx; width: 76rpx;}
.carts-num .minus, .carts-num .plus{margin: 10rpx; border: 1rpx solid #ebebeb;color: #000; text-align: center;height: 50rpx;  line-height: 50rpx; width: 40rpx;}
.carts-num .minus{font-size: 34rpx;}
/* .carts-num .minus.disabled{color: red;} */
.carts-num .plus{font-size: 34rpx;}

// page/component/new-pages/cart/cart.js
// 默认请求第一页
var numbers = 1;
var bool = true;
Page({
  data: {
    show_edit: "block",
    edit_name: "编辑",
    edit_show: "none",
    // list: [],               // 购物车列表
    // hasList: false,          // 列表是否有数据
    // 默认展示数据
    hasList: true,
    // 商品列表数据
    list: [{
      id: 1,
      title: '园艺大师抗皱精华露',
      image: 'https://xiguoxiansheng.com/addons/zjhj_mall/core/web/uploads/image/store_1/e626f338f022cadb5a0a9e26f6cdb4225d5ea31b.jpg',
      pro_name: "30ml",
      num: 1,
      price: 180,
      selected: true
    },
    {
      id: 2,
      title: '伊芙琳玫瑰护手霜',
      image: 'https://xiguoxiansheng.com/addons/zjhj_mall/core/web/uploads/image/store_1/718eccfa3dabfc1eede18948e59eb53d641e6c91.jpg',
      pro_name: "25g",
      num: 1,
      price: 62,
      selected: true
    },
    {
      id: 2,
      title: '燕麦山羊乳舒缓护手霜',
      image: 'https://xiguoxiansheng.com/addons/zjhj_mall/core/web/uploads/image/store_1/c6e9f3ecb5d85abc905f8ee3671909105dde037a.jpg',
      pro_name: "75ml",
      num: 1,
      price: 175,
      selected: true
    }
    ],
    // 金额
    totalPrice: 0, // 总价，初始为0
    // 全选状态
    selectAllStatus: true, // 全选状态，默认全选
  },

  onShow() {
    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();
  },
  // 编辑
  btn_edit: function () {
    var that = this;
    if (bool) {
      that.setData({
        edit_show: "block",
        edit_name: "取消",
        show_edit: "none"
      })
      bool = false;
    } else {
      that.setData({
        edit_show: "none",
        edit_name: "编辑",
        show_edit: "block"
      })
      bool = true;
    }

  },
  // 删除
  deletes: function (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();
  },
  canvas: function (object) {
    let _this = this;
    let realWidth, realHeight;
    //创建节点选择器
    var query = wx.createSelectorQuery();
    //选择id
    query.select('#mycanvas').boundingClientRect()
    query.exec(function (res) {
      //res就是 该元素的信息 数组
      realWidth = res[0].width;
      realHeight = res[0].height;
      console.log('realHeight', realHeight);
      console.log('realWidth', realWidth);
      const ctx = wx.createCanvasContext('mycanvas');
      ctx.drawImage("../../images/ctx-bg.jpg", 0, 0, realWidth, realHeight);
      ctx.drawImage(_this.data.canvasUserPic, (realWidth * 0.099), (realHeight * 0.052), (realWidth * 0.091), (realWidth * 0.091));
      ctx.setFontSize(12);
      ctx.setFillStyle("#a38874");
      ctx.fillText(object.date, (realWidth * 0.201), (realHeight * 0.076));
      ctx.setFontSize(14);
      ctx.setFillStyle("#a38874");
      ctx.fillText("农历" + object.lunar, (realWidth * 0.201), (realHeight * 0.099));
      ctx.drawImage("../../images/swiper-bg.png", (realWidth * 0.099), (realHeight * 0.112), (realWidth * 0.8), (realHeight * 0.60));
      ctx.drawImage(_this.data.canvasShowImg, (realWidth * 0.099), (realHeight * 0.112), (realWidth * 0.8), (realHeight * 0.30));
      ctx.drawImage("../../images/swiper-detail.png", (realWidth * 0.099), (realHeight * 0.395), (realWidth * 0.8), (realHeight * 0.03));
      ctx.setFontSize(16);
      ctx.setFillStyle("#8d7665");

      ctx.setTextAlign('center')
      ctx.fillText(object.title1, realWidth / 2, _this.calculateWH(2, 620, realWidth, realHeight));
      ctx.fillText(object.title2, realWidth / 2, _this.calculateWH(2, 666, realWidth, realHeight));

      ctx.drawImage("../../images/swiper-line.png", (realWidth - realWidth * 0.71) / 2, (realHeight * 0.528), (realWidth * 0.71), (realHeight * 0.0195));
      ctx.drawImage("../../images/luckpic.png", _this.calculateWH(1, 267, realWidth, realHeight), _this.calculateWH(2, 763, realWidth, realHeight), _this.calculateWH(1, 204, realWidth, realHeight), _this.calculateWH(2, 60, realWidth, realHeight));
      ctx.setFontSize(12);
      ctx.fillText(object.luck_title, realWidth / 2, _this.calculateWH(2, 880, realWidth, realHeight));
      ctx.drawImage("../../images/code.jpg", _this.calculateWH(1, 229, realWidth, realHeight), _this.calculateWH(2, 989, realWidth, realHeight), _this.calculateWH(1, 292, realWidth, realHeight), _this.calculateWH(1, 292, realWidth, realHeight))
      ctx.draw();

      setTimeout(function () {
        wx.canvasToTempFilePath({
          canvasId: 'mycanvas',
          success: function (res) {
            var tempFilePath = res.tempFilePath;
            _this.setData({
              canvasUrl: tempFilePath
            })
            if (tempFilePath !== '') {
              _this.setData({
                isShowCav: false
              });
              wx.hideLoading();
              wx.previewImage({
                current: _this.data.canvasUrl, // 当前显示图片的http链接  
                urls: [_this.data.canvasUrl], // 需要预览的图片http链接列表  
              })
            }
          },
          fail: function (res) {
            console.log(res);
          }
        });
      }, 500);
    })
  },//下载图片
  onShow1: function (object) {
    let _this = this;
    _this.setData({
      isShowCav: true
    })
    wx.downloadFile({
      url: object.avatarurl,
      success: function (sres) {
        _this.setData({
          canvasUserPic: sres.tempFilePath
        });
        wx.downloadFile({
          url: object.show_img,
          success: function (sres1) {
            _this.setData({
              canvasShowImg: sres1.tempFilePath
            });
            _this.canvas(object);
          }
        })
      }
    })
  },
  /**
   * 绑定减数量事件
   */
  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: function () {
    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 + "暂未开发",
    })
  },
  // 收藏
  btn_collert: function () {
    wx.showToast({
      title: '收藏暂未开发',
      duration: 2000
    })
  },
  /**
   * 计算总价
   */
  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)
    });
  },
  // 下拉刷新
  // onPullDownRefresh: function () {
  //   // 显示顶部刷新图标  
  //   wx.showNavigationBarLoading();
  //   var that = this;

  //   console.log(that.data.types_id);
  //   console.log(that.data.sel_name);
  //   wx.request({
  //     url: host + '请求后台数据地址',
  //     method: "post",
  //     data: {
  //       // 刷新显示最新数据
  //       page: 1,
  //     },
  //     success: function (res) {

  //       // console.log(res.data.data.datas);
  //       that.setData({
  //         list: res.data.data.datas
  //       })
  //     }
  //   })

  //   // 隐藏导航栏加载框  
  //   wx.hideNavigationBarLoading();
  //   // 停止下拉动作  
  //   wx.stopPullDownRefresh();

  // },

  // 加载更多
  // onReachBottom: function () {
  //   var that = this;
  //   // 显示加载图标  
  //   wx.showLoading({
  //     title: '正在加载中...',
  //   })
  //   numbers++;

  //   // 页数+1  
  //   wx.request({
  //     url: host + '后台数据地址',
  //     method: "post",
  //     data: {
  //     // 分页
  //       page: numbers,
  //     },
  //     // 请求头部  
  //     header: {
  //       'content-type': 'application/json'
  //     },
  //     success: function (res) {
  //       // 回调函数 

  //       var num = res.data.data.datas.length;
  //       // console.log(num);
  //       // 判断数据长度如果不等于0，前台展示数据，false显示暂无订单提示信息
  //       if (res.data.data.status == 0) {

  //         for (var i = 0; i < res.data.data.datas.length; i++) {
  //           that.data.list.push(res.data.data.datas[i]);
  //         }
  //         // 设置数据  
  //         that.setData({
  //           list: that.data.list
  //         })

  //       } else {
  //         wx.showToast({ title: '没有更多了', icon: 'loading', duration: 2000 })
  //       }


  //       // 隐藏加载框  
  //       wx.hideLoading();
  //     }
  //   })

  // },

})

json

{
  "navigationBarTitleText": "购物车",
  "usingComponents": {}
}

效果：

源码打包下载：下载源码

itxiaolong3

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录