微信小程序购物车 二维数组 不同商家不同商品版本
需求:电商平台内有众多不同商家,购物车页需要购买的产品以商家的类目作为分类,并满足基本的购物车需求:
http://www.kundonghui.com/index.php?controller=simple&action=cart
根据客户需要将此商城做成小程序
wxml
代码片
.
<block wx:for='{
{carts}}'>
<view class="cartList" >
<view class="cartList_Shop">
<view class="cartList_Shop_top">
<text>{
{item.shopName}}</text>
</view>
<block wx:for='{
{item.shopProlist}}' wx:for-item="ii">
<view class="Shop_proList">
<view class="Shop_proList_Select">
<icon wx:if="{
{ii.proSelecter}}" type="success" color="#0a4de6" data-shopid="{
{ii.shopId}}" data-proid="{
{ii.proId}}" class="cart-pro-select" bindtap="selectList" />
<icon wx:else type="circle" class="cart-pro-select" data-shopid="{
{ii.shopId}}" data-proid="{
{ii.proId}}" bindtap="selectList" />
</view>
<view class="Shop_proList_Img">
<image mode="scaleToFill" src="{
{ii.imgSrc}}"></image>
</view>
<view class="Shop_proList_textList">
<view class="Shop_proList_textListTop">
<text class="proList_textListTopName">{
{ii.proName}}</text>
<text class="right">{
{ii.proPrice}}元</text>
</view>
<view class="Shop_proList_textListCenter">
<text class="left">单品重量:{
{ii.proWeight}}克</text>
<text class="right">¥{
{ii.prototal}}</text>
</view>
<view class="Shop_proList_textListBottom">
<view class="bottomLeft">
<view class="border_Left" bindtap="minusCount" data-shopid="{
{ii.shopId}}" data-proid="{
{ii.proId}}">-</view>
<view class="border_Cen">{
{ii.proNum}}</view>
<view class="border_Left" bindtap="addCount" data-shopid="{
{ii.shopId}}" data-proid="{
{ii.proId}}">+</view>
</view>
<view class="bottomRight">
<image class="deleteIcon" src="https://www.kundonghui.com/views/mobile/img/rubish.png" bindtap='deleteList' data-shopid="{
{ii.shopId}}" data-proid="{
{ii.proId}}"></image>
</view>
</view>
</view>
</view>
</block>
</view>
</view>
</block>
<view class="cart-footer">
<view class='cartIcon-grow'>
<icon wx:if="{
{selectAllStatus}}" type="success_circle" color="#0a4de6" class="total-select" bindtap="selectAll" />
<icon wx:else type="circle" color="#0a4de6" class="total-select" bindtap="selectAll" />
<text>全选</text>
</view>
<text class="cart-toatl-price" bindtap="getTotalPrice">合计:¥{
{totalPrice}}</text>
<button class='submit-cart' bindtap='submitCart'>结算</button>
</view>
<!-- <view wx:else>
<view class="cart-no-data">购物车是空的哦~</view>
</view> -->
js
代码片
.
Page({
data: {
carts: [], // 购物车列表
hasList: false, // 列表是否有数据
totalPrice: 0, // 总价,初始为0
selectAllStatus: true // 全选状态,默认全选
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
this.setData({
hasList: true, // 既然有数据了,那设为true吧
carts: [
{
shopName: '鲲东自营',
shopProlist: [
{
shopId:0,
proId: 0,
proName: '一瓶啤酒',
proPrice: 1,
prototal: 15,
proNum: 1,
proSelecter: