标签：orderId vue 浏览器 后退 res route rem query 1rem

<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>

标签：orderId,vue,浏览器,后退,res,route,rem,query,1rem
来源： https://www.cnblogs.com/amujoe/p/14007036.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。