[最新]

api/interfaces/bag.js

@@ -35,10 +35,25 @@ const del = cart_id => req({
     method  : "DELETE"
 })
 
+// 购物车确认订单
+const buyCarts = (data) => req({
+    url     : "mall/buy/carts",
+    data
+})
+
+// 购物车下单
+const postCarts = (data) => req({
+    url     : "mall/buy/carts",
+    method  : "POST",
+    data
+})
+
 export default ({
     count,
     add,
     list,
     putNum,
-    del
+    del,
+    buyCarts,
+    postCarts
 })

app.json

@@ -39,7 +39,8 @@
         "pages/refund/deliver/deliver",
         "pages/refund/logs/logs",
         "pages/richText/richText",
-        "pages/bag/bag"
+        "pages/bag/bag",
+        "pages/bag/bagConfirm/bagConfirm"
     ],
     "window": {
         "backgroundTextStyle": "light",
@@ -64,14 +65,14 @@
             {
                 "pagePath": "pages/bag/bag",
                 "text": "购物袋",
-                "iconPath": "/static/tabBarIcon/tabBar_01.png",
+                "iconPath": "/static/tabBarIcon/tabBar_03.png",
-                "selectedIconPath": "/static/tabBarIcon/tabBar_selected_01.png"
+                "selectedIconPath": "/static/tabBarIcon/tabBar_selected_03.png"
             },
             {
                 "pagePath": "pages/user/index",
                 "text": "我的",
-                "iconPath": "/static/tabBarIcon/tabBar_03.png",
+                "iconPath": "/static/tabBarIcon/tabBar_04.png",
-                "selectedIconPath": "/static/tabBarIcon/tabBar_selected_03.png"
+                "selectedIconPath": "/static/tabBarIcon/tabBar_selected_04.png"
             }
         ],
         "color": "#999999",

pages/bag/bag.js

@@ -253,9 +253,9 @@ Page({
             bagOrderLoading:true
         })
         if (this.data.bagId != ''){
-            
+            wx.navigateTo({
-            console.log('提交的数据id:' + this.data.bagId)
+                url: './bagConfirm/bagConfirm?skuId=' + this.data.bagId
-
+            })
             // setTimeout(() => {
             //     this.setData({
             //         bagOrderLoading: false

pages/bag/bag.wxml

@@ -45,7 +45,7 @@
 
     <!-- 购物袋为空 -->
     <view class="pack-center pages-hint" wx:else>
-        <image src="/static/icons/null_icon.png"></image>
+        <image src="/static/icons/carnull_icon.png"></image>
         <view>购物袋中暂无任何商品</view>
     </view>
 
@@ -57,7 +57,7 @@
     <!-- 结算 -->
     <view class="bag-footer">
         <view class="bag-footer-price">合计<text>￥{{allPrice}}</text></view>
-        <view class="bag-footer-rests">共计{{bagNumber}}件,不含运费</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

@@ -1,6 +1,8 @@
 
 .content{ background: #f7f8f9; min-height: 100vh; }
 
+.pack-center {z-index: 9;}
+
  /* 工具栏 */
 .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; }
 

pages/bag/bagConfirm/bagConfirm.js

@@ -0,0 +1,100 @@
+/*
+ * 手太欠
+ * 愿这世界都如故事里一样 美好而动人~
+*/
+
+Page({
+
+    /**
+     * 页面的初始数据
+     */
+    data: {
+        disabled     : true, //按钮
+        skuId        : '',
+        address      : '',   // 地址
+        goodskData   : '',   // 数据
+        amount       : '',   // 商品总金额
+        total        : '',   // 支付金额
+        freight      : '',   // 运费
+        weight       : '',   // 重量
+        distribution : [
+            { type: 0, title: "快递" },
+            { type: 1, title: "自提" },
+        ],
+        distributionIndex: 0
+    },
+
+    /**
+     * 生命周期函数--监听页面加载
+     */
+    onLoad(options) {
+        console.log(options.skuId)
+        this.setData({
+            skuId   : options.skuId
+        })
+
+        // 获取商品下单信息
+        this.placeInfo(options.skuId);
+    },
+
+    /**
+     * 配送方式选择
+     */
+    distributionChange(e){
+        if(e.detail.value === this.data.distributionIndex) return
+        this.setData({
+            distributionIndex: e.detail.value
+        })
+        this.placeInfo(this.data.skuId);
+    },
+    /**
+     * 商品下单信息
+     */
+    placeInfo(skuid, type) {
+        wx.showLoading({
+            title: '加载中...',
+            mask : true
+        })
+        wx.$api.bag.buyCarts({
+            cart_ids     : skuid,
+            address_id   : this.data.address.address_id || '',
+            delivery_type: this.data.distributionIndex
+        }).then(res => {
+            if(type != 'chooseAdd'){
+                this.setData({
+                    address: res.data.address,
+                })
+            }
+            this.setData({
+                goodskData: res.data.detail,
+                amount    : res.data.amount,
+                total     : res.data.total,
+                freight   : res.data.freight,
+                weight    : res.data.weight
+            })
+            wx.hideLoading()
+        })
+    },
+
+    /**
+     * 商品确认下单
+     */
+    buyTap() {
+        wx.showLoading({
+            title: '下单中...',
+            mask : true
+        })
+        wx.$api.bag.postCarts({
+            cart_ids      : this.data.skuId,
+            address_id    : this.data.address.address_id,
+            remark        : '',
+            delivery_type : this.data.distributionIndex
+        }).then(res => {
+            
+            wx.redirectTo({
+                url: '/pages/pay/index?params=' + encodeURIComponent(JSON.stringify(res.data))
+            })
+            wx.hideLoading()
+        }).catch(() =>{}).finally(() => {})
+    },
+})

pages/bag/bagConfirm/bagConfirm.json

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

pages/bag/bagConfirm/bagConfirm.wxml

@@ -0,0 +1,77 @@
+<view class="borderBottom">
+    <!-- 地址 -->
+    <view class="address" wx:if="{{distributionIndex == 0}}">
+        <navigator hover-class="none" url="/pages/site/index?type=goodsAddress&skuid={{skuId}}&qty={{goodsQty}}" class="address-cont" wx:if="{{address}}">
+            <view class="address-top">
+                <view class="address-area">
+                    <image class="address-icon" src="/static/icons/address.png" mode="widthFix"></image>{{address.province.name}}{{address.city.name}}
+                </view>
+                <view class="address-text">{{address.full_address}}</view>
+            </view>
+            <view class="address-name">
+                {{address.name}}<text>{{address.mobile}}</text>
+            </view>
+            <image class="address-arrow" src="/static/icons/orderArrow.png"></image>
+        </navigator>
+        <view class="address-add" wx:else>
+            <navigator hover-class="none" url="/pages/site/index?type=goodsAddress&skuid={{skuId}}&qty={{goodsQty}}" class="address-go">新增收货地址 +</navigator>
+        </view>
+        <image class="address-img" src="/static/imgs/address.png" mode="widthFix"></image>
+    </view>
+
+    <!-- 商品 -->
+    <view class="more-goods" wx:for="{{goodskData}}" wx:key="stockData">
+        <view class="more-name">
+            <image src="/static/icons/shopIcon.png"></image>{{item.shop.name}}
+        </view>
+        <view class="list-goods" wx:for="{{item.items}}" wx:key="items" wx:for-item="items">
+            <image class="list-goods-img" mode="aspectFill" src="{{items.cover ? items.cover : '/static/ls/1.jpg'}}"></image>
+            <view class="list-goods-cont">
+                <view class="nowrap list-goods-name">{{items.title}}</view>
+                <view class="list-goods-text">
+                    <text>购买数量</text> x{{items.qty}}
+                </view>
+                <view class="list-goods-parice">
+                    ￥<text>{{items.price}}</text>
+                </view>
+            </view>
+        </view>
+    </view>
+
+    <!-- 配送方式 -->
+    <view class="label">
+        <view class="label-item">
+            <view class="label-name">配送方式</view>
+            <picker range="{{distribution}}" range-key="title" class="label-picker" value="{{distributionIndex}}" bindchange="distributionChange">
+                <view class="label-picker-val">{{distribution[distributionIndex].title}}<image class="label-picker-icon" src="/static/icons/arrow_more.png"></image>
+                </view>
+            </picker>
+        </view>
+    </view>
+
+    <!-- 规格 -->
+    <view class="label">
+        <view class="label-item" wx:if="{{distributionIndex == 0}}">
+            <view class="label-name">快递</view>
+            <view class="label-text">{{freight == 0 ? '免邮' : '￥' + freight + '元'}}</view>
+        </view>
+        <view class="label-item">
+            <view class="label-name">重量</view>
+            <view class="label-text">{{weight}}g</view>
+        </view>
+        <view class="label-item">
+            <view class="label-name">金额</view>
+            <view class="label-integral">￥{{amount}}</view>
+        </view>
+    </view>
+</view>
+
+<!-- 底部 -->
+<view class="footer">
+    <view class="number">
+        <view class="number-vip">合计：</view>
+        <text>￥</text>
+        <view class="number-price">{{total}}</view>
+    </view>
+    <view class="btn {{disabled ? '': 'active'}}" bindtap="buyTap">立即支付</view>
+</view>

pages/bag/bagConfirm/bagConfirm.wxss

@@ -0,0 +1,317 @@
+page {
+    background-color: #f5f6f8;
+    padding: 30rpx;
+    box-sizing: border-box;
+}
+
+.borderBottom {
+    border-bottom: 110rpx solid transparent;
+}
+
+/* 地址 */
+.address {
+    background-color: #FFFFFF;
+    border-radius: 15rpx;
+    overflow: hidden;
+    position: relative;
+    margin-bottom: 30rpx;
+}
+
+.address-arrow {
+    position: absolute;
+    right: 15rpx;
+    top: 78rpx;
+    width: 50rpx;
+    height: 50rpx;
+}
+
+.address-cont {
+    padding: 30rpx;
+    box-sizing: border-box;
+}
+
+.address-top {
+    width: calc(100% - 80rpx);
+}
+
+.address-area {
+    color: #585866;
+    font-size: 28rpx;
+    display: flex;
+    line-height: 40rpx;
+}
+
+.address-icon {
+    width: 40rpx;
+    margin-right: 20rpx;
+}
+
+.address-text {
+    font-weight: 600;
+    padding: 10px 0;
+}
+
+.address-name text {
+    color: #585866;
+    padding-left: 30rpx;
+}
+
+.address-img {
+    width: 100%;
+    height: 10rpx;
+    display: block;
+}
+
+.address-add {
+    width: 100%;
+    text-align: center;
+    padding: 30rpx 30rpx 0;
+    box-sizing: border-box;
+}
+
+.address-go {
+    display: inline-block;
+    font-size: 28rpx;
+    line-height: 68rpx;
+    border-radius: 10rpx;
+    color: #df723a;
+    padding-bottom: 20rpx;
+}
+
+/* 商品 */
+.more-goods {
+    background-color: #FFFFFF;
+    border-radius: 15rpx;
+}
+
+.more-name {
+    padding: 30rpx 30rpx 0;
+    box-sizing: border-box;
+    font-weight: 600;
+    display: flex;
+    line-height: 38rpx;
+}
+
+.more-name image {
+    width: 38rpx;
+    height: 38rpx;
+    margin-right: 10rpx;
+}
+
+.list-goods {
+    background-color: #FFFFFF;
+    display: flex;
+    padding: 30rpx;
+    border-radius: 15rpx;
+    box-sizing: border-box;
+}
+
+.list-goods-img {
+    width: 184rpx;
+    height: 184rpx;
+    margin-right: 30rpx;
+    border-radius: 10rpx;
+}
+
+.list-goods-cont {
+    width: calc(100% - 214rpx);
+}
+
+.list-goods-name {
+    font-size: 32rpx;
+}
+
+.list-goods-text {
+    line-height: 90rpx;
+    display: flex;
+    font-size: 28rpx;
+    color: #999999;
+}
+
+.list-goods-text text {
+    flex: 1;
+}
+
+.list-goods-parice {
+    font-size: 26rpx;
+}
+
+.list-goods-parice text {
+    font-size: 34rpx;
+}
+
+/* 规格 */
+.label {
+    background-color: #FFFFFF;
+    border-radius: 15rpx;
+    overflow: hidden;
+    box-sizing: border-box;
+    margin-top: 30rpx;
+}
+
+.label-item {
+    display: flex;
+    line-height: 100rpx;
+    color: #585866;
+    font-size: 30rpx;
+    padding: 0 30rpx;
+    box-sizing: border-box;
+    border-bottom: 2rpx solid rgb(243, 243, 243);
+}
+
+.label-item:last-child {
+    border: none;
+}
+
+.label-integral {
+    color: #da2b54;
+    font-weight: 600;
+}
+
+.label-name {
+    flex: 1;
+}
+
+.label-picker{ width: 70%; }
+.label-picker-val{ text-align: right; display: flex; align-items: center; justify-content: flex-end;}
+.label-picker-icon{ width: 24rpx; height:  24rpx; margin-left: 10rpx; }
+
+
+/*checkbox选中后样式  */
+.label-text-checkbox {
+    margin-right: -14rpx;
+    margin-left: 10rpx;
+}
+
+.label-text-checkbox .wx-checkbox-input.wx-checkbox-input-checked {
+    background: #da2b54;
+    border-color: #da2b54;
+}
+  
+.label-text-checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
+    width: 30rpx;
+    height: 30rpx;
+    line-height: 28rpx;
+    text-align: center;
+    font-size: 30rpx;
+    color: #fff;
+    background: transparent;
+    transform: translate(-50%, -50%) scale(1);
+    -webkit-transform: translate(-50%, -50%) scale(1);
+}
+
+.label-price {
+    text-align: right;
+    line-height: 90rpx;
+    font-size: 30rpx;
+    font-weight: 600;
+    padding: 0 30rpx 5rpx;
+    box-sizing: border-box;
+}
+
+.label-price text {
+    font-size: 34rpx;
+    padding: 0 10rpx;
+}
+
+.label-number {
+    display: flex;
+    margin-top: 25rpx;
+    height: 48rpx;
+    border: 2rpx solid #d7d7d7;
+    border-radius: 10rpx;
+}
+
+.number-btn {
+    background-color: transparent;
+    width: 48rpx;
+    height: 48rpx;
+    line-height: 48rpx;
+    text-align: center;
+}
+
+.number-input {
+    width: 80rpx;
+    text-align: center;
+    height: 48rpx;
+    border-left: 2rpx solid #d7d7d7;
+    border-right: 2rpx solid #d7d7d7;
+}
+
+/* 底部 */
+.footer {
+    width: 100%;
+    height: 60px;
+    background-color: #ffffff;
+    position: fixed;
+    left: 0;
+    bottom: 0;
+    z-index: 9;
+    box-sizing: border-box;
+    display: flex;
+}
+
+.number {
+    flex: 1;
+    line-height: 60px;
+    color: #da2b54;
+    display: flex;
+    padding: 0 30rpx;
+    box-sizing: border-box;
+}
+
+.number text {
+    font-size: 28rpx;
+    padding-top: 5rpx;
+}
+
+.number-price {
+    padding: 0 5rpx;
+    font-size: 40rpx;
+}
+
+.number-vip {
+    margin-left: 20rpx;
+    color: #8d97a1;
+    font-size: 28rpx;
+}
+
+.btn {
+    height: 100%;
+    background-color: #da2b54;
+    text-align: center;
+    color: #FFFFFF;
+    padding: 0 70rpx;
+    line-height: 60px;
+}
+
+.btn-disabled {
+    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: 60px;
+    line-height: 60px;
+    background-color: transparent !important;
+}
+
+.btn.active {
+    background-color: #cacaca;
+}
+
+.detailsBrief-back{
+    width: 100%;
+}
+
+.grey {
+    background-color: #f9f9f9;
+    z-index: 99999;
+}

pages/order/details/details.wxml

@@ -30,8 +30,7 @@
             <view class="shopSee-name"><image src="/static/icons/shop.png" mode="widthFix"></image>{{goodsData.shop.name}}</view>
             <view class="shopSee-state reserve-status">{{goodsData.state}}</view>
         </view>
-        <view class="list-goods">
+        <view class="list-goods" wx:for="{{goodsData.items}}" wx:key="items">
-            <block wx:for="{{goodsData.items}}" wx:key="items">
             <image class="list-goods-img" mode="aspectFill" src="{{item.sku.cover}}"></image>
             <view class="list-goods-cont">
                 <view class="nowrap list-goods-name">{{item.sku.goods_name}}</view>
@@ -42,7 +41,6 @@
                     ￥<text>{{item.price}}</text>
                 </view>
             </view>
-            </block>
         </view>
     </view>
     <view class="While reserveCont">
@@ -69,7 +67,7 @@
         </view>
         <view class="reserve-label">
             <view class="reserve-name">订单金额</view>
-            <view class="reserve-text">{{goodsData.amount}}</view>
+            <view class="reserve-text">￥{{goodsData.amount}}</view>
         </view>
         <view class="reserve-label">
             <view class="reserve-name">实付金额</view>

pages/order/index.wxss

@@ -57,6 +57,7 @@ page {
 
 .list-goods {
     display: flex;
+    margin-bottom: 30rpx;
 }
 
 .list-goods-img {

pages/pay/index.js

@@ -14,11 +14,13 @@ Page({
         modelId   : "",
         modelType : "",
         payType   : "",
+        orderNos  : [],
         can       : {
             coin    : 0,
             wechat  : 0,
         },
-        loding    : false
+        loding    : false,
+        noShow    : false
     },
 
     /**
@@ -31,12 +33,13 @@ Page({
             mask : true
         })
         wx.$api.pay.info({ order_id, order_type }).then(res => {
-            let { can, total, model_type, model_id } = res.data
+            let { can, total, model_type, model_id, order_nos } = res.data
             this.setData({
                 orderNo     : order_no,
                 payType     : res.data.default,
                 modelId     : model_id,
                 modelType   : model_type,
+                orderNos    : order_nos,
                 total,
                 can
             })
@@ -108,5 +111,14 @@ Page({
                 })
             }
         })
+    },
+
+    /**
+     * 展开订单号
+     */
+    noTap() {
+        this.setData({
+            noShow: !this.data.noShow
+        })
     }
 })

pages/pay/index.wxml

@@ -3,7 +3,15 @@
     <view class="info">
         <view class="title">实付金额</view>
         <view class="price"><text>￥</text>{{total}}</view>
-        <view class="no">订单号{{orderNo}}</view>
+        <view class="no">
+            <view class="no-title">支付金额包含订单</view>
+            <view class="no-list {{noShow ? 'active' : ''}}">
+                <view class="no-list-item" wx:for="{{orderNos}}" wx:key="order_nos">
+                    <view class="no-list-item">订单号：{{item}}</view>
+                </view>
+            </view>
+            <view class="no-show {{noShow ? 'active' : ''}}" bindtap="noTap" wx:if="{{orderNos.length > 1}}">{{noShow ? '收起' : '展开'}} <image src="/static/icons/arrowWrite.png"></image></view>
+        </view>
     </view>
     <!-- 选择支付方式 -->
     <view class="radio-title">选择支付方式</view>

pages/pay/index.wxss

@@ -1,10 +1,18 @@
 
 .content{ background: white; min-height: 100vh; padding: 0 30rpx; }
-.info{ padding:100rpx 50rpx; text-align: center; border-bottom: solid 1rpx #f7f8f9; }
+.info{ padding:100rpx 20rpx; text-align: center; border-bottom: solid 1rpx #f7f8f9; }
 .title{font-weight: bold; line-height: 40rpx;}
 .price{ font-weight: bold; font-size: 80rpx; padding: 30rpx 0; line-height: 80rpx; }
 .price text{ font-size: 80%; }
-.no{ font-size: 28rpx; color: gray; line-height: 40rpx; }
+.no{ font-size: 26rpx; color: gray; line-height: 40rpx; }
+.no-list {margin-top: 30rpx; background-color: #f7faff; border-radius: 10rpx; padding: 30rpx 10rpx; box-sizing: border-box; height: 100rpx; position: relative; overflow: hidden;}
+.no-list::after {position: absolute; left: calc(50% - 9rpx); top: -18rpx; content: ''; width: 0;height: 0;border-bottom: 18rpx solid #f7faff; border-left: 18rpx solid transparent; border-right: 18rpx solid transparent;}
+.no-list-item {line-height: 40rpx; margin-bottom: 30rpx;}
+.no-list-item:last-child {margin-bottom: 0;}
+.no-list.active {height: auto;}
+.no-show {background-color: #f7faff; color: #000000; display: inline-block; padding: 0 40rpx; line-height: 52rpx; border-radius: 0 0 10rpx 10rpx; font-size: 26rpx;}
+.no-show image {width: 24rpx; height: 24rpx; vertical-align: -4rpx;transform: rotate(270deg); transition: .2s;}
+.no-show.active image {transform: rotate(90deg);}
 
 /* 支付方式 */
 .radio-title{ font-weight: bold; font-size: 30rpx; padding: 30rpx; }