|
@@ -0,0 +1,799 @@
|
|
|
+<template>
|
|
|
+ <view class="container cashier" v-show="isRepuest">
|
|
|
+ <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>{{payableAmount | 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>
|
|
|
+ <!-- <view class="input" @click.stop="focusInput">
|
|
|
+ <text class="text" v-if="payAmount>=0">{{payAmount}}</text>
|
|
|
+ <text class="none" v-else>输入金额不能大于待付金额</text>
|
|
|
+ </view> -->
|
|
|
+ <input class="input"
|
|
|
+ type="digit"
|
|
|
+ v-model="payAmount"
|
|
|
+ @focus="focusInput"
|
|
|
+ @blur="blurInput"
|
|
|
+ placeholder="输入金额不能大于待付金额"
|
|
|
+ placeholder-class="placeholder"/>
|
|
|
+ </view>
|
|
|
+ <view class="bot-resid">
|
|
|
+ <text>应付剩余¥{{balanceAmount|NumFormat}}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="pay-record" :style="{paddingBottom:isIphoneX ? '156rpx' : '112rpx'}">
|
|
|
+ <view class="record-title"><text>支付记录</text></view>
|
|
|
+ <view class="record-list">
|
|
|
+ <view class="list-main" v-if="discernReceipt.length>0">
|
|
|
+ <view class="list-item" v-for="(item,index) in discernReceipt" :key="index">
|
|
|
+ <text class="text row-1">¥{{item.receiptAmount | NumFormat}}</text>
|
|
|
+ <text class="text row-2">{{payTypeText(item.payType)}}</text>
|
|
|
+ <text class="text row-3">{{item.receiptDate}}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="list-none" v-else>暂无支付记录</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>
|
|
|
+ <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>
|
|
|
+ <!--大额转账弹窗 -->
|
|
|
+ <tui-modal :show="modal" :padding="'30rpx 30rpx'" @cancel="hideMobel(0)" :custom="true" fadeIn >
|
|
|
+ <view class="tui-modal-custom">
|
|
|
+ <view class="tui-prompt-title">大额银联转账信息</view>
|
|
|
+ <view class="tui-prompt-text">
|
|
|
+ <view class="tui-prompt-tips">请使用银行手机app或者网银输入以下信息进行转账。每次发起支付请求,收款账号都会变化,请使用最新的收款账号进行转账。</view>
|
|
|
+ <view class="tui-prompt-item">
|
|
|
+ <text class="text">户名:</text>
|
|
|
+ {{ bigPayInfo.receiveName }}
|
|
|
+ <view class="copy" @click.stop="copyClipboard(bigPayInfo.receiveName)"><text class="iconfont icon-fuzhi_o"></text></view>
|
|
|
+ </view>
|
|
|
+ <view class="tui-prompt-item">
|
|
|
+ <text class="text">收款账号:</text>
|
|
|
+ {{ bigPayInfo.receiveAccountNo }}
|
|
|
+ <view class="copy" @click.stop="copyClipboard(bigPayInfo.receiveAccountNo)"><text class="iconfont icon-fuzhi_o"></text></view>
|
|
|
+ </view>
|
|
|
+ <view class="tui-prompt-item">
|
|
|
+ <text class="text">银行:</text>
|
|
|
+ {{ bigPayInfo.accountName }}
|
|
|
+ </view>
|
|
|
+ <view class="tui-prompt-item">
|
|
|
+ <text class="text">收款方开户地:</text>
|
|
|
+ {{ bigPayInfo.areaInfo }}
|
|
|
+ </view>
|
|
|
+ <view class="tui-prompt-item">
|
|
|
+ <text class="text">收款网点:</text>
|
|
|
+ {{ bigPayInfo.accountName }}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="tui-prompt-flex">
|
|
|
+ <view class="btn btn-confirm" @click="handleClick">已完成转账,请点击</view>
|
|
|
+ <view class="btn btn-cancel" @click="hideMobel">关闭</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </tui-modal>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import authorize from '@/common/config/authorize.js'
|
|
|
+ import thorui from '@/components/clipboard/clipboard.thorui.js'
|
|
|
+ import wechatPay from '@/utils/mixins/wechatPay.js'
|
|
|
+ export default{
|
|
|
+ mixins: [wechatPay],
|
|
|
+ data(){
|
|
|
+ return{
|
|
|
+ orderId:'',
|
|
|
+ payType:'',
|
|
|
+ payWay:'',
|
|
|
+ isRepuest:false,
|
|
|
+ payableAmount:0,
|
|
|
+ receiptAmount:0,
|
|
|
+ balanceAmount:0,
|
|
|
+ payTotalFee: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,// 顶部导航栏高度
|
|
|
+ tabCurrentIndex:0,
|
|
|
+ isShowTip:false,
|
|
|
+ buttonText:'去支付',
|
|
|
+ btnColor:'#09BB07',
|
|
|
+ discernReceipt:[],
|
|
|
+ showDigitKeyboard:false,
|
|
|
+ payHttpUrl:'',
|
|
|
+ bigPayInfo:{},// 大额网银转账
|
|
|
+ mbOrderId:0, // 支付记录订单Id
|
|
|
+ modal: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.payType = e.type
|
|
|
+ console.log(this.payType)
|
|
|
+ this.orderId = e.orderId
|
|
|
+ switch(this.payType){
|
|
|
+ case '0':
|
|
|
+ this.payWay = 'WEIXIN'
|
|
|
+ this.btnColor='#09BB07'
|
|
|
+ this.buttonText = '去支付'
|
|
|
+ break
|
|
|
+ case '1':
|
|
|
+ this.payWay = 'UNIONPAY'
|
|
|
+ this.btnColor='#034582'
|
|
|
+ this.buttonText = '生成企业网银支付链接'
|
|
|
+ break
|
|
|
+ case '2':
|
|
|
+ this.payWay = 'UNIONPAY'
|
|
|
+ this.btnColor='#034582'
|
|
|
+ this.buttonText = '生成个人网银支付链接'
|
|
|
+ break
|
|
|
+ case '3':
|
|
|
+ this.payWay = 'UNIONPAY'
|
|
|
+ this.btnColor='#034582'
|
|
|
+ this.buttonText = '去转账'
|
|
|
+ break
|
|
|
+ }
|
|
|
+ this.GetPayOrderInfo()
|
|
|
+ },
|
|
|
+ GetPayOrderInfo(){//初始化支付信息
|
|
|
+ this.PayService.PayOrderCheckoutCounter({orderId:this.orderId}).then(response =>{
|
|
|
+ this.isRepuest = true
|
|
|
+ this.discernReceipt = response.data.discernReceipt // 支付记录
|
|
|
+ this.payTotalFee = response.data.order.payTotalFee // 订单总额
|
|
|
+ this.receiptAmount = response.data.order.receiptAmount // 已付金额
|
|
|
+ this.payableAmount = (response.data.order.payableAmount*100 - this.receiptAmount*100)/100// 已付金额
|
|
|
+ this.payAmount = this.toFixedFn(this.payableAmount) // 自定义金额
|
|
|
+ console.log('this.payAmount',this.payAmount)
|
|
|
+ this.balanceAmount = this.payableAmount - this.payAmount // 计算剩余支付金额
|
|
|
+ }).catch(error =>{
|
|
|
+ this.$util.msg(error.msg,2000)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ buttonSubMit(){
|
|
|
+ switch(this.payType){
|
|
|
+ case '0':// 微信支付
|
|
|
+ // 友盟埋点收集微信支付
|
|
|
+ if(process.env.NODE_ENV != 'development'){
|
|
|
+ this.$uma.trackEvent('Um_Event_ConfirmWechatPay', {
|
|
|
+ Um_Key_PageName: '微信支付',
|
|
|
+ Um_Key_SourcePage: '线上支付',
|
|
|
+ Um_Key_PayName:`${this.buttonText}`,
|
|
|
+ Um_Key_PayOrderID:`${this.orderId}`
|
|
|
+ })
|
|
|
+ }
|
|
|
+ this.MiniWxPayFor()
|
|
|
+ break
|
|
|
+ case '1':// 企业网银
|
|
|
+ // 友盟埋点收集企业网银
|
|
|
+ if(process.env.NODE_ENV != 'development'){
|
|
|
+ this.$uma.trackEvent('Um_Event_ConfirmEbankPay', {
|
|
|
+ Um_Key_PageName: '企业网银',
|
|
|
+ Um_Key_SourcePage: '线上支付',
|
|
|
+ Um_Key_PayName:`${this.buttonText}`,
|
|
|
+ Um_Key_PayOrderID:`${this.orderId}`
|
|
|
+ })
|
|
|
+ }
|
|
|
+ this.BuildCatenate()
|
|
|
+ break
|
|
|
+ case '2':// 个人网银
|
|
|
+ // 友盟埋点收集个人网银
|
|
|
+ if(process.env.NODE_ENV != 'development'){
|
|
|
+ this.$uma.trackEvent('Um_Event_ConfirmAbankPay', {
|
|
|
+ Um_Key_PageName: '个人网银',
|
|
|
+ Um_Key_SourcePage: '线上支付',
|
|
|
+ Um_Key_PayName:`${this.buttonText}`,
|
|
|
+ Um_Key_PayOrderID:`${this.orderId}`
|
|
|
+ })
|
|
|
+ }
|
|
|
+ this.BuildCatenate()
|
|
|
+ break
|
|
|
+ case '3':// 大额支付
|
|
|
+ // 友盟埋点收集大额支付
|
|
|
+ if(process.env.NODE_ENV != 'development'){
|
|
|
+ this.$uma.trackEvent('Um_Event_ConfirmBigbankPay', {
|
|
|
+ Um_Key_PageName: '大额支付',
|
|
|
+ Um_Key_SourcePage: '线上支付',
|
|
|
+ Um_Key_PayName:`${this.buttonText}`,
|
|
|
+ Um_Key_PayOrderID:`${this.orderId}`
|
|
|
+ })
|
|
|
+ }
|
|
|
+ this.LargePayment()
|
|
|
+ break
|
|
|
+ }
|
|
|
+ },
|
|
|
+ LargePayment(){// 大额银联
|
|
|
+ if(this.payAmount == 0){
|
|
|
+ this.$util.msg('请输入本次支付的金额',2000)
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if(this.payAmount <=12){
|
|
|
+ this.$util.msg('网银支付的金额必须大于¥12.00',2000)
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.PayService.PayOrderTransferUnion({payAmount:this.accMul(this.payAmount,100),orderId:this.orderId}).then(response =>{
|
|
|
+ this.bigPayInfo = JSON.parse(response.data.data.payInfo)
|
|
|
+ this.mbOrderId = response.data.data.mbOrderId
|
|
|
+ this.modal = true
|
|
|
+ console.log('PayInfo',this.bigPayInfo)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ handleClick(){// 查询是否支付成功
|
|
|
+ this.PayService.PayOrderFindOrderStatus({mbOrderId:this.mbOrderId}).then(response =>{
|
|
|
+ const data = response.data.data
|
|
|
+ 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 })}`)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ hideMobel(){
|
|
|
+ this.modal = false
|
|
|
+ },
|
|
|
+ BuildCatenate(){// 企业网银 个人网银
|
|
|
+ if(this.payAmount == 0){
|
|
|
+ this.$util.msg('请输入本次支付的金额',2000)
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if(this.payAmount <=10){
|
|
|
+ this.$util.msg('网银支付的金额必须大于¥10.00',2000)
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.PayService.PayOrderPayLink({unpaidAmount:this.payAmount,orderId:this.orderId,payType:this.payType}).then(response =>{
|
|
|
+ this.payHttpUrl = response.data
|
|
|
+ this.isShowTip = true
|
|
|
+ })
|
|
|
+ },
|
|
|
+ async MiniWxPayFor(){// 微信支付
|
|
|
+ if(this.payAmount > 5000){
|
|
|
+ this.$util.modal('','本次支付金额已超出微信支付限额,请输入小于5千的金额进行支付','知道了','',false,() =>{})
|
|
|
+ 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,
|
|
|
+ orderId:this.orderId
|
|
|
+ }
|
|
|
+ this.weChatMiniOrderWxPay(params)
|
|
|
+ },
|
|
|
+ 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.payableAmount
|
|
|
+ }else if( value > this.payableAmount){
|
|
|
+ this.payAmount = this.toFixedFn(this.payableAmount)
|
|
|
+ this.balanceAmount = this.toFixedFn(this.payableAmount - this.payAmount)
|
|
|
+ }else{
|
|
|
+ this.payAmount = this.toFixedFn(value)
|
|
|
+ this.balanceAmount = this.toFixedFn(this.payableAmount - this.payAmount)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ hanldNavigateBack(){//页面返回
|
|
|
+ uni.navigateBack({
|
|
|
+ delta: 1
|
|
|
+ })
|
|
|
+ },
|
|
|
+ payTypeText (state){//处理支付记录文字
|
|
|
+ let stateText = '',
|
|
|
+ stateTextObject={
|
|
|
+ 12:'企业网银',
|
|
|
+ 13:'微信支付',
|
|
|
+ 14:'支付宝',
|
|
|
+ 15:'微信支付',
|
|
|
+ 16:'余额抵扣',
|
|
|
+ }
|
|
|
+ Object.keys(stateTextObject).forEach(key => {
|
|
|
+ if(key == state){
|
|
|
+ stateText = stateTextObject[key]
|
|
|
+ }
|
|
|
+ })
|
|
|
+ return stateText
|
|
|
+ },
|
|
|
+ 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.orderId}`
|
|
|
+ })
|
|
|
+ }
|
|
|
+ } 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: 662rpx;
|
|
|
+ height: 420rpx;
|
|
|
+ padding: 64rpx 44rpx 0 44rpx;
|
|
|
+ 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: 614rpx;
|
|
|
+ height: 184rpx;
|
|
|
+ padding: 24rpx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ box-shadow:0 2px 6px rgba(255, 77, 0, .17);
|
|
|
+ position: absolute;
|
|
|
+ bottom: -92rpx;
|
|
|
+ left:44rpx;
|
|
|
+ .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;
|
|
|
+ color: #666666;
|
|
|
+ margin-top: 24rpx;
|
|
|
+ color: $color-system;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .pay-record{
|
|
|
+ float: left;
|
|
|
+ background: #FFFFFF;
|
|
|
+ width: 702rpx;
|
|
|
+ height: auto;
|
|
|
+ padding: 0 24rpx;
|
|
|
+ margin-top: 112rpx;
|
|
|
+ .record-title{
|
|
|
+ width: 100%;
|
|
|
+ float: left;
|
|
|
+ font-size: $font-size-28;
|
|
|
+ color: $text-color;
|
|
|
+ line-height: 80rpx;
|
|
|
+ height: 80rpx;
|
|
|
+ border-bottom: 1px solid #F8F8F8;
|
|
|
+ }
|
|
|
+ .record-list{
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ float: left;
|
|
|
+ .list-none{
|
|
|
+ line-height: 80rpx;
|
|
|
+ font-size: $font-size-26;
|
|
|
+ color: #999999;
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+ .list-main{
|
|
|
+ height: auto;
|
|
|
+ display: flex;
|
|
|
+ flex-direction:column;
|
|
|
+ .list-item{
|
|
|
+ width: 100%;
|
|
|
+ height:80rpx;
|
|
|
+ display: flex;
|
|
|
+ flex: 1;
|
|
|
+ line-height: 80rpx;
|
|
|
+ font-size: $font-size-26;
|
|
|
+ color: $text-color;
|
|
|
+ .text{
|
|
|
+ &.row-1{
|
|
|
+ flex: 3;
|
|
|
+ }
|
|
|
+ &.row-2{
|
|
|
+ flex: 3;
|
|
|
+ }
|
|
|
+ &.row-3{
|
|
|
+ flex: 4;
|
|
|
+ text-align: right;
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .pay-button{
|
|
|
+ width: 100%;
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ position: fixed;
|
|
|
+ height: 88rpx;
|
|
|
+ padding-top: 24rpx;
|
|
|
+ bottom: 0;
|
|
|
+ .btn{
|
|
|
+ width: 702rpx;
|
|
|
+ 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,.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: #E15616;
|
|
|
+ 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>
|