|
|
@@ -154,6 +154,20 @@
|
|
|
<van-popup id="protocolPopup" v-model="popupStatus" position="bottom">
|
|
|
<protocol :proto="protocolData" @popupClose="onPopupClose"></protocol>
|
|
|
</van-popup>
|
|
|
+
|
|
|
+ <van-popup v-model="orderPayStatus" position='bottom'>
|
|
|
+ <!-- <van-count-down :time='time' /> -->
|
|
|
+ <p class="countDownContent">恭喜您抢占席位成功，请您在（<van-count-down format="ss" @finish="finished" :time='time' />秒）内完成支付！</p>
|
|
|
+ <iframe class="iframe" src="./orderpay.html" width="100%" height="100%" frameborder="0" scrolling='auto' seamless></iframe>
|
|
|
+ </van-popup>
|
|
|
+
|
|
|
+ <!-- <van-overlay :show="true" @click="show = false" >
|
|
|
+ <van-loading size="24px" vertical>加载中...</van-loading>
|
|
|
+ </van-overlay> -->
|
|
|
+
|
|
|
+ <van-popup v-model="loadingOrderStatus" :close-on-click-overlay='false' class="loadingOrder">
|
|
|
+ <van-loading size="36px" vertical color="#14928A">{{ loadingOrderText }}</van-loading>
|
|
|
+ </van-popup>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
@@ -162,12 +176,21 @@
|
|
|
import {instruments, baseInfo } from '../assets/front_instruments_config'
|
|
|
import qs from 'qs'
|
|
|
import Protocol from './protocol'
|
|
|
-import { Dialog } from 'vant'
|
|
|
+import OrderPay from './orderPay'
|
|
|
+import { Dialog, CountDown } from 'vant'
|
|
|
export default {
|
|
|
name: 'home',
|
|
|
- components: { Protocol, Dialog },
|
|
|
+ components: { Protocol, Dialog, CountDown, OrderPay },
|
|
|
data() {
|
|
|
return {
|
|
|
+ time: 120 * 1000, // 倒计时时间
|
|
|
+ loadingOrderStatus: false, // 排队中状态
|
|
|
+ loadingOrderText: '加载中...', // 排队文案
|
|
|
+ resultParams: '', // 提交订单参数
|
|
|
+ clickBtnCount: true, // 点击按钮次数判定
|
|
|
+ paymentTimers: null, // 定时器
|
|
|
+ paymentPostCount: 0, // 请求计数
|
|
|
+ orderPayStatus: false, // 支付弹窗
|
|
|
popupStatus: false, // 协议弹窗样式
|
|
|
protocolData: {}, // 协议参数
|
|
|
result: {}, // 返回结果
|
|
|
@@ -308,6 +331,12 @@ export default {
|
|
|
|
|
|
},
|
|
|
buy() {
|
|
|
+ // 判断是否点击过
|
|
|
+ if(!this.clickBtnCount) {
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ this.clickBtnCount = false
|
|
|
+
|
|
|
// 确认购买
|
|
|
let params = this.$route.query
|
|
|
let resultParams = {
|
|
|
@@ -352,20 +381,72 @@ export default {
|
|
|
})
|
|
|
return false
|
|
|
}
|
|
|
+ this.resultParams = resultParams
|
|
|
axios.post('/yqpay/toPay', qs.stringify(resultParams)).then((res) => {
|
|
|
let result = res.data
|
|
|
- if(result.data) {
|
|
|
- this.form = result.data
|
|
|
- this.onSubmit()
|
|
|
+ this.clickBtnCount = true
|
|
|
+ if(result.code == 403) {
|
|
|
+ this.loadingOrderStatus = true
|
|
|
+ this.loadingOrderText = result.msg
|
|
|
+ this.paymentMethods()
|
|
|
} else {
|
|
|
- Dialog.alert({
|
|
|
- title: '提示',
|
|
|
- message: result.msg,
|
|
|
- confirmButtonColor: '#269a93'
|
|
|
- })
|
|
|
+ if(result.data) {
|
|
|
+ this.form = result.data
|
|
|
+ this.orderPayStatus = true
|
|
|
+ sessionStorage.setItem('orderForm', JSON.stringify(result.data))
|
|
|
+ } else {
|
|
|
+ Dialog.alert({
|
|
|
+ title: '提示',
|
|
|
+ message: result.msg,
|
|
|
+ confirmButtonColor: '#269a93'
|
|
|
+ })
|
|
|
+ }
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
+ paymentMethods() {
|
|
|
+ let resultParams = this.resultParams
|
|
|
+ if(!resultParams) {
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ let that = this
|
|
|
+ // let paymentTimers, paymentPostCount = 0
|
|
|
+ that.paymentTimers = setInterval(() => {
|
|
|
+ that.paymentPostCount++
|
|
|
+ if(that.paymentPostCount >= 30) {
|
|
|
+ clearInterval(that.paymentTimers)
|
|
|
+ } else {
|
|
|
+ axios.post('/yqpay/toPay', qs.stringify(resultParams)).then((res) => {
|
|
|
+ let result = res.data
|
|
|
+ if(result.code == 403) {
|
|
|
+ that.loadingOrderStatus = true
|
|
|
+ that.loadingOrderText = result.msg
|
|
|
+ } else {
|
|
|
+ clearInterval(that.paymentTimers)
|
|
|
+ that.loadingOrderStatus = false
|
|
|
+ that.loadingOrderText = '加载中...'
|
|
|
+ if(result.data) {
|
|
|
+ that.form = result.data
|
|
|
+ console.log(result.data)
|
|
|
+ that.orderPayStatus = true
|
|
|
+ sessionStorage.setItem('orderForm', JSON.stringify(result.data))
|
|
|
+ } else {
|
|
|
+ Dialog.alert({
|
|
|
+ title: '提示',
|
|
|
+ message: result.msg,
|
|
|
+ confirmButtonColor: '#269a93'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }, 1000 * 10)
|
|
|
+
|
|
|
+ },
|
|
|
+ finished() {
|
|
|
+ // 倒计时结束调用
|
|
|
+ this.orderPayStatus = false
|
|
|
+ },
|
|
|
onSubmit() {
|
|
|
// submit 提交
|
|
|
let f = this.form
|
|
|
@@ -732,5 +813,33 @@ export default {
|
|
|
padding: .08rem .28rem;
|
|
|
}
|
|
|
}
|
|
|
+ .iframe {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ -webkit-overflow-scrolling: touch;
|
|
|
+ overflow-y: scroll;
|
|
|
+ border-top: none !important;
|
|
|
+ min-height: calc(100vh - .41rem);
|
|
|
+ }
|
|
|
+
|
|
|
+ .countDownContent {
|
|
|
+ line-height: .4rem;
|
|
|
+ text-align: center;
|
|
|
+ font-size: .14rem;
|
|
|
+ border-bottom: .01rem solid #ccc;
|
|
|
+ .van-count-down {
|
|
|
+ display: inline;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .loadingOrder {
|
|
|
+ width: 90%;
|
|
|
+ height: 1.8rem;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ .van-loading__text {
|
|
|
+ color: #444;
|
|
|
+ }
|
|
|
+ }
|
|
|
</style>
|
|
|
|
