微信小程序购物车布局以及逻辑

wxml：

<!-- 购物车 -->
<view wx:if="{{showPro}}"><view style='padding-bottom: 100rpx;'><view wx:for="{{shopData}}" wx:key="shopData" class='pro'><view style='width: 60rpx;' class='xuanzhong' bindtap='danxuan' data-index="{{index}}"><image src='/img/img/icon_select@2x.png' style='width: 36rpx; height: 36rpx;margin-top: 8rpx' wx:if="{{item.selected? true:false}}"></image><image src='/img/img/icon_nomal@2x.png' style='width: 36rpx; height: 36rpx;margin-top: 8rpx;' wx:if="{{item.selected? false:true}}"></image></view><view class='tutu'><image src='{{item.url}}' class='pro-image'></image></view><view class='wenzi'><view class='goodsname'><text class='te' style='font-weight: 600'>{{item.name}}</text><image src='/img/img/btn_del2@2x.png' style='width: 36rpx; height: 36rpx;' bindtap='deleteEve'></image></view><view class='zuixia'><view class='price1'>￥{{item.price}}</view><view class='add'><image src='/img/img/btn_sku_dis_sub@2x.png' class='num' style='margin-right: 4rpx;' wx:if="{{item.num == 1}}" bindtap='subtraction' data-erji="{{proind}}" data-index="{{index}}"></image><image src='/img/img/btn_sku_nml_sub@2x.png' class='num' style='margin-right: 4rpx;' wx:else data-index="{{index}}" bindtap='subtraction' data-erji="{{proind}}" data-index="{{index}}"></image><text style='display: block; width: 80rpx; height: 60rpx; background: #eee; text-align: center;font-size: 28rpx;line-height: 60rpx;color:#333'>{{item.num}}</text><image src='/img/img/btn_sku_add@2x.png' class='num' style='margin-left: 4rpx;' bindtap='add' data-erji="{{proind}}" data-index="{{index}}"></image></view></view></view></view><view style='clear:both'></view></view><!-- 底部 --><view class='bottom'><view><text style='font-size: 28rpx;margin-right: 20rpx;color:#333'>合计</text><text style='font-size: 36rpx; color: #F87039'>￥{{jiesuan}}</text></view><view style='width: 260rpx;height: 98rpx;'><view bindtap='topay' class='topay'>去结算</view></view></view>
</view>
<view wx:else style='width: 100%; background: #fff; height: 100%'><view class='img-s'><image src='/img/img/bg_default_cart@2x.png' style='width: 300rpx; height: 300rpx;'></image></view><view style='width: 100%;' class='ttx'><text style='font-size: 26rpx; color: #999;display: block;'>去添加点东西吧~</text></view><view class='button' bindtap='toMall'><button class='btn'>去商城逛逛</button></view>
</view>

wxss：

page {width: 100%;height: 100%;background: #efefef;
}/* 购物车商品 */.pro {width: 100%;height: 200rpx;padding-bottom: 40rpx;box-sizing: border-box;display: flex;flex-direction: row;justify-content: flex-start;background: #fff;border-bottom: 1rpx solid #efefef;
}.xuanzhong {height: 200rpx;margin-left: 30rpx;line-height: 200rpx;
}.tutu {padding-top: 20rpx;
}.pro-image {width: 160rpx;height: 160rpx;
}.wenzi {margin-left: 20rpx;padding-top: 40rpx;width: 460rpx;display: flex;flex-direction: column;box-sizing: border-box;padding-right: 30rpx;
}.goodsname {width: 100%;height: 50%;display: flex;flex-direction: row;justify-content: space-between;
}.te {font-size: 28rpx;color: #333;
}.num {width: 60rpx;height: 60rpx;
}.add {display: flex;flex-direction: row;flex-wrap: nowrap;
}.zuixia {width: 100%;height: 50%;display: flex;flex-direction: row;justify-content: space-between;margin-top: 60rpx;
}.price1 {color: #F87039;font-size: 28rpx;
}.bottom {width: 100%;height: 98rpx;border-top: 1rpx solid #efefef;background-color: #fff;position: fixed;bottom: 0;display: flex;flex-direction: row;justify-content: space-between;align-items: center;padding-left: 30rpx;box-sizing: border-box;
}button::after {border: none;
}.topay {background-color: #F87039;color: #fff;width: 260rpx;height: 98rpx;line-height: 98rpx;font-size: 32rpx;text-align: center;
}.img-s {width: 100%;display: flex;justify-content: center;padding-top: 160rpx;
}.ttx {display: flex;flex-direction: row;justify-content: center;margin-top: 60rpx;
}.button {width: 100%;display: flex;flex-direction: row;justify-content: center;margin-top: 60rpx;
}.button .btn {background-color: #F87039;width: 360rpx;height: 80rpx;color: #fff;font-size: 32rpx;line-height: 80rpx;
}

js：


import modals from '../../../class/base/modal.js'
import usual from '../../../class/base/usual.js'Page({data: {shopData:[{name: '商品1',url: '/img/img/sort1@2x.png',selected: true,num: 1,price: '484'},{name: '商品2',url: '/img/img/sort1@2x.png',selected: true,num: 1,price: '404'},{name: '商品3',url: '/img/img/sort1@2x.png',selected: true,num: 1,price: '10.56'},{name: '商品4',url: '/img/img/sort1@2x.png',selected: true,num: 1,price: '100'},{name: '商品5',url: '/img/img/sort1@2x.png',selected: true,num: 1,price: '0.5'}],showPro:true,jiesuan: 0.00},//加减操作add(e) {var that = thislet index = e.currentTarget.dataset.indexconsole.log(index)let shopData = that.data.shopDatashopData[index].num++usual.sum(shopData)let jiesuan = wx.getStorageSync('jiesuan', jiesuan)that.setData({jiesuan: jiesuan,shopData: shopData})},// 加减subtraction(e) {var that = thislet index = e.currentTarget.dataset.indexlet shopData = that.data.shopDataconsole.log(index)if (shopData[index].num > 1) {shopData[index].num--}else {modals.hideLoading('不能再少了')}usual.sum(shopData)let jiesuan = wx.getStorageSync('jiesuan', jiesuan)that.setData({jiesuan: jiesuan,shopData: shopData})},//单选danxuan(e) {var that = thislet index = e.currentTarget.dataset.indexconsole.log(index)let shopData = that.data.shopDatashopData[index].selected = !shopData[index].selectedusual.sum(shopData)let jiesuan = wx.getStorageSync('jiesuan', jiesuan)that.setData({jiesuan: jiesuan,shopData: shopData})},//去结算topay() {let url = "../pay/pay?jsonStr="let str = JSON.stringify(this.data.shopData)modals.navigate(url,str)},onLoad: function (options) {let that = thislet shopData = that.data.shopDatausual.sum(shopData)let jiesuan = wx.getStorageSync('jiesuan', jiesuan)that.setData({jiesuan: jiesuan})}
})

调用的方法：

const app = getApp()
export default class usual {static sum(shopData) {//计算总价new Promise((res, rej) => {var that = thislet jiesuan = 0for (let i = 0; i < shopData.length; i++) {if (shopData[i].selected) {jiesuan += shopData[i].price * 1000 * shopData[i].num / 1000}}console.log(jiesuan)wx.setStorageSync('jiesuan', jiesuan)})}static selectAll(shopData) {return new Promise((res, rej) => {//一进页面即全为选中状态var that = thisfor (let i = 0; i < shopData.length; i++) {let datashop = shopData[i].profor (let i in datashop) {datashop[i].selected = false}}})}
}

微信小程序购物车布局以及逻辑相关推荐

7.微信小程序（布局适配与物理逻辑像素）
微信小程序(布局适配与物理逻辑像素) 前言移动端开发经常遇到一些概念:物理像素.逻辑像素.像素密度.像素比等,本节来详细介绍下关键词: 屏幕尺寸.物理像素/屏幕分辨率/物理分辨率.逻辑像素DIP. ...
微信小程序全选，微信小程序checkbox，微信小程序购物车
微信小程序,这里实现微信小程序checkbox,有需要此功能的朋友可以参考下. 摘要: 加减商品数量,汇总价格,全选与全不选设计思路: 一.从网络上传入以下Json数据格式的数组 1.标题titl ...
微信小程序购物车数量加减功能
微信小程序购物车数量加减功能 wxml  <view class="stepper">  < ...
“完美”解决微信小程序购物车抛物动画，在连续点击时出现计算错误问题，定时器停不下来。
"完美"解决微信小程序购物车抛物动画,在连续点击时出现计算错误问题,定时器停不下来. 参考文章: (1)"完美"解决微信小程序购物车抛物动画,在连续点击时出现计 ...
微信小程序中布局使用的css布局语法
微信小程序的布局是基于css的布局,可以参考一些学习网站上面的css的基础学习以下是布局的一些语法规则 class 用 .class{} id 用 #id{} 类的子元素添加css (1 ...
微信小程序页面竖向滚动逻辑
微信小程序页面竖向滚动逻辑 1.实现下面类似的数组注:下面这个生成的数组最好是整数,滑动的时候会失去精度的,要不然你永远会差一点,让你崩溃的.而且你永远不知道差在哪里. this.leftScrol ...
原生微信小程序购物车
原生微信小程序购物车!! 效果: html: <view style="background-color: #eeeeee;height: 100vh;"><vi ...
image 微信小程序flex_微信小程序flex布局案例(1)
微信小程序 flex 布局案例一前言最近在学习微信小程序时,看到很多布局都用到了 flex 布局,其实 flex 布局学习过好多东西不用就忘记了,这次用上就只得再去看了,争取学会.下面是我做的简单 ...
微信小程序购物车弹出层
https://www.jianshu.com/p/a0c2c8712dab 微信小程序购物车数量加减功能 wxml:  <button bin ...

微信小程序购物车布局以及逻辑

微信小程序购物车布局以及逻辑相关推荐

最新文章

热门文章

微信小程序 购物车布局以及逻辑

微信小程序 购物车布局以及逻辑相关推荐

最新文章

热门文章

微信小程序购物车布局以及逻辑

微信小程序购物车布局以及逻辑相关推荐