order-pay.vue 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573
  1. <template>
  2. <view class="container cashier" @touchmove.stop.prevent="discard" @tap="hideKeyboard" v-show="isRepuest">
  3. <cu-custom :navbar-data='nvabarData' @navigateBack="hanldNavigateBack"></cu-custom>
  4. <view class="container-cash clearfix" :style="{marginTop:CustomBar+'px'}">
  5. <view class="container-wrapper">
  6. <view class="pay-content">
  7. <view class="pay-top">
  8. <view class="pay-paid">
  9. <text class="txt-m">待付金额</text>
  10. <text class="txt-b"><text class="small">¥</text>{{payableAmount.toFixed(2)}}</text>
  11. </view>
  12. <view class="pay-payd">
  13. <view class="pay-paids">
  14. <text class="txt-m">应付总额</text>
  15. <text class="txt-b">¥{{payTotalFee.toFixed(2)}}</text>
  16. </view>
  17. <view class="pay-paids">
  18. <text class="txt-m">已支付金额</text>
  19. <text class="txt-b">¥{{receiptAmount.toFixed(2)}}</text>
  20. </view>
  21. </view>
  22. </view>
  23. <view class="pay-bot">
  24. <view class="bot-title"><text>本次支付金额</text></view>
  25. <view class="bot-input">
  26. <text>¥</text>
  27. <!-- <view class="input" @click.stop="focusInput">
  28. <text class="text" v-if="payAmount>=0">{{payAmount}}</text>
  29. <text class="none" v-else>输入金额不能大于待付金额</text>
  30. </view> -->
  31. <input class="input"
  32. type="digit"
  33. v-model="payAmount"
  34. @focus="focusInput"
  35. @blur="blurInput"
  36. placeholder="输入金额不能大于待付金额"
  37. placeholder-class="placeholder"/>
  38. </view>
  39. <view class="bot-resid">
  40. <text>应付剩余¥{{balanceAmount.toFixed(2)}}</text>
  41. </view>
  42. </view>
  43. </view>
  44. <view class="pay-record">
  45. <view class="record-title"><text>支付记录</text></view>
  46. <view class="record-list">
  47. <view class="list-main" v-if="discernReceipt.length>0">
  48. <view class="list-item" v-for="(item,index) in discernReceipt" :key="index">
  49. <text class="text row-1">¥{{item.receiptAmount}}</text>
  50. <text class="text row-2">{{payTypeText(item.payType)}}</text>
  51. <text class="text row-3">{{item.receiptDate}}</text>
  52. </view>
  53. </view>
  54. <view class="list-none" v-else>暂无支付记录</view>
  55. </view>
  56. </view>
  57. </view>
  58. <view class="pay-button">
  59. <view class="btn" @click.stop="buttonSubMit" :style="{'background':btnColor}">{{buttonText}}</view>
  60. </view>
  61. </view>
  62. <view class="alert spec" :class="specClass" v-if="isShowTip">
  63. <!-- 选择支付弹窗说明 -->
  64. <view class="freight-alert" @tap="hideTips">
  65. <view class="content">
  66. <view class="title">
  67. <text>生成链接</text>
  68. <text class="iconfont icon-iconfontguanbi" @click.stop="hideTips"></text>
  69. </view>
  70. <view class="text-content">
  71. <view class="text">请复制以下链接,并发送至电脑端,在浏览器访问该链接并选择银行尽快完成支付</view>
  72. <view class="text-p">{{payHttpUrl}}</view>
  73. <view class="text-b">链接有效期为24小时</view>
  74. </view>
  75. <view class="text-button" @click.stop="clipboard(payHttpUrl)">复制链接</view>
  76. </view>
  77. </view>
  78. </view>
  79. <!-- 数字键盘 -->
  80. <!-- <keyboard v-if="showDigitKeyboard"
  81. @confirmEvent="confirmEvent"
  82. :money.sync="payAmount"
  83. btn-color='linear-gradient(135deg,rgba(242,143,49,1) 0%,rgba(225,86,22,1) 100%)'
  84. title="完成">
  85. </keyboard> -->
  86. </view>
  87. </template>
  88. <script>
  89. import authorize from '@/common/config/authorize.js'
  90. // import keyboard from "@/components/keyboard/keyboard.vue"
  91. import thorui from "@/components/clipboard/clipboard.thorui.js"
  92. import { PayOrderCheckoutCounter,WeChatMiniWxPay,PayOrderPayLink } from "@/api/order.js"
  93. export default{
  94. components: {
  95. // keyboard
  96. },
  97. data(){
  98. return{
  99. orderID:'',
  100. payType:'',
  101. isRepuest:false,
  102. payableAmount:0,
  103. receiptAmount:0,
  104. balanceAmount:0,
  105. payTotalFee:0,
  106. payAmount:0,
  107. nvabarData: { //顶部自定义导航
  108. showCapsule:1, // 是否显示左上角图标 1表示显示 0表示不显示,
  109. showSearch: 0,
  110. title: '收银台', // 导航栏 中间的标题
  111. haveBack:true,
  112. textLeft:this.$store.state.isIphone
  113. },
  114. idCardList:[],
  115. isIphoneX:this.$store.state.isIphoneX,
  116. CustomBar:this.CustomBar,// 顶部导航栏高度
  117. tabCurrentIndex:0,
  118. isShowTip:false,
  119. buttonText:'去支付',
  120. btnColor:'#09BB07',
  121. discernReceipt:[],
  122. showDigitKeyboard:false,
  123. payHttpUrl:''
  124. }
  125. },
  126. onLoad(option) {
  127. this.initData(option)
  128. },
  129. methods:{
  130. initData(e){
  131. this.payType = e.type
  132. console.log(this.payType)
  133. this.orderID = e.orderID
  134. switch(this.payType){
  135. case '0':
  136. this.btnColor="#09BB07"
  137. this.buttonText = '去支付'
  138. break;
  139. case '1':
  140. this.btnColor="#034582"
  141. this.buttonText = '生成支付链接'
  142. break;
  143. }
  144. this.GetPayOrderInfo()
  145. },
  146. GetPayOrderInfo(){
  147. PayOrderCheckoutCounter({orderId:this.orderID}).then(response =>{
  148. this.isRepuest = true
  149. this.discernReceipt = response.data.discernReceipt //支付记录
  150. this.payTotalFee = response.data.order.payTotalFee //已付金额
  151. this.receiptAmount = response.data.order.receiptAmount //已付金额
  152. this.payableAmount = response.data.order.payableAmount - this.receiptAmount //待付金额
  153. this.payAmount = this.payableAmount.toFixed(2) //自定义金额
  154. this.balanceAmount = this.payableAmount - this.payAmount// 计算剩余支付金额
  155. }).catch(error =>{
  156. this.$util.msg(error.msg,2000)
  157. })
  158. },
  159. buttonSubMit(){
  160. switch(this.payType){
  161. case '0':
  162. this.MiniWxPayFor()
  163. break;
  164. case '1':
  165. this.isShowTip = true
  166. this.BuildCatenate()
  167. break;
  168. }
  169. },
  170. BuildCatenate(){
  171. PayOrderPayLink({unpaidAmount:this.payAmount,orderId:this.orderID}).then(response =>{
  172. this.payHttpUrl = response.data
  173. })
  174. },
  175. MiniWxPayFor(){
  176. let self = this
  177. authorize.getCode('weixin').then(wechatcode =>{
  178. if(this.payAmount == 0){
  179. this.$util.msg("请输入本次支付的金额",2000)
  180. return
  181. }
  182. let params ={
  183. payAmount:this.payAmount*100,
  184. payWay:"WEIXIN",
  185. payType:"MINIAPP_WEIXIN",
  186. code:wechatcode,
  187. orderId:this.orderID
  188. }
  189. WeChatMiniWxPay(params).then(response =>{
  190. let PayInfo = JSON.parse(response.data.data.payInfo);
  191. uni.setStorageSync('payInfo',PayInfo)
  192. console.log(PayInfo)
  193. wx.requestPayment({
  194. 'timeStamp': PayInfo.timeStamp,
  195. 'nonceStr': PayInfo.nonceStr,
  196. 'package': PayInfo.package,
  197. 'signType': PayInfo.signType,
  198. 'paySign': PayInfo.paySign,
  199. 'success':function(res){
  200. console.log('支付成功');
  201. wx.reLaunch({url: '/pages/tabBar/user/user'});
  202. },
  203. 'fail':function(res){
  204. self.$util.msg('订单支付已取消')
  205. },
  206. 'complete':function(res){
  207. }
  208. })
  209. }).catch(error =>{
  210. this.$util.msg(error.msg,2000)
  211. })
  212. })
  213. },
  214. confirmEvent(value){//点击自定义键盘完成的回调函数
  215. console.log(value)
  216. this.chechValue(value)
  217. this.showDigitKeyboard = false
  218. },
  219. blurInput(e){
  220. this.chechValue(e.detail.value)
  221. },
  222. focusInput(){
  223. // this.showDigitKeyboard = true
  224. },
  225. hideKeyboard(){
  226. this.showDigitKeyboard = false
  227. },
  228. chechValue(value){
  229. if(value == 0){
  230. this.payAmount = this.payableAmount.toFixed(2)
  231. this.balanceAmount = this.payableAmount-this.payAmount
  232. }else if(parseInt(value)>this.payableAmount){
  233. this.payAmount = this.payableAmount.toFixed(2)
  234. this.balanceAmount = this.payableAmount - this.payAmount
  235. }else{
  236. this.payAmount =Number(value).toFixed(2)
  237. this.balanceAmount = this.payableAmount - this.payAmount
  238. }
  239. },
  240. hanldNavigateBack(){//页面返回
  241. uni.navigateBack({
  242. delta: 1
  243. });
  244. },
  245. payTypeText (state){//处理支付记录文字
  246. let stateText = '',
  247. stateTextObject={
  248. 12:'网银支付',
  249. 13:'微信支付',
  250. 14:'支付宝支付',
  251. 15:'微信支付',
  252. 16:'余额抵扣',
  253. }
  254. Object.keys(stateTextObject).forEach(key => {
  255. if(key == state){
  256. stateText = stateTextObject[key]
  257. }
  258. })
  259. return stateText;
  260. },
  261. hideTips(){//隐藏弹窗
  262. this.isShowTip = false
  263. },
  264. clipboard(data) {//复制链接
  265. thorui.getClipboardData(data, (res) => {
  266. // #ifdef H5
  267. if (res) {
  268. this.$util.msg("复制成功",2000);
  269. } else {
  270. this.$util.msg("复制失败",2000);
  271. }
  272. // #endif
  273. })
  274. },
  275. discard(){
  276. //丢弃
  277. }
  278. },
  279. onShow() {
  280. }
  281. }
  282. </script>
  283. <style lang="scss">
  284. page{height: auto !important;background-color: #FFFFFF;}
  285. .container-cash{
  286. width: 100%;
  287. .container-wrapper{
  288. width:100%;
  289. margin: 0 auto;
  290. .pay-content{
  291. width: 662rpx;
  292. height: 420rpx;
  293. padding: 64rpx 44rpx 0 44rpx;
  294. background: url(https://admin-b.caimei365.com/userfiles/1/images/photo/2020/05/bg%403x.png) no-repeat;
  295. background-size: cover;
  296. float: left;
  297. position: relative;
  298. .pay-top{
  299. width: 100%;
  300. height: auto;
  301. float: left;
  302. margin-bottom: 44rpx;
  303. .pay-paid{
  304. width: 100%;
  305. height: auto;
  306. margin-bottom: 38rpx;
  307. text{
  308. line-height: 48rpx;
  309. text-align: left;
  310. color: #FFFFFF;
  311. width: 100%;
  312. }
  313. .txt-m{
  314. font-size: $font-size-26;
  315. opacity: 0.7;
  316. display: inline-block;
  317. }
  318. .txt-b{
  319. font-size: $font-size-48;
  320. display: inline-block;
  321. .small{
  322. font-size: $font-size-32;
  323. }
  324. }
  325. }
  326. .pay-payd{
  327. width: 100%;
  328. height: auto;
  329. .pay-paids{
  330. height: auto;
  331. float: left;
  332. margin-right: 48rpx;
  333. text{
  334. line-height: 48rpx;
  335. text-align: left;
  336. color: #FFFFFF;
  337. }
  338. .txt-m{
  339. width: 100%;
  340. display: inline-block;
  341. font-size: $font-size-26;
  342. opacity: 0.7;
  343. }
  344. .txt-b{
  345. width: 100%;
  346. display: inline-block;
  347. font-size: $font-size-32;
  348. }
  349. }
  350. }
  351. }
  352. .pay-bot{
  353. width: 614rpx;
  354. height: 184rpx;
  355. padding: 24rpx;
  356. background: #FFFFFF;
  357. border-radius: 20rpx;
  358. box-shadow:0 2px 6px rgba(255, 77, 0, .17);
  359. position: absolute;
  360. bottom: -92rpx;
  361. left:44rpx;
  362. .bot-title{
  363. line-height: 36rpx;
  364. font-size: $font-size-26;
  365. color: #666666;
  366. }
  367. .bot-input{
  368. width: 100%;
  369. height: 66rpx;
  370. margin: 15rpx 0;
  371. border-bottom: 1px solid #EBEBEB;
  372. line-height: 66rpx;
  373. font-size: $font-size-32;
  374. color: $text-color;
  375. text{
  376. display: block;
  377. float: left;
  378. }
  379. .input{
  380. font-size: $font-size-40;
  381. width: 500rpx;
  382. height: 66rpx;
  383. padding: 0 10rpx;
  384. line-height: 66rpx;
  385. float: left;
  386. .none{
  387. color:$text-color;
  388. opacity: 0.3;
  389. }
  390. .text{
  391. color:$text-color;
  392. }
  393. }
  394. .placeholder{
  395. font-size: $font-size-26;
  396. }
  397. }
  398. .bot-resid{
  399. line-height: 36rpx;
  400. font-size: $font-size-26;
  401. color: #666666;
  402. margin-top: 24rpx;
  403. color: $color-system;
  404. }
  405. }
  406. }
  407. .pay-record{
  408. float: left;
  409. background: #FFFFFF;
  410. width: 702rpx;
  411. height: auto;
  412. padding: 0 24rpx;
  413. margin-top: 112rpx;
  414. .record-title{
  415. width: 100%;
  416. float: left;
  417. font-size: $font-size-28;
  418. color: $text-color;
  419. line-height: 80rpx;
  420. height: 80rpx;
  421. border-bottom: 1px solid #F8F8F8;
  422. }
  423. .record-list{
  424. width: 100%;
  425. height: auto;
  426. float: left;
  427. .list-none{
  428. line-height: 80rpx;
  429. font-size: $font-size-26;
  430. color: #999999;
  431. text-align: left;
  432. }
  433. .list-main{
  434. height: auto;
  435. display: flex;
  436. flex-direction:column;
  437. .list-item{
  438. width: 100%;
  439. height:80rpx;
  440. display: flex;
  441. flex: 1;
  442. line-height: 80rpx;
  443. font-size: $font-size-26;
  444. color: $text-color;
  445. .text{
  446. &.row-1{
  447. flex: 3;
  448. }
  449. &.row-2{
  450. flex: 3;
  451. }
  452. &.row-3{
  453. flex: 4;
  454. text-align: right;
  455. }
  456. }
  457. }
  458. }
  459. }
  460. }
  461. }
  462. .pay-button{
  463. width: 100%;
  464. position: fixed;
  465. bottom: 80rpx;
  466. .btn{
  467. width: 702rpx;
  468. height: 88rpx;
  469. border-radius: 14rpx;
  470. font-size: $font-size-28;
  471. line-height: 88rpx;
  472. color: #FFFFFF;
  473. margin: 0 auto;
  474. text-align: center;
  475. background: $btn-confirm;
  476. }
  477. }
  478. }
  479. .freight-alert{
  480. width: 100%;
  481. height: 100%;
  482. background: rgba(0,0,0,.5);
  483. position: fixed;
  484. top: 0;
  485. left: 0;
  486. z-index: 8888;
  487. transition: all 0.4s;
  488. &.none{
  489. display: none;
  490. }
  491. &.show{
  492. display: block;
  493. }
  494. .content{
  495. width: 422rpx;
  496. height:434rpx;
  497. position: absolute;
  498. background: $bg-color;
  499. left: 0;
  500. right: 0;
  501. bottom: 0;
  502. top: 0;
  503. margin: auto;
  504. padding: 20rpx 32rpx;
  505. border-radius: 12rpx;
  506. .title{
  507. width: 100%;
  508. height: 68rpx;
  509. line-height: 68rpx;
  510. font-size: $font-size-28;
  511. color: $text-color;
  512. text-align: center;
  513. position: relative;
  514. .icon-iconfontguanbi{
  515. width: 68rpx;
  516. height: 68rpx;
  517. text-align: center;
  518. line-height: 68rpx;
  519. position: absolute;
  520. right: 0;
  521. top: 0;
  522. font-size: $font-size-36;
  523. color: #999999;
  524. }
  525. }
  526. .text-content{
  527. width: 100%;
  528. height: auto;
  529. .text{
  530. padding: 20rpx 0 0 0;
  531. line-height: 44rpx;
  532. font-size: $font-size-26;
  533. color:#666666;
  534. text-align: justify;
  535. }
  536. .text-p{
  537. width: 100%;
  538. line-height: 44rpx;
  539. font-size: $font-size-26;
  540. color:$color-system;
  541. text-align: left;
  542. text-overflow:ellipsis;
  543. display: -webkit-box;
  544. word-break: break-all;
  545. -webkit-box-orient: vertical;
  546. -webkit-line-clamp: 1;
  547. overflow: hidden;
  548. }
  549. .text-b{
  550. line-height: 44rpx;
  551. font-size: $font-size-24;
  552. color:#999999;
  553. text-align: left;
  554. }
  555. }
  556. .text-button{
  557. width: 100%;
  558. height: 88rpx;
  559. line-height: 88rpx;
  560. background: $btn-confirm;
  561. font-size: $font-size-28;
  562. border-radius: 14rpx;
  563. color:#FFFFFF;
  564. text-align: center;
  565. margin-top: 20rpx;
  566. }
  567. }
  568. }
  569. </style>