<template> <view> <view class="top" v-show="!showSignup"> <image src="https://qnys.chuliu.cc/daweiboshi_szy/1_1615541900_nrG1vctYn8.jpg" mode="widthFix" style="width: 750rpx;margin-bottom: 60rpx;"></image> <view class="title"> 第{{ data.season }}届大卫博士创业实战营(直播) </view> <view class="time"> 举办时间:{{ data.start + '-' + data.end }} <!-- 举办时间:等待通知 --> </view> <view class="item"> <input maxlength="6" type="number" v-model="sms_code" placeholder="请输入验证码" /> <view v-throttle="2000" class="countdown" :class="status ? 'red2' : 'gray2'" @tap="getCode"> {{ countDown ? `重新获取(${countDown}s)` : '获取验证码' }} </view> </view> <view v-throttle="2000" class="pay_btnSig" :class="status ? 'red' : 'gray'" @click="singup">{{ status ? `支付${data.cost}报名` : '立即支付' }}</view> </view> <view v-show="!showSignup && id" class="payB" @click="goUnbank"> 支付不了,重新绑定? </view> <view v-show="showSignup" class="voucher"> <image src="../../static/new_my/bg.png" class="bgImg" mode="widthFix" style="width: 750rpx;"></image> <view class="bgImg"> <text style="margin-top: 30rpx;">第{{ data.season }}届大卫博士创业实战营(直播)</text> </view> <view class="voucher_con"> <view class="voucher_icon"> <image src="../../static/icon/success.png" mode="widthFix" style="width: 300rpx;margin-top: 78rpx;"> </image> <view class="success">报名成功</view> <view class="timed"> <!-- 举办时间:{{ data.start+ '-' +data.end }} --> 举办时间:等待通知 </view> </view> <view class="info" v-show="data.pay_status"> <view> <text>收货人:</text> <text>{{ info.username }}</text> </view> <view> <text>手机号:</text> <text>{{ info.mobile }}</text> </view> <view> <text>收货地址:</text> <text>{{ info.local }}</text> </view> <navigator url="./information" class="info_btn">编辑地址</navigator> <button class="info_btn" @click="goApp()">点击查看邀请函</button> </view> </view> </view> </view> </template> <script> import { GetEnrollInfo_online, _API_HuiFuCheck_online, _API_QuickBankPay_online, _API_QuickBankSms_online, _API_CheckStatus_online, GetEnrollUserAddress } from '@/apis/szy.js'; import { UploadSzyImg } from '@/common/util/request' export default { data() { return { status: false, info: {}, data: { season: '', start: '', end: '', name: '', mobile: '', cost: '', local: '' }, noClick: true, showSignup: false, countDown: 0, // 倒计时, sms_code: '', // 验证码, id: '', payId: '' } }, onShow() { this.getInfo() this.getBank() // this.getData() }, computed: { userinfo() { return this.$store.state.userinfo } }, onPullDownRefresh() { this.getInfo() }, methods: { goApp(){ console.log(this.info) if(!this.info.username){ uni.showModal({ title: '提示', content: '检测到您还未编辑地址', showCancel: false }) return } uni.navigateTo({ url: './notice' }) }, // 获取地址 getAddress() { GetEnrollUserAddress().then(res => { if (res.code === 200) { this.info = res.data const data = res.data this.info.local = data.province + data.city + data.area + data.address } else { uni.showModal({ content: res.message || '获取失败', showCancel: false }) } }) }, // 去重新绑定 goUnbank() { uni.navigateTo({ url: '../zbs/unBank?type=2' }) }, // 查询绑卡信息 getBank() { uni.showLoading() _API_HuiFuCheck_online().then(res => { uni.hideLoading() if (res.code == 200) { this.id = res.data.id } else if (res.code == 50014) { this.id = '' uni.showModal({ title: '提示', content: '检测到您还未绑定银行卡,请前往绑定', showCancel: false, success: (res) => { if (res.confirm) { uni.navigateTo({ url: '../zbs/form?type=2' }) } } }) return } else { this.id = '' uni.showModal({ content: res.message || '获取失败', showCancel: false }); return false; } }) }, // 1.发送验证码 getCode() { if (!this.status) { return } if (!this.id) { uni.showModal({ content: '未绑定银行卡', showCancel: false }) return } let that = this uni.showModal({ title: '提示', content: '该短信用于实战营报名费用的支付验证。', success: function (res) { if (res.confirm) { _API_QuickBankPay_online({ id: that.id }).then(res => { if (res.code == 200) { uni.showModal({ content: '验证码发送成功', showCancel: false, success: (e) => { if (e.confirm) { that.payId = res.data.id that.countDown = 180; that.timer = setInterval(() => { that.countDown--; if (!that.countDown) { that.countDown = 0; clearInterval(that.timer); } }, 1000); } } }) } else { uni.showModal({ content: res.message || '获取验证码失败', showCancel: false }); return false; } }) } else if (res.cancel) { } } }); }, // 2. 携带验证码支付 singup() { let that = this if (!this.status) { return } if (!this.sms_code) { uni.showModal({ content: '请先输入验证码', showCancel: false }) return } uni.showModal({ title: '提示', content: '确定要支付吗?', success: (res) => { if (res.confirm) { _API_QuickBankSms_online({ id: that.payId, sms_code: that.sms_code }).then(res => { if (res.code == 200) { if (res.data.status == 0) { that.SearchStatus() } else if (res.data.status == 1) { // uni.navigateBack({ // delta: 2 // }) uni.reLaunch({ url: '/pages/payment/payment' }); } } else { uni.showModal({ title: '失败', content: res.message || '获取失败', showCancel: false }) return false; } }) .catch(err => {}) .finally(() => { setTimeout(() => {}, 3000) }) } } }) }, // 3. 查询支付状态 SearchStatus() { let that = this uni.showLoading({ title: '查询支付状态中...', mask: true }); _API_CheckStatus_online({ id: this.payId }).then(res => { if (res.code == 200) { if (res.data.status == 1) { uni.hideLoading() // uni.navigateBack({ // delta: 2 // }) uni.reLaunch({ url: '/pages/payment/payment' }); } else { that.SearchStatus() } } else { uni.hideLoading() uni.showModal({ content: res.message || '查询失败', showCancel: false }) } }).catch(err => { uni.hideLoading() uni.showModal({ content: err || '查询失败', showCancel: false }) }) }, getTimes(data) { var time = new Date(data) var year = time.getFullYear() var month = time.getMonth() + 1 < 10 ? '0' + (time.getMonth() + 1) : time.getMonth() + 1; var day = time.getDate() < 10 ? '0' + time.getDate() : time.getDate(); var today = year + '.' + month + '.' + day; return today; }, // 获取赛季信息 getInfo() { GetEnrollInfo_online().then(res => { if (res.code == 200) { // res.data.enroll_start_time = "2023-12-05 10:30:00" // 报名时间 // res.data.status = 0 this.data = res.data // uni.setStorageSync("szy_data", res.data) this.data.start = this.getTimes(res.data.start_time) this.data.end = this.getTimes(res.data.end_time) const a = new Date(res.data.enroll_start_time.replace(/-/g,'/')).getTime() const b = new Date(res.data.enroll_end_time.replace(/-/g,'/')).getTime() const now = Date.parse(new Date()) if (now > a && now < b && res.data.limit_num > res.data.num) { this.status = true } if (res.data.status == 1 && res.data.pay_status == 1) { this.getAddress() this.showSignup = true } else { this.showSignup = false } } else { uni.showModal({ content: res.message || '获取失败', showCancel: false }) } }) }, } } </script> <style lang="scss" scoped> .payB { margin-top: 30rpx; text-align: center; color: #FF232C; font-weight: bold; } .pay { margin: 0 30rpx 0 30rpx; border-radius: 16rpx; background-color: #fff; padding: 40rpx 20rpx 40rpx 20rpx; &_title { font-size: 34rpx; font-weight: bold; } &_time { margin-top: 20rpx; font-size: 32rpx; } &_btnSig { margin: 50rpx auto 0; width: 600rpx; line-height: 88rpx; border-radius: 44rpx; text-align: center; color: #fff; font-size: 32rpx; } .red { background: linear-gradient(93deg, #FF232C 0%, #FF571B 100%); } .gray { background-color: #E1E1E1; } } .item { @include flex(); height: 104rpx; box-sizing: border-box; color: $app-sec-text-color; background: #F8F8F8; margin: 50rpx 0 40rpx 0; border-radius: 8rpx; padding-left: 24rpx; .login_icon { width: 36rpx; height: 44rpx; } .icon, .cuIcon-roundclosefill { margin: 0 20rpx; font-size: 36rpx; } input { flex: 1; height: 104rpx; margin-left: 15rpx; } .countdown { @include flex(); height: 60rpx; font-size: 24rpx; padding: 0 20rpx; margin-right: 20rpx; border-radius: 33rpx; text { margin-left: 8rpx; } } .red2 { border: 2rpx solid #FB231F; color: $base-color; } .gray2 { border: 2rpx solid #999; color: #999; } } .top { margin: 0 30rpx 0 30rpx; border-radius: 16rpx; background-color: #fff; padding: 40rpx 20rpx 40rpx 20rpx; } .title { font-size: 34rpx; font-weight: bold; } .time { margin-top: 20rpx; font-size: 32rpx; } .btnSig { margin: 50rpx auto 0; width: 600rpx; line-height: 88rpx; border-radius: 44rpx; text-align: center; color: #fff; font-size: 32rpx; } .red { background: linear-gradient(93deg, #FF232C 0%, #FF571B 100%); } .gray { background-color: #E1E1E1; } .voucher { hieght: 100vh; min-height: 100vh; width: 100vw; position: relative; .bgImg { height: 100vh; width: 100vw; position: fixed; top: 0; left: 0; display: flex; flex-direction: column; align-items: center; font-size: 46rpx; font-weight: bold; text { color: #FFFFFF; margin-top: 10rpx; } } .voucher_con { position: fixed; height: 85%; width: 100%; bottom: 0; left: 0; background: #fff; border-top-left-radius: 60rpx; border-top-right-radius: 60rpx; .line { width: 128rpx; height: 8rpx; background: #f1f3f5; margin: 36rpx auto 0; } .title { color: #333; font-size: 38rpx; // margin: 48rpx auto 60rpx; text-align: center; font-weight: bold; } .voucher_icon { text-align: center; // image { // height: 192rpx; // width: 192rpx; // margin-bottom: 30rpx; // } .success { margin-top: 18rpx; font-size: 48rpx; color: #333; font-weight: bold; } .timed { margin-top: 36rpx; font-size: 40rpx; font-weight: bold; color: #FF0000; } } .logistics { width: 250rpx; height: 68rpx; margin: 0 auto; background: rgba(255, 244, 243, 0.39); border: 2rpx solid #FB231F; opacity: 1; border-radius: 44rpx; color: #FB231F; } .info { margin: 68rpx 50rpx 40rpx 50rpx; color: #333333; text { font-size: 32rpx; } >view { margin-top: 20rpx; } &_btn { margin: 30rpx auto 0 !important; width: 388rpx; line-height: 80rpx; text-align: center; background: #FFF4F3; border: 2rpx solid #FB231F; opacity: 1; border-radius: 44rpx; font-size: 30rpx; font-weight: bold; color: #FB231F; } } } } .bottom { position: fixed; bottom: 0; width: 100%; height: 100rpx; padding: 6rpx 30rpx; background-color: #fff; border-top: 1px solid #eeeeee; &-btn { color: #fff; text-align: center; font-size: 32rpx; font-weight: bold; line-height: 88rpx; height: 88rpx; background: linear-gradient(90deg, #F30000 0%, #FE4815 100%); opacity: 1; border-radius: 44px; } } </style>