caimei-applets-caimei/pages/user/pay/card-order.vue

<template>
    <view class="container cashier">
        <tui-skeleton v-if="skeletonShow" backgroundColor="#fafafa" borderRadius="10rpx" :isLoading="true"
            :loadingType="5" />
        <template v-else>
            <cu-custom :navbar-data="nvabarData" @navigateBack="hanldNavigateBack"></cu-custom>
            <view class="container-cash clearfix" :style="{ marginTop: CustomBar + 'px' }">
                <view class="container-wrapper">
                    <view class="pay-content">
                        <view class="pay-top">
                            <view class="pay-paid">
                                <text class="txt-m">待付金额</text>
                                <text class="txt-b"><text class="small">￥</text>{{ obligation | NumFormat }}</text>
                            </view>
                            <view class="pay-payd">
                                <view class="pay-paids">
                                    <text class="txt-m">应付总额</text>
                                    <text class="txt-b">￥{{ payableAmount | NumFormat }}</text>
                                </view>
                                <view class="pay-paids">
                                    <text class="txt-m">已支付金额</text>
                                    <text class="txt-b">￥{{ receiptAmount | NumFormat }}</text>
                                </view>
                            </view>
                        </view>
                        <view class="pay-bot">
                            <view class="bot-title"><text>本次支付金额</text></view>
                            <view class="bot-input">
                                <text>￥</text>
                                <input class="input" type="digit" v-model="payAmount" @focus="focusInput"
                                    @blur="blurInput" placeholder="输入金额不能大于待付金额" placeholder-class="placeholder" />
                            </view>
                            <view class="bot-resid">
                                <text class="bot-resid-le">应付剩余￥{{ balanceAmount | NumFormat }}</text>
                                <text class="bot-resid-ri" @click="hanldeShowPopup(0)">支付记录 <text
                                        class="iconfont icon-xiayibu"></text>
                                </text>
                            </view>
                        </view>
                    </view>
                    <view class="pay-checked">
                        <template v-if="!isBigReaFlag">
                            <template v-if="showQuickpayMode">
                                <view class="pay-card-main" v-if="cardsList.length > 0">
                                    <view class="pay-item-cell" @click="tabClick(3)">
                                        <view class="item-icon">
                                            <image :src="
                            												'https://static.caimei365.com/app/img/pay/icon_' +
                            													defaultCards.bankCode +
                            													'_@2x.png'
                            											"></image>
                                        </view>
                                        <view class="item-texts">{{ defaultCards.bankName }}(
                                            {{ defaultCards.quickPayBankNumber | bankNumeberFilter }} )
                                        </view>
                                        <view class="item-checked">
                                            <text class="iconfont"
                                                :class="[tabCurrentIndex === 3 ? 'icon-yixuanze3' : 'icon-weixuanze']"></text>
                                        </view>
                                    </view>
                                    <view class="pay-item-cell add" @click="hanldeShowPopup(1)">
                                        <view class="item-texts add"><text>查看全部银行卡 / 添加新卡支付</text></view>
                                        <view class="item-checked"> <text class="iconfont icon-xiayibu"></text> </view>
                                    </view>
                                </view>
                                <view class="pay-item" @click="handleAddCard(2)" v-else>
                                    <view class="pay-item-cell">
                                        <view class="item-texts add"><text>添加银行卡快捷付款</text></view>
                                        <view class="item-checked"> <text class="iconfont icon-xiayibu"></text> </view>
                                    </view>
                                </view>
                            </template>
                            <!-- 						<view class="pay-item" @click="tabClick(0)" v-if="showWeChatPayMode">
                            							<view class="pay-item-cell">
                            								<view class="item-icon"><text class="iconfont icon-weixinzhifu"></text></view>
                            								<view class="item-texts"><text>微信支付</text></view>
                            								<view class="item-checked">
                            									<text
                            										class="iconfont"
                            										:class="[tabCurrentIndex === 0 ? 'icon-yixuanze3' : 'icon-weixuanze']"
                            									></text>
                            								</view>
                            							</view>
                            						</view> -->
                            <view class="pay-item" @click="tabClick(1)" v-if="showB2BpayMode">
                                <view class="pay-item-cell">
                                    <view class="item-icon"><text class="iconfont icon-qiyewangyinzhifu"></text></view>
                                    <view class="item-texts"><text>企业网银支付</text></view>
                                    <view class="item-checked">
                                        <text class="iconfont"
                                            :class="[tabCurrentIndex === 1 ? 'icon-yixuanze3' : 'icon-weixuanze']"></text>
                                    </view>
                                </view>
                            </view>
                            <view class="pay-item" @click="tabClick(2)">
                                <view class="pay-item-cell">
                                    <view class="item-icon"><text class="iconfont icon-gerenwangyinzhifu"></text></view>
                                    <view class="item-texts"><text>个人网银支付</text></view>
                                    <view class="item-checked">
                                        <text class="iconfont"
                                            :class="[tabCurrentIndex === 2 ? 'icon-yixuanze3' : 'icon-weixuanze']"></text>
                                    </view>
                                </view>
                            </view>
                        </template>
                        <view class="pay-item" @click="tabClick(4)">
                            <view class="pay-item-cell">
                                <view class="item-icon"><text class="iconfont icon-daewangyinzhuanzhang"></text></view>
                                <view class="item-texts"><text>银联转账支付</text></view>
                                <view class="item-checked">
                                    <text class="iconfont"
                                        :class="[isBigReaFlag || tabCurrentIndex === 4 ? 'icon-yixuanze3' : 'icon-weixuanze']"></text>
                                </view>
                            </view>
                        </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">
                                <view>使用任何一种线上支付方式支付全部金额后，供应商会在24小时后发货（周末、节假日顺延）。</view>
                            </view>
                        </view>
                    </view>
                </view>
                <view class="pay-button" :style="{ paddingBottom: isIphoneX ? '68rpx' : '24rpx' }">
                    <view class="btn" @click.stop="buttonSubMit" :class="isSubLoding ? 'disabled' : ''"
                        :style="{ background: btnColor }">{{
						buttonText
					}}</view>
                </view>
            </view>
        </template>
        <!-- 支付链接弹窗 -->
        <view class="alert spec" v-if="isShowTip">
            <!-- 选择支付弹窗说明 -->
            <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">链接有效期为72小时</view>
                    </view>
                    <view class="text-button" @click.stop="clipboard(payHttpUrl)">复制链接</view>
                </view>
            </view>
        </view>
        <!--大额转账弹窗  -->
        <tui-modal :show="bigPaymodal" :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">注：请使用手机银行app或者网银等转账方式选择转账付款，填写以下信息进行银联转账。(付款成功后系统稍后会更新订单信息)</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>
        <!-- 支付记录 -->
        <cm-record :show="popupShow" :list="discernReceipt" v-if="popupShow" />
        <!-- 选择快捷支付银行 -->
        <cm-cards :show="popupShow1" :list="cardsList" @handleChoiceaCards="handleChoiceaCards"
            @addCards="handleAddCard" v-if="popupShow1" />
        <!-- 弹窗提示 -->
        <tui-modal :show="modal" @click="handleClick" :content="contentModalText" :button="modalButton" color="#333"
            :size="32" shape="circle" :maskClosable="false">
        </tui-modal>
    </view>
</template>

<script>
    import authorize from '@/common/config/authorize.js'
    import thorui from '@/components/clipboard/clipboard.thorui.js'
    import payMixins from '@/mixins/payMixins.js'
    import cardMixins from './mixins/cardMixins.js'
    import cmCards from './components/cm-cards-popup'
    import cmRecord from './components/cm-record-popup'
    export default {
        mixins: [payMixins, cardMixins],
        components: {
            cmRecord,
            cmCards
        },
        data() {
            return {
                skeletonShow: true,
                orderId: 0,
                shopOrderId: 0,
                shopOrderInfo: {},
                payType: '',
                realPay: 0, //应付金额
                payableAmount: 0, // 应付总额
                receiptAmount: 0, // 已付金额
                obligation: 0, //待付金额
                balanceAmount: 0,
                payAmount: 0,
                isBigReaFlag: false, // 判断是否使用过银联转账
                bigPayInfo: { // 银联转账信息
                    bankName: '', // 收款网点
                    bankNumber: '', // 收款账号
                    receiverName: '' // 收款账户名
                },
                nvabarData: {
                    //顶部自定义导航
                    showCapsule: 1, // 是否显示左上角图标  1表示显示  0表示不显示,
                    showSearch: 0,
                    title: '收银台', // 导航栏 中间的标题
                    haveBack: true,
                    textLeft: this.$store.state.isIphone
                },
                idCardList: [],
                isIphoneX: this.$store.state.isIphoneX,
                CustomBar: this.CustomBar, // 顶部导航栏高度
                isShowTip: false,
                discernReceipt: [],
                showDigitKeyboard: false,
                payHttpUrl: '',
                mbOrderId: 0, // 支付记录订单Id
                modal: false,
                bigPaymodal: false,
                contentModalText: '本次支付金额已超出微信支付限额，请输入小于20万的金额。', //操作文字提示语句
                modalButton: [{
                    text: '知道了',
                    customStyle: {
                        color: '#fff',
                        bgColor: 'linear-gradient(90deg, #F28F31 0%, #FF5B00 100%)'
                    },
                    plain: false
                }],
                quickParams: {
                    userId: 0, //机构UserId
                    quickPayBankNumber: '', //快捷支付用户银行卡号/信用卡号
                    quickPayMobile: '', //快捷支付银行卡绑定手机号
                    quickPayBankExpireTime: '', //快捷支付信用卡过期时间,只包含年月，格式yy-MM
                    quickPayUserName: '', //快捷支付用户姓名
                    idCard: '', //身份证号
                    cvvCode: '', //信用卡安全码
                    quickPayFlag: 1,
                    payAmount: 0,
                    shopOrderId: 0
                },
                isSubLoding: false
            }
        },
        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.GetPayOrderInfo()
                this.GetUserClubBanks()
            },
            async GetPayOrderInfo() {
                //初始化支付信息
                try {
                    const { data } = await this.PayService.PayOrderCheckoutShoporders({ shopOrderId: this
                            .shopOrderId })
                    this.discernReceipt = data.discernReceipt // 支付记录
                    this.shopOrderInfo = data.shopOrder // 子订单
                    this.obligation = data.shopOrder.obligation // 待付金额
                    this.orderId = data.shopOrder.orderId // 主订单Id
                    this.receiptAmount = data.shopOrder.receiptAmount // 已付金额
                    this.payableAmount = data.shopOrder.realPay // 应付金额
                    this.payAmount = this.toFixedFn(this.obligation) // 自定义金额
                    this.balanceAmount = this.obligation - this.payAmount // 计算剩余支付金额
                    // 支付方式配置
                    this.checkPayMode(data.onlinePayWays, data.weChatFlag)
                    if (data.bankInfo) {
                        this.bigPayInfo.bankNumber = data.bankInfo.bankNumber
                        this.bigPayInfo.receiverName = data.bankInfo.receiverName
                        this.bigPayInfo.bankName = data.bankInfo.bankName
                        this.tabCurrentIndex = 4
                        this.isBigReaFlag = true
                    }
                    setTimeout(() => {
                        this.skeletonShow = false
                    }, 500)
                } catch (error) {
                    console.log(error)
                }
            },
            async GetUserClubBanks() {
                //获取列表
                try {
                    const user = await this.$api.getStorage()
                    const res = await this.UserService.userClubBanks({ userId: user.userId })
                    this.cardsList = res.data
                    this.defaultCards = this.cardsList[0]
                    this.quickParams.userId = user.userId
                    this.quickParams.shopOrderId = Number(this.shopOrderId)
                    this.quickParams.quickPayBankNumber = this.defaultCards.quickPayBankNumber
                    this.quickParams.quickPayMobile = this.defaultCards.quickPayMobile
                    this.quickParams.quickPayBankExpireTime = this.defaultCards.quickPayBankExpireTime ? this
                        .defaultCards.quickPayBankExpireTime : ''
                    this.quickParams.quickPayUserName = this.defaultCards.quickPayUserName
                    this.quickParams.idCard = this.defaultCards.idCard
                    this.quickParams.cvvCode = this.defaultCards.cvvCode ? this.defaultCards.cvvCode : ''
                } catch (error) {
                    console.log(error)
                }
            },
            handleAddCard(index) {
                //跳转添加卡号支付
                //quickPayFlag 1普通订单 ,payAmount 支付金额，单位元,shopOrderId 子订单Id
                const data = {
                    payData: {
                        quickPayFlag: 1,
                        payAmount: this.payAmount,
                        shopOrderId: Number(this.shopOrderId)
                    },
                    orderId: this.orderId
                }
                this.$api.navigateTo(`/pages/user/pay/card-comfirm?type=${index}&data=${JSON.stringify(data)}`)
            },
            buttonSubMit() {
                if (this.isSubLoding) { return }
                switch (this.tabCurrentIndex) {
                    case 0: // 微信支付
                        this.handleUmTrackEvent('Um_Event_ConfirmWechatPay', '微信支付')
                        this.MiniWxPayFor()
                        break
                    case 1: // 企业网银
                        this.payType = '1'
                        this.handleUmTrackEvent('Um_Event_ConfirmEbankPay', '企业网银')
                        this.handlePayOrderPayLink()
                        break
                    case 2: // 个人网银
                        this.payType = '2'
                        this.handleUmTrackEvent('Um_Event_ConfirmAbankPay', '个人网银')
                        this.handlePayOrderPayLink()
                        break
                    case 3: // 快捷支付
                        this.handleUmTrackEvent('Um_Event_ConfirmAbankPay', '快捷支付')
                        if (!this.quickParams.quickPayBankNumber) {
                            this.$util.msg('请先添加快捷支付银行卡', 2000)
                            return
                        }
                        this.orderPayQuickPay()
                        break
                    case 4: // 银联转账支付
                        this.payType = '2'
                        this.handleUmTrackEvent('Um_Event_ConfirmAbankPay', '银联转账支付')
                        this.handlePayOrderBigPay()
                        break
                }
                this.isSubLoding = true
            },
            handleUmTrackEvent(UmName, UmPageName) {
                // 友盟埋点收集
                if (process.env.NODE_ENV != 'development') {
                    this.$uma.trackEvent(UmName, {
                        Um_Key_PageName: UmPageName,
                        Um_Key_SourcePage: '线上支付',
                        Um_Key_PayName: `${this.buttonText}`,
                        Um_Key_PayOrderID: `${this.shopOrderId}`
                    })
                }
            },
            async orderPayQuickPay() {
                //快捷支付
                try {
                    this.quickParams.payAmount = this.payAmount
                    console.log('payAmount', this.quickParams.payAmount)
                    const res = await this.PayService.orderPayQuickPay(this.quickParams)
                    const data = {
                        params: this.quickParams,
                        payData: res.data,
                        orderId: this.orderId,
                        payAmount: this.payAmount
                    }
                    this.isSubLoding = false
                    this.$api.navigateTo(
                        `/pages/user/pay/card-comfirm-sub?type=3&data=${JSON.stringify(data)}`
                    )
                } catch (error) {
                    this.$util.msg(error.msg, 2000)
                    this.isSubLoding = false
                }
            },
            async handlePayOrderPayLink() {
                // 企业网银  个人网银
                if (this.payAmount == 0) {
                    this.$util.msg('请输入本次支付的金额', 2000)
                    return
                }
                if (this.payAmount <= 10) {
                    this.$util.msg('网银支付的金额必须大于￥10.00', 2000)
                    return
                }
                if (this.payType == '1') {
                    if (this.payAmount != this.obligation) {
                        this.contentModalText = '企业网银支付每次收取的手续费较高，建议一次性全额付款。'
                        this.modal = true
                        return
                    }
                }
                try {
                    const linkParams = {
                        unpaidAmount: this.payAmount,
                        shopOrderId: this.shopOrderId,
                        payType: this.payType
                    }
                    const res = await this.PayService.PayOrderPayLink(linkParams)
                    this.payHttpUrl = res.data
                    this.isSubLoding = false
                    this.isShowTip = true
                    console.log('isShowTip', this.isShowTip)
                } catch (error) {
                    console.log(error)
                    this.isSubLoding = false
                }
            },
            async handlePayOrderBigPay() { // 银联转账支付
                if (this.payAmount * 1 === 0) {
                    this.$util.msg('请输入本次支付的金额', 2000)
                    return
                }
                if (this.payAmount * 1 !== this.obligation) {
                    this.contentModalText = '银联转账支付每次收取的手续费较高，请一次性全额付款。'
                    this.modal = true
                    return
                }
                if (this.isBigReaFlag) {
                    this.bigPaymodal = true
                    this.isSubLoding = false
                } else {
                    this.PayOrderLarge()
                }
            },
            // 调用获取银联转账账号
            async PayOrderLarge() {
                try {
                    const user = await this.$api.getStorage()
                    const params = {
                        payType: 'LARGE',
                        payAmount: this.payAmount,
                        shopOrderId: this.shopOrderId,
                        orderId: this.orderId,
                        userId: user.userId,
                    }
                    const { data } = await this.PayService.PayOrderLarge(params)
                    this.bigPayInfo.bankNumber = data.rt9_largePaymentNo
                    this.bigPayInfo.receiverName = data.rt10_receiverName
                    this.bigPayInfo.bankName = data.rt11_bankName
                    this.bigPaymodal = true
                    console.log('PayInfo', this.bigPayInfo)
                    this.isSubLoding = false
                } catch (error) {
                    console.log(error)
                    this.isSubLoding = false
                }
            },
            async MiniWxPayFor() {
                // 微信支付
                if (this.payAmount > 200000) {
                    this.modal = true
                    return
                }
                if (this.payAmount == 0) {
                    this.$util.msg('请输入本次支付的金额', 2000)
                    return
                }
                if (this.payAmount * 100 < 2) {
                    this.$util.msg('本次支付的金额必须大于￥0.02', 2000)
                    return
                }
                // 获取微信code
                const wechatCode = await authorize.getCode('weixin')
                const params = {
                    payAmount: this.payAmount,
                    payType: 'XCX',
                    code: wechatCode,
                    shopOrderId: this.shopOrderId
                }
                this.weChatMiniOrderWxPay(params)
                this.isSubLoding = false
            },
            // 校验银联转账回调
            async handleBigPayClick() {
                try {
                    const { data } = await this.PayService.PayOrderFindOrderStatus({ mbOrderId: this.mbOrderId })
                    const linkData = {
                        payAmount: this.payAmount,
                        orderId: this.orderId,
                        type: data.status === '1' ? 'success' : 'error'
                    }
                    if (data.status === '1') {
                        this.$api.navigateTo(
                            `/pages/user/order/order-success?data=${JSON.stringify({ data: linkData })}`)
                    } else {
                        this.$api.navigateTo(
                            `/pages/user/order/order-success-tips?data=${JSON.stringify({ data: linkData })}`)
                    }
                } catch (error) {
                    console.log(error)

                }
            },
            // 关闭银联转账信息弹窗
            hideMobel() {
                this.bigPaymodal = false
                this.isSubLoding = false
            },
            handleClick() {
                this.modal = false
                this.isSubLoding = false
            },
            confirmEvent(value) {
                //点击自定义键盘完成的回调函数
                this.chechValue(value)
                this.showDigitKeyboard = false
            },
            blurInput(e) {
                this.chechValue(e.detail.value)
            },
            focusInput() {
                // this.showDigitKeyboard = true
            },
            hideKeyboard() {
                this.showDigitKeyboard = false
            },
            chechValue(value) {
                let patern = /\d+\.\d+/g
                if (value && value.split('.').length > 2) {
                    value = patern.exec(value)
                }
                if (value == '' || value < 0) {
                    this.payAmount = this.quickParams.payAmount = ''
                    this.balanceAmount = this.obligation
                } else if (value > this.obligation) {
                    this.payAmount = this.quickParams.payAmount = this.toFixedFn(this.obligation)
                    this.balanceAmount = this.toFixedFn(this.obligation - this.payAmount)
                } else {
                    this.payAmount = this.quickParams.payAmount = this.toFixedFn(value)
                    this.balanceAmount = this.toFixedFn(this.obligation - this.payAmount)
                }
            },
            hanldNavigateBack() {
                //页面返回
                uni.navigateBack({
                    delta: 1
                })
            },
            hideTips() {
                //隐藏弹窗
                this.isShowTip = false
            },
            toFixedFn(text) {
                //处理小数点后两位数
                return Number(text).toFixed(2)
            },
            copyClipboard() {
                //复制账号
                const data =
                    `收款账户名：${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)
                    }
                })
            },
            clipboard(data) {
                //复制链接
                console.log('data', data)
                thorui.getClipboardData(data, res => {
                    if (res) {
                        this.isShowTip = false
                        this.$util.msg('已复制', 2000)
                        // 友盟埋点收集复制网银链接
                        if (process.env.NODE_ENV != 'development') {
                            this.$uma.trackEvent('Um_Event_CopyUnionPay', {
                                Um_Key_PageName: '网银支付',
                                Um_Key_SourcePage: '线上支付',
                                Um_Key_PayName: `${this.buttonText}`,
                                Um_Key_PayOrderID: `${this.shopOrderId}`
                            })
                        }
                    } else {
                        this.$util.msg('复制失败', 2000)
                    }
                })
            },
            discard() {
                //丢弃
            }
        },
        onShow() {}
    }
</script>

<style lang="scss">
    page {
        height: auto !important;
        background-color: #ffffff;
    }

    .container-cash {
        width: 100%;

        .container-wrapper {
            width: 100%;
            margin: 0 auto;

            .pay-content {
                width: 100%;
                height: 420rpx;
                box-sizing: border-box;
                padding: 64rpx 35rpx 0 35rpx;
                background: url(https://img.caimei365.com/group1/M00/03/BD/Cmis218elN6AY6VeAAqw4n3n4nw186.png) no-repeat;
                background-size: cover;
                float: left;
                position: relative;

                .pay-top {
                    width: 100%;
                    height: auto;
                    float: left;
                    margin-bottom: 44rpx;

                    .pay-paid {
                        width: 100%;
                        height: auto;
                        margin-bottom: 38rpx;

                        text {
                            line-height: 48rpx;
                            text-align: left;
                            color: #ffffff;
                            width: 100%;
                        }

                        .txt-m {
                            font-size: $font-size-26;
                            opacity: 0.7;
                            display: inline-block;
                        }

                        .txt-b {
                            font-size: $font-size-48;
                            display: inline-block;

                            .small {
                                font-size: $font-size-32;
                            }
                        }
                    }

                    .pay-payd {
                        width: 100%;
                        height: auto;

                        .pay-paids {
                            height: auto;
                            float: left;
                            margin-right: 48rpx;

                            text {
                                line-height: 48rpx;
                                text-align: left;
                                color: #ffffff;
                            }

                            .txt-m {
                                width: 100%;
                                display: inline-block;
                                font-size: $font-size-26;
                                opacity: 0.7;
                            }

                            .txt-b {
                                width: 100%;
                                display: inline-block;
                                font-size: $font-size-32;
                            }
                        }
                    }
                }

                .pay-bot {
                    width: 680rpx;
                    height: 240rpx;
                    padding: 24rpx;
                    box-sizing: border-box;
                    background: #ffffff;
                    border-radius: 28rpx;
                    box-shadow: 0 2px 6px rgba(255, 77, 0, 0.17);
                    position: absolute;
                    bottom: -150rpx;
                    left: 35rpx;

                    .bot-title {
                        line-height: 36rpx;
                        font-size: $font-size-26;
                        color: #666666;
                    }

                    .bot-input {
                        width: 100%;
                        height: 66rpx;
                        margin: 15rpx 0;
                        border-bottom: 1px solid #ebebeb;
                        line-height: 66rpx;
                        font-size: $font-size-32;
                        color: $text-color;

                        text {
                            display: block;
                            float: left;
                        }

                        .input {
                            font-size: $font-size-40;
                            width: 500rpx;
                            height: 66rpx;
                            padding: 0 10rpx;
                            line-height: 66rpx;
                            float: left;

                            .none {
                                color: $text-color;
                                opacity: 0.3;
                            }

                            .text {
                                color: $text-color;
                            }
                        }

                        .placeholder {
                            font-size: $font-size-26;
                        }
                    }

                    .bot-resid {
                        line-height: 36rpx;
                        font-size: $font-size-26;
                        margin-top: 24rpx;

                        .bot-resid-le {
                            display: inline-block;
                            float: left;
                            color: $color-system;
                        }

                        .bot-resid-ri {
                            display: inline-block;
                            float: right;
                            color: #1890f9;

                            .iconfont {
                                font-size: 32rpx;
                            }
                        }
                    }
                }
            }

            .pay-checked {
                width: 100%;
                height: auto;
                float: left;
                box-sizing: border-box;
                padding: 0 0 32rpx 0;
                border-top: 1px solid #e1e1e1;
                margin-top: 180rpx;

                .pay-card-main {
                    width: 100%;
                    height: auto;
                    float: left;
                    border-top: 12px solid #f7f7f7;
                    border-bottom: 12px solid #f7f7f7;
                    box-sizing: border-box;
                    padding: 0 32rpx;

                    .pay-item-cell {
                        height: 100rpx;
                        box-sizing: border-box;
                        padding: 26rpx 0;
                        background-color: #ffffff;
                        border-bottom: 1px solid #e1e1e1;

                        &.add {
                            border-bottom: none;
                            padding-left: 66rpx;
                        }

                        .item-icon {
                            width: 48rpx;
                            height: 48rpx;
                            margin-right: 20rpx;
                            float: left;

                            image {
                                width: 48rpx;
                                height: 48rpx;
                                display: block;
                            }
                        }

                        .item-texts {
                            line-height: 48rpx;
                            font-size: $font-size-28;
                            color: $text-color;
                            float: left;

                            &.add {
                                font-weight: bold;
                            }
                        }

                        .item-checked {
                            width: 48rpx;
                            height: 48rpx;
                            float: right;
                            text-align: center;
                            line-height: 48rpx;
                            font-size: $font-size-40;
                            color: #ffffff;

                            .icon-weixuanze {
                                color: #b2b2b2;
                            }

                            .icon-yixuanze3 {
                                color: #ff5b00;
                            }

                            .icon-xiayibu {
                                color: #b2b2b2;
                            }
                        }
                    }
                }

                .pay-item {
                    width: 100%;
                    height: auto;
                    box-sizing: border-box;
                    float: left;
                    padding: 0 32rpx;

                    .pay-item-cell {
                        height: 100rpx;
                        box-sizing: border-box;
                        padding: 26rpx 0;
                        background-color: #ffffff;
                        border-bottom: 1px solid #e1e1e1;

                        .item-icon {
                            width: 48rpx;
                            height: 48rpx;
                            float: left;
                            text-align: center;
                            line-height: 48rpx;
                            margin-right: 20rpx;

                            .iconfont {
                                font-size: 48rpx;
                            }

                            .icon-weixinzhifu {
                                color: #0abc64;
                            }

                            .icon-gerenwangyinzhifu {
                                color: #16afe8;
                            }

                            .icon-qiyewangyinzhifu {
                                color: #007acc;
                            }

                            .icon-daewangyinzhuanzhang {
                                color: #004889;
                                font-size: $font-size-38;
                            }
                        }

                        .item-texts {
                            line-height: 48rpx;
                            font-size: $font-size-28;
                            color: $text-color;
                            float: left;

                            &.add {
                                font-weight: bold;
                            }
                        }

                        .item-checked {
                            width: 48rpx;
                            height: 48rpx;
                            float: right;
                            text-align: center;
                            line-height: 48rpx;
                            font-size: $font-size-40;
                            color: #ffffff;

                            .icon-weixuanze {
                                color: #b2b2b2;
                            }

                            .icon-yixuanze3 {
                                color: #ff5b00;
                            }

                            .icon-xiayibu {
                                color: #b2b2b2;
                            }
                        }
                    }
                }
            }

            .pay-statustext {
                width: 100%;
                height: auto;
                float: left;
                margin-top: 40rpx;
                padding-bottom: 160rpx;

                .pay-statustext-inner {
                    width: 662rpx;
                    height: 80rpx;
                    margin: 0 auto;
                    border: 1px solid #cccccc;
                    padding: 20rpx;
                    border-radius: 8rpx;

                    .pay-icon {
                        width: 62rpx;
                        height: 100%;
                        float: left;
                        text-align: center;

                        .iconfont {
                            color: #999999;
                            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: #999999;
                        text-align: justify;
                    }
                }
            }
        }

        .pay-button {
            width: 600rpx;
            background-color: #ffffff;
            position: fixed;
            height: 88rpx;
            padding: 24rpx 75rpx 0 75rpx;
            bottom: 0;

            .btn {
                width: 100%;
                height: 88rpx;
                border-radius: 44rpx;
                font-size: $font-size-28;
                line-height: 88rpx;
                color: #ffffff;
                margin: 0 auto;
                text-align: center;
                background: $btn-confirm;

                &.disabled {
                    background: #e1e1e1 !important;
                }
            }
        }
    }

    .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;
            }
        }
    }

    .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-top: 40rpx;
        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>