order-payment.vue 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620
  1. <template>
  2. <view class="container cashier" :style="{paddingTop:CustomBar+'px'}">
  3. <cu-custom :navbar-data='nvabarData' @navigateBack="hanldNavigateBack"></cu-custom>
  4. <view class="container-cash clearfix" v-if="invoiceStatus">
  5. <view class="pay-bring-title">本次交易暂不支持线上支付,请使用线下转账方式付款</view>
  6. <view class="container-wrapper">
  7. <view class="pay-content">
  8. <view class="pay-p"><text>待付金额</text></view>
  9. <view class="pay-money">
  10. <text class="pay-sm">¥</text>
  11. <text class="pay-bg">{{payableAmount | NumFormat}}</text>
  12. </view>
  13. </view>
  14. </view>
  15. <view class="pay-bring-wrapper clearfix">
  16. <view class="pay-bring-content">
  17. <view class="text-v title">转账信息</view>
  18. <view class="text-v">开户行:中信银行(深圳泰然支行)</view>
  19. <view class="text-v">银行卡号:{{bankNumber}}</view>
  20. <view class="text-v">户名:周仁声</view>
  21. <view class="text-v">订单标识:{{payOrderId}} <text class="clipboard" @click.stop="clipboard(payOrderId)">复制</text></view>
  22. <view class="text-v title">特别注意</view>
  23. <view class="text-v bg-color">请在转账备注中填写上述订单标识,方便财务快速审核,提高发货速度</view>
  24. </view>
  25. </view>
  26. </view>
  27. <view class="container-cash clearfix" v-else>
  28. <view class="container-wrapper">
  29. <view class="pay-content">
  30. <view class="pay-p"><text>待付金额</text></view>
  31. <view class="pay-money">
  32. <text class="pay-sm">¥</text>
  33. <text class="pay-bg">{{payableAmount | NumFormat}}</text>
  34. </view>
  35. </view>
  36. <view class="pay-check">
  37. <view class="check-title"><view class="text">选择支付方式</view></view>
  38. <view class="pay-checked">
  39. <view class="pay-item" :class="{ 'current' : tabCurrentIndex === 0}" @click="tabClick(0)" >
  40. <view class="item-l">
  41. <view class="item-icon"><text class="iconfont icon-weixinzhifu"></text></view>
  42. <view class="item-texts"><text>微信支付</text></view>
  43. </view>
  44. <view class="item-r">
  45. <text class="iconfont icon-gougou"></text>
  46. </view>
  47. </view>
  48. <view class="pay-item" :class="{ 'current' : tabCurrentIndex === 1}" @click="tabClick(1)" >
  49. <view class="item-l">
  50. <view class="item-icon"><text class="iconfont icon-yinlianzhifu"></text></view>
  51. <view class="item-text">
  52. <view class="txt-p">企业网银支付</view>
  53. <view class="txt-t">需要在电脑端汇款</view>
  54. </view>
  55. </view>
  56. <view class="item-r">
  57. <text class="iconfont icon-gougou"></text>
  58. </view>
  59. </view>
  60. </view>
  61. </view>
  62. </view>
  63. <view class="pay-button">
  64. <view class="btn" @click.stop="goOrderCash" :style="{'background':btnColor}">{{buttonText}}</view>
  65. </view>
  66. <view class="pay-statustext">
  67. <view class="pay-statustext-inner">
  68. <view class="pay-icon">
  69. <text class="iconfont icon-gantanhao-yuankuang"></text>
  70. </view>
  71. <view class="pay-text">
  72. <text>{{payStatusText}}</text>
  73. </view>
  74. </view>
  75. </view>
  76. <view class="pay-bring clearfix" :style="{paddingBottom:isIphoneX ? '68rpx' : '24rpx'}" @click.stop="showTips" v-if="isReceiptStatus">
  77. <view class="pay-bring-line"><text class="line"></text></view>
  78. <view class="pay-bring-content" v-if="!isShowTip">
  79. <view class="text bg-color">查看转账信息</view>
  80. <view class="text">除了以上两种支付方式</view>
  81. <view class="text">您还可以通过线下转账的方式付款</view>
  82. </view>
  83. <view class="pay-bring-content" v-else>
  84. <view class="text-v title">转账信息</view>
  85. <view class="text-v">开户行:中信银行(深圳泰然支行)</view>
  86. <view class="text-v">银行卡号:{{bankNumber}}</view>
  87. <view class="text-v">户名:周仁声</view>
  88. <view class="text-v">订单标识:{{payOrderId}} <text class="clipboard" @click.stop="clipboard(payOrderId)">复制</text></view>
  89. <view class="text-v title">特别注意</view>
  90. <view class="text-v bg-color">请在转账备注中填写上述订单标识,方便财务快速审核,提高发货速度</view>
  91. </view>
  92. </view>
  93. </view>
  94. </view>
  95. </template>
  96. <script>
  97. const thorui = require("@/components/clipboard/clipboard.thorui.js")
  98. export default{
  99. data(){
  100. return{
  101. orderID:'',
  102. payableAmount:0,
  103. emptyWrapperH: '',
  104. bankNumber:'6217 6803 0362 0897',
  105. payOrderId:'',
  106. nvabarData: { //顶部自定义导航
  107. showCapsule:1, // 是否显示左上角图标 1表示显示 0表示不显示,
  108. showSearch: 0,
  109. title: '选择支付方式', // 导航栏 中间的标题
  110. haveBack:false,
  111. haveHome:true,
  112. textLeft:this.$store.state.isIphone
  113. },
  114. isIphoneX:this.$store.state.isIphoneX,
  115. CustomBar:this.CustomBar,// 顶部导航栏高度
  116. tabCurrentIndex:0,
  117. isShowTip:false,
  118. isReceiptStatus:false,
  119. buttonText:'使用微信支付',
  120. btnColor:'#09BB07',
  121. receiptStatus:'',
  122. invoiceStatus:false,
  123. onlinePayFlag:'',
  124. payStatusText:'使用微信和企业网银支付全部金额后,供应商会在24小时后发货(周末、节假日顺延)。若着急发货,可以选择使用线下转账进行付款。'
  125. }
  126. },
  127. onLoad(option) {
  128. this.initData(option)
  129. },
  130. filters: {
  131. NumFormat(value) {
  132. if(!value) return '0.00';
  133. /*原来用的是Number(value).toFixed(0),这样取整时有问题,例如0.51取整之后为1,感谢Nils指正*/
  134. /*后来改成了 Number(value)|0,但是输入超过十一位就为负数了,具体见评论 */
  135. var intPart = Number(value) - Number(value)%1; //获取整数部分(这里是windy93的方法)
  136. var intPartFormat = intPart.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,'); //将整数部分逢三一断
  137. var floatPart = ".00"; //预定义小数部分
  138. var value2Array = value.toString().split(".");
  139. //=2表示数据有小数位
  140. if(value2Array.length == 2) {
  141. floatPart = value2Array[1].toString(); //拿到小数部分
  142. if(floatPart.length == 1) { //补0,实际上用不着
  143. return intPartFormat + "." + floatPart + '0';
  144. } else {
  145. return intPartFormat + "." + floatPart;
  146. }
  147. } else {
  148. return intPartFormat + floatPart;
  149. }
  150. }
  151. },
  152. methods:{
  153. initData(e){
  154. switch(e.type){
  155. case 'confirm':
  156. this.nvabarData.haveBack = false
  157. this.nvabarData.haveHome = true
  158. this.nvabarData.title = '支付'
  159. break;
  160. case 'payfirm':
  161. this.nvabarData.haveBack = true
  162. this.nvabarData.haveHome = false
  163. this.nvabarData.title = '选择支付方式'
  164. break;
  165. }
  166. this.orderID = e.orderID
  167. this.payOrderId ='#'+e.orderID+'#';
  168. this.PayService.PayOrderCheckoutCounter({orderId:this.orderID}).then(response =>{
  169. let data = response.data.order
  170. this.payableAmount = data.payableAmount - data.receiptAmount //待付金额
  171. this.receiptStatus = data.receiptStatus
  172. this.invoiceStatus = data.invoiceStatus
  173. this.onlinePayFlag = data.onlinePayFlag
  174. if(data.receiptAmount>0){
  175. this.payStatusText = '使用微信和企业网银支付全部金额后,供应商会在24小时后发货(周末、节假日顺延)。'
  176. this.isReceiptStatus = false
  177. }else{
  178. this.payStatusText = '使用微信和企业网银支付全部金额后,供应商会在24小时后发货(周末、节假日顺延)。若着急发货,可以选择使用线下转账进行付款。'
  179. this.isReceiptStatus = true
  180. }
  181. }).catch(error =>{
  182. this.$util.msg(error.msg,2000)
  183. })
  184. },
  185. goOrderCash(){
  186. if(this.invoiceStatus){
  187. this.$util.modal('','本次交易暂不支持线上支付开票,请使用线下转账的方式付款','知道了','',false,() =>{})
  188. this.payStatusText = '使用微信和企业网银支付全部金额后,供应商会在24小时后发货(周末、节假日顺延)。若着急发货,可以选择使用线下转账进行付款。'
  189. this.isReceiptStatus = true
  190. }else{
  191. switch(this.tabCurrentIndex){
  192. case 0:
  193. this.$api.navigateTo(`/pages/user/order/order-pay?type=0&orderID=${this.orderID}`)
  194. break;
  195. case 1:
  196. this.$api.navigateTo(`/pages/user/order/order-pay?type=1&orderID=${this.orderID}`)
  197. break;
  198. }
  199. }
  200. },
  201. tabClick(index) {//tab切换
  202. this.tabCurrentIndex = index;
  203. switch(index){
  204. case 0:
  205. this.btnColor="#09BB07"
  206. this.buttonText='使用微信支付';
  207. break;
  208. case 1:
  209. this.btnColor="#034582"
  210. this.buttonText='使用网银支付';
  211. break;
  212. }
  213. },
  214. hanldNavigateBack(){//页面返回
  215. uni.navigateBack({
  216. delta: 1
  217. });
  218. },
  219. showTips(){
  220. this.isShowTip=!this.isShowTip
  221. },
  222. clipboard(data) {
  223. thorui.getClipboardData(data, (res) => {
  224. if (res) {
  225. this.$util.msg("复制成功",2000,true,'success');
  226. } else {
  227. this.$util.msg("复制失败",2000,true,'none');
  228. }
  229. })
  230. },
  231. },
  232. onShow() {
  233. }
  234. }
  235. </script>
  236. <style lang="scss">
  237. page{
  238. height: auto !important;
  239. background-color: #FFFFFF;
  240. }
  241. .container-cash{
  242. width: 100%;
  243. .pay-bring-title{
  244. box-sizing: border-box;
  245. width: 100%;
  246. height: 96rpx;
  247. padding: 0 24rpx;
  248. line-height: 96rpx;
  249. text-align: left;
  250. font-size: $font-size-24;
  251. background:rgba(255,234,221,1);
  252. color: $color-system;
  253. }
  254. .container-wrapper{
  255. width:662rpx;
  256. margin: 0 auto;
  257. .pay-title{
  258. font-size: $font-size-32;
  259. line-height: 44rpx;
  260. text-align: center;
  261. color: #2A86FF;
  262. margin: 40rpx 0 0 0;
  263. width: 100%;
  264. float: left;
  265. }
  266. .pay-content{
  267. width: 574rpx;
  268. height: 136rpx;
  269. padding: 52rpx 44rpx;
  270. background: url(https://img.caimei365.com/group1/M00/03/BD/Cmis218ekFyAHoAzAALhR3oBpDI049.png) no-repeat;
  271. background-size: cover;
  272. float: left;
  273. margin-top: 40rpx;
  274. margin-bottom: 40rpx;
  275. .pay-p{
  276. font-size: $font-size-26;
  277. color: #FFFFFF;
  278. line-height: 36rpx;
  279. }
  280. .pay-money{
  281. color: #FFFFFF;
  282. line-height: 84rpx;
  283. font-weight: bold;
  284. .pay-sm{
  285. font-size: $font-size-26;
  286. }
  287. .pay-bg{
  288. font-size: 50rpx;
  289. }
  290. }
  291. }
  292. .pay-check{
  293. width: 100%;
  294. height: auto;
  295. float: left;
  296. .check-title{
  297. width: 622rpx;
  298. height: 40rpx;
  299. line-height: 40rpx;
  300. padding: 0 20rpx;
  301. margin-top: 24rpx;
  302. .text{
  303. font-size: $font-size-28;
  304. color: $text-color;
  305. text-align: left;
  306. float: left;
  307. }
  308. .icon{
  309. width: 40rpx;
  310. height: 40rpx;
  311. border-radius: 50%;
  312. line-height: 40rpx;
  313. text-align: center;
  314. color: #FFFFFF;
  315. font-size: $font-size-24;
  316. background: radial-gradient(circle,rgba(225,86,22,1) 0%,rgba(255,170,0,1) 67%,rgba(249,185,156,1) 100%);
  317. float: right;
  318. }
  319. }
  320. .pay-checked{
  321. width: 100%;
  322. height: auto;
  323. .pay-item{
  324. width: 618rpx;
  325. height: 96rpx;
  326. border: 2px solid #F5F5F5;
  327. border-radius: 30rpx;
  328. padding: 20rpx;
  329. margin: 24rpx 0;
  330. display: flex;
  331. background-color: #FFFFFF;
  332. &.current{
  333. border-color:$color-system;
  334. .item-r{
  335. .icon-gougou{
  336. color: $color-system;
  337. }
  338. }
  339. }
  340. .item-l{
  341. flex: 8;
  342. .item-icon{
  343. width: 96rpx;
  344. height: 96rpx;
  345. float: left;
  346. text-align: center;
  347. line-height: 96rpx;
  348. margin-right: 20rpx;
  349. .iconfont{
  350. font-size:88rpx;
  351. }
  352. .icon-weixinzhifu{
  353. color: #09BB07;
  354. }
  355. .icon-yinlianzhifu{
  356. color: #034582;
  357. }
  358. }
  359. .item-texts{
  360. line-height: 96rpx;
  361. font-size:$font-size-26;
  362. color: $text-color;
  363. }
  364. .item-text{
  365. line-height: 48rpx;
  366. font-size:$font-size-26;
  367. .txt-p{
  368. color: $text-color;
  369. }
  370. .txt-t{
  371. color: #999999;
  372. }
  373. }
  374. }
  375. .item-r{
  376. flex: 2;
  377. text-align: right;
  378. line-height: 96rpx;
  379. .icon-gougou{
  380. font-size: 66rpx;
  381. color: #FFFFFF;
  382. }
  383. }
  384. }
  385. }
  386. }
  387. }
  388. .pay-button{
  389. width: 100%;
  390. float: left;
  391. margin-top:30rpx;
  392. .btn{
  393. width: 662rpx;
  394. height: 88rpx;
  395. border-radius: 14rpx;
  396. font-size: $font-size-28;
  397. line-height: 88rpx;
  398. color: #FFFFFF;
  399. margin: 0 auto;
  400. text-align: center;
  401. background:$btn-confirm;
  402. }
  403. }
  404. .pay-statustext{
  405. width: 100%;
  406. height: 120rpx;
  407. float: left;
  408. margin-top:40rpx;
  409. .pay-statustext-inner{
  410. width: 662rpx;
  411. height: 100%;
  412. margin: 0 auto;
  413. .pay-icon{
  414. width: 62rpx;
  415. height: 100%;
  416. float: left;
  417. text-align: center;
  418. .iconfont{
  419. color: #FF2A2A;
  420. font-size:$font-size-36;
  421. line-height: 20rpx;
  422. }
  423. }
  424. .pay-text{
  425. width: 560rpx;
  426. height: 100%;
  427. float: left;
  428. line-height: 40rpx;
  429. font-size: $font-size-26;
  430. color: #FF2A2A;
  431. text-align: justify;
  432. }
  433. }
  434. }
  435. .pay-bring{
  436. width: 100%;
  437. min-height: 190rpx;
  438. padding: 24rpx 0;
  439. background-color: #FFFFFF;
  440. box-shadow:0px 3px 6px rgba(0,0,0,0.16);
  441. position: fixed;
  442. bottom: 0;
  443. left: 0;
  444. border-radius: 30rpx 30rpx 0 0;
  445. display: flex;
  446. align-items: center;
  447. flex-direction: column;
  448. .pay-bring-line{
  449. display: flex;
  450. align-items: center;
  451. .line{
  452. display: inline-block;
  453. width: 48rpx;
  454. height: 2px;
  455. background-color: #707070;
  456. }
  457. }
  458. .pay-bring-content{
  459. width: 654rpx;
  460. height: auto;
  461. padding: 0 24rpx;
  462. .text{
  463. font-size: $font-size-24;
  464. color: #666;
  465. line-height: 44rpx;
  466. text-align: center;
  467. &.bg-color{
  468. color: $color-system;
  469. line-height: 88rpx;
  470. }
  471. }
  472. .text-v{
  473. font-size: $font-size-28;
  474. color: #999;
  475. line-height: 70rpx;
  476. text-align: left;
  477. &.title{
  478. font-size: $font-size-26;
  479. color: #666666;
  480. }
  481. &.bg-color{
  482. line-height: 44rpx;
  483. color: $color-system;
  484. }
  485. .clipboard{
  486. width: 84rpx;
  487. height: 36rpx;
  488. background:linear-gradient(34deg,rgba(255,41,41,1) 0%,rgba(255,109,27,1) 100%);
  489. text-align: center;
  490. font-size: $font-size-24;
  491. color: #FFFFFF;
  492. border-radius: 4rpx;
  493. line-height: 36rpx;
  494. display: inline-block;
  495. margin-left: 10rpx;
  496. }
  497. }
  498. }
  499. }
  500. .pay-bring-wrapper{
  501. width: 100%;
  502. padding: 24rpx 0;
  503. background-color: #FFFFFF;
  504. display: flex;
  505. align-items: center;
  506. flex-direction: column;
  507. .pay-bring-content{
  508. width: 654rpx;
  509. height: auto;
  510. padding: 0 24rpx;
  511. .text{
  512. font-size: $font-size-24;
  513. color: #666;
  514. line-height: 44rpx;
  515. text-align: center;
  516. &.bg-color{
  517. color: $color-system;
  518. line-height: 88rpx;
  519. }
  520. }
  521. .text-v{
  522. font-size: $font-size-28;
  523. color: #999;
  524. line-height: 70rpx;
  525. text-align: left;
  526. &.title{
  527. font-size: $font-size-28;
  528. color: #666666;
  529. }
  530. &.bg-color{
  531. line-height: 44rpx;
  532. color: $color-system;
  533. }
  534. .clipboard{
  535. width: 84rpx;
  536. height: 36rpx;
  537. background:linear-gradient(34deg,rgba(255,41,41,1) 0%,rgba(255,109,27,1) 100%);
  538. text-align: center;
  539. font-size: $font-size-24;
  540. color: #FFFFFF;
  541. border-radius: 4rpx;
  542. line-height: 36rpx;
  543. display: inline-block;
  544. margin-left: 10rpx;
  545. }
  546. }
  547. }
  548. }
  549. }
  550. .freight-alert{
  551. width: 100%;
  552. height: 100%;
  553. background: rgba(0,0,0,.5);
  554. position: fixed;
  555. top: 0;
  556. left: 0;
  557. z-index: 8888;
  558. transition: all 0.4s;
  559. &.none{
  560. display: none;
  561. }
  562. &.show{
  563. display: block;
  564. }
  565. .content{
  566. width: 422rpx;
  567. height:434rpx;
  568. position: absolute;
  569. background: $bg-color;
  570. left: 0;
  571. right: 0;
  572. bottom: 0;
  573. top: 0;
  574. margin: auto;
  575. padding: 20rpx 32rpx;
  576. border-radius: 12rpx;
  577. .title{
  578. width: 100%;
  579. height: 68rpx;
  580. line-height: 68rpx;
  581. font-size: $font-size-28;
  582. color: $text-color;
  583. text-align: center;
  584. position: relative;
  585. .icon-iconfontguanbi{
  586. width: 68rpx;
  587. height: 68rpx;
  588. text-align: center;
  589. line-height: 68rpx;
  590. position: absolute;
  591. right: 0;
  592. top: 0;
  593. font-size: $font-size-36;
  594. color: #999999;
  595. }
  596. }
  597. .text-content{
  598. width: 100%;
  599. height: auto;
  600. .text{
  601. padding: 20rpx 0;
  602. line-height: 44rpx;
  603. font-size: $font-size-26;
  604. color:#666666;
  605. text-align: justify;
  606. }
  607. .text-p{
  608. line-height: 44rpx;
  609. font-size: $font-size-26;
  610. color:$color-system;
  611. text-align: left;
  612. }
  613. }
  614. }
  615. }
  616. </style>