caimei-applets-mcare/pages/user/pay/card-under.vue

<template>
    <view class="container cashier">
        <tui-skeleton
            v-if="skeletonShow"
            backgroundColor="#fafafa"
            borderRadius="10rpx"
            :isLoading="true"
            :loadingType="5"
        ></tui-skeleton>
        <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">{{ payableAmount | NumFormat }}</text>
                    </view>
                </view>
            </view>
            <view class="pay-bring-wrapper clearfix">
                <view class="pay-bring-content">
                    <view class="text-v-title title">
                        <text class="account">转账信息</text>
                        <text
                            class="clipboard"
                            v-if="bankInfo.bankAccountName || bankInfo.bankAccount || bankInfo.bankName"
                            @click.stop="clipboard(clipboardtEXT)"
                        >
                            复制信息
                        </text>
                    </view>
                    <view class="text-v">
                        <text class="label">开户行：</text>
                        {{ bankInfo.bankAccountName || '暂无' }}
                    </view>
                    <view class="text-v">
                        <text class="label">银行卡号：</text>
                        {{ bankInfo.bankAccount || '暂无' }}
                    </view>
                    <view class="text-v">
                        <text class="label">公司名称：</text>
                        {{ bankInfo.bankName || '暂无' }}
                    </view>
                    <view class="text-content">
                        请将订单款项转账至上述账号，转账完成后截图支付凭证，并在订单页面上传支付凭证。
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
const thorui = require('@/components/clipboard/clipboard.thorui.js')
import bankMixins from './mixins/bankMixins.js'

export default {
    mixins: [bankMixins],
    data() {
        return {
            bankInfo: {
                bankAccountName: '江苏银行北京朝阳门支行',
                bankAccount: '32250188000060717',
                name: '联合丽格（北京）医疗美容投资连锁集团股份有限公司'
            },
            clipboardtEXT:
                '开户行：江苏银行北京朝阳门支行，银行卡号：32250188000060717，公司名称：联合丽格（北京）医疗美容投资连锁集团股份有限公司',
            orderId: '',
            shopOrderId: '',
            payableAmount: 0,
            payOrderId: '',
            isIphoneX: this.$store.state.isIphoneX,
            CustomBar: this.CustomBar, // 顶部导航栏高度
            skeletonShow: true,
            productImage: ['https://static.caimei365.com/app/img/icon/icon-vxkecode.png']
        }
    },
    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.shopOrderId = e.shopOrderId
            this.payOrderId = '#' + e.orderId + '#'
            // this.cmGetBankTypeLists()
            this.PayOrderCheckoutCounter(this.shopOrderId)
        },
        async PayOrderCheckoutCounter(shopOrderId) {
            try {
                const { data } = await this.PayService.PayOrderCheckoutCounter({ shopOrderId: shopOrderId })
                this.payableAmount = data.shopOrder.obligation
                const { data: bankData } = await this.PayService.getShopBank({ shopId: data.shopOrder.shopId })
                this.bankInfo = bankData
                this.clipboardtEXT = `开户行：${bankData.bankAccountName}，银行卡号：${
                    bankData.bankAccount
                }，公司名称：${bankData.bankName}`
                setTimeout(() => {
                    this.skeletonShow = false
                }, 500)
            } catch (error) {
                console.log('error', error)
            }
        },
        clipboard(data) {
            thorui.getClipboardData(data, res => {
                if (res) {
                    this.$util.msg('复制成功', 2000, true, 'success')
                } else {
                    this.$util.msg('复制失败', 2000, true, 'none')
                }
            })
        },
        previewImg(index) {
            //顶部商品图片预览
            let previewUrls = this.productImage
            uni.previewImage({
                current: 0, //图片索引
                urls: previewUrls, //必须是http图片，本地图片无效
                longPressActions: ''
            })
        }
    },
    onShow() {}
}
</script>

<style lang="scss">
page {
    height: auto !important;
    background-color: #ffffff;
}
.container-cash {
    width: 100%;
    padding-bottom: 250rpx;
    .pay-bring-title {
        box-sizing: border-box;
        width: 100%;
        min-height: 96rpx;
        padding: 20rpx 24rpx;
        line-height: 48rpx;
        text-align: left;
        font-size: $font-size-24;
        background: rgba(255, 234, 221, 1);
        color: $color-system;
    }
    .container-wrapper {
        width: 662rpx;
        margin: 0 auto;
        .pay-title {
            font-size: $font-size-32;
            line-height: 44rpx;
            text-align: center;
            color: #2a86ff;
            margin: 40rpx 0 0 0;
            width: 100%;
            float: left;
        }
        .pay-content {
            width: 574rpx;
            height: 136rpx;
            padding: 52rpx 44rpx;
            background: url(https://static.caimei365.com/app/mini-mcare/icon/icon_payUnd@2x.png) no-repeat;
            background-size: cover;
            float: left;
            margin-top: 40rpx;
            .pay-p {
                font-size: $font-size-26;
                color: #ffffff;
                line-height: 36rpx;
            }
            .pay-money {
                color: #ffffff;
                line-height: 84rpx;
                font-weight: bold;
                .pay-sm {
                    font-size: 40rpx;
                }
                .pay-bg {
                    font-size: 40rpx;
                }
            }
        }
        .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;
                .pay-item {
                    width: 618rpx;
                    height: 96rpx;
                    border: 2px solid #f5f5f5;
                    border-radius: 30rpx;
                    padding: 20rpx;
                    margin: 24rpx 0;
                    display: flex;
                    background-color: #ffffff;
                    &.current {
                        border-color: $color-system;
                        .item-r {
                            .icon-duigou {
                                color: $color-system;
                            }
                        }
                    }
                    .item-l {
                        flex: 8;
                        .item-icon {
                            width: 96rpx;
                            height: 96rpx;
                            float: left;
                            text-align: center;
                            line-height: 96rpx;
                            margin-right: 20rpx;
                            .iconfont {
                                font-size: 88rpx;
                            }
                            .icon-weixinzhifu {
                                color: #09bb07;
                            }
                            .icon-gerenwangyinzhifu {
                                color: #034582;
                            }
                            .icon-daewangyinzhuanzhang {
                                font-size: 68rpx;
                                color: #034582;
                            }
                            .icon-qiyewangyinzhifu {
                                color: #004889;
                            }
                        }
                        .item-texts {
                            line-height: 96rpx;
                            font-size: $font-size-26;
                            color: $text-color;
                        }
                        .item-text {
                            line-height: 48rpx;
                            font-size: $font-size-26;
                            .txt-p {
                                color: $text-color;
                            }
                            .txt-t {
                                font-size: $font-size-24;
                                color: #999999;
                            }
                        }
                    }
                    .item-r {
                        flex: 2;
                        text-align: center;
                        line-height: 96rpx;
                        .icon-duigou {
                            font-size: 60rpx;
                            color: #ffffff;
                        }
                    }
                }
            }
        }
    }
    .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: auto;
        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-24;
                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: $color-system;
                    line-height: 88rpx;
                }
            }
            .text-title {
            }
            .text-v {
                font-size: $font-size-28;
                color: #4a4f58;
                line-height: 70rpx;
                text-align: left;
                &.bg-color {
                    line-height: 44rpx;
                    color: $color-system;
                }
                .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: 18rpx;
                    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;
            margin-top: 48rpx;
            .text-title {
                width: 100%;
                height: 320rpx;
                margin-bottom: 20rpx;
                image {
                    width: 320rpx;
                    height: 320rpx;
                    display: block;
                    margin: 0 auto;
                }
            }
            .text {
                font-size: $font-size-24;
                color: #666;
                line-height: 44rpx;
                text-align: center;
                &.bg-color {
                    color: $color-system;
                    line-height: 88rpx;
                }
            }
            .text-v {
                font-size: $font-size-28;
                color: #4a4f58;
                line-height: 48rpx;
                text-align: justify;
                margin-bottom: 20rpx;
                .account {
                    color: #333333;
                }
            }
            .text-v-title {
                font-size: $font-size-28;
                color: #4a4f58;
                line-height: 48rpx;
                text-align: justify;
                margin-bottom: 40rpx;
                .account {
                    color: #333333;
                }
                .label {
                    color: #999999;
                }
                &.bg-color {
                    line-height: 44rpx;
                    color: $color-system;
                }
                .clipboard {
                    height: 48rpx;
                    background: #e2e2e2;
                    text-align: center;
                    font-size: $font-size-24;
                    color: #999999;
                    border-radius: 24rpx;
                    line-height: 46rpx;
                    display: inline-block;
                    margin-left: 24rpx;
                    border: 1px solid #f7f7f7;
                    box-sizing: border-box;
                    padding: 0 10px;
                    margin-left: 60rpx;
                }
            }
            .text-content {
                width: 100%;
                background-color: #f5f5f5;
                box-sizing: border-box;
                padding: 24rpx;
                line-height: 44rpx;
                font-size: $font-size-28;
                color: #f94b4b;
                text-align: justify;
                margin-top: 60rpx;
                border-radius: 8rpx;
            }
        }
    }
}
.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;
                line-height: 44rpx;
                font-size: $font-size-26;
                color: #666666;
                text-align: justify;
            }
            .text-p {
                line-height: 44rpx;
                font-size: $font-size-26;
                color: $color-system;
                text-align: left;
            }
        }
    }
}
</style>