记录代码（购物车相关）小程序 vantweapp

最新推荐文章于 2022-11-07 11:00:57 发布
最新推荐文章于 2022-11-07 11:00:57 发布
阅读量547 收藏
点赞数 1
分类专栏： 微信小程序 文章标签： 记录代码
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhoulib__/article/details/107414847
版权 
import { request } from "../../../request/index";
import Dialog from '../../../miniprogram_npm/@vant/weapp/dialog/dialog';
// pages/my/ShoppingCart/ShoppingCart.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    disabled:false,
    result: [],
    checked:false,
    valid_goods_list:[],
    invalid_goods_list:[],
    num:0,
    tag:0,
    total_price:0,
    dataList:[],
    deldataList:[]
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onChange2(event) {
    this.setData({
      checked: event.detail,
    });
    if(event.detail){
      this.setData({
        result:this.data.dataList,
        tag:1
      })
    }else{
      this.setData({
        result:[],
        tag:0
      })
    }
    this.selectCart();
    this.getPrice()
  },
  getPrice(){
    console.log(123)
    let that = this;
    let totalPrice = 0;
    let num = 0;
    function checkAdult(e) {
      // console.log(e.cart_id,that.data.result.includes(String(e.cart_id)))
      return that.data.result.includes(String(e.cart_id))
    }
    // console.log(this.data.valid_goods_list.filter(checkAdult))
    this.data.valid_goods_list.filter(checkAdult).forEach((e) => {
      // console.log(e)
      num += e.goods_num;
      totalPrice += (e.goods_num * e.market_price)
    })
    this.setData({
      total_price:parseFloat(totalPrice).toFixed(2),
      num
    })
  },
  onStepper(e){
    console.log(e)
    // addToCart
    // minusToCart
    // wx.showLoading({
    //   title: '加载中...',
    //   mask:true
    // })
    this.setData({
      disabled:true
    });
    
    let index = e.currentTarget.dataset.index;
    console.log(this.data.valid_goods_list[index].goods_num,e.detail)
    if(this.data.valid_goods_list[index].goods_num > e.detail){
      this.minusToCart(e.currentTarget.dataset.cart_id).then((res) => {
        // this.cedshi(e)
        this.data.valid_goods_list[index].goods_num = e.detail;
        this.setData({
          valid_goods_list:this.data.valid_goods_list
        })
        this.setData({
          disabled:false
        })
        this.getPrice()
        // wx.hideLoading({
        //   complete: (res) => {},
        // })
      }).catch(()=>{
        this.setData({
          disabled:false
        })
      })
    }else{
      this.addToCart(e.currentTarget.dataset.cart_id).then((res) => {
        this.data.valid_goods_list[index].goods_num = e.detail;
        this.setData({
          valid_goods_list:this.data.valid_goods_list
        })
        this.setData({
          disabled:false
        })
        this.getPrice()
        // wx.hideLoading({
        //   complete: (res) => {},
        // })
      }).catch(()=>{
        this.setData({
          disabled:false
        })
      })
    }
   
  },
  onChange1(event) {
    this.setData({
      result: event.detail,
    });
    console.log(event)
    if(event.detail.length == this.data.dataList.length){
      this.setData({
        checked:true,
        tag:1
      })
      // this.selectCart()
    }else{
      this.setData({
        checked:false,
        tag:0
      })
    }
    this.getPrice()
    // this.selectCart()
  },
  onChange(event) {
    let cart_id = event.currentTarget.dataset.cart_id;
    let is_select = (this.data.result.includes(String(cart_id)) ? 1 : 0)
    // console.log(this.data.result.includes(String(cart_id)))
    this.checkOneCart(cart_id,is_select)
  },
  onLoad: function (options) {
  },
  checkOneCart(cart_id,is_select){
    request({
      url: 'cart/checkOneCart',
      data: {
        token:wx.getStorageSync('token'),
        cart_id,
        is_select
      }
    }).then(res => {
      if (res.data.status == 1) {
        
      } else {
        wx.showToast({
          title: res.data.msg,
          icon: 'none',
          duration: 1500
        })
      }
    })
  },
  selectCart(){
    wx.showLoading({
      title: '加载中...',
    })
    request({
      url: 'cart/selectCart',
      data: {
        token:wx.getStorageSync('token'),
        areaId:wx.getStorageSync('areaId'),
        tag:this.data.tag
      }
    }).then(res => {
      if (res.data.status == 1) {
        
         wx.hideLoading({
           complete: (res) => {},
         })
      } else {
        wx.showToast({
          title: res.data.msg,
          icon: 'none',
          duration: 1500
        })
      }
    })
  },
  onClose(event) {
    const { position, instance } = event.detail;
    console.log(event)
    switch (position) {
      case 'left':
      case 'cell':
        instance.close();
        break;
      case 'right':
        Dialog.confirm({
          message: '确定删除吗？',
        }).then(() => {
          instance.close();
        });
        break;
    }
  },
  sc(e){
    console.log(e);
    Dialog.confirm({
      message: '确定移入收藏夹吗？',
    }).then(() => {
      request({
        url: 'index/collect',
        data: {
          type:4,
          token:wx.getStorageSync('token'),
          id:e.currentTarget.dataset.id
        }
      }).then(res => {
        if (res.data.status == 1) {
          //  this.cartList()
          wx.showToast({
            title: res.data.msg,
            duration: 1500
          })
        } else {
          
          wx.showToast({
            title: res.data.msg,
            icon: 'none',
            duration: 1500
          })
        }
      })
    }).catch(() => {
      // on cancel
      // console.log(22)

      wx.showToast({
        title: '取消收藏',
        icon:"none"
      })
    });
  },
  del(e){
    console.log(e);
    Dialog.confirm({
      message: '确定删除吗？',
    }).then(() => {
      // console.log(11)
      request({
        url: 'cart/cartDelete',
        data: {
          token:wx.getStorageSync('token'),
          cart_id:e.currentTarget.dataset.cart_id
        }
      }).then(res => {
        if (res.data.status == 1) {
           this.cartList()
        } else {
          
          wx.showToast({
            title: res.data.msg,
            icon: 'none',
            duration: 1500
          })
        }
      })
    }).catch(() => {
      // on cancel
      // console.log(22)

      wx.showToast({
        title: '取消删除',
        icon:"none"
      })
    });
  },
  cartList(){
    wx.showLoading({
      title: '加载中...',
    })
    request({
      url: 'cart/cartList',
      data: {
        token:wx.getStorageSync('token'),
        areaId:wx.getStorageSync('areaId')
      }
    }).then(res => {
      if (res.data.status == 1) {
        this.data.dataList = [];
        this.data.deldataList = [];
        res.data.data.valid_goods_list.forEach(element => {
          this.data.dataList.push(String(element.cart_id))
        })
        res.data.data.invalid_goods_list.forEach(element => {
          this.data.deldataList.push(String(element.cart_id))
        })
        
         this.setData({
          dataList:this.data.dataList,
          deldataList:this.data.deldataList,
          valid_goods_list:res.data.data.valid_goods_list,
          invalid_goods_list:res.data.data.invalid_goods_list,
          num:res.data.data.num,
          tag:res.data.data.tag,
          total_price:res.data.data.total_price,
         })
         if(res.data.data.tag == 1){
            this.setData({
              checked:true,
              result:this.data.dataList
           })
         }else{
          res.data.data.valid_goods_list.forEach(element => {
            if(element.is_select){
              this.data.result.push(String(element.cart_id))
            }
          })
          this.setData({
            result:this.data.result
          })
         }
        //  this.selectCart()
         wx.hideLoading({
           complete: (res) => {},
         })
         wx.stopPullDownRefresh({
           complete: (res) => {},
         })
      } else {
        wx.showToast({
          title: res.data.msg,
          icon: 'none',
          duration: 1500
        })
      }
    })
  },
  clear(){
    Dialog.confirm({
      message: '确定删除吗？',
    }).then(() => {
    request({
      url: 'cart/cartDelete',
      data: {
        token:wx.getStorageSync('token'),
        cart_id:this.data.deldataList
      }
    }).then(res => {
      if (res.data.status == 1) {
         this.cartList()
      } else {
      
        wx.showToast({
          title: res.data.msg,
          icon: 'none',
          duration: 1500
        })
      }
    })
  }).catch(() => {
    // on cancel
    // console.log(22)

    wx.showToast({
      title: '取消删除',
      icon:"none"
    })
  });
  },
  addToCart(cart_id){
   return new Promise((r,j)=>{
    request({
      url: 'cart/addToCart',
      data: {
        token:wx.getStorageSync('token'),
        cart_id
      }
    }).then(res => {
      if (res.data.status == 1) {
        r(res)
      } else {
        j()
        wx.showToast({
          title: res.data.msg,
          icon: 'none',
          duration: 1500
        })
      }
    })
   });
    
  },
  minusToCart(cart_id){
    return new Promise((r,j)=>{ request({
      url: 'cart/minusToCart',
      data: {
        token:wx.getStorageSync('token'),
        cart_id
      }
    }).then(res => {
      if (res.data.status == 1) {
        r(res)
      } else {
        j()
        wx.showToast({
          title: res.data.msg,
          icon: 'none',
          duration: 1500
        })
      }
    })
   });

  },
  gotoOrder(){
    if(this.data.num <= 0){
      wx.showToast({
        title: '请至少选择一件商品',
        icon:"none"
      })
    }else{
      wx.navigateTo({
        url: '../../ShopMall/order/order?cart_id=' + JSON.stringify(this.data.result),
      })
    }
    
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    this.cartList()
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    this.setData({
      valid_goods_list:[],
      invalid_goods_list:[],
      num:0,
      tag:0,
      total_price:0,
      result:[],
      dataList:[]
    })
    this.cartList()
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})
奥吼吼~~
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
uni-app引入UI组件库(Vant-weapp)步骤
yanghongyan001的博客
03-27 7708
1. 创建目录 在项目根目录中创建wxcomponents目录 在wxcomponents目录中创建vant目录 2.引入vant-weapp组件 在vant-weapp的GitHub Releases版块下载最新的zip包： https://github.com/youzan/vant-weapp/releases 下载完成效果如下： 将组件中的dist目录拷贝到创建好的va...
用vant-weapp写一个购物车
黄秀杰的博客
01-16 3078
vant-weapp介绍 vant-weapp是有赞出品的，前端组件库，既然出自有赞之手，必然是尤其适合于做一个商城项目，它移植于vant-ui，后者有的特性大部分都已经实现。vant-ui找了好久，都没有发现购物车业务组件，我就从自家的有赞精选这个小程序的购物车搬一份过来。 参考目标页 官方文档 https://youzan.github.io/vant-weapp 安装 npm i @va...
vue-cli+elementUI：个人信息提交表格显示Demo
07-30
vue-cli+elementUI：个人信息提交表格显示Demovue-cli+elementUI：个人信息提交表格显示Demovue-cli+elementUI：个人信息提交表格显示Demo
微信小程序之购物车功能
青烟小生的博客
06-04 1550
微信小程序的购物车使用的是Vant weapp的组件库来写的。 可以实现单选和全选功能；右滑删除购物车商品；计算商品价格 页面代码 <view> <view wx:if="{{shopList.length > 0}}"> <view style="margin:0 5px;"> <van-checkbox-group value="{{ result }}" bind:change="onChange">
vant中 tab栏遇到的坑 van-tabs。
热门推荐
柠檬不萌只是酸i
05-27 1万+
话不多说，先看下问题描述： 我的需求：点击tab栏，下方展示出来当前tab栏下的内容列表（A页面），点击列表进入详情内容（B页面），但是返回（A页面）的时候，需要显示刚才被点击的tablan高亮显示。（如果tab栏横向有滚动条，那也得让被选中的高亮显示）。 所以，大部分人的解决办法就是将当前选中的tab的索引缓存起来，等回到该页面的时候，让被缓存的那个高亮显示出来。 坑的问题在于：van-tabs，里面的v-model默认值是0，但是类型却写着 number | string 。 但是，在此时.
小程序vant-weapp-商品卡片列表
祈澈菇凉
12-03 4788
用过小程序的几个框架，最后还是选择了用vant-weapp，喜欢这款框架的原因，可能就是它里面的组件很多，很丰富，够用，在我的业务场景里面，大部分的需求都是可以在这个框架里面找到，不用自己大费周章的写代码，只需要去文档里面，拿到组件出来，稍微的修改一下样式，就可以完成自己的工作，这大概就是它吸引我的地方啦。 当然选择要慎重哟，这个框架最适合的就是做商城项目购物车，订单，商品导航都是现成的呀 所以我...
[学习笔记]利用vant组件实现商城购物车功能
iufesjgc的博客
10-07 4418
效果图： 商品相关数据大致结构： shopcard:[{ num:1, price:'1999', title:'商品名商品名商品名商品商品名', desc:'商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述', thumb:'图片地址' }, ...
Vue3+Vite+Vant3 购物车（单选全选，数量增减，金额计算，左滑删除，空状态，结算跳转）
weixin_62918410的博客
11-07 2077
无接口，本地缓存存储购物车数据——单选全选，数量增减，金额计算，左滑删除，空状态，结算跳转
小程序引入第三方组件库Vant Weapp
weixin_47426557的博客
08-19 1368
最近在看小程序中引入第三方组件相关知识，在引入过程中一直出现各种问题和报错最终终于成功暗中使用；以下为 npm安装的步骤及安装过程中可能的报错和小编认为的原因。 vant-weapp中文文档：https://youzan.github.io/vant-weapp/ 1、打开微信开发者工具，选择目录 > 输入APPID > 确定 2、在文件根目录下右键 (一定要是根目录) > 选择在内建终端中打开 一定要是根目录，如果不是根目录可以使用cd进行切换 cd ../ 切换...
vue+vant中购物车页面
weixin_52568554的博客
08-14 1098
vue+vant移动端购物
微信小程序——购物车（截图+源码）.zip
04-17
微信小程序——购物车（截图+源码）.zip 微信小程序——购物车（截图+源码）.zip 微信小程序——购物车（截图+源码）.zip 微信小程序——购物车（截图+源码）.zip 微信小程序——购物车（截图+源码）.zip 微信小程序——购物车（截图+源码）.zip 微信小程序——购物车（截图+源码）.zip 微信小程序——购物车（截图+源码）.zip 微信小程序——购物车（截图+源码）.zip 微信小程序——购物车（截图+源码）.zip
vue+vant-UI框架实现购物车的复选框全选和反选功能
10-16
主要介绍了vue+vant-UI框架实现购物车的复选框全选和反选功能，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
vantweapp的使用
01-20
1、官方网址打开：https://youzan.github.io/vant-weapp/#/intro 2、项目打开后选中微信小程序的项目右击——>选择终端打开——> 终端打开后输入npm init 进行初始化——>一直回车，最后在输入官网上面的命令： npm i vant-weapp -S –production 回车进行npm的安装。 3、此时还没有安装完成，选中小程序点击开发工具中的“工具”选项——>点击构建npm。 4、此时查看项目，出现package.json（这是配置文件）文件以及其它一些模块。 5、接下来根据官网中的提示进行使用。 作者：ym0913
vue实现购物车选择功能
10-15
主要为大家详细介绍了vue实现购物车选择功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue实现购物车功能（商品分类）
10-15
主要为大家详细介绍了vue实现购物车功能，商品分类，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
小程序源码 外卖购物车 (代码源)
06-22
小程序源码 外卖购物车 (代码源)小程序源码 外卖购物车 (代码源)小程序源码 外卖购物车 (代码源)小程序源码 外卖购物车 (代码源)小程序源码 外卖购物车 (代码源)小程序源码 外卖购物车 (代码源)小程序源码 外卖...
小程序源码 购物车 (代码+截图)
06-19
小程序源码 购物车 (代码+截图)小程序源码 购物车 (代码+截图)小程序源码 购物车 (代码+截图)小程序源码 购物车 (代码+截图)小程序源码 购物车 (代码+截图)小程序源码 购物车 (代码+截图)小程序源码 购物车 (代码+...
微信小程序实现购物车代码实例详解
10-16
主要介绍了微信小程序实现购物车代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
微信小程序购物车代码.zip
07-08
微信小程序购物车代码
vantweapp引入iconfont
最新发布
04-28
要在vantweapp中引入iconfont，你需要执行以下步骤： 1. 首先，登录iconfont网站，找到你想要使用的图标，并将其添加到购物车中。 2. 在购物车页面中，选择“添加至项目”选项，并创建一个新的项目。在创建项目时...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值