购物车

pages/bag/bag.js

@@ -0,0 +1,307 @@
+
+var goodsIndex  = '',
+    sellerIndex = ''
+
+Page({
+    /**
+     * 页面的初始数据
+     */
+    data: {
+        bags            : [],     // 购物车列表
+        isUser          : false,  // 是否登录
+        bagId           : '',
+        allCheckbox     : false,
+        bagNumber       : 0,
+        allPrice        : '0.00',
+        bagOrderLoading : false
+    },
+    /**
+     * 生命周期函数 - 页面显示
+     */
+    onShow(){
+        let token = wx.getStorageSync('token') || null
+        this.setData({
+            isUser          : token != null,
+            bagOrderLoading : false,
+            allCheckbox     : false,
+            bagNumber       : 0,
+            allPrice        : '0.00',
+            bagId           : '',
+        })
+
+        if(token != null){
+            wx.showLoading({
+                title: '加载中...',
+                mask : true
+            })
+            wx.$api.bag.list().then(res => {
+                res.data.map(val => {
+                    val.shop.mallState = false
+                    val.items.map(val => {
+                        val.state = false
+                    })
+                })
+                this.setData({
+                    pagesLoding: false,
+                    bags       : res.data
+                })
+                wx.hideLoading()
+            })
+        }
+    },
+    /**
+     * 商品数量加减
+     */
+    goodsNumber(e){
+        goodsIndex  = e.currentTarget.dataset.goods
+        sellerIndex = e.currentTarget.dataset.seller
+
+        let goodsNumber = this.data.bags[sellerIndex].items[goodsIndex].qty
+
+        if (e.currentTarget.dataset.type == 'plus'){
+            goodsNumber = goodsNumber + 1
+        }else{
+            if (goodsNumber > 1){
+                goodsNumber = goodsNumber - 1
+            }else{
+                wx.showToast({
+                    title   : '商品数量不能小于1',
+                    icon    : 'none'
+                })
+                return
+            }
+        }
+        this.setnumNumber(goodsIndex, sellerIndex, goodsNumber)
+    },
+    /**
+     * 输入商品数量
+     */
+    goodsNumberInput(e){
+        goodsIndex   = e.currentTarget.dataset.goods
+        sellerIndex  = e.currentTarget.dataset.seller
+
+        let setnumNumber = this.data.bags[sellerIndex].items[goodsIndex].number,
+            inputValue   = Number()
+        if (e.detail.value > 0){
+            inputValue = Number(e.detail.value)
+        }else{
+            wx.showToast({
+                title   : '商品数量不能小于1',
+                icon    : 'none'
+            })
+            inputValue = Number(setnumNumber)
+        }
+        this.setnumNumber(goodsIndex, sellerIndex, inputValue)
+    },
+    /**
+     * 更新商品数量
+     */
+    setnumNumber(goodsIndex, sellerIndex, setnumNumber){
+        wx.showLoading({
+            title: '加载中',
+        })
+        let atGoods = this.data.bags
+        wx.$api.bag.putNum(atGoods[sellerIndex].items[goodsIndex].cart_id, {
+            qty   : setnumNumber,
+            sku_id: atGoods[sellerIndex].items[goodsIndex].sku_id
+        }).then(res => {
+            atGoods[sellerIndex].items[goodsIndex].qty = res.data
+            this.setData({
+                bags: atGoods
+            })
+            this.totalPrice()
+            wx.hideLoading()
+        })
+    },
+    /**
+     * 单选
+     */
+    checkbox(e){
+        goodsIndex   = e.currentTarget.dataset.goods
+        sellerIndex  = e.currentTarget.dataset.seller
+
+        console.log(e.currentTarget.dataset)
+        
+        let goodsList    = this.data.bags,
+            checkbox     = goodsList[sellerIndex].items[goodsIndex].state,
+            seller       = goodsList[sellerIndex].items,
+            sellerLength = 0
+        
+            goodsList[sellerIndex].items[goodsIndex].state = !checkbox
+
+        for (let i in seller){
+            if (seller[i].state){
+                sellerLength++
+                if (sellerLength == goodsList[sellerIndex].items.length){
+                    goodsList[sellerIndex].shop.mallState = true
+                }
+            }else{
+                goodsList[sellerIndex].shop.mallState = false
+                this.setData({
+                    allCheckbox: false
+                })
+            }
+        }
+
+        this.allCheckbox('checkbox')
+
+        this.setData({
+            bags: goodsList
+        })
+
+        this.totalPrice()
+    },
+    /**
+     * 店铺全选
+     */
+    sellerCheckbox(e){
+        sellerIndex = e.currentTarget.dataset.seller
+
+        let goodsList    = this.data.bags,
+            allCheckbox  = this.data.allCheckbox,
+            seller       = goodsList[sellerIndex].shop.mallState,
+            sellerLengh  = 0
+
+            goodsList[sellerIndex].shop.mallState = !seller
+
+        for (let i in goodsList[sellerIndex].items){
+            goodsList[sellerIndex].items[i].state = !seller
+        }
+
+        for (let j in goodsList){
+            if (goodsList[j].shop.mallState){
+                sellerLengh++
+                if (sellerLengh == goodsList.length){
+                    allCheckbox = true
+                }else{
+                    allCheckbox = false
+                }
+            }
+        }
+
+        this.allCheckbox('checkbox')
+
+        this.setData({
+            bags        : goodsList,
+            allCheckbox : allCheckbox
+        })
+
+        this.totalPrice()
+    },
+    /**
+     * 全选
+     */
+    allCheckbox(type){
+        let goodsLenght = 0,
+            allCheckbox = this.data.allCheckbox,
+            goodsList   = this.data.bags
+        
+        if (type == 'checkbox'){
+            for (let j in goodsList) {
+                if (goodsList[j].shop.mallState) {
+                    goodsLenght++
+                    if (goodsLenght == goodsList.length) {
+                        allCheckbox = true
+                    }
+                }
+            }
+        }else{
+            allCheckbox = !allCheckbox
+            for (var i in goodsList){
+                goodsList[i].shop.mallState = allCheckbox
+
+                for (let k in goodsList[i].items){
+                    goodsList[i].items[k].state = allCheckbox
+                }
+            }
+        }
+        this.setData({
+            allCheckbox : allCheckbox,
+            bags        : goodsList
+        })
+        this.totalPrice()
+    },
+    /**
+     * 计算价格
+     */
+    totalPrice() {
+        let bagNumber = 0,
+            allPrice  = 0,
+            bagIdArr  = [],
+            goodsList = this.data.bags
+
+        for (var i in goodsList){
+            for (let j in goodsList[i].items){
+                if (goodsList[i].items[j].state){
+                    bagNumber = bagNumber + goodsList[i].items[j].qty
+                    allPrice  = allPrice  + (goodsList[i].items[j].qty * goodsList[i].items[j].price)
+                    bagIdArr.push(goodsList[i].items[j].cart_id)
+                }
+            }
+        }
+        this.setData({
+            bagNumber : bagNumber,
+            allPrice  : allPrice.toFixed(2),
+            bagId     : bagIdArr.join(",")
+        })
+    },
+    /**
+     * 购物车提交
+     */
+    bagOrder(){
+        this.setData({
+            bagOrderLoading:true
+        })
+        if (this.data.bagId != ''){
+            
+            console.log('提交的数据id:' + this.data.bagId)
+
+            // setTimeout(() => {
+            //     this.setData({
+            //         bagOrderLoading: false
+            //     })
+            // }, 2000)
+        }else{
+            wx.showToast({
+                title   : '请选择结算商品',
+                icon    : 'none'
+            })
+
+            this.setData({
+                bagOrderLoading: false
+            })
+        }
+    },
+    /**
+     * 菜单
+     */
+    actionSheet(e){
+        goodsIndex  = e.currentTarget.dataset.goods
+        sellerIndex = e.currentTarget.dataset.seller
+
+        let goodsList = this.data.bags,
+            cartId    = this.data.bags[sellerIndex].items[goodsIndex].cart_id
+
+        wx.showActionSheet({
+            itemList: ['删除'],
+            success : res=>{
+                wx.showLoading({
+                    title: '加载中',
+                })
+                wx.$api.bag.del(cartId).then(res => {
+                    goodsList[sellerIndex].items.splice([goodsIndex],1)
+                    if (goodsList[sellerIndex].items.length == 0){
+                        goodsList.splice([sellerIndex], 1)
+                    }
+                    this.setData({
+                        bags: goodsList
+                    })
+                    this.totalPrice()
+                    wx.showToast({
+                        title: '已删除'
+                    })
+                })
+            }
+        })
+    },
+})

pages/bag/bag.json

@@ -0,0 +1,4 @@
+{
+    "usingComponents": {},
+    "navigationBarTitleText": "购物车"
+}

pages/bag/bag.wxml

@@ -0,0 +1,63 @@
+
+<view class="content">
+    <!-- 工具栏 -->
+    <view class="bag-header">
+        <view class="bag-header-add-select">
+            <view class="checkbox allCheckbox">
+                <checkbox checked="{{allCheckbox}}" bindtap="allCheckbox"></checkbox>
+            </view>
+            全选
+        </view>
+    </view>
+
+    <!-- 购物袋 -->
+    <view class="bag-content" wx:if="{{bags.length > 0}}">
+        <view class="bag-content-mall" wx:for="{{bags}}" wx:key="bagList" wx:for-item="bagList" wx:for-index="sellerIndex">
+            <view class="bag-content-mall-name nowrap">
+                <view class="checkbox sellerCheckbox">
+                    <checkbox checked="{{bagList.shop.mallState}}" data-seller="{{sellerIndex}}" bindtap="sellerCheckbox"></checkbox>
+                </view>
+                {{ bagList.shop.name }}
+            </view>
+            <view class="bag-content-mall-goods" wx:for="{{bagList.items}}" wx:key="mallGood" wx:for-index="goodsIndex">
+                <view class="checkbox">
+                    <checkbox checked="{{item.state}}" data-seller="{{sellerIndex}}" data-goods="{{goodsIndex}}" bindtap="checkbox"></checkbox>
+                </view>
+                <image class="mall-good-cover" src="{{item.cover}}" mode="aspectFill"></image>
+                <view class="mall-good-content">
+                    <view class="mall-good-title nowrap">{{item.name}}</view>
+                    <view class="mall-good-value nowrap">{{item.sku_name}}</view>
+                    <view class="mall-good-price nowrap">
+                        ￥{{item.price}}
+                        <view class="mall-good-number">
+                            <view class="mall-good-number-btn" data-seller="{{sellerIndex}}" data-goods="{{goodsIndex}}" bindtap="goodsNumber" data-type="remove">-</view>
+                            <input class="mall-good-number-input" data-seller="{{sellerIndex}}" data-goods="{{goodsIndex}}" value="{{item.qty}}" type="number" bindblur="goodsNumberInput"></input>
+                            <view class="mall-good-number-btn" data-seller="{{sellerIndex}}" data-goods="{{goodsIndex}}" bindtap="goodsNumber" data-type="plus">+</view>
+                        </view>
+                    </view>
+                </view>
+                <view class="mall-good-more" bindtap="actionSheet" data-seller="{{sellerIndex}}" data-goods="{{goodsIndex}}">
+                    <image src="/static/icons/bag_more_icon.png" mode="widthFix"></image>
+                </view>
+            </view>
+        </view>
+    </view>
+
+    <!-- 购物袋为空 -->
+    <view class="pack-center pages-hint" wx:else>
+        <image src="/static/icons/null_icon.png"></image>
+        <view>购物袋中暂无任何商品</view>
+    </view>
+
+    <!-- 用户未登录 -->
+    <view class="pack-center pages-loding" wx:if="{{!isUser}}">
+        <view>未登录，无法获取您的购物车信息</view>
+    </view>
+
+    <!-- 结算 -->
+    <view class="bag-footer">
+        <view class="bag-footer-price">合计<text>￥{{allPrice}}</text></view>
+        <view class="bag-footer-rests">共计{{bagNumber}}件,不含运费</view>
+        <button class="bag-footer-btn" size="mini" bindtap="bagOrder" disabled="{{bagOrderLoading}}" loading="{{bagOrderLoading}}">结算</button>
+    </view>
+</view>

pages/bag/bag.wxss

@@ -0,0 +1,108 @@
+
+.content{ background: #f7f8f9; min-height: 100vh; }
+
+ /* 工具栏 */
+.bag-header{ border-bottom: solid 1rpx #f1f1f1; padding: 25rpx 30rpx; overflow: hidden; position: fixed; width: 100%; top: 0; left: 0; box-sizing: border-box; line-height: 40rpx; }
+
+/* 购物车列表 */
+.bag-content{ padding: 90rpx 0 140rpx 0; background: #f7f8f9; }
+.bag-content-mall{ background: white; margin-top: 30rpx; padding-bottom: 20rpx; }
+.bag-content-mall-name{ line-height: 80rpx; padding: 0 30rpx; border-bottom: solid 1rpx #f1f1f1; }
+.bag-content-mall-goods{ position: relative; padding: 20rpx 30rpx 0 30rpx; }
+
+.mall-good-cover{
+    width: 148rpx;
+    height: 148rpx;
+    background: #f5f6fa;
+    vertical-align: top;
+}
+
+.mall-good-content{
+    position: absolute;
+    top: 20rpx;
+    left: 268rpx;
+    right: 96rpx;
+}
+
+.mall-good-value{
+    color: #747788;
+    font-size: 24rpx;
+    line-height: 40rpx;
+}
+
+.mall-good-title{
+    line-height: 40rpx;
+}
+
+.mall-good-price{
+    color: #e92344;
+    padding-top: 20rpx;
+    line-height: 48rpx;
+    font-weight: bold;
+    padding-right: 200rpx;
+    position: relative;
+}
+
+.mall-good-number{
+    display: flex;
+    position: absolute;
+    right: 0;
+    top: 18rpx;
+    width: 180rpx;
+    font-weight: normal;
+    text-align: center;
+    height: 50rpx;
+}
+
+.mall-good-number-btn{
+    width: 50rpx;
+}
+
+.mall-good-number-input{
+    flex: 1;
+    margin: 0 6rpx;
+    height: 50rpx;
+    line-height: 50rpx;
+}
+
+.mall-good-number-input,
+.mall-good-number-btn{
+    background: #f5f6fa;
+    color: #464854;
+}
+
+.mall-good-more{
+    height: 148rpx;
+    line-height: 148rpx;
+    width: 36rpx;
+    padding: 0 30rpx;
+    position: absolute;
+    top: 20rpx;
+    right: 0;
+}
+
+.mall-good-more image{
+    width: 100%;
+    vertical-align: middle;
+}
+
+/* footer */
+.bag-footer{ position: fixed; bottom: 0; left: 0; width: 100%; padding: 20rpx 300rpx 20rpx 30rpx; box-sizing: border-box; border-top: solid 1rpx #f1f1f1; }
+.bag-footer, .bag-header{ background: white; z-index: 9; }
+.bag-footer-price{ font-size: 32rpx; font-weight: bold; }
+.bag-footer-price text{ color: #da2b54; }
+.bag-footer-rests{ color: #747788; font-size: 26rpx; }
+.bag-footer-rests,
+.bag-footer-price{ line-height: 40rpx; }
+.bag-footer-btn[size="mini"]{ position: absolute; right: 30rpx; top: 20rpx; width: 240rpx; height: 80rpx; line-height: 80rpx; border-radius: 40rpx; background: #da2b54; color: white; font-size: 32rpx; }
+.bag-footer-btn::after{ border: none; }
+
+/* checkbox */
+.checkbox{ height: 40rpx; width: 40rpx; line-height: 40rpx; display: inline-block; padding-top: 54rpx; padding-right: 30rpx; }
+.checkbox.sellerCheckbox,
+.checkbox.allCheckbox{ padding-top: 0; }
+.checkbox.allCheckbox{ padding-right: 10rpx; }
+.checkbox checkbox{ vertical-align: top; margin-top: -2rpx; }
+.checkbox checkbox .wx-checkbox-input{ background: white; border-radius: 50%; border:solid 3rpx #464854; height: 34rpx; width: 34rpx; }
+.checkbox checkbox .wx-checkbox-input.wx-checkbox-input-checked{ background: #da2b54; border-color: #da2b54; }
+.checkbox checkbox .wx-checkbox-input.wx-checkbox-input-checked:before{ top: 18rpx; right: 5rpx; color: white; line-height: 34rpx; text-align: center; width: 36rpx; height: 36rpx; font-size:36rpx; }