payment.vue 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607
  1. <template>
  2. <view>
  3. <view class="top" v-show="!showSignup">
  4. <image src="https://qnys.chuliu.cc/daweiboshi_szy/1_1615541900_nrG1vctYn8.jpg"
  5. mode="widthFix" style="width: 750rpx;margin-bottom: 60rpx;"></image>
  6. <view class="title">
  7. 第{{ data.season }}届大卫博士创业实战营(直播)
  8. </view>
  9. <view class="time">
  10. 举办时间:{{ data.start + '-' + data.end }}
  11. <!-- 举办时间:等待通知 -->
  12. </view>
  13. <view class="item">
  14. <input maxlength="6" type="number" v-model="sms_code" placeholder="请输入验证码" />
  15. <view v-throttle="2000" class="countdown" :class="status ? 'red2' : 'gray2'" @tap="getCode">
  16. {{ countDown ? `重新获取(${countDown}s)` : '获取验证码' }}
  17. </view>
  18. </view>
  19. <view v-throttle="2000" class="pay_btnSig" :class="status ? 'red' : 'gray'" @click="singup">{{ status ? `支付${data.cost}报名` : '立即支付' }}</view>
  20. </view>
  21. <view v-show="!showSignup && id" class="payB" @click="goUnbank">
  22. 支付不了,重新绑定?
  23. </view>
  24. <view v-show="showSignup" class="voucher">
  25. <image src="../../static/new_my/bg.png" class="bgImg" mode="widthFix" style="width: 750rpx;"></image>
  26. <view class="bgImg">
  27. <text style="margin-top: 30rpx;">第{{ data.season }}届大卫博士创业实战营(直播)</text>
  28. </view>
  29. <view class="voucher_con">
  30. <view class="voucher_icon">
  31. <image src="../../static/icon/success.png" mode="widthFix" style="width: 300rpx;margin-top: 78rpx;">
  32. </image>
  33. <view class="success">报名成功</view>
  34. <view class="timed">
  35. <!-- 举办时间:{{ data.start+ '-' +data.end }} -->
  36. 举办时间:等待通知
  37. </view>
  38. </view>
  39. <view class="info" v-show="data.pay_status">
  40. <view>
  41. <text>收货人:</text>
  42. <text>{{ info.username }}</text>
  43. </view>
  44. <view>
  45. <text>手机号:</text>
  46. <text>{{ info.mobile }}</text>
  47. </view>
  48. <view>
  49. <text>收货地址:</text>
  50. <text>{{ info.local }}</text>
  51. </view>
  52. <navigator url="./information" class="info_btn">编辑地址</navigator>
  53. <button class="info_btn" @click="goApp()">点击查看邀请函</button>
  54. </view>
  55. </view>
  56. </view>
  57. </view>
  58. </template>
  59. <script>
  60. import {
  61. GetEnrollInfo_online,
  62. _API_HuiFuCheck_online,
  63. _API_QuickBankPay_online,
  64. _API_QuickBankSms_online,
  65. _API_CheckStatus_online,
  66. GetEnrollUserAddress
  67. } from '@/apis/szy.js';
  68. import {
  69. UploadSzyImg
  70. } from '@/common/util/request'
  71. export default {
  72. data() {
  73. return {
  74. status: false,
  75. info: {},
  76. data: {
  77. season: '',
  78. start: '',
  79. end: '',
  80. name: '',
  81. mobile: '',
  82. cost: '',
  83. local: ''
  84. },
  85. noClick: true,
  86. showSignup: false,
  87. countDown: 0, // 倒计时,
  88. sms_code: '', // 验证码,
  89. id: '',
  90. payId: ''
  91. }
  92. },
  93. onShow() {
  94. this.getInfo()
  95. this.getBank()
  96. // this.getData()
  97. },
  98. computed: {
  99. userinfo() {
  100. return this.$store.state.userinfo
  101. }
  102. },
  103. onPullDownRefresh() {
  104. this.getInfo()
  105. },
  106. methods: {
  107. goApp(){
  108. console.log(this.info)
  109. if(!this.info.username){
  110. uni.showModal({
  111. title: '提示',
  112. content: '检测到您还未编辑地址',
  113. showCancel: false
  114. })
  115. return
  116. }
  117. uni.navigateTo({
  118. url: './notice'
  119. })
  120. },
  121. // 获取地址
  122. getAddress() {
  123. GetEnrollUserAddress().then(res => {
  124. if (res.code === 200) {
  125. this.info = res.data
  126. const data = res.data
  127. this.info.local = data.province + data.city + data.area + data.address
  128. } else {
  129. uni.showModal({
  130. content: res.message || '获取失败',
  131. showCancel: false
  132. })
  133. }
  134. })
  135. },
  136. // 去重新绑定
  137. goUnbank() {
  138. uni.navigateTo({
  139. url: '../zbs/unBank?type=2'
  140. })
  141. },
  142. // 查询绑卡信息
  143. getBank() {
  144. uni.showLoading()
  145. _API_HuiFuCheck_online().then(res => {
  146. uni.hideLoading()
  147. if (res.code == 200) {
  148. this.id = res.data.id
  149. } else if (res.code == 50014) {
  150. this.id = ''
  151. uni.showModal({
  152. title: '提示',
  153. content: '检测到您还未绑定银行卡,请前往绑定',
  154. showCancel: false,
  155. success: (res) => {
  156. if (res.confirm) {
  157. uni.navigateTo({
  158. url: '../zbs/form?type=2'
  159. })
  160. }
  161. }
  162. })
  163. return
  164. } else {
  165. this.id = ''
  166. uni.showModal({
  167. content: res.message || '获取失败',
  168. showCancel: false
  169. });
  170. return false;
  171. }
  172. })
  173. },
  174. // 1.发送验证码
  175. getCode() {
  176. if (!this.status) {
  177. return
  178. }
  179. if (!this.id) {
  180. uni.showModal({
  181. content: '未绑定银行卡',
  182. showCancel: false
  183. })
  184. return
  185. }
  186. let that = this
  187. uni.showModal({
  188. title: '提示',
  189. content: '该短信用于实战营报名费用的支付验证。',
  190. success: function (res) {
  191. if (res.confirm) {
  192. _API_QuickBankPay_online({ id: that.id }).then(res => {
  193. if (res.code == 200) {
  194. uni.showModal({
  195. content: '验证码发送成功',
  196. showCancel: false,
  197. success: (e) => {
  198. if (e.confirm) {
  199. that.payId = res.data.id
  200. that.countDown = 180;
  201. that.timer = setInterval(() => {
  202. that.countDown--;
  203. if (!that.countDown) {
  204. that.countDown = 0;
  205. clearInterval(that.timer);
  206. }
  207. }, 1000);
  208. }
  209. }
  210. })
  211. } else {
  212. uni.showModal({
  213. content: res.message || '获取验证码失败',
  214. showCancel: false
  215. });
  216. return false;
  217. }
  218. })
  219. } else if (res.cancel) {
  220. }
  221. }
  222. });
  223. },
  224. // 2. 携带验证码支付
  225. singup() {
  226. let that = this
  227. if (!this.status) {
  228. return
  229. }
  230. if (!this.sms_code) {
  231. uni.showModal({
  232. content: '请先输入验证码',
  233. showCancel: false
  234. })
  235. return
  236. }
  237. uni.showModal({
  238. title: '提示',
  239. content: '确定要支付吗?',
  240. success: (res) => {
  241. if (res.confirm) {
  242. _API_QuickBankSms_online({ id: that.payId, sms_code: that.sms_code }).then(res => {
  243. if (res.code == 200) {
  244. if (res.data.status == 0) {
  245. that.SearchStatus()
  246. } else if (res.data.status == 1) {
  247. // uni.navigateBack({
  248. // delta: 2
  249. // })
  250. uni.reLaunch({
  251. url: '/pages/payment/payment'
  252. });
  253. }
  254. } else {
  255. uni.showModal({
  256. title: '失败',
  257. content: res.message || '获取失败',
  258. showCancel: false
  259. })
  260. return false;
  261. }
  262. })
  263. .catch(err => {})
  264. .finally(() => {
  265. setTimeout(() => {}, 3000)
  266. })
  267. }
  268. }
  269. })
  270. },
  271. // 3. 查询支付状态
  272. SearchStatus() {
  273. let that = this
  274. uni.showLoading({
  275. title: '查询支付状态中...',
  276. mask: true
  277. });
  278. _API_CheckStatus_online({ id: this.payId }).then(res => {
  279. if (res.code == 200) {
  280. if (res.data.status == 1) {
  281. uni.hideLoading()
  282. // uni.navigateBack({
  283. // delta: 2
  284. // })
  285. uni.reLaunch({
  286. url: '/pages/payment/payment'
  287. });
  288. } else {
  289. that.SearchStatus()
  290. }
  291. } else {
  292. uni.hideLoading()
  293. uni.showModal({
  294. content: res.message || '查询失败',
  295. showCancel: false
  296. })
  297. }
  298. }).catch(err => {
  299. uni.hideLoading()
  300. uni.showModal({
  301. content: err || '查询失败',
  302. showCancel: false
  303. })
  304. })
  305. },
  306. getTimes(data) {
  307. var time = new Date(data)
  308. var year = time.getFullYear()
  309. var month = time.getMonth() + 1 < 10 ? '0' + (time.getMonth() + 1) : time.getMonth() + 1;
  310. var day = time.getDate() < 10 ? '0' + time.getDate() : time.getDate();
  311. var today = year + '.' + month + '.' + day;
  312. return today;
  313. },
  314. // 获取赛季信息
  315. getInfo() {
  316. GetEnrollInfo_online().then(res => {
  317. if (res.code == 200) {
  318. // res.data.enroll_start_time = "2023-12-05 10:30:00" // 报名时间
  319. // res.data.status = 0
  320. this.data = res.data
  321. // uni.setStorageSync("szy_data", res.data)
  322. this.data.start = this.getTimes(res.data.start_time)
  323. this.data.end = this.getTimes(res.data.end_time)
  324. const a = new Date(res.data.enroll_start_time.replace(/-/g,'/')).getTime()
  325. const b = new Date(res.data.enroll_end_time.replace(/-/g,'/')).getTime()
  326. const now = Date.parse(new Date())
  327. if (now > a && now < b && res.data.limit_num > res.data.num) {
  328. this.status = true
  329. }
  330. if (res.data.status == 1 && res.data.pay_status == 1) {
  331. this.getAddress()
  332. this.showSignup = true
  333. } else {
  334. this.showSignup = false
  335. }
  336. } else {
  337. uni.showModal({
  338. content: res.message || '获取失败',
  339. showCancel: false
  340. })
  341. }
  342. })
  343. },
  344. }
  345. }
  346. </script>
  347. <style lang="scss" scoped>
  348. .payB {
  349. margin-top: 30rpx;
  350. text-align: center;
  351. color: #FF232C;
  352. font-weight: bold;
  353. }
  354. .pay {
  355. margin: 0 30rpx 0 30rpx;
  356. border-radius: 16rpx;
  357. background-color: #fff;
  358. padding: 40rpx 20rpx 40rpx 20rpx;
  359. &_title {
  360. font-size: 34rpx;
  361. font-weight: bold;
  362. }
  363. &_time {
  364. margin-top: 20rpx;
  365. font-size: 32rpx;
  366. }
  367. &_btnSig {
  368. margin: 50rpx auto 0;
  369. width: 600rpx;
  370. line-height: 88rpx;
  371. border-radius: 44rpx;
  372. text-align: center;
  373. color: #fff;
  374. font-size: 32rpx;
  375. }
  376. .red {
  377. background: linear-gradient(93deg, #FF232C 0%, #FF571B 100%);
  378. }
  379. .gray {
  380. background-color: #E1E1E1;
  381. }
  382. }
  383. .item {
  384. @include flex();
  385. height: 104rpx;
  386. box-sizing: border-box;
  387. color: $app-sec-text-color;
  388. background: #F8F8F8;
  389. margin: 50rpx 0 40rpx 0;
  390. border-radius: 8rpx;
  391. padding-left: 24rpx;
  392. .login_icon {
  393. width: 36rpx;
  394. height: 44rpx;
  395. }
  396. .icon,
  397. .cuIcon-roundclosefill {
  398. margin: 0 20rpx;
  399. font-size: 36rpx;
  400. }
  401. input {
  402. flex: 1;
  403. height: 104rpx;
  404. margin-left: 15rpx;
  405. }
  406. .countdown {
  407. @include flex();
  408. height: 60rpx;
  409. font-size: 24rpx;
  410. padding: 0 20rpx;
  411. margin-right: 20rpx;
  412. border-radius: 33rpx;
  413. text {
  414. margin-left: 8rpx;
  415. }
  416. }
  417. .red2 {
  418. border: 2rpx solid #FB231F;
  419. color: $base-color;
  420. }
  421. .gray2 {
  422. border: 2rpx solid #999;
  423. color: #999;
  424. }
  425. }
  426. .top {
  427. margin: 0 30rpx 0 30rpx;
  428. border-radius: 16rpx;
  429. background-color: #fff;
  430. padding: 40rpx 20rpx 40rpx 20rpx;
  431. }
  432. .title {
  433. font-size: 34rpx;
  434. font-weight: bold;
  435. }
  436. .time {
  437. margin-top: 20rpx;
  438. font-size: 32rpx;
  439. }
  440. .btnSig {
  441. margin: 50rpx auto 0;
  442. width: 600rpx;
  443. line-height: 88rpx;
  444. border-radius: 44rpx;
  445. text-align: center;
  446. color: #fff;
  447. font-size: 32rpx;
  448. }
  449. .red {
  450. background: linear-gradient(93deg, #FF232C 0%, #FF571B 100%);
  451. }
  452. .gray {
  453. background-color: #E1E1E1;
  454. }
  455. .voucher {
  456. hieght: 100vh;
  457. min-height: 100vh;
  458. width: 100vw;
  459. position: relative;
  460. .bgImg {
  461. height: 100vh;
  462. width: 100vw;
  463. position: fixed;
  464. top: 0;
  465. left: 0;
  466. display: flex;
  467. flex-direction: column;
  468. align-items: center;
  469. font-size: 46rpx;
  470. font-weight: bold;
  471. text {
  472. color: #FFFFFF;
  473. margin-top: 10rpx;
  474. }
  475. }
  476. .voucher_con {
  477. position: fixed;
  478. height: 85%;
  479. width: 100%;
  480. bottom: 0;
  481. left: 0;
  482. background: #fff;
  483. border-top-left-radius: 60rpx;
  484. border-top-right-radius: 60rpx;
  485. .line {
  486. width: 128rpx;
  487. height: 8rpx;
  488. background: #f1f3f5;
  489. margin: 36rpx auto 0;
  490. }
  491. .title {
  492. color: #333;
  493. font-size: 38rpx;
  494. // margin: 48rpx auto 60rpx;
  495. text-align: center;
  496. font-weight: bold;
  497. }
  498. .voucher_icon {
  499. text-align: center;
  500. // image {
  501. // height: 192rpx;
  502. // width: 192rpx;
  503. // margin-bottom: 30rpx;
  504. // }
  505. .success {
  506. margin-top: 18rpx;
  507. font-size: 48rpx;
  508. color: #333;
  509. font-weight: bold;
  510. }
  511. .timed {
  512. margin-top: 36rpx;
  513. font-size: 40rpx;
  514. font-weight: bold;
  515. color: #FF0000;
  516. }
  517. }
  518. .logistics {
  519. width: 250rpx;
  520. height: 68rpx;
  521. margin: 0 auto;
  522. background: rgba(255, 244, 243, 0.39);
  523. border: 2rpx solid #FB231F;
  524. opacity: 1;
  525. border-radius: 44rpx;
  526. color: #FB231F;
  527. }
  528. .info {
  529. margin: 68rpx 50rpx 40rpx 50rpx;
  530. color: #333333;
  531. text {
  532. font-size: 32rpx;
  533. }
  534. >view {
  535. margin-top: 20rpx;
  536. }
  537. &_btn {
  538. margin: 30rpx auto 0 !important;
  539. width: 388rpx;
  540. line-height: 80rpx;
  541. text-align: center;
  542. background: #FFF4F3;
  543. border: 2rpx solid #FB231F;
  544. opacity: 1;
  545. border-radius: 44rpx;
  546. font-size: 30rpx;
  547. font-weight: bold;
  548. color: #FB231F;
  549. }
  550. }
  551. }
  552. }
  553. .bottom {
  554. position: fixed;
  555. bottom: 0;
  556. width: 100%;
  557. height: 100rpx;
  558. padding: 6rpx 30rpx;
  559. background-color: #fff;
  560. border-top: 1px solid #eeeeee;
  561. &-btn {
  562. color: #fff;
  563. text-align: center;
  564. font-size: 32rpx;
  565. font-weight: bold;
  566. line-height: 88rpx;
  567. height: 88rpx;
  568. background: linear-gradient(90deg, #F30000 0%, #FE4815 100%);
  569. opacity: 1;
  570. border-radius: 44px;
  571. }
  572. }
  573. </style>