caimei-applets-hehe/pages/user/order/order-payment.vue

<template>
    <view class="container cashier" :style="{ paddingTop: CustomBar + 'px' }">
        <ws-custom
            :systeminfo="systeminfo"
            :navbar-data="nvabarData"
            :headerBtnPosi="headerBtnPosi"
            :isBackType="true"
            :path="'/pages/user/cart/cart'"
        ></ws-custom>
        <template v-if="isPaySwitch">
            <view class="container-cash clearfix">
                <view class="pay-bring-title">线上支付功能正在维护中，请使用线下转账方式支付订单</view>
                <view class="container-wrapper">
                    <view class="pay-content">
                        <view class="pay-p"><text>待付金额</text></view>
                        <view class="pay-money">
                            <text class="pay-sm">￥</text> <text class="pay-bg">{{ showIndexOfMoney }}</text>
                            <text class="pay-sm">{{ smallMoney }}</text>
                        </view>
                    </view>
                </view>
                <view class="pay-bring-wrapper clearfix">
                    <view class="pay-bring-content">
                        <view class="text-v title">转账信息</view>
                        <view class="text-v">开户行：中信银行（深圳泰然支行）</view>
                        <view class="text-v">银行卡号：{{ bankNumber }}</view> <view class="text-v">户名：周仁声</view>
                        <view class="text-v"
                            >订单标识：{{ payOrderId }}
                            <text class="clipboard" @click.stop="clipboard(payOrderId)">复制</text></view
                        >
                        <view class="text-v title">特别注意</view>
                        <view class="text-v bg-color"
                            >请在转账备注中填写上述订单标识，方便财务快速审核，提高发货速度</view
                        >
                    </view>
                </view>
            </view>
        </template>
        <template v-else>
            <view class="container-cash clearfix" v-if="invoiceStatus">
                <view class="pay-bring-title"> <text class="iconfont icon-tongzhi"></text> {{ payBringTitle }} </view>
                <view class="container-wrapper">
                    <view class="pay-content">
                        <view class="pay-p"><text>待付金额</text></view>
                        <view class="pay-money">
                            <text class="pay-sm">￥</text> <text class="pay-bg">{{ showIndexOfMoney }}</text>
                            <text class="pay-sm">{{ smallMoney }}</text>
                        </view>
                    </view>
                </view>
                <view class="pay-bring-wrapper clearfix">
                    <view class="pay-bring-content">
                        <view class="text-v title"><text class="line"></text>转账信息</view>
                        <view class="text-v">开户行：<text class="span">中信银行（深圳泰然支行）</text></view>
                        <view class="text-v"
                            >银行卡号：<text class="span">{{ bankNumber }}</text>
                        </view>
                        <view class="text-v">户名： <text class="span">周仁声</text></view>
                        <!-- 					<view class="text-v">订单标识：{{ payOrderId }} <text class="clipboard" @click.stop="clipboard(payOrderId)">复制</text></view>
						<view class="text-v title">特别注意</view>
						<view class="text-v bg-color">请在转账备注中填写上述订单标识，方便财务快速审核，提高发货速度</view> -->
                    </view>
                </view>
            </view>
            <view class="container-cash clearfix" v-else>
                <view class="container-wrapper">
                    <view class="pay-content">
                        <view class="pay-p"><text>待付金额</text></view>
                        <view class="pay-money">
                            <text class="pay-sm">￥</text> <text class="pay-bg">{{ showIndexOfMoney }}</text>
                            <text class="pay-sm">{{ smallMoney }}</text>
                        </view>
                    </view>
                    <view class="pay-check">
                        <view class="pay-checked">
                            <view
                                class="pay-item"
                                :class="{ current: tabCurrentIndex === 0 }"
                                @click="tabClick(0)"
                                v-if="isUnbindWxPay"
                            >
                                <view class="item-l">
                                    <view class="item-icon"><text class="iconfont icon-weixinzhifu"></text></view>
                                    <view class="item-texts"><text>微信支付</text></view>
                                </view>
                            </view>
                            <view class="pay-item" :class="{ current: tabCurrentIndex === 1 }" @click="tabClick(1)">
                                <view class="item-l">
                                    <view class="item-icon"><text class="iconfont icon-qiyewangyinzhifu"></text></view>
                                    <view class="item-text">
                                        <view class="txt-p">企业网银支付</view>
                                        <view class="txt-t">需要在电脑端汇款</view>
                                    </view>
                                </view>
                            </view>
                            <view class="pay-item" :class="{ current: tabCurrentIndex === 2 }" @click="tabClick(2)">
                                <view class="item-l">
                                    <view class="item-icon"><text class="iconfont icon-gerenwangyinzhifu"></text></view>
                                    <view class="item-text">
                                        <view class="txt-p">个人网银支付</view>
                                        <view class="txt-t">需要在电脑端汇款</view>
                                    </view>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
                <view class="pay-button">
                    <view class="btn" @click.stop="goOrderCash" :style="{ background: btnColor }">{{
                        buttonText
                    }}</view>
                </view>
                <view class="pay-statustext">
                    <view class="pay-statustext-inner">
                        <view class="pay-icon"> <text class="iconfont icon-gantanhao-yuankuang"></text> </view>
                        <view class="pay-text">
                            <text>{{ payStatusText }}</text>
                        </view>
                    </view>
                </view>
                <view
                    class="pay-bring clearfix"
                    :style="{ paddingBottom: isIphoneX ? '68rpx' : '24rpx' }"
                    @click.stop="showTips"
                    v-if="isReceiptStatus"
                >
                    <view class="pay-bring-line"><text class="line"></text></view>
                    <view class="pay-bring-content" v-if="!isShowTip">
                        <view class="text bg-color">查看转账信息</view> <view class="text">除了以上两种支付方式</view>
                        <view class="text">您还可以通过线下转账的方式付款</view>
                    </view>
                    <view class="pay-bring-content" v-else>
                        <view class="text-v title">转账信息</view>
                        <view class="text-v">开户行：中信银行（深圳泰然支行）</view>
                        <view class="text-v">银行卡号：{{ bankNumber }}</view> <view class="text-v">户名：周仁声</view>
                        <view class="text-v"
                            >订单标识：{{ payOrderId }}
                            <text class="clipboard" @click.stop="clipboard(payOrderId)">复制</text></view
                        >
                        <view class="text-v title">特别注意</view>
                        <view class="text-v bg-color"
                            >请在转账备注中填写上述订单标识，方便财务快速审核，提高发货速度</view
                        >
                    </view>
                </view>
            </view>
            <view class="alert spec" :class="specClass" v-if="isHttpUrlShowTip">
                <!-- 选择支付弹窗说明 -->
                <view class="freight-alert" @tap="hideTips">
                    <view class="content">
                        <view class="title">
                            <text>支付链接</text>
                            <text class="iconfont icon-iconfontguanbi" @click.stop="hideTips"></text>
                        </view>
                        <view class="text-content">
                            <view class="text"
                                >请复制以下链接，并发送至电脑端，在浏览器访问该链接并选择银行尽快完成支付</view
                            >
                            <view class="text-p">{{ payHttpUrl }}</view> <view class="text-b">链接有效期为24小时</view>
                        </view>
                        <view class="text-button" @click.stop="clipboard(payHttpUrl)">复制链接</view>
                    </view>
                </view>
            </view>
        </template>
    </view>
</template>

<script>
import thorui from '@/components/clipboard/clipboard.thorui.js'
export default {
    data() {
        return {
            orderID: '',
            payableAmount: 0,
            ableUserMoney: '',
            showIndexOfMoney: '0',
            smallMoney: '.00',
            emptyWrapperH: '',
            bankNumber: '6217 6803 0362 0897',
            payOrderId: '',
            nvabarData: {
                //顶部自定义导航
                haveBack: true,
                showCapsule: 1, // 是否显示左上角图标  1表示显示  0表示不显示,
                title: '选择支付方式', // 导航栏 中间的标题
                textLeft: this.$store.state.isIphone
            },
            headerBtnPosi: this.setHeaderBtnPosi(), //获取设备顶部胶囊高度
            systeminfo: this.setSysteminfo(), //获取设备信息
            isIphoneX: this.$store.state.isIphoneX,
            CustomBar: this.CustomBar, // 顶部导航栏高度
            tabCurrentIndex: 0,
            isShowTip: false,
            isReceiptStatus: false,
            buttonText: '使用微信支付',
            btnColor: '#09BB07',
            receiptStatus: '',
            invoiceStatus: false,
            isPaySwitch: false,
            optionType: '',
            onlinePayFlag: '',
            payBringTitle: '线上支付功能正在维护中，请使用线下转账方式支付订单',
            payStatusText:
                '使用微信和网银支付全部金额后，供应商会在24小时后发货（周末、节假日顺延）。若着急发货，可以选择使用线下转账进行付款。',
            pageType: '',
            payType: '',
            isHttpUrlShowTip: false,
            isUnbindWxPay: true
        }
    },
    onLoad(option) {
        this.initData(option)
    },
    filters: {
        NumFormat(value) {
            if (!value) return '0.00'
            /*原来用的是Number(value).toFixed(0)，这样取整时有问题，例如0.51取整之后为1，感谢Nils指正*/
            /*后来改成了 Number(value)|0,但是输入超过十一位就为负数了，具体见评论 */
            var intPart = Number(value) - (Number(value) % 1) //获取整数部分（这里是windy93的方法）
            var intPartFormat = intPart.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') //将整数部分逢三一断
            var floatPart = '.00' //预定义小数部分
            var value2Array = value.toString().split('.')
            //=2表示数据有小数位
            if (value2Array.length == 2) {
                floatPart = value2Array[1].toString() //拿到小数部分

                if (floatPart.length == 1) {
                    //补0,实际上用不着
                    return intPartFormat + '.' + floatPart + '0'
                } else {
                    return intPartFormat + '.' + floatPart
                }
            } else {
                return intPartFormat + floatPart
            }
        }
    },
    methods: {
        initData(e) {
            this.orderId = e.orderId
            this.payOrderId = '#' + e.orderId + '#'
            this.optionType = e.type
            console.log(this.optionType)
            this.invoiceStatus = true
            this.nvabarData.haveBack = true
            this.nvabarData.haveHome = true
            this.nvabarData.title = '收银台'
            this.initAbleUserMoney(e.money)
        },
        initAbleUserMoney(money) {
            //拆分金额并转千分位格式显示
            if (money == 0) {
                this.showIndexOfMoney = '0'
                this.smallMoney = '.00'
            } else {
                this.ableUserMoney = this.$api.FormatMoney(money)
                let i = this.ableUserMoney.toString().lastIndexOf('.')
                if (i == -1) {
                    this.showIndexOfMoney = this.$api.FormatMoney(this.ableUserMoney)
                    this.smallMoney = '.00'
                } else {
                    this.smallMoney = this.ableUserMoney.toString().substring(i)
                    this.showIndexOfMoney = this.$api.FormatMoney(this.ableUserMoney.toString().substring(0, i))
                    if (this.smallMoney.length == 2) {
                        //补0,实际上用不着
                        this.smallMoney = this.smallMoney + '0'
                    }
                }
                console.log(this.smallMoney)
            }
        },
        hanldNavigateBack() {
            //页面返回
            uni.navigateBack({
                delta: 1
            })
        },
        hideTips() {
            //隐藏弹窗
            this.isHttpUrlShowTip = false
        },
        showTips() {
            this.isShowTip = !this.isShowTip
        },
        clipboard(data) {
            thorui.getClipboardData(data, res => {
                if (res) {
                    this.$util.msg('复制成功', 2000, true, 'success')
                    setTimeout(() => {
                        this.$api.navigateTo(`/pages/user/order/order-details?state=0&orderId=${this.orderId}`)
                    }, 2000)
                } else {
                    this.$util.msg('复制失败', 2000, true, 'none')
                }
            })
        },
        setHeaderBtnPosi() {
            // 获得胶囊按钮位置信息
            let headerBtnPosi = uni.getMenuButtonBoundingClientRect()
            return headerBtnPosi
        },
        setSysteminfo() {
            let systeminfo
            uni.getSystemInfo({
                // 获取设备信息
                success: res => {
                    systeminfo = res
                }
            })
            return systeminfo
        }
    },
    onShow() {}
}
</script>

<style lang="scss">
page {
    height: auto !important;
    background-color: #ffffff;
}
.container-cash {
    width: 100%;
    .pay-bring-title {
        box-sizing: border-box;
        width: 100%;
        min-height: 90rpx;
        padding: 0 24rpx;
        line-height: 90rpx;
        text-align: left;
        font-size: $font-size-24;
        background: #fff3e2;
        color: #ff9723;
        padding-left: 84rpx;
        position: relative;
        .icon-tongzhi {
            width: 60rpx;
            line-height: 90rpx;
            text-align: center;
            display: block;
            position: absolute;
            left: 24rpx;
            top: 0;
            color: #ff9723;
            font-size: 36rpx;
        }
    }
    .container-wrapper {
        width: 100%;
        margin: 0 auto;
        .pay-content {
            width: 100%;
            height: 280rpx;
            background: url(https://static.caimei365.com/app/mini-hehe/icon/icon-user-bg@2x.png) no-repeat;
            background-size: cover;
            float: left;
            box-sizing: border-box;
            padding: 40rpx 84rpx;
            border-bottom: 10px solid #f7f7f7;
            .pay-p {
                font-size: $font-size-26;
                color: #ffffff;
                line-height: 66rpx;
            }
            .pay-money {
                color: #ffffff;
                line-height: 100rpx;
                font-weight: bold;
                .pay-sm {
                    font-size: 42rpx;
                    font-weight: normal;
                }
                .pay-bg {
                    font-size: 64rpx;
                }
            }
        }
        .pay-check {
            width: 100%;
            height: auto;
            float: left;
            .check-title {
                width: 622rpx;
                height: 40rpx;
                line-height: 40rpx;
                padding: 0 20rpx;
                margin-top: 24rpx;
                .text {
                    font-size: $font-size-28;
                    color: $text-color;
                    text-align: left;
                    float: left;
                }
                .icon {
                    width: 40rpx;
                    height: 40rpx;
                    border-radius: 50%;
                    line-height: 40rpx;
                    text-align: center;
                    color: #ffffff;
                    font-size: $font-size-24;
                    background: radial-gradient(
                        circle,
                        rgba(225, 86, 22, 1) 0%,
                        rgba(255, 170, 0, 1) 67%,
                        rgba(249, 185, 156, 1) 100%
                    );
                    float: right;
                }
            }
            .pay-checked {
                width: 100%;
                height: auto;
                box-sizing: border-box;
                padding: 0 24rpx;
                .pay-item {
                    width: 100%;
                    height: 120rpx;
                    border: 1px solid #f5f5f5;
                    border-radius: 8rpx;
                    padding: 20rpx;
                    margin: 24rpx 0;
                    display: flex;
                    background-color: #ffffff;
                    box-sizing: border-box;
                    &.current {
                        border-color: #c4761f;
                    }
                    .item-l {
                        flex: 8;
                        .item-icon {
                            width: 76rpx;
                            height: 76rpx;
                            float: left;
                            text-align: center;
                            line-height: 76rpx;
                            margin-right: 20rpx;
                            .iconfont {
                                font-size: 66rpx;
                            }
                            .icon-weixinzhifu {
                                color: #09bb07;
                            }
                            .icon-gerenwangyinzhifu {
                                color: #034582;
                            }
                            .icon-qiyewangyinzhifu {
                                color: #004889;
                            }
                        }
                        .item-texts {
                            line-height: 76rpx;
                            font-size: $font-size-26;
                            color: $text-color;
                        }
                        .item-text {
                            line-height: 38rpx;
                            font-size: $font-size-26;
                            .txt-p {
                                color: $text-color;
                            }
                            .txt-t {
                                color: #999999;
                            }
                        }
                    }
                }
            }
        }
    }
    .pay-button {
        width: 100%;
        float: left;
        margin-top: 30rpx;
        .btn {
            width: 662rpx;
            height: 88rpx;
            border-radius: 44rpx;
            font-size: $font-size-28;
            line-height: 88rpx;
            color: #ffffff;
            margin: 0 auto;
            text-align: center;
            background: $btn-confirm;
        }
    }
    .pay-statustext {
        width: 100%;
        height: 120rpx;
        float: left;
        margin-top: 40rpx;
        .pay-statustext-inner {
            width: 662rpx;
            height: 100%;
            margin: 0 auto;
            .pay-icon {
                width: 62rpx;
                height: 100%;
                float: left;
                text-align: center;
                .iconfont {
                    color: #ff2a2a;
                    font-size: $font-size-36;
                    line-height: 20rpx;
                }
            }
            .pay-text {
                width: 560rpx;
                height: 100%;
                float: left;
                line-height: 40rpx;
                font-size: $font-size-26;
                color: #ff2a2a;
                text-align: justify;
            }
        }
    }
    .pay-bring {
        width: 100%;
        min-height: 190rpx;
        padding: 24rpx 0;
        background-color: #ffffff;
        box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
        position: fixed;
        bottom: 0;
        left: 0;
        border-radius: 30rpx 30rpx 0 0;
        display: flex;
        align-items: center;
        flex-direction: column;
        .pay-bring-line {
            display: flex;
            align-items: center;
            .line {
                display: inline-block;
                width: 48rpx;
                height: 2px;
                background-color: #707070;
            }
        }
        .pay-bring-content {
            width: 654rpx;
            height: auto;
            padding: 0 24rpx;
            .text {
                font-size: $font-size-24;
                color: #666;
                line-height: 44rpx;
                text-align: center;
                &.bg-color {
                    color: #ff2a2a;
                    line-height: 88rpx;
                }
            }
            .text-v {
                font-size: $font-size-28;
                color: #999;
                line-height: 70rpx;
                text-align: left;
                &.title {
                    padding-left: 10rpx;
                    font-size: $font-size-26;
                    color: #666666;
                }
                &.bg-color {
                    line-height: 44rpx;
                    color: #ff2a2a;
                }
                .clipboard {
                    width: 84rpx;
                    height: 36rpx;
                    background: linear-gradient(34deg, rgba(255, 41, 41, 1) 0%, rgba(255, 109, 27, 1) 100%);
                    text-align: center;
                    font-size: $font-size-24;
                    color: #ffffff;
                    border-radius: 4rpx;
                    line-height: 36rpx;
                    display: inline-block;
                    margin-left: 10rpx;
                }
            }
        }
    }
    .pay-bring-wrapper {
        width: 100%;
        padding: 24rpx 0;
        background-color: #ffffff;
        display: flex;
        align-items: center;
        flex-direction: column;
        .pay-bring-content {
            width: 654rpx;
            height: auto;
            padding: 0 24rpx;
            .text {
                font-size: $font-size-24;
                color: #666;
                line-height: 44rpx;
                text-align: center;
                &.bg-color {
                    color: #ff2a2a;
                    line-height: 88rpx;
                }
            }
            .text-v {
                font-size: $font-size-28;
                color: #999;
                line-height: 70rpx;
                text-align: left;
                .span {
                    color: #333333;
                }
                &.title {
                    font-size: $font-size-28;
                    color: #666666;
                    position: relative;
                    padding-left: 20rpx;
                    font-weight: bold;
                    .line {
                        display: block;
                        width: 6rpx;
                        height: 22rpx;
                        background-color: #ff457b;
                        border-radius: 3rpx;
                        position: absolute;
                        left: 0;
                        top: 26rpx;
                    }
                }
                &.bg-color {
                    line-height: 44rpx;
                    color: #ff2a2a;
                }
                .clipboard {
                    width: 84rpx;
                    height: 36rpx;
                    background: linear-gradient(34deg, rgba(255, 41, 41, 1) 0%, rgba(255, 109, 27, 1) 100%);
                    text-align: center;
                    font-size: $font-size-24;
                    color: #ffffff;
                    border-radius: 4rpx;
                    line-height: 36rpx;
                    display: inline-block;
                    margin-left: 10rpx;
                }
            }
        }
    }
}
.freight-alert {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 8888;
    transition: all 0.4s;
    &.none {
        display: none;
    }
    &.show {
        display: block;
    }
    .content {
        width: 422rpx;
        height: 434rpx;
        position: absolute;
        background: $bg-color;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        margin: auto;
        padding: 20rpx 32rpx;
        border-radius: 12rpx;
        .title {
            width: 100%;
            height: 68rpx;
            line-height: 68rpx;
            font-size: $font-size-28;
            color: $text-color;
            text-align: center;
            position: relative;
            .icon-iconfontguanbi {
                width: 68rpx;
                height: 68rpx;
                text-align: center;
                line-height: 68rpx;
                position: absolute;
                right: 0;
                top: 0;
                font-size: $font-size-36;
                color: #999999;
            }
        }
        .text-content {
            width: 100%;
            height: auto;
            .text {
                padding: 20rpx 0 0 0;
                line-height: 44rpx;
                font-size: $font-size-26;
                color: #666666;
                text-align: justify;
            }
            .text-p {
                width: 100%;
                line-height: 44rpx;
                font-size: $font-size-26;
                color: $color-system;
                text-align: left;
                text-overflow: ellipsis;
                display: -webkit-box;
                word-break: break-all;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 1;
                overflow: hidden;
            }
            .text-b {
                line-height: 44rpx;
                font-size: $font-size-24;
                color: #999999;
                text-align: left;
            }
        }
        .text-button {
            width: 100%;
            height: 88rpx;
            line-height: 88rpx;
            background: $btn-confirm;
            font-size: $font-size-28;
            border-radius: 44rpx;
            color: #ffffff;
            text-align: center;
            margin-top: 20rpx;
        }
    }
}
</style>