首页 > 小程序教程 > 微信小程序红色图标空购物车提示页面样式设计制作开发教程

微信小程序红色图标空购物车提示页面样式设计制作开发教程

上一篇 下一篇
本文给大家带来的是微信小程序红色图标空购物车提示页面样式设计制作开发教程,制作好以后效果图如下:
一、wxml页面代码如下:
<!--index.wxml-->
<import src="../template-cart/template-cart.wxml"/>

<view class="container">
     <template is="{{goodsList.list.length > 0 ? 'cart-goods-list' : 'no-goods'}}" data="{{...goodsList}}"></template>
</view>
 
二、wxss样式文件代码如下:
/**index.wxss**/
@import "../template-cart/template-cart.wxss";
page{
  min-height: 100%;
  background-color: #F2f2f2;
}
.container {
  background-color: #F2f2f2;
  min-height: 100%;
}
.pos-fiexd{
  position: fixed;
  bottom: 0;
  left: 0;
}
三、js页面代码如下:
//index.js
var app = getApp()
Page({
  data: {
    goodsList:{
      saveHidden:true,
      totalPrice:0,
      allSelect:true,
      noSelect:false,
      list:[]
    },
    delBtnWidth:120,    //删除按钮宽度单位(rpx)
  },
 
 //获取元素自适应后的实际宽度
  getEleWidth:function(w){
    var real = 0;
    try {
      var res = wx.getSystemInfoSync().windowWidth;
      var scale = (750/2)/(w/2);  //以宽度750px设计稿做宽度的自适应
      // console.log(scale);
      real = Math.floor(res/scale);
      return real;
    } catch (e) {
      return false;
     // Do something when catch error
    }
  },
  initEleWidth:function(){
    var delBtnWidth = this.getEleWidth(this.data.delBtnWidth);
    this.setData({
      delBtnWidth:delBtnWidth
    });
  },
  onLoad: function () {
      this.initEleWidth();
      this.onShow();
  },
  onShow: function(){
      var shopList = [];
      // 获取购物车数据
      var shopCarInfoMem = wx.getStorageSync('shopCarInfo');
      if (shopCarInfoMem && shopCarInfoMem.shopList) {
        shopList = shopCarInfoMem.shopList
      }
      this.data.goodsList.list = shopList;
      this.setGoodsList(this.getSaveHide(),this.totalPrice(),this.allSelect(),this.noSelect(),shopList);
  },
  toIndexPage:function(){
      wx.switchTab({
            url: "/pages/index/index"
      });
  },

  touchS:function(e){
    if(e.touches.length==1){
      this.setData({
        startX:e.touches[0].clientX
      });
    }
  },
  touchM:function(e){
  var index = e.currentTarget.dataset.index;

    if(e.touches.length==1){
      var moveX = e.touches[0].clientX;
      var disX = this.data.startX - moveX;
      var delBtnWidth = this.data.delBtnWidth;
      var left = "";
      if(disX == 0 || disX < 0){//如果移动距离小于等于0,container位置不变
        left = "margin-left:0px";
      }else if(disX > 0 ){//移动距离大于0,container left值等于手指移动距离
        left = "margin-left:-"+disX+"px";
        if(disX>=delBtnWidth){
          left = "left:-"+delBtnWidth+"px";
        }
      }
      var list = this.data.goodsList.list;
      if(index!="" && index !=null){
        list[parseInt(index)].left = left; 
        this.setGoodsList(this.getSaveHide(),this.totalPrice(),this.allSelect(),this.noSelect(),list);
      }
    }
  },

  touchE:function(e){
    var index = e.currentTarget.dataset.index;    
    if(e.changedTouches.length==1){
      var endX = e.changedTouches[0].clientX;
      var disX = this.data.startX - endX;
      var delBtnWidth = this.data.delBtnWidth;
      //如果距离小于删除按钮的1/2,不显示删除按钮
      var left = disX > delBtnWidth/2 ? "margin-left:-"+delBtnWidth+"px":"margin-left:0px";
      var list = this.data.goodsList.list;
     if(index!=="" && index != null){
        list[parseInt(index)].left = left; 
        this.setGoodsList(this.getSaveHide(),this.totalPrice(),this.allSelect(),this.noSelect(),list);

      }
    }
  },
  delItem:function(e){
    var index = e.currentTarget.dataset.index;
    var list = this.data.goodsList.list;
    list.splice(index,1);
    this.setGoodsList(this.getSaveHide(),this.totalPrice(),this.allSelect(),this.noSelect(),list);
  },
  selectTap:function(e){
    var index = e.currentTarget.dataset.index;
    var list = this.data.goodsList.list;
    if(index!=="" && index != null){
        list[parseInt(index)].active = !list[parseInt(index)].active ; 
        this.setGoodsList(this.getSaveHide(),this.totalPrice(),this.allSelect(),this.noSelect(),list);
      }
   },
   totalPrice:function(){
      var list = this.data.goodsList.list;
      var total = 0;
      for(var i = 0 ; i < list.length ; i++){
          var curItem = list[i];
          if(curItem.active){
            total+= parseFloat(curItem.price)*curItem.number;
          }
      }
      total = parseFloat(total.toFixed(2));//js浮点计算bug,取两位小数精度
      return total;
   },
   allSelect:function(){
      var list = this.data.goodsList.list;
      var allSelect = false;
      for(var i = 0 ; i < list.length ; i++){
          var curItem = list[i];
          if(curItem.active){
            allSelect = true;
          }else{
             allSelect = false;
             break;
          }
      }
      return allSelect;
   },
   noSelect:function(){
      var list = this.data.goodsList.list;
      var noSelect = 0;
      for(var i = 0 ; i < list.length ; i++){
          var curItem = list[i];
          if(!curItem.active){
            noSelect++;
          }
      }
      if(noSelect == list.length){
         return true;
      }else{
        return false;
      }
   },
   setGoodsList:function(saveHidden,total,allSelect,noSelect,list){
      this.setData({
        goodsList:{
          saveHidden:saveHidden,
          totalPrice:total,
          allSelect:allSelect,
          noSelect:noSelect,
          list:list
        }
      });
      var shopCarInfo = {};
      var tempNumber = 0;
      shopCarInfo.shopList = list;
      for(var i = 0;i<list.length;i++){
        tempNumber = tempNumber + list[i].number
      }
      shopCarInfo.shopNum = tempNumber;
      wx.setStorage({
        key:"shopCarInfo",
        data:shopCarInfo
      })
   },
   bindAllSelect:function(){
      var currentAllSelect = this.data.goodsList.allSelect;
      var list = this.data.goodsList.list;
      if(currentAllSelect){
        for(var i = 0 ; i < list.length ; i++){
            var curItem = list[i];
            curItem.active = false;
        }
      }else{
        for(var i = 0 ; i < list.length ; i++){
            var curItem = list[i];
            curItem.active = true;
        }
      }
     
      this.setGoodsList(this.getSaveHide(),this.totalPrice(),!currentAllSelect,this.noSelect(),list);
   },
   jiaBtnTap:function(e){
    var index = e.currentTarget.dataset.index;
    var list = this.data.goodsList.list;
    if(index!=="" && index != null){
      if(list[parseInt(index)].number<10){
        list[parseInt(index)].number++; 
        this.setGoodsList(this.getSaveHide(),this.totalPrice(),this.allSelect(),this.noSelect(),list);
      }
    }
   },
   jianBtnTap:function(e){
    var index = e.currentTarget.dataset.index;
    var list = this.data.goodsList.list;
    if(index!=="" && index != null){
      if(list[parseInt(index)].number>1){
        list[parseInt(index)].number-- ;
        this.setGoodsList(this.getSaveHide(),this.totalPrice(),this.allSelect(),this.noSelect(),list);
      }
    }
   },
   editTap:function(){
     var list = this.data.goodsList.list;
     for(var i = 0 ; i < list.length ; i++){
            var curItem = list[i];
            curItem.active = false;
     }
     this.setGoodsList(!this.getSaveHide(),this.totalPrice(),this.allSelect(),this.noSelect(),list);
   },
   saveTap:function(){
     var list = this.data.goodsList.list;
     for(var i = 0 ; i < list.length ; i++){
            var curItem = list[i];
            curItem.active = true;
     }
     this.setGoodsList(!this.getSaveHide(),this.totalPrice(),this.allSelect(),this.noSelect(),list);
   },
   getSaveHide:function(){
     var saveHidden = this.data.goodsList.saveHidden;
     return saveHidden;
   },
   deleteSelected:function(){
      var list = this.data.goodsList.list;
     /*
      for(let i = 0 ; i < list.length ; i++){
            let curItem = list[i];
            if(curItem.active){
              list.splice(i,1);
            }
      }
      */
     // above codes that remove elements in a for statement may change the length of list dynamically
     list = list.filter(function(curGoods) {
        return !curGoods.active;
     });
     this.setGoodsList(this.getSaveHide(),this.totalPrice(),this.allSelect(),this.noSelect(),list);
    },
    toPayOrder:function(){
      wx.showLoading();
      var that = this;
      if (this.data.goodsList.noSelect) {
        wx.hideLoading();
        return;
      }
      // 重新计算价格,判断库存
      var shopList = [];
      var shopCarInfoMem = wx.getStorageSync('shopCarInfo');
      if (shopCarInfoMem && shopCarInfoMem.shopList) {
        // shopList = shopCarInfoMem.shopList
        shopList = shopCarInfoMem.shopList.filter(entity => {
          return entity.active;
        });
      }
      if (shopList.length == 0) {
        wx.hideLoading();
        return;
      }
      var isFail = false;
      var doneNumber = 0;
      var needDoneNUmber = shopList.length;
      for (let i =0; i < shopList.length; i++) {
        if (isFail) {
          wx.hideLoading();
          return;
        }
        let carShopBean = shopList[i];
        // 获取价格和库存
        if (!carShopBean.propertyChildIds || carShopBean.propertyChildIds == "") {
          wx.request({
            url: 'https://api.it120.cc/'+ app.globalData.subDomain +'/shop/goods/detail',
            data: {
              id: carShopBean.goodsId
            },
            success: function(res) {
              doneNumber++;
              if (res.data.data.properties) {
                wx.showModal({
                  title: '提示',
                  content: res.data.data.basicInfo.name + ' 商品已失效,请重新购买',
                  showCancel:false
                })
                isFail = true;
                wx.hideLoading();
                return;
              }
              if (res.data.data.basicInfo.stores < carShopBean.number) {
                wx.showModal({
                  title: '提示',
                  content: res.data.data.basicInfo.name + ' 库存不足,请重新购买',
                  showCancel:false
                })
                isFail = true;
                wx.hideLoading();
                return;
              }
              if (res.data.data.basicInfo.minPrice != carShopBean.price) {
                wx.showModal({
                  title: '提示',
                  content: res.data.data.basicInfo.name + ' 价格有调整,请重新购买',
                  showCancel:false
                })
                isFail = true;
                wx.hideLoading();
                return;
              }
              if (needDoneNUmber == doneNumber) {
                that.navigateToPayOrder();
              }
            }
          })
        } else {
          wx.request({
            url: 'https://api.it120.cc/'+ app.globalData.subDomain +'/shop/goods/price',
            data: {
              goodsId: carShopBean.goodsId,
              propertyChildIds:carShopBean.propertyChildIds
            },
            success: function(res) {
              doneNumber++;
              if (res.data.data.stores < carShopBean.number) {
                wx.showModal({
                  title: '提示',
                  content: carShopBean.name + ' 库存不足,请重新购买',
                  showCancel:false
                })
                isFail = true;
                wx.hideLoading();
                return;
              }
              if (res.data.data.price != carShopBean.price) {
                wx.showModal({
                  title: '提示',
                  content: carShopBean.name + ' 价格有调整,请重新购买',
                  showCancel:false
                })
                isFail = true;
                wx.hideLoading();
                return;
              }
              if (needDoneNUmber == doneNumber) {
                that.navigateToPayOrder();
              }
            }
          })
        }
        
      }
    },
    navigateToPayOrder:function () {
      wx.hideLoading();
      wx.navigateTo({
        url:"/pages/to-pay-order/index"
      })
    }



})

模板简介:该模板名称为【微信小程序红色图标空购物车提示页面样式设计制作开发教程】,大小是,文档格式为.,推荐使用打开,作品中的图片,文字等数据均可修改,图片请在作品中选中图片替换即可,文字修改直接点击文字修改即可,您也可以新增或修改作品中的内容,该模板来自用户分享,如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。

相关搜索
  • 下载密码 lanrenmb
  • 下载次数 22,877次
  • 使用软件
  • 文件格式
  • 文件大小
  • 上传时间 07-05
  • 作者 网友投稿
  • 肖像权 人物画像及字体仅供参考
栏目分类 更多 >
热门推荐 更多 >
企业网站 单页式简历模板 微信文章 响应式 微信素材 自适应 微信模板 微信图片 微信公众平台 html5
您可能会喜欢的其他模板