购物车

api/index.js

@@ -36,6 +36,9 @@ import withdraw from "./interfaces/withdraw"
 //  售后服务
 import refund from "./interfaces/refund"
 
+// 购物袋
+import bag from "./interfaces/bag"
+
 export default {
     auth,
     bank,
@@ -47,5 +50,6 @@ export default {
     pay,
     idcard,
     withdraw,
-    refund
+    refund,
+    bag
 }

api/interfaces/bag.js

@@ -0,0 +1,44 @@
+/*
+  * 手太欠
+  * 愿这世界都如故事里一样 美好而动人~
+*/
+
+import { req } from "../request"
+
+// 购物车数量
+const count = () => req({
+    url: "mall/carts/count"
+})
+
+// 加入购物车
+const add = data => req({
+    url     : "mall/carts",
+    method  : "POST",
+    data
+})
+
+// 购物车列表
+const list = () => req({
+    url: "mall/carts"
+})
+
+// 购物车数量变更
+const putNum = (cart_id, data) => req({
+    url     : "mall/carts/" + cart_id,
+    method  : "PUT",
+    data
+})
+
+// 删除产品
+const del = cart_id => req({
+    url     : "mall/carts/" + cart_id,
+    method  : "DELETE"
+})
+
+export default ({
+    count,
+    add,
+    list,
+    putNum,
+    del
+})

api/request.js

@@ -7,9 +7,9 @@ import { errInfo } from './err'
 import { updToken } from './updateToken'
 
 // 正式地址
-const api 	 = "https://api.xuanhuojk.com/api/"
+// const api 	 = "https://api.xuanhuojk.com/api/"
 // 测试地址
-// const api 	 = "https://api.xhtest.douhuofalv.com/api/"
+const api 	 = "https://api.xhtest.douhuofalv.com/api/"
 const header = {
 	"Accept"	: "application/json"
 }

app.json

@@ -38,7 +38,8 @@
         "pages/refund/info/info",
         "pages/refund/deliver/deliver",
         "pages/refund/logs/logs",
-        "pages/richText/richText"
+        "pages/richText/richText",
+        "pages/bag/bag"
     ],
     "window": {
         "backgroundTextStyle": "light",
@@ -60,6 +61,12 @@
                 "iconPath": "/static/tabBarIcon/tabBar_01.png",
                 "selectedIconPath": "/static/tabBarIcon/tabBar_selected_01.png"
             },
+            {
+                "pagePath": "pages/bag/bag",
+                "text": "购物袋",
+                "iconPath": "/static/tabBarIcon/tabBar_01.png",
+                "selectedIconPath": "/static/tabBarIcon/tabBar_selected_01.png"
+            },
             {
                 "pagePath": "pages/user/index",
                 "text": "我的",

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; }

pages/mall/details/details.js

@@ -11,20 +11,21 @@ Page({
     data: {
         isFixedTop      : 0,
         barHeight       : getApp().globalData.barHeight,  // 状态栏高度
-        goodsId         : '',  // 商品id
+        goodsId         : '',    // 商品id
-        goodsData       : '',  // 商品数据
+        goodsData       : '',    // 商品数据
-        mallContent     : '',  // 商品详情
+        mallContent     : '',    // 商品详情
-        skus            : [],  // 显示的规格-提交
+        skus            : [],    // 显示的规格-提交
         skuid           : '',
-        specselect      : '',  // 确认购买的规格
+        specselect      : '',    // 确认购买的规格
-        selectSkusValues: '',  // 默认选项
+        selectSkusValues: '',    // 默认选项
-        valueId         : '',  // 选中规格id
+        valueId         : '',    // 选中规格id
-        valueIndex      :  '', // 选中规格下标index
+        valueIndex      :  '',   // 选中规格下标index
         specselectIndex : '',
-        qtyNumber       : 1,  // 产品数量
+        qtyNumber       : 1,     // 产品数量
         goodsSize       : false,
         invite          : '',
-        isParent    : false, // 绑定邀请码
+        isParent        : false, // 绑定邀请码
+        buyType         : null   // 购物方式
     },
 
     /**
@@ -34,7 +35,9 @@ Page({
         this.setData({
             goodsId: options.id,
         })
-        getApp().globalData.invite = options.invite || ''
+        if(getApp().globalData.invite == '' && options.invite){
+            getApp().globalData.invite = options.invite
+        }
     },
 
     /**
@@ -85,8 +88,8 @@ Page({
             mask : true
         })
         wx.request({
-            // url         : 'https://api.xhtest.douhuofalv.com/api/mall/goods/' + this.data.goodsId,
+            url         : 'https://api.xhtest.douhuofalv.com/api/mall/goods/' + this.data.goodsId,
-            url         : 'https://api.xuanhuojk.com/api/mall/goods/' + this.data.goodsId,
+            // url         : 'https://api.xuanhuojk.com/api/mall/goods/' + this.data.goodsId,
             header      : {
                 "Accept"		: "application/json",
                 "channel"       : "client",
@@ -120,21 +123,6 @@ Page({
                 })
             }
         })
-        // wx.$api.mall.goodsSee(this.data.goodsId).then(res => {
-        //     this.setData({
-        //         goodsData       : res.data,
-        //         mallContent     : res.data.content.replace(/\<img/gi, '<img style="max-width:100%;height:auto;display:block;"'),
-        //         skus            : res.data.skus,
-        //         skuid           : res.data.skus[0].sku_id,
-        //         selectSkusValues: res.data.skus[0],
-        //         specselect      : res.data.skus[0].unit.split('|'),
-        //         invite          : res.data.invite
-        //     })
-        // }).catch(err =>{
-        //     console.log(err)
-        // }).finally(() => {
-        //     wx.hideLoading()
-        // })
     },
 
     /**
@@ -228,9 +216,10 @@ Page({
     /**
      * 规格弹出
      */
-    buyPop() {
+    buyPop(e) {
         this.setData({
-            goodsSize: !this.data.goodsSize
+            goodsSize   : !this.data.goodsSize,
+            buyType     : e.currentTarget.dataset.type
         })
     },
 
@@ -239,52 +228,86 @@ Page({
      */
     closeTap() {
         this.setData({
-            goodsSize: false
+            goodsSize: false,
+            buyType  : null
         })
     },
 
     /**
-     * 确认购买
+     * 检查登录状态
      */
     buyTap() {
-        // 获取登录状态
+        let token = wx.getStorageSync("token") || null
-        if(wx.getStorageSync("token") != ''){
+        if(token != null){
-            let {
+            switch (this.data.buyType) {
-                sku_id,
+                case 'card':
-                stock
+                    this.orderCard()
-            } = this.data.selectSkusValues;
+                    break;
-            if (stock > 0) {
+                default:
-                this.setData({
+                    this.orderBuy()
-                    skuid       : sku_id,
+                    break;
-                    goodsSize   : false
-                })
-                // 是否有推荐人
-                if(this.data.goodsData.has_parent) {
-                    wx.navigateTo({
-                        url: '/pages/mall/confirm/confirm?skuId=' + sku_id + '&qty=' + this.data.qtyNumber || 1
-                    })
-                    return
-                }
-                // 显示绑定手机号弹窗
-                this.setData({
-                    isParent: true
-                })
-            } else {
-                uni.showToast({
-                    title: '当前商品库存不足',
-                    icon: 'none',
-                    mask: true,
-                    duration: 2000
-                })
             }
-            
         }else{
-            // 去登录
             wx.navigateTo({
                 url: "/pages/login/index"
             })
         }
     },
+    /**
+     * 立即购买
+     */
+    orderBuy(){
+        let { sku_id, stock } = this.data.selectSkusValues;
+        if (stock > 0) {
+            this.setData({
+                skuid       : sku_id,
+                goodsSize   : false
+            })
+            // 是否有推荐人
+            if(this.data.goodsData.has_parent) {
+                wx.navigateTo({
+                    url: '/pages/mall/confirm/confirm?skuId=' + sku_id + '&qty=' + this.data.qtyNumber || 1
+                })
+                return
+            }
+            // 显示绑定手机号弹窗
+            this.setData({
+                isParent: true
+            })
+        } else {
+            uni.showToast({
+                title: '当前商品库存不足',
+                icon: 'none',
+                mask: true,
+                duration: 2000
+            })
+        }
+    },
+    /**
+     * 加入购物车
+     */
+    orderCard(){
+        let { sku_id, stock } = this.data.selectSkusValues;
+        let qty = this.data.qtyNumber || 1
+        if (stock <= 0) {
+            uni.showToast({
+                title: '当前商品库存不足',
+                icon : 'none',
+            })
+            return
+        }
+        wx.showLoading({
+            title: '加载中...',
+            mask : true
+        })
+        wx.$api.bag.add({ sku_id, qty }).then(res => {
+            wx.showToast({
+                title: "已加入",
+                icon: "success"
+            })
+            this.closeTap()
+        })
+    },
 
     /**
     * 监听页面滑动事件

pages/mall/details/details.wxml

@@ -53,23 +53,23 @@
 
 <!-- 底部 -->
 <view class="footer">
-    <view class="number">
+    <button class="btn-disabled card" size="mini" disabled="{{disabled}}" bindtap="buyPop" data-type="card">加入购物车</button>
-        <text></text><view class="number-price">￥{{goodsData.original_price}}</view>
+    <button class="btn-disabled" size="mini" disabled="{{disabled}}" bindtap="buyPop" data-type="buy">立即购买</button>
-    </view>
-    <button class="btn-disabled" disabled="{{disabled}}" bindtap="buyPop">确认购买</button>
 </view>
 
 <!-- 规格弹出 -->
 <view class="goods-size-back {{goodsSize ? 'active':''}}" bindtap="closeTap"></view>
 <view class="goods-size-content {{goodsSize ? 'active':''}}">
-    <image class="goods-size-close" bindtap="closeTap" src="/static/icons/close.png" mode="widthFix"></image>
+    
-    <view class="goods-size-img">
+    <view class="goods-size-flex">
-        <image src="{{selectSkusValues.cover}}" mode="aspectFill"></image>
+        <image class="goods-size-cover" src="{{selectSkusValues.cover}}" mode="aspectFill"></image>
-    </view>
+        <view class="goods-size-remove" bind:tap="closeTap">
-    <view class="goods-size-info">
+            <image class="goods-size-close" src="/static/icons/close.png" mode="widthFix"></image>
-        <view class="goods-size-info-price nowrap">￥{{selectSkusValues.price}}</view>
+        </view>
-        <view class="goods-size-info-text nowrap" wx:if="{{selectSkusValues.stock > 0}}">剩余库存: {{selectSkusValues.stock}}</view>
+        <view class="goods-size-info">
-        <view class="goods-size-info-text nowrap" wx:else>当前商品库存不足</view>
+            <view class="goods-size-price nowrap"><text>￥</text>{{selectSkusValues.price}}</view>
+            <view class="goods-size-text nowrap">剩余库存: {{selectSkusValues.stock}}</view>
+        </view>
     </view>
     <view class="goods-size-tag" wx:for="{{goodsData.specs}}" wx:key="specs" data-specid="{{item.spec_id}}" wx:for-index="idx">
         <view class="goods-size-title">{{item.name}}</view>
@@ -88,12 +88,13 @@
             <view class="goods-number-btn">+</view>
         </view>
     </view>
-
+    <view class="goods-size-btn">
-    <view class="goods-size-btn" wx:if="{{selectSkusValues.stock == 0}}">
+        <button
-        <view class="active">抱歉，商品库存不足了 ~</view>
+            bindtap="buyTap"
-    </view>
+            size="default"
-    <view class="goods-size-btn" wx:else>
+            disabled="{{selectSkusValues.stock == 0 || qtyNumber == 0}}">
-        <button bindtap="buyTap" size="default" disabled="{{selectSkusValues.stock == 0 || qtyNumber == 0}}">立即购买</button>
+            {{ selectSkusValues.stock == 0 || qtyNumber == 0 ? '库存不足' : '确定'}}
+        </button>
     </view>
 </view>
 

pages/mall/details/details.wxss

@@ -48,7 +48,6 @@ page {
     height: 100%;
 }
 
-/* 产品 */
 /* 产品详情 */
 .goodsCont {
     padding: 30rpx;
@@ -206,82 +205,51 @@ button.goodsInfo-share[size="mini"] {
 /* 底部 */
 .footer {
     width: 100%;
-    height: 60px;
     background-color: #ffffff;
+    border-top-right-radius: 40rpx;
+    border-top-left-radius: 40rpx;
     position: fixed;
     left: 0;
     bottom: 0;
+    padding: 30rpx 20rpx 50rpx;
     z-index: 9;
     box-sizing: border-box;
     display: flex;
 }
 
-.number {
+button.btn-disabled[size="mini"]{ line-height: 90rpx; border-radius: 45rpx; background: #da2b54; color: white; font-size: 30rpx; width: calc(50% - 20rpx); }
-    flex: 1;
+button.btn-disabled.card[size="mini"]{ background: orange; }
-    line-height: 60px;
-    color: #da2b54;
-    display: flex;
-    padding: 0 30rpx;
-    box-sizing: border-box;
-}
-
-.number text {
-    font-size: 28rpx;
-    padding-top: 10rpx;
-}
-
-.number-price {
-    padding: 0 5rpx;
-    font-size: 46rpx;
-}
-
-.number-vip {
-    margin-left: 20rpx;
-    font-size: 26rpx;
-    color: #8d97a1;
-    padding-top: 6rpx;
-    box-sizing: border-box;
-}
-
-.btn-disabled {
-    color: #FFFFFF;
-    line-height: 60px;
-    text-align: center;
-    border: none;
-    border-radius:0;
-    background-color: #da2b54;
-    padding: 0;
-    margin: 0;
-}
-
-button[disabled]{
-    padding: 0;
-    padding: 0;
-    height: 100rpx;
-    line-height: 60px;
-    color: white !important;
-    opacity: .8;
-    background-color: transparent !important;
-}
 
 /* 规格弹出 */
+.goods-size-back { position: fixed; top: 0; left: 0; height: 100%; width: 100%; background: rgba(0, 0, 0, 0.3); z-index: 9; display: none; }
+.goods-size-back.active { display: block; }
+.goods-size-content { position: fixed; bottom: -100%; left: 0; width: 100%; background: white; z-index: 100; transition: all 0.2s; border-radius: 40rpx 40rpx 0 0;}
+.goods-size-content.active { bottom: 0; }
 
-/* 规格 */
 
-.goods-size-back {
+.goods-size-flex{ display: flex; justify-content: space-between; align-items: flex-end; padding: 30rpx; position: relative; }
-    position: fixed;
+.goods-size-cover{ background: #f7f8f9; width: 188rpx; height: 188rpx; border-radius: 20rpx; }
-    top: 0;
+.goods-size-info{ width: calc(100% - 188rpx); padding-left: 30rpx; }
-    left: 0;
+.goods-size-price{ font-size: 44rpx; font-weight: bold; color: #da2b54; line-height: 60rpx; }
-    height: 100%;
+.goods-size-price text{ font-size: 80%; }
-    width: 100%;
+.goods-size-text{ font-size: 28rpx; color: gray; line-height: 50rpx; }
-    background: rgba(0, 0, 0, 0.3);
-    z-index: 9;
-    display: none;
-}
 
-.goods-size-back.active {
+.goods-size-remove{ position: absolute; right: 30rpx; top: 30rpx; padding: 10rpx; }
-    display: block;
+.goods-size-close{ width: 38rpx; height: 38rpx; vertical-align: top; }
-}
+
+.goods-size-tag { padding: 0 30rpx 30rpx; }
+.goods-size-tag-text { background: #f5f6fa; color: #999; line-height: 50rpx; margin: 20rpx 20rpx 0 0; padding: 0 15rpx; display: inline-block; font-size: 24rpx; border-radius: 10rpx; }
+.goods-size-tag-text.active { color: #fff; background: #da2b54; }
+.goods-size-title{ font-weight: bold; line-height: 50rpx; font-size: 30rpx; }
+
+.goods-size-number { color: #747788; display: flex; align-items: center; justify-content: space-between; padding: 30rpx; }
+.goods-number { display: flex; height: 48rpx; border-radius: 10rpx; }
+.goods-number-btn { background-color: #f7f8f9; width: 48rpx; height: 48rpx; line-height: 44rpx; text-align: center; border-radius: 24rpx; font-size: 30rpx; font-weight: bold; }
+.goods-number-input { width: 80rpx; text-align: center; height: 48rpx; }
+
+.goods-size-btn{ padding: 30rpx 30rpx 50rpx; }
+.goods-size-btn button[size="default"]{ background: #da2b54; color: white; line-height: 90rpx; padding: 0; border-radius: 45rpx; width: 100%; margin: 0; }
+/* 
 
 .goods-size-content {
     position: fixed;
@@ -300,9 +268,7 @@ button[disabled]{
     top: 30rpx;
 }
 
-.goods-size-content.active {
+
-    bottom: 0;
-}
 
 .goods-size-img {
     position: absolute;
@@ -353,56 +319,7 @@ button[disabled]{
     font-size: 26rpx;
 }
 
-.goods-size-tag {
-    padding: 0 20rpx 20rpx 20rpx;
-}
 
-.goods-size-tag-text {
-    background: #f5f6fa;
-    color: #999;
-    margin: 20rpx 10rpx 0 10rpx;
-    line-height: 50rpx;
-    padding: 0 15rpx;
-    display: inline-block;
-    font-size: 24rpx;
-    border-radius: 10rpx;
-}
-
-.goods-size-tag-text.active {
-    color: #fff;
-    background: #da2b54;
-}
-
-.goods-size-number {
-    padding: 10rpx 30rpx 80rpx 30rpx;
-    line-height: 60rpx;
-    color: #747788;
-}
-
-.goods-number {
-    display: flex;
-    float: right;
-    margin-top: 25rpx;
-    height: 48rpx;
-    border: 2rpx solid #d7d7d7;
-    border-radius: 10rpx;
-}
-
-.goods-number-btn {
-    background-color: transparent;
-    width: 48rpx;
-    height: 48rpx;
-    line-height: 48rpx;
-    text-align: center;
-}
-
-.goods-number-input {
-    width: 80rpx;
-    text-align: center;
-    height: 48rpx;
-    border-left: 2rpx solid #d7d7d7;
-    border-right: 2rpx solid #d7d7d7;
-}
 
 .goods-size-btn button[size="default"] {
     text-align: center;
@@ -418,7 +335,7 @@ button[disabled]{
 
 .goods-size-btn view.active {
     background: #b8b8b8;
-}
+} */
 
 
 /* 邀请码弹出 */

project.private.config.json

@@ -8,6 +8,13 @@
     "condition": {
         "miniprogram": {
             "list": [
+                {
+                    "name": "购物车",
+                    "pathName": "pages/bag/bag",
+                    "query": "",
+                    "launchMode": "default",
+                    "scene": null
+                },
                 {
                     "name": "朋友圈进入详情",
                     "pathName": "pages/mall/details/details",