Vant+小程序+购物车实例

图片实例,看是否是您所需要的喔。。。。

扫码小程序可看实例操作,有啥问题也可扫码加群,很希望可以帮助到你喔!

         

HTML部分:

<view class="cart">
  <view class=‘top‘ wx:if="{{isTop}}">
    <view>
     <van-icon name="delete" class=‘delete‘ bindtap="emptyCart"/><text bindtap="emptyCart">清空购物车</text>
    </view>
  </view>
  <view>
      <view class="cartGoods" wx:for="{{items}}" wx:key="item" data-index="{{index}}">
      <view class="sigleCheck">
      <!-- wx:if 是否选择显示不同图标 -->
          <icon wx:if="{{item.selected}}" type="success" color="#6167e9" bindtap="sigleCheck" data-index="{{index}}" />
          <icon wx:else type="circle" bindtap="sigleCheck" data-index="{{index}}"/>
      </view>
      <view class="goodsImg">
        <navigator url="../details/details?id={{item.id}}">
              <image src="{{item.pic}}" />
        </navigator>
      </view>
      <view class="goodsDetail">
        <view class=‘details‘>
        <view class=‘goodsName‘>
        <navigator url="../details/details?id={{item.id}}">
          {{item.info}}</navigator>
        </view>
          <text class=‘goodsPrice‘>¥{{item.sale_price}}</text>
        </view>
        <view class="operate">
            <van-stepper value="{{item.number}}" data-index="{{index}}" min="1" max="10" bind:plus="plus" bind:minus="minus"/>
            <view class="del">
              <van-icon name="close" bindtap="deleteList" data-index="{{index}}"/>
            </view>
        </view>
      </view>
    </view>
    <view class="submitBar" wx:if="{{bottomBar}}">
        <van-submit-bar
        price="{{ totalPrice*100 }}"
        button-text="买单"
        bind:submit="onClickButton"
        >
          <!-- wx:if 是否全选显示不同图标 -->
          <view class=‘allCheck‘>
            <icon wx:if="{{selectAllStatus}}" type="success_circle" color="#6167e9" bindtap="selectAll"/>
            <icon wx:else type="circle" color="#6167e9" bindtap="selectAll"/>
            <text class="allText">全选</text>
          </view>
        </van-submit-bar>
    </view>
  </view>
  <view wx:if="{{hasList}}" class=‘empty‘>
   <view>
       <image src=‘../../images/a.png‘ class=‘empty_pic‘></image>
       <view class="empty_text">购物车为空,快去添加商品吧~</view>
       <view>
       <van-button round type="danger" bindtap=‘Gohome‘ class=‘Gohome‘ size="large">去逛逛</van-button>
       </view>
   </view>
  </view>
  <van-notify id="custom-selector" />
  <van-toast id="van-toast" />
</view>

JS部分:

  1 //index.js
  2 import Notify from ‘../vant/notify/notify‘;
  3 import Toast from ‘../vant/toast/toast‘;  //引入toast
  4 var cartData = require(‘../../api/cart.js‘);
  5
  6 //获取应用实例
  7 const app = getApp()
  8
  9 Page({
 10   data: {
 11     isTop: true,
 12     bottomBar:true,           //默认底部导航
 13     hasList: false,          // 列表是否有数据
 14     selectAllStatus: false,    // 全选状态,默认全选
 15     totalPrice:0,    //总价
 16   },
 17   onLoad: function () {
 18     this.setData({
 19       items: cartData.cartList
 20     });
 21   },
 22   // 减去商品
 23   minus(event){
 24     var items = this.data.items  //获取购物车列表
 25     var index = event.currentTarget.dataset.index;//获取当前点击事件的下标索引
 26     var number = items[index].number  //获取购物车里面的value值
 27       number--
 28       items[index].number=number;
 29       console.log("number",number);
 30     this.setData({
 31       items: items
 32     });
 33     this.getTotalPrice();                               // 重新获取总价
 34   },
 35   // 加
 36   plus(e){
 37     var items = this.data.items  //获取购物车列表
 38     var index = e.currentTarget.dataset.index;//获取当前点击事件的下标索引
 39     var number = items[index].number  //获取购物车里面的value值
 40      number++
 41      items[index].number = number;
 42     this.setData({
 43       items: items
 44     });
 45     this.getTotalPrice();                               // 重新获取总价
 46   },
 47   // 单选
 48   sigleCheck(e){
 49     var items = this.data.items  //获取购物车列表
 50     var index = e.currentTarget.dataset.index;//获取当前点击事件的下标索引
 51     var selected = items[index].selected  //获取购物车里面的value值
 52     items[index].selected = !selected;
 53     this.setData({
 54       items:items
 55     });
 56     this.getTotalPrice();                               // 重新获取总价
 57   },
 58   // 全选
 59   selectAll(e) {
 60     let selectAllStatus = this.data.selectAllStatus;    // 是否全选状态
 61     selectAllStatus = !selectAllStatus;
 62     let items = this.data.items;
 63
 64     for (let i = 0; i < items.length; i++) {
 65       items[i].selected = selectAllStatus;            // 改变所有商品状态
 66     }
 67     this.setData({
 68       selectAllStatus: selectAllStatus,
 69       items: items
 70     });
 71     this.getTotalPrice();                               // 重新获取总价
 72   },
 73   // 总价
 74   getTotalPrice() {
 75     let items = this.data.items;                  // 获取购物车列表
 76     let total = 0;
 77     for (let i = 0; i < items.length; i++) {         // 循环列表得到每个数据
 78       if (items[i].selected) {                   // 判断选中才会计算价格
 79         total+= items[i].number * items[i].sale_price;     // 所有价格加起来
 80         total=total
 81       }
 82     }
 83
 84     this.setData({                                // 最后赋值到data中渲染到页面
 85       items: items,
 86       totalPrice: total
 87     });
 88     console.log(this.data.totalPrice)
 89   },
 90   // 删除商品
 91   deleteList(e) {
 92     const index = e.currentTarget.dataset.index;
 93     let items = this.data.items;
 94     items.splice(index, 1);              // 删除购物车列表里这个商品
 95     this.setData({
 96       items: items
 97     });
 98     if (!items.length) {                  // 如果购物车为空
 99       Notify({
100         text: ‘全部删除‘,
101         duration: 1000,
102         selector: ‘#custom-selector‘,
103         backgroundColor: ‘#fc464a‘
104       });
105       this.setData({
106         hasList: true,              // 修改标识为false,显示购物车为空页面
107         bottomBar: false,          //底部导航隐藏
108         isTop: false,
109       });
110     } else {                              // 如果不为空
111       this.getTotalPrice();           // 重新计算总价格
112       Notify({
113         text: ‘删除一个‘,
114         duration: 1000,
115         selector: ‘#custom-selector‘,
116         backgroundColor: ‘#fc464a‘
117       });
118     }
119   },
120   // 清空购物车
121   emptyCart(){
122     console.log("清空",this.data.items)
123     var items = this.data.items;
124    items = ‘‘;
125     this.setData({
126       items: items,
127       bottomBar: false,
128       hasList: true,
129       isTop: false,
130     });
131   },
132   // 购买成功
133   onClickButton() {
134     Toast.success(‘购买成功‘);
135   },
136   Gohome(){
137     wx.switchTab({
138       url: ‘../home/home‘
139     })
140   }
141 })

CSS部分:

.cart{
  background: #f7f7f7;
}
.top{
  color: #666;
  background: #fff;
  padding: 20rpx 20rpx;
  font-size: 32rpx;
  display: flex;
  justify-content: space-between;
}
.top .wap-nav{
  vertical-align: middle;
  padding-right:16rpx;
}
.delete{
  padding-right:16rpx;
  margin-left: 20rpx;
}
.compute,.cartGoods{
  display: flex;
  align-items: center;
}
.cartGoods{
  justify-content: space-between;
}
.cartGoods{
  background: #fff;
  margin-top: 20rpx;
  padding: 10px 0;
}
.goodsImg image{
  width: 160rpx;
  height: 160rpx
}

.goodsDetail{
  margin:0 30rpx;
}
.goodsName{
  color: #666;
 font-size: 28rpx;
  width: 80%;
}
.details{
  height: 46rpx;
  overflow: hidden;
  display: flex;
}
.goodsPrice{
 font-size: 30rpx;
  color: red;
  font-weight: bold;
  display: inline-block;
  width: 200rpx;
}
.operate{
  display: flex;
  margin-top:30rpx;
  justify-content: space-around;
}

.sigleCheck{
  margin: 0 20rpx;
}
.allCheck{
  margin-left: 20rpx;
}
.allCheck icon{
  vertical-align: middle;
  padding-right:10rpx;
}
.empty{
  background: #fff;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #666;
  font-size: 32rpx;
}
.empty_text{
  padding: 10rpx 0 30rpx 0;
  text-align: center;
}
.empty_pic{
 width:400rpx;
height:250rpx;
}
.Gohome .van-button--large{
  height: 80rpx;
  background: #6167e9;
  border: 1px solid #6167e9;
  line-height: 74rpx;
  font-size: 36rpx;
}
.submitBar .van-button--danger{
  border: 1px solid #6167e9;
  background: #6167e9;
}

原文地址:https://www.cnblogs.com/CinderellaStory/p/11333579.html

时间: 2024-11-05 21:46:31

Vant+小程序+购物车实例的相关文章

微信小程序购物车产品计价

微信小程序购物车产品计价: 问题:当选中商品,价格累加时会出现无限循环小数 解答:在计算前先parseFloat(变量),再计算的最后使用(变量).toFixed(2)保留两位小数 例如: jiaCart:function(e){    var pid = e.currentTarget.id;    var pic = parseFloat(e.currentTarget.dataset.pic);    var cartList=this.data.cartList;    var ex =

微信小程序入门实例之记事本

主要实现思想都在代码的注释中,项目源码见github 首先上项目目录 app.js文件代码如下: //app.js App({ onLaunch: function() { //调用API从本地缓存中获取数据 var logs = wx.getStorageSync('logs') || [] logs.unshift(Date.now()) wx.setStorageSync('logs', logs) }, getUserInfo: function(cb) { var that = thi

分享一下微信小程序的实例【转】

wx-gesture-lock  微信小程序的手势密码 WXCustomSwitch 微信小程序自定义 Switch 组件模板 WeixinAppBdNovel 微信小程序demo:百度小说搜索 shitoujiandaobu 小程序:石头剪刀布(附代码说明) audiodemo 微信小程序开发之视频播放器 Video 弹幕 弹幕颜色自定义 star 微信小程序开发之五星评分 switchCity 微信小程序开发之城市选择器 城市切换 huadong_del  微信小程序滑动删除效果 jianh

计时器小程序——由浅入深实例讲解

本菜在实现简单的计时器过程中遇到问题的一些成长笔记,有不完整观点的话请多多见谅,也看了众多大神的博客才整理的笔记,下面来实现个人写的小程序. 首先第一个实例(很简单): winform窗体包含两个控件:label.button控件,点击控件开始计时,代码如下: namespace Timer_Test { public partial class CommonInstance : Form { private static int startTime = 0; public CommonInst

小程序购物车下架商品实时显示,只为更好用户体验!

单商户小程序V1.8.4版本更新说明更新时间:2018年9月10号 一. 更新功能清单1.新增仅支持自提功能设置,用户下单仅可选到店自提!2.小程序前台优化购物车页面,已删除或已下架的商品,其状态展示在购物车提醒用户:3.商家后台总览页面新增常用入口:4.商家后台DIY活动组件增加是否显示参与人数设置:5.商加后台新增搜索自定义分销商品功能:6.商城后台添加服务商品处新增服务商品提交订单页的温馨提示自定义:二. 更新功能详细说明1. 增加仅支持自提功能设置,用户下单仅可选到店自提! 优化目的:很

微信小程序——购物车结算

项目需要做个购物车结算功能,先分析需求: 1.全选,反选的功能.当选中的个数 = 购物车的数量时,勾选全选按钮,反之则取消选中全选按钮: 2.改变选中状态时,计算总价和总数量: 3.单个产品的数量加减: 4.列表某项选中时,如果数量改变,总价和总数量相应改变. 一些说明: 复选框默认用的小程序的checkbox组件. 为了正在看这篇文章的你更好的理解,我把设置的data截图展示出来: 解决步骤: 1.后台获取购物车列表的时候,默认给它添加一个selected属性,设置为false,并把这个值赋值

2-2列表,浅copy,小程序购物车

#!/usr/bin/env python# -*- coding:utf-8 -*- #列表a=['aa','bb','cc','dd','ee']b=a.copy() #复制 ### b=a a变b变.print(a);print(b) #一样a[1]='ss';a.append('zz')print(a);print(b)#a变b不变#循环for i in b: print(i)#切片 步长2print(a[::2]) print('++++++++++++++++++')#浅copya=

微信小程序——购物车数字加减

上一篇,我们有讲到如何造一个购物车弹层.今天来说一下,购物车数量的加减如何实现. 主要思路就是在data里面定义一个属性,属性值就是这个数量.点击+的时候就+1,点击-的时候就-1,再结合setData更改这个数字.当数字等于1的时候,要给-的按钮添加一个disabled的属性. wxml代码: <view class='row item-center'> <button class="buy-num-btn btn-minus" disabled="{{m

微信小程序实例源码大全

怎么本地测试微信小程序实例源码 1.下载源码 2.打开微信开发者工具 3.添加项目->选择本项目目录->编译执行 微信小程序实例源码大全 微信小程序游戏类demo:识色:从相似颜色中挑选不同的一个 源码链接:http://www.wxapp-union.com/forum.php?mod=viewthread&tid=1105 微信小程序精品demo:仿网易云音乐:歌单,FM,播放,评论 源码链接:http://www.wxapp-union.com/forum.php?mod=vie