vue中控制浏览器前进和后退
<template>
<div class="pay-wrap">
<fed-navbar
v-if="!elongFlag"
:left="[{'tagname':'tag_click_back'}]"
:center="[{'value': payTitle}]"
:callback="pageCB"
></fed-navbar>
<newTab :orderId="this.$route.query.orderId"></newTab>
<div class="pay-time">
<p>请在{{ minute }}:{{ second }}秒内完成支付</p>
</div>
<div class="pay-info">
<p>付款金额：<span>¥{{ payDetail.totalPrice || payDetail.displayAmount }}</span></p>
<p>商品名称：<span>够谱打车订单</span></p>
</div>
<div class="item-wrap">
<div class="item row cen-space" @click="getNewWxPay">
<div class="row cen-center">
<img class="item-icon" :src="wxicon"/>
<span>微信支付</span>
</div>
<span><i class="right"></i></span>
</div>
<div class="item row cen-space" @click="getNewPay">
<div class="row cen-center">
<img class="item-icon" :src="payicon"/>
<span>支付宝支付</span>
</div>
<span><i class="right"></i></span>
</div>
</div>
<!-- <toast ref="toast"></toast> -->
<popConfirm v-on:popTriget="popTriget" :popInfo.sync="popInfo" v-if="showConfirm"></popConfirm>
</div>
</template>
<script>
import wxicon from '@/assets/images/wxicon.png'
import payicon from '@/assets/images/payicon.png'
import newTab from '@/components/common/newTab'
import { PageModul } from '@/utils/commonUtils'
import popConfirm from '../airTransfer/component/popconfirm'
// import { processService } from '@/model/internalapi/carorder/process/processService'
const { payService } = require('../../../model/internalapi/carorder/pay/payService')
export default {
components: {
newTab,
popConfirm
},
data() {
return {
wxicon,
payicon,
elongFlag: false,
payTitle: '收银台',
payDetail: {},
minutes: 5,
seconds: 0,
showConfirm: false, // 控制是否显示支付取消弹窗
popInfo: { //取消支付弹窗提示
closeIcon: true,
title: '支付状态',
content: '是否已完成支付。',
leftButton: '继续支付',
rightButton: '已支付',
lefttext: 'cancelOrder',
righttext: 'car'
}
}
},
watch: {
// 监听数值变化
second: {
handler(newVal) {
this.num(newVal)
}
},
minute: {
handler(newVal) {
this.num(newVal)
}
}
},
computed: {
// 初始化数据
second() {
return this.num(this.seconds)
},
minute() {
return this.num(this.minutes)
}
},
methods: {
// 回退
pageCB() {
PageModule.closePage()
},
// 微信支付
getNewWxPay() {
payService.getIp({}, res => {
let data = {
body: `${this.$route.query.orderId}`,
clientIp: res.ipAddress,
orderId: this.$route.query.orderId,
returnUrl: `https://goupu.t.ly.com/internalCarMerchantH5/order/index#/pay?orderId=${this.$route.query.orderId}`,
subject: `够谱打车订单`,
timeoutMinutes: '5'
}
payService.newWxPay(data, res => {
window.location = res.mweb_url
this.getQueryPayOrder(res)
// processService.queryOrderSimple(this.$route.query.orderId, res => {
// if(res.data.orderStatus > 5) {
// }
// }, error => {
// })
})
})
},
// 支付宝
getNewPay() {
payService.getIp({}, res => {
let data = {
body: `${this.$route.query.orderId}`,
clientIp: res.ipAddress,
orderId: this.$route.query.orderId,
returnUrl: `https://goupu.t.ly.com/internalCarMerchantH5/order/index#/pay?orderId=${this.$route.query.orderId}`,
subject: `够谱打车订单`,
timeoutMinutes: '5'
}
payService.newWxPay(data, res => {
let form= res.form
const div = document.createElement('div')
div.innerHTML = form
document.body.appendChild(div)
document.forms[0].acceptCharset='UTF-8'
document.forms[0].submit()
this.getQueryPayOrder(res)
})
})
},
popTriget(data) {
this.showConfirm = false
if (data === 'cancelOrder') {
this.showConfirm = false
return
} else if(data === 'car') {
this.$router.replace({
path: '/OrderDetailOld',
query: {
orderId: this.$route.query.orderId
}
})
}
},
// 查询接口
getQueryPayOrder() {
let data = {
orderId: this.$route.query.orderId
}
payService.queryPayOrder(data, res => {
if (res.return_code === 'SUCCESS') {
// this.$refs.toast.showoast('支付成功')
// , totalAmount: this.$route.query.totalAmount, paymentCarTypeName: this.$route.query.paymentCarTypeName
this.showConfirm = true
this.$router.push({path: '/pay', query: {orderId: this.$route.query.orderId}})
}
})
},
// 防止数值小于10时，出现一位数
num(n) {
return n < 10 ? '0' + n : '' + n
},
// 倒计时函数
payCountDown() {
let time = window.setInterval(() => {
if (this.minutes !== 0 && this.seconds === 0) {
this.minutes -= 1
this.seconds = 59
} else if (this.minutes === 0 && this.seconds === 0) {
this.seconds = 0
window.clearInterval(time)
} else if (this.minutes !== 0 && this.seconds === 0) {
this.minutes -= 1
this.seconds = 59
} else {
this.seconds -= 1
}
}, 1000)
},
// getBack() {
// if (this.$route.query.orderId) {
// this.$router.push({
// path: '/OrderDetailOld',
// query: {
// orderId: this.$route.query.orderId
// }
// })
// } else {
// this.$router.go(-1)
// }
// }
},
created() {
this.getQueryPayOrder()
setTimeout(() => {
this.showConfirm = true
}, 5000)
},
mounted() {
this.payDetail = this.$route.query
this.payCountDown()
// if (window.history && window.history.pushState) {
// history.pushState(null, null, document.URL)
// window.addEventListener('popstate', this.getBack, false)
// }
},
destroyed() {
// window.removeEventListener('popstate', this.getBack, false)
clearTimeout(() => {
this.showConfirm = false
}, 5000)
}
}
</script>
<style lang="less" scoped>
@import url("../transfer/common/base.css");
.pay-wrap {
height: 100%;
min-height: 100vh;
width: 100%;
overflow: scroll;
box-sizing: border-box;
-webkit-overflow-scrolling: touch;
.pay-time {
background-color: #FFF6D5;
height: 2.6rem;
line-height: 2.6rem;
text-align: center;
border-top: 0.1rem solid #F2E7BC;
border-bottom: 0.1rem solid #F2E7BC;
p {
font-size: 0.7rem;
color: #B59935;
}
}
.pay-info {
background: #fff;
padding: 1rem 0.85rem 0.75rem 0.81rem;
box-shadow: 0 1rem 0.5rem -1rem #BDBDBD;
-webkit-box-shadow: 0 1rem 0.5rem -1rem #BDBDBD;
-moz-box-shadow: 0 1rem 0.5rem -1rem #BDBDBD;
p {
color: #969696;
font-size: 0.9rem;
padding-bottom: 0.5rem;
span {
color: #001D24;
}
}
}
.item-wrap {
flex: auto;
margin-top: 0.7rem;
background-color: #fff;
box-shadow: 0 1rem 0.5rem -1rem #BDBDBD;
-webkit-box-shadow: 0 1rem 0.5rem -1rem #BDBDBD;
-moz-box-shadow: 0 1rem 0.5rem -1rem #BDBDBD;
}
.item {
padding: 0 1rem 0 1.25rem;
font-family: PingFangSC-Regular;
font-size: 16px;
color: #333333;
letter-spacing: 0;
height: 3rem;
width: 100%;
border-bottom: 1px solid #f4f4f4;
}
.item-icon {
width: 0.9rem;
height: 0.9rem;
margin-right: 0.6rem;
}
i {
border: solid black;
border-width: 0 1px 1px 0;
display: inline-block;
padding: 3px;
}
.right {
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
}
</style>