增加一个线下支付的按钮

2020-03-04 16:35:29 +08:00 · 2020-03-04 16:35:29 +08:00 · a685888a5b
commit a685888a5b
parent 32f71cd1cc
10 changed files with 272 additions and 10 deletions
--- a/app.json
+++ b/app.json
@ -18,7 +18,8 @@
        "pages/ucenter/order-details/index",
        "pages/ucenter/express-info/index",
        "pages/ucenter/footprint/index",
-        "pages/payResult/payResult"
+        "pages/payResult/payResult",
+        "pages/payOffline/index"
    ],
    "window": {
        "backgroundTextStyle": "light",
--- a/pages/order-check/index.js
+++ b/pages/order-check/index.js
@ -65,8 +65,7 @@ Page({
            this.setData({
                'addressId': addressId
            });
-        } catch (e) {
-        }
+        } catch (e) {}
        this.getCheckoutInfo();
    },
    onPullDownRefresh: function () {
@ -117,8 +116,7 @@ Page({
                wx.setStorageSync('addressId', addressId);
                if (res.data.outStock == 1) {
                    util.showErrorToast('有部分商品缺货或已下架');
-                }
-                else if (res.data.numberChange == 1){
+                } else if (res.data.numberChange == 1) {
                    util.showErrorToast('部分商品库存有变动');
                }
            }
@ -135,13 +133,13 @@ Page({
        let postscript = this.data.postscript;
        let freightPrice = this.data.freightPrice;
        let actualPrice = this.data.actualPrice;
-        let goodsTotalPrice = this.data.goodsTotalPrice;
        util.request(api.OrderSubmit, {
            addressId: addressId,
            postscript: postscript,
            freightPrice: freightPrice,
            formId: formId,
            actualPrice: actualPrice,
+            offlinePay:0
        }, 'POST').then(res => {
            console.log(res);
            if (res.errno === 0) {
@ -161,5 +159,40 @@ Page({
                util.showErrorToast(res.errmsg);
            }
        });
+    },
+    offlineOrder: function (e) {
+        let formId = e.detail.formId;
+        console.log(e)
+        let offlinePay = e.currentTarget.dataset.off;
+        if (this.data.addressId <= 0) {
+            util.showErrorToast('请选择收货地址');
+            return false;
+        }
+        let addressId = this.data.addressId;
+        let postscript = this.data.postscript;
+        let freightPrice = this.data.freightPrice;
+        let actualPrice = this.data.actualPrice;
+        util.request(api.OrderSubmit, {
+            addressId: addressId,
+            postscript: postscript,
+            freightPrice: freightPrice,
+            formId: formId,
+            actualPrice: actualPrice,
+            offlinePay:offlinePay
+        }, 'POST').then(res => {
+            console.log(res);
+            if (res.errno === 0) {
+                wx.removeStorageSync('orderId');
+                wx.setStorageSync('addressId', 0);
+                wx.redirectTo({
+                    url: '/pages/payOffline/index?status=1',
+                })
+            } else {
+                util.showErrorToast(res.errmsg);
+                wx.redirectTo({
+                    url: '/pages/payOffline/index?status=0',
+                })
+            }
+        });
    }
 })
--- a/pages/order-check/index.wxml
+++ b/pages/order-check/index.wxml
@ -55,6 +55,10 @@
            <view class="total">实付：</view>
            <view class="pay-money">¥ {{actualPrice}}</view>
        </view>
-        <button class="to-pay-btn" bindtap='submitOrder'>提交订单</button>
+        <!-- 如果不需要线下支付的这个功能，可将下面这个button注释掉即可 -->
+        <button class="offline-pay-btn" data-off="1" bindtap='offlineOrder'>线下支付</button>
+        <!-- 如果注释了上面的按钮，建议将在线支付改成提交订单 -->
+        <button class="to-pay-btn" bindtap='submitOrder'>在线支付</button>
+        <!-- 提交订单 -->
    </view>
 </view>
--- a/pages/order-check/index.wxss
+++ b/pages/order-check/index.wxss
@ -289,6 +289,24 @@ page {
    background-color: #fff;
 }

+.settle-box .offline-pay-btn {
+    display: block;
+    width: 300rpx;
+    text-align: center;
+    height: 100%;
+    line-height: 100rpx;
+    background: linear-gradient(to right, #111, #000);
+    font-size: 32rpx;
+    color: #fff;
+    border-radius: 0;
+    margin: 0 auto;
+    padding: 0;
+}
+
+.settle-box .offline-pay-btn::after{
+    border: none;
+}
+
 .settle-box .to-pay-btn {
    display: block;
    width: 300rpx;
@ -303,6 +321,10 @@ page {
    padding: 0;
 }

+.settle-box .to-pay-btn::after{
+    border: none;
+}
+
 .settle-box .left-price {
    display: flex;
    width: 500rpx;
--- a/pages/payOffline/index.js
+++ b/pages/payOffline/index.js
@ -0,0 +1,39 @@
+var util = require('../../utils/util.js');
+var api = require('../../config/api.js');
+const pay = require('../../services/pay.js');
+
+var app = getApp();
+Page({
+    data: {
+        status: 0,
+        orderId: 0,
+        is_over:0,
+        productId:0,
+        imageUrl:''
+    },
+    onLoad: function(options) {
+        // 页面初始化 options为页面跳转所带来的参数
+        this.setData({
+            status: options.status
+        })
+    },
+    toOrderListPage: function(event) {
+        wx.switchTab({
+            url: '/pages/ucenter/index/index',
+        });
+    },
+    toIndex: function() {
+        wx.switchTab({
+            url: '/pages/index/index'
+        });
+    },
+    payOrder() {
+        pay.payOrder(parseInt(this.data.orderId)).then(res => {
+            this.setData({
+                status: true
+            });
+        }).catch(res => {
+            util.showErrorToast(res.errmsg);
+        });
+    }
+})
--- a/pages/payOffline/index.json
+++ b/pages/payOffline/index.json
@ -0,0 +1,3 @@
+{
+    "navigationBarTitleText": "付款结果"
+}
--- a/pages/payOffline/index.wxml
+++ b/pages/payOffline/index.wxml
@ -0,0 +1,28 @@
+<view class="container">
+    <view wx:if="{{status == 1}}" class="result-wrap">
+        <view class='image-wrap'>
+            <image src="http://lucky-icon.meiweiyuxian.com/hio/pay-success.png" class="success-img"></image>
+        </view>
+        <view class='text-wrap'>
+            <view class="success-text">订单提交成功</view>
+            <view class="success-text">请线下支付</view>
+        </view>
+        <view class="to-order-btn" bindtap="toIndex">
+            继续逛逛
+        </view>
+        <view class='btn-go-order' bindtap="toOrderListPage">返回我的页面</view>
+    </view>
+    <view wx:else class="result-wrap">
+        <view class='image-wrap'>
+            <image src="http://lucky-icon.meiweiyuxian.com/hio/pay-error.png" class="success-img"></image>
+        </view>
+        <view class='text-wrap'>
+            <view class="text">提交失败</view>
+            <button class='contact-wrap' session-from='{"nickName":"{{userInfo.nickname}}","avatarUrl":"{{userInfo.avatar}}"}'  open-type="contact" session-from="weapp">
+                <view class='contact-icon'></view>
+                <view class='contact'>联系客服</view>
+            </button>
+        </view>
+        <view class='btn-go-order' bindtap="toOrderListPage">返回我的页面</view>
+    </view>
+</view>
--- a/pages/payOffline/index.wxss
+++ b/pages/payOffline/index.wxss
@ -0,0 +1,109 @@
+page {
+    height: 100%;
+    background: #fafafa;
+}
+
+.container {
+    background-color: #fafafa;
+    align-items: flex-start;
+    overflow-x: hidden;
+}
+
+.result-wrap {
+    width: 100%;
+    height: 40%;
+    background: #fff;
+    padding: 40rpx 0 60rpx 0;
+}
+
+.image-wrap {
+    width: 100%;
+    height: 100rpx;
+    margin: 40rpx 0;
+    display: flex;
+    justify-content: center;
+}
+
+.success-img {
+    width: 100rpx;
+    height: 100rpx;
+    margin: 0 auto;
+}
+
+.text-wrap {
+    width: 100%;
+    margin-bottom: 40rpx;
+}
+.success-text {
+    font-size: 30rpx;
+    color: #233445;
+    text-align: center;
+    line-height: 60rpx;
+    margin-bottom: 20rpx;
+}
+.text {
+    font-size: 30rpx;
+    color: #999;
+    text-align: center;
+    line-height: 60rpx;
+    margin-bottom: 20rpx;
+}
+.btn-go-order{
+    color: #999;
+    width: 300rpx;
+    height: 100rpx;
+    line-height: 100rpx;
+    text-align: center;
+    font-size: 28rpx;
+    margin: 0 auto;
+}
+.to-order-btn {
+    color: #fff;
+    background: linear-gradient(to right, #ff3456, #ff347d);
+    border-radius: 0px;
+    width: 300rpx;
+    height: 80rpx;
+    line-height: 80rpx;
+    text-align: center;
+    font-size: 28rpx;
+    margin: 0 auto;
+}
+.tips{
+    display: flex;
+    flex-direction: column;
+}
+.tips .p{
+    width: 100%;
+    text-align: center;
+    line-height: 40rpx;
+    height: 40rpx;
+    font-size: 28rpx;
+    color: #233445;
+}
+.p .time{
+    color: #ff3456;
+}
+
+.contact-wrap{
+    height: 100rpx;
+    line-height: 100rpx;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: none;
+}
+.contact-wrap::after{
+    border: none;
+}
+.contact-wrap .contact-icon{
+    width: 40rpx;
+    height: 40rpx;
+    margin-right: 10rpx;
+    background: url('http://lucky-icon.meiweiyuxian.com/hio/contact.png') no-repeat;
+    background-size: 40rpx auto;
+}
+.contact-wrap .contact{
+    font-size: 28rpx;
+    color: #1296db;
+}
--- a/pages/ucenter/order-list/index.wxml
+++ b/pages/ucenter/order-list/index.wxml
@ -28,7 +28,10 @@
        <view bindtap='toOrderDetails' class='order-list-wrap' data-id="{{item.id}}" wx:for="{{orderList}}" wx:key="id">
            <view class='list-top-wrap'>
                <view class='time'>{{item.add_time}}</view>
-                <view class='status'>{{item.order_status_text}}</view>
+                <view class='status'>
+                    <view class="pay-status" wx:if="{{item.offline_pay}}">线下支付订单</view>
+                    <view class="order-status">{{item.order_status_text}}</view>
+                </view>
            </view>
            <view class="goods-list">
                <view class="a-goods">
--- a/pages/ucenter/order-list/index.wxss
+++ b/pages/ucenter/order-list/index.wxss
@ -36,7 +36,8 @@ page {
    position: relative;
    border-bottom: 3px solid #fff;
 }
-.list-num{
+
+.list-num {
    position: absolute;
    top: -2rpx;
    right: -12rpx;
@ -72,9 +73,11 @@ page {
    text-align: center;
    padding-top: 203rpx;
 }
+
 .show {
    display: block;
 }
+
 .no-order-img {
    width: 100rpx;
    height: 100rpx;
@ -126,6 +129,23 @@ page {
 }

 .list-top-wrap .status {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+}
+
+.list-top-wrap .status .pay-status {
+    color: #fff;
+    border-radius: 8rpx;
+    background: #594d72;
+    height: 30rpx;
+    line-height: 30rpx;
+    padding: 8rpx 20rpx;
+    font-size: 24rpx;
+    margin-right: 20rpx;
+}
+
+.list-top-wrap .status .order-status {
    color: #ff3456;
    font-size: 28rpx;
 }
@ -242,4 +262,4 @@ page {
    font-size: 28rpx;
    margin: 20rpx 0 30rpx 0;
    color: #999;
-}
+}