caimei-applets-caimei/pages/seller/order/components/cm-pay-popup.vue

<template name="cm-product-modal">
    <!-- 设备详情可见度弹窗提醒 -->
    <view>
        <!--大额转账弹窗  -->
        <tui-modal :show="showModal" :padding="'30rpx 30rpx'" @cancel="hideMobel" :custom="true" fadeIn>
            <view class="tui-modal-custom">
                <view class="tui-prompt-title">
                    银联转账信息
                    <text class="iconfont icon-iconfontguanbi" @click.stop="hideMobel"></text>
                </view>
                <view class="tui-prompt-text">
                    <view class="tui-prompt-tips">注：请复制以下银联转账信息发送给机构，让机构进行银联转账。(付款成功后系统稍后会更新订单状态)</view>
                    <view class="tui-prompt-item">
                        <text class="text">订单编号：</text>
                        {{ bigPayInfo.orderNo }}({{ bigPayInfo.shopOrderId }})
                    </view>
                    <view class="tui-prompt-item">
                        <text class="text">收款账户名：</text>
                        {{ bigPayInfo.receiverName }}
                    </view>
                    <view class="tui-prompt-item">
                        <text class="text">收款账号：</text>
                        {{ bigPayInfo.bankNumber }}
                    </view>
                    <view class="tui-prompt-item">
                        <text class="text">收款机构：</text>
                        广州合利宝支付科技有限公司({{ bigPayInfo.bankName }})
                    </view>
                </view>
                <view class="tui-prompt-flex">
                    <view class="btn btn-confirm" @click="copyClipboard">
                        <text class="iconfont icon-fuzhi_o"></text>
                        复制账号信息
                    </view>
                </view>
            </view>
        </tui-modal>
    </view>
</template>

<script>
    import { mapState } from 'vuex'
    import thorui from '@/components/clipboard/clipboard.thorui.js'
    export default {
        name: 'cm-pay-modal',
        props: {
            showModal: {
                type: Boolean,
                default: false
            },
            payInfo: {
                type: Object
            }
        },
        data() {
            return {
                bigPayInfo: {},
            }
        },
        computed: {
            ...mapState(['hasLogin'])
        },
        created() {
            this.initModal()
        },
        methods: {
            initModal() {
                this.bigPayInfo = this.payInfo
            },
            copyClipboard() {
                //复制账号
                const data =
                    `订单编号：${ this.bigPayInfo.orderNo }(${ this.bigPayInfo.shopOrderId })\n收款账户名：${this.bigPayInfo.receiverName}\n收款账号：${this.bigPayInfo.bankNumber}\n收款机构：广州合利宝支付科技有限公司(${ this.bigPayInfo.bankName })`
                thorui.getClipboardData(data, res => {
                    if (res) {
                        this.$util.msg('已复制', 2000)
                    } else {
                        this.$util.msg('复制失败', 2000)
                    }
                })
            },
            hideMobel() {
                this.$parent.isBigPayModal = false
            }
        }
    }
</script>

<style lang="scss">
    .tui-prompt-title {
        width: 100%;
        height: 44rpx;
        line-height: 44rpx;
        padding: 10rpx 0;
        text-align: center;
        color: #333333;
        font-weight: 600;
        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;
        }
    }

    .tui-prompt-text {
        padding-top: 20rpx;

        .tui-prompt-tips {
            width: 100%;
            line-height: 36rpx;
            font-size: $font-size-26;
            color: #ff5b00;
            text-align: justify;
            margin-bottom: 30rpx;
        }

        .tui-prompt-item {
            width: 100%;
            line-height: 60rpx;
            color: #333333;
            font-size: $font-size-28;
            position: relative;

            .text {
                font-weight: bold;
            }
        }
    }

    .tui-prompt-flex {
        width: 100%;
        height: auto;
        margin: 40rpx 0 20rpx 0;
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        align-items: center;

        .btn {
            padding: 0 44rpx;
            line-height: 66rpx;
            font-size: $font-size-26;
            text-align: center;
            color: #ffffff;
            border-radius: 40rpx;
            box-sizing: border-box;
            margin-left: 12rpx;

            &.btn-cancel {
                background: #ffffff;
                color: #333333;
                border: 1px solid #979797;
            }

            &.btn-confirm {
                background: #ffffff;
                color: #333333;
                border: 1px solid #979797;
            }
        }
    }
</style>