|
|
@@ -0,0 +1,881 @@
|
|
|
+<template>
|
|
|
+ <view class="container cashier">
|
|
|
+ <tui-skeleton
|
|
|
+ v-if="skeletonShow"
|
|
|
+ backgroundColor="#fafafa"
|
|
|
+ borderRadius="10rpx"
|
|
|
+ :isLoading="true"
|
|
|
+ :loadingType="5"
|
|
|
+ ></tui-skeleton>
|
|
|
+ <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">
|
|
|
+ <view class="pay-card-main">
|
|
|
+ <view class="pay-item-cell" @click="tabClick(3)">
|
|
|
+ <view class="item-icon"><image :src="handleLogo(cards.B2B)"></image></view>
|
|
|
+ <view class="item-texts"><text>{{ cards.name }}</text></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)">
|
|
|
+ <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>
|
|
|
+ <view class="pay-item" @click="tabClick(0)">
|
|
|
+ <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)">
|
|
|
+ <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>
|
|
|
+ <view class="pay-button" :style="{ paddingBottom: isIphoneX ? '68rpx' : '24rpx' }">
|
|
|
+ <view class="btn" @click.stop="buttonSubMit" :style="{ background: btnColor }">{{
|
|
|
+ buttonText
|
|
|
+ }}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+ <!-- 支付链接弹窗 -->
|
|
|
+ <view class="alert spec" :class="specClass" 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"></cm-record>
|
|
|
+ <!-- 选择快捷支付银行 -->
|
|
|
+ <cm-cards :show="popupShow1" :list="cardsList" @handleChoiceaCards="handleChoiceaCards"></cm-cards>
|
|
|
+ <!-- 弹窗提示 -->
|
|
|
+ <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: 0,
|
|
|
+ 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: '本次支付金额已超出微信支付限额，请输入小于5千的金额。', //操作文字提示语句
|
|
|
+ modalButton: [
|
|
|
+ {
|
|
|
+ text: '知道了',
|
|
|
+ customStyle: {
|
|
|
+ color: '#fff',
|
|
|
+ bgColor: 'linear-gradient(90deg, #F28F31 0%, #FF5B00 100%)'
|
|
|
+ },
|
|
|
+ plain: false
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ cardsList:[]//查看银行列表
|
|
|
+ }
|
|
|
+ },
|
|
|
+ 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.payType = e.type
|
|
|
+ console.log(this.payType)
|
|
|
+ this.shopOrderId = e.shopOrderId
|
|
|
+ this.GetPayOrderInfo()
|
|
|
+ },
|
|
|
+ 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)
|
|
|
+ setTimeout(() => {
|
|
|
+ this.skeletonShow = false
|
|
|
+ }, 500)
|
|
|
+ })
|
|
|
+ .catch(error => {
|
|
|
+ this.$util.msg(error.msg, 2000)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ buttonSubMit() {
|
|
|
+ switch (this.tabCurrentIndex) {
|
|
|
+ case 0: // 微信支付
|
|
|
+ this.handleUmTrackEvent('Um_Event_ConfirmWechatPay','微信支付')
|
|
|
+ this.MiniWxPayFor()
|
|
|
+ break
|
|
|
+ case 1: // 企业网银
|
|
|
+ this.handleUmTrackEvent('Um_Event_ConfirmEbankPay','企业网银')
|
|
|
+ this.BuildCatenate()
|
|
|
+ break
|
|
|
+ case 2: // 个人网银
|
|
|
+ this.handleUmTrackEvent('Um_Event_ConfirmAbankPay','个人网银')
|
|
|
+ this.BuildCatenate()
|
|
|
+ break
|
|
|
+ case 3: // 快捷支付
|
|
|
+ this.handleUmTrackEvent('Um_Event_ConfirmAbankPay','快捷支付')
|
|
|
+ break
|
|
|
+ }
|
|
|
+ },
|
|
|
+ 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}`
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ BuildCatenate() {
|
|
|
+ // 企业网银 个人网银
|
|
|
+ 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.payableAmount) {
|
|
|
+ this.contentModalText = '企业网银支付每次收取的手续费较高，建议一次性全额付款。'
|
|
|
+ this.modal = true
|
|
|
+ return
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.PayService.PayOrderPayLink({
|
|
|
+ unpaidAmount: this.payAmount,
|
|
|
+ shopOrderId: this.shopOrderId,
|
|
|
+ payType: this.payType
|
|
|
+ }).then(response => {
|
|
|
+ this.payHttpUrl = response.data
|
|
|
+ this.isShowTip = true
|
|
|
+ })
|
|
|
+ },
|
|
|
+ async MiniWxPayFor() {
|
|
|
+ // 微信支付
|
|
|
+ if (this.payAmount > 5000) {
|
|
|
+ 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)
|
|
|
+ },
|
|
|
+ handleClick() {
|
|
|
+ this.modal = 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.balanceAmount = this.obligation
|
|
|
+ } else if (value > this.obligation) {
|
|
|
+ this.payAmount = this.toFixedFn(this.obligation)
|
|
|
+ this.balanceAmount = this.toFixedFn(this.obligation - this.payAmount)
|
|
|
+ } else {
|
|
|
+ this.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-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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.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>
|
