|
|
@@ -1,1030 +1,1214 @@
|
|
|
-<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="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>
|
|
|
- </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>
|
|
|
- <!-- 支付记录 -->
|
|
|
- <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,
|
|
|
- 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,
|
|
|
- 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()
|
|
|
- },
|
|
|
- GetPayOrderInfo() {
|
|
|
- //初始化支付信息
|
|
|
- this.PayService.PayOrderCheckoutShoporders({ shopOrderId: this.shopOrderId })
|
|
|
- .then(response => {
|
|
|
- let data = response.data
|
|
|
- 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)
|
|
|
- setTimeout(() => {
|
|
|
- this.skeletonShow = false
|
|
|
- }, 500)
|
|
|
- })
|
|
|
- .catch(error => {
|
|
|
- this.$util.msg(error.msg, 2000)
|
|
|
- })
|
|
|
- },
|
|
|
- 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)
|
|
|
+<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
|
|
|
- }
|
|
|
- this.orderPayQuickPay()
|
|
|
- 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 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
|
|
|
- },
|
|
|
- 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(data) {
|
|
|
- //复制账号
|
|
|
- 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;
|
|
|
- }
|
|
|
- }
|
|
|
- .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: 20rpx 0;
|
|
|
- text-align: center;
|
|
|
- color: #333333;
|
|
|
- border-bottom: 1px solid #e2e7ef;
|
|
|
-}
|
|
|
-.tui-prompt-text {
|
|
|
- padding-top: 20rpx;
|
|
|
- .tui-prompt-tips {
|
|
|
- width: 100%;
|
|
|
- line-height: 36rpx;
|
|
|
- font-size: $font-size-22;
|
|
|
- color: #ff5b00;
|
|
|
- text-align: justify;
|
|
|
- margin-bottom: 24rpx;
|
|
|
- }
|
|
|
- .tui-prompt-item {
|
|
|
- width: 100%;
|
|
|
- line-height: 60rpx;
|
|
|
- color: #333333;
|
|
|
- font-size: $font-size-26;
|
|
|
- .text {
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
- .copy {
|
|
|
- height: 38rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- padding: 0 24rpx;
|
|
|
- text-align: center;
|
|
|
- line-height: 36rpx;
|
|
|
- display: inline-block;
|
|
|
- .iconfont {
|
|
|
- font-size: $font-size-40;
|
|
|
- color: #666666;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-.tui-prompt-flex {
|
|
|
- width: 100%;
|
|
|
- height: auto;
|
|
|
- margin-top: 20rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- padding: 0 35rpx;
|
|
|
- .btn {
|
|
|
- width: 100%;
|
|
|
- line-height: 84rpx;
|
|
|
- font-size: $font-size-26;
|
|
|
- text-align: center;
|
|
|
- color: #ffffff;
|
|
|
- border-radius: 44rpx;
|
|
|
- margin: 20rpx 0;
|
|
|
- &.btn-cancel {
|
|
|
- background: #ffffff;
|
|
|
- color: #333333;
|
|
|
- border: 1px solid #979797;
|
|
|
- }
|
|
|
- &.btn-confirm {
|
|
|
- background: $btn-confirm;
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-</style>
|
|
|
+ }
|
|
|
+ }
|
|
|
+ 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>
|
