|
|
@@ -3,9 +3,7 @@
|
|
|
<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-title" v-show="isConfirm">
|
|
|
- <text>订单提交成功，请支付订单</text>
|
|
|
- </view>
|
|
|
+ <view class="pay-title" v-show="isConfirm"><text>订单提交成功，请支付订单</text></view>
|
|
|
<view class="pay-content">
|
|
|
<view class="pay-p"><text>待付金额</text></view>
|
|
|
<view class="pay-money">
|
|
|
@@ -14,10 +12,7 @@
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="pay-check">
|
|
|
- <view class="check-title">
|
|
|
- <view class="text">选择支付方式</view>
|
|
|
- <view class="icon" @click="showTips">i</view>
|
|
|
- </view>
|
|
|
+ <view class="check-title"><view class="text">选择支付方式</view></view>
|
|
|
<view class="pay-checked">
|
|
|
<view class="pay-item" :class="{ 'current' : tabCurrentIndex === 0}" @click="tabClick(0)" >
|
|
|
<view class="item-l">
|
|
|
@@ -46,21 +41,21 @@
|
|
|
<view class="pay-button">
|
|
|
<view class="btn" @click.stop="goOrderCash" :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">客服热线：</view>
|
|
|
- <view class="text-p">0755-22907771 / 15338851365</view>
|
|
|
- <view class="text-p">（周一至周五 09:00-18:00）</view>
|
|
|
- </view>
|
|
|
+ <view class="pay-bring clearfix" :style="{bottom:isIphoneX ? '68rpx' : '24rpx'}" @click.stop="showTips">
|
|
|
+ <view class="pay-bring-line"><text class="line"></text></view>
|
|
|
+ <view class="pay-bring-content" v-if="!isShowTip">
|
|
|
+ <view class="text bg-color">查看转账信息</view>
|
|
|
+ <view class="text">除了以上两种支付方式</view>
|
|
|
+ <view class="text">您还可以通过线下转账的方式付款</view>
|
|
|
+ </view>
|
|
|
+ <view class="pay-bring-content" v-else>
|
|
|
+ <view class="text-v title">转账信息</view>
|
|
|
+ <view class="text-v">开户行：中信银行（深圳泰然支行）</view>
|
|
|
+ <view class="text-v">银行卡号：{{bankNumber}}</view>
|
|
|
+ <view class="text-v">户名：周仁声</view>
|
|
|
+ <view class="text-v">订单标识：{{payOrderId}} <text class="clipboard" @click.stop="clipboard(payOrderId)">复制</text></view>
|
|
|
+ <view class="text-v title">特别注意</view>
|
|
|
+ <view class="text-v bg-color">请在转账备注中填写上述订单标识，方便财务快速审核，提高发货速度</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
@@ -68,6 +63,7 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+ const thorui = require("@/components/clipboard/clipboard.thorui.js")
|
|
|
import { PayOrderCheckoutCounter } from "@/api/order.js"
|
|
|
export default{
|
|
|
data(){
|
|
|
@@ -75,6 +71,8 @@
|
|
|
orderID:'',
|
|
|
payableAmount:0,
|
|
|
emptyWrapperH: '',
|
|
|
+ bankNumber:'6217 6803 0362 0897',
|
|
|
+ payOrderId:'#10226#',
|
|
|
nvabarData: { //顶部自定义导航
|
|
|
showCapsule:1, // 是否显示左上角图标 1表示显示 0表示不显示,
|
|
|
showSearch: 0,
|
|
|
@@ -144,11 +142,22 @@
|
|
|
});
|
|
|
},
|
|
|
showTips(){
|
|
|
- this.isShowTip=true
|
|
|
+ this.isShowTip=!this.isShowTip
|
|
|
},
|
|
|
hideTips(){
|
|
|
this.isShowTip=false
|
|
|
- }
|
|
|
+ },
|
|
|
+ clipboard(data) {
|
|
|
+ thorui.getClipboardData(data, (res) => {
|
|
|
+ // #ifdef H5
|
|
|
+ if (res) {
|
|
|
+ this.$util.msg("复制成功",2000);
|
|
|
+ } else {
|
|
|
+ this.$util.msg("复制失败",2000);
|
|
|
+ }
|
|
|
+ // #endif
|
|
|
+ })
|
|
|
+ },
|
|
|
},
|
|
|
onShow() {
|
|
|
|
|
|
@@ -158,7 +167,8 @@
|
|
|
|
|
|
<style lang="scss">
|
|
|
page{
|
|
|
- height: auto !important;
|
|
|
+ height: 100% !important;
|
|
|
+ background-color: #F7F7F7;
|
|
|
}
|
|
|
.container-cash{
|
|
|
width: 100%;
|
|
|
@@ -239,6 +249,7 @@
|
|
|
padding: 20rpx;
|
|
|
margin: 24rpx 0;
|
|
|
display: flex;
|
|
|
+ background-color: #FFFFFF;
|
|
|
&.current{
|
|
|
border-color:$color-system;
|
|
|
.item-r{
|
|
|
@@ -298,7 +309,7 @@
|
|
|
.pay-button{
|
|
|
width: 100%;
|
|
|
float: left;
|
|
|
- margin-top: 200rpx;
|
|
|
+ margin-top:120rpx;
|
|
|
.btn{
|
|
|
width: 662rpx;
|
|
|
height: 88rpx;
|
|
|
@@ -311,6 +322,71 @@
|
|
|
background:$btn-confirm;
|
|
|
}
|
|
|
}
|
|
|
+ .pay-bring{
|
|
|
+ width: 702rpx;
|
|
|
+ min-height: 190rpx;
|
|
|
+ padding: 24rpx 0;
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ box-shadow:0px 3px 6px rgba(0,0,0,0.16);
|
|
|
+ position: fixed;
|
|
|
+ bottom: 24rpx;
|
|
|
+ left: 24rpx;
|
|
|
+ border-radius: 14rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ flex-direction: column;
|
|
|
+ .pay-bring-line{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .line{
|
|
|
+ display: inline-block;
|
|
|
+ width: 48rpx;
|
|
|
+ height: 2px;
|
|
|
+ background-color: #707070;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .pay-bring-content{
|
|
|
+ width: 654rpx;
|
|
|
+ height: auto;
|
|
|
+ padding: 0 24rpx;
|
|
|
+ .text{
|
|
|
+ font-size: $font-size-24;
|
|
|
+ color: #999;
|
|
|
+ line-height: 44rpx;
|
|
|
+ text-align: center;
|
|
|
+ &.bg-color{
|
|
|
+ color: $color-system;
|
|
|
+ line-height: 88rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .text-v{
|
|
|
+ font-size: $font-size-28;
|
|
|
+ color: #999;
|
|
|
+ line-height: 70rpx;
|
|
|
+ text-align: left;
|
|
|
+ &.title{
|
|
|
+ font-size: $font-size-26;
|
|
|
+ color: #666666;
|
|
|
+ }
|
|
|
+ &.bg-color{
|
|
|
+ line-height: 44rpx;
|
|
|
+ color: $color-system;
|
|
|
+ }
|
|
|
+ .clipboard{
|
|
|
+ width: 84rpx;
|
|
|
+ height: 36rpx;
|
|
|
+ background:linear-gradient(34deg,rgba(255,41,41,1) 0%,rgba(255,109,27,1) 100%);
|
|
|
+ text-align: center;
|
|
|
+ font-size: $font-size-24;
|
|
|
+ color: #FFFFFF;
|
|
|
+ border-radius: 4rpx;
|
|
|
+ line-height: 36rpx;
|
|
|
+ display: inline-block;
|
|
|
+ margin-left: 10rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
.freight-alert{
|
|
|
width: 100%;
|
