{"ast":null,"code":"import { myMixins } from '@/utils/myMixins.js';\nimport { getAmount, pay, getCurrentOrder } from '@/api/order';\nimport AttentionItem from '@/components/attentionItem';\nimport commonBtn from \"@/components/commonBtn\";\nimport operationBtn from \"@/components/operationBtn\";\nexport default {\n  name: \"payPage\",\n  data() {\n    return {\n      map: '',\n      extraFee: 0,\n      ticketId: '',\n      orderInfo: '',\n      marker: '',\n      lat: '',\n      lng: '',\n      userPhone: '',\n      plateNumber: '',\n      timer: ''\n    };\n  },\n  mixins: [myMixins],\n  components: {\n    AttentionItem,\n    commonBtn,\n    operationBtn\n  },\n  async mounted() {\n    await this.initInfo();\n    await this.initMap();\n    await this.getAmountHandler();\n    await this.getOrderInfo();\n    // 事发地 marker\n    if (this.lat && this.lng) {\n      this.markerFn(this.lng, this.lat, this.marker, 'my-position');\n    }\n    /*this.$once('hook:beforeDestroy', () => {\r\n      clearInterval(this.timer)\r\n    })*/\n\n    document.addEventListener('visibilitychange', async e => {\n      console.log(document.visibilityState);\n      let state = document.visibilityState;\n      if (state == 'hidden') {// 用户离开了\n        // clearInterval(this.timer)\n      }\n      if (state == 'visible') {\n        await this.getOrderInfo();\n        // await this.setTimer()\n        //调用接口,获取订单状态\n      }\n    });\n  },\n\n  methods: {\n    initInfo() {\n      this.ticketId = this.$route.query.ticketId;\n      this.lat = this.$route.query.lat;\n      this.lng = this.$route.query.lng;\n      this.userPhone = this.$route.query?.userPhone || '';\n      this.plateNumber = this.$route.query?.plateNumber || '';\n    },\n    setTimer() {\n      if (!this.timer) {\n        this.timer = setInterval(async () => {\n          await this.getOrderInfo();\n        }, 2000);\n      }\n    },\n    markerFn(lng, lat, marker, markerCls) {\n      if (marker) {\n        this.map.remove(marker);\n      }\n      let content = `<div class=\"${markerCls}\"></div>`;\n      marker = new AMap.Marker({\n        position: new AMap.LngLat(lng, lat),\n        content: content,\n        offset: new AMap.Pixel(-13, -30)\n      });\n      this.map.add(marker);\n    },\n    callClient() {\n      window.location.href = 'tel:' + localStorage.getItem('client');\n    },\n    initMap() {\n      this.map = new AMap.Map('mapId', {\n        viewMode: '2D',\n        // 默认使用 2D 模式\n        zoom: 13,\n        //初始化地图层级\n        center: [this.lng, this.lat] //初始化地图中心点\n      });\n    },\n\n    async getAmountHandler() {\n      let res = await getAmount({\n        appCode: localStorage.getItem('appCode'),\n        ticketId: this.ticketId\n      });\n      this.extraFee = res.extraFee;\n    },\n    async payHandler() {\n      let res = await pay({\n        // amount: this.extraFee,\n        amount: 0.01,\n        code: this.ticketId,\n        appid: 'wxd6e70d02102c9cff'\n      });\n      if (res) {\n        window.location.href = res + '&redirect_url=https:www.baidu.com';\n        // window.location.replace(res)\n      }\n    },\n\n    async getOrderInfo() {\n      this.orderInfo = await getCurrentOrder({\n        ticketId: this.ticketId,\n        appCode: localStorage.getItem('appCode'),\n        userPhone: this.userPhone,\n        plateNumber: this.plateNumber\n      });\n      await this.goDetail(this.orderInfo);\n    },\n    goDetail(result) {\n      if (result.orderStatus != 17) {\n        // 代付款页\n        this.goPage('orderStatus', {\n          ticketId: result.ticketId,\n          userPhone: this.userPhone,\n          plateNumber: this.plateNumber\n        });\n      }\n    }\n  }\n};","map":{"version":3,"names":["myMixins","getAmount","pay","getCurrentOrder","AttentionItem","commonBtn","operationBtn","name","data","map","extraFee","ticketId","orderInfo","marker","lat","lng","userPhone","plateNumber","timer","mixins","components","mounted","initInfo","initMap","getAmountHandler","getOrderInfo","markerFn","document","addEventListener","e","console","log","visibilityState","state","methods","$route","query","setTimer","setInterval","markerCls","remove","content","AMap","Marker","position","LngLat","offset","Pixel","add","callClient","window","location","href","localStorage","getItem","Map","viewMode","zoom","center","res","appCode","payHandler","amount","code","appid","goDetail","result","orderStatus","goPage"],"sources":["src/views/index/pay.vue"],"sourcesContent":["<template>\r\n  <div class=\"pay_wrap\">\r\n    <div class=\"map_wrap\" id=\"mapId\">\r\n    </div>\r\n    <div class=\"pay_container\">\r\n      <div class=\"top_wrap\">\r\n        <div class=\"top_line\"></div>\r\n        <attention-item attention=\"温馨提示：如果您的车子在马路上，请注意把车子停到路边打开双闪并远离车辆，谢谢。\"></attention-item>\r\n      </div>\r\n      <div class=\"pay_info\">\r\n        <div class=\"fee_desc\">本次服务费用：</div>\r\n        <div class=\"money_detail\">\r\n          <img src=\"@/assets/money.png\" alt=\"\">\r\n          <span class=\"money_count\">{{ extraFee }}</span>\r\n          <span>元</span>\r\n        </div>\r\n        <div class=\"btn_wrap\">\r\n          <common-btn title=\"支 付\" @ownClick=\"payHandler\"></common-btn>\r\n        </div>\r\n        <div >\r\n          <a href=\"tel:15256085051\"><operation-btn title=\"联系客服\" :url=\"require('@/assets/callPhone.png')\"></operation-btn></a>\r\n<!--          @ownClick=\"callClient\"-->\r\n          <operation-btn title=\"取消订单\" :url=\"require('@/assets/cancel.png')\" @ownClick=\"goPage('CancelPage', { ticketId: ticketId })\" :has-distance=\"true\"></operation-btn>\r\n        </div>\r\n      </div>\r\n\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script>\r\n  import { myMixins } from '@/utils/myMixins.js'\r\n  import { getAmount, pay, getCurrentOrder } from '@/api/order'\r\n  import AttentionItem from '@/components/attentionItem'\r\n  import commonBtn from \"@/components/commonBtn\";\r\n  import operationBtn from \"@/components/operationBtn\";\r\n  export default {\r\n    name: \"payPage\",\r\n    data() {\r\n      return {\r\n        map: '',\r\n        extraFee: 0,\r\n        ticketId: '',\r\n        orderInfo: '',\r\n        marker: '',\r\n        lat: '',\r\n        lng: '',\r\n        userPhone: '',\r\n        plateNumber: '',\r\n        timer: '',\r\n      }\r\n    },\r\n    mixins: [ myMixins ],\r\n    components: {\r\n      AttentionItem,\r\n      commonBtn,\r\n      operationBtn\r\n    },\r\n    async mounted() {\r\n      await this.initInfo()\r\n      await this.initMap()\r\n      await this.getAmountHandler()\r\n      await this.getOrderInfo()\r\n      // 事发地 marker\r\n      if( this.lat && this.lng ) {\r\n        this.markerFn(this.lng, this.lat, this.marker, 'my-position')\r\n      }\r\n      /*this.$once('hook:beforeDestroy', () => {\r\n        clearInterval(this.timer)\r\n      })*/\r\n\r\n      document.addEventListener('visibilitychange', async (e) => {\r\n        console.log(document.visibilityState);\r\n        let state = document.visibilityState\r\n        if (state == 'hidden') {  // 用户离开了\r\n          // clearInterval(this.timer)\r\n        }\r\n        if (state == 'visible') {\r\n          await this.getOrderInfo()\r\n          // await this.setTimer()\r\n          //调用接口,获取订单状态\r\n        }\r\n      });\r\n    },\r\n    methods: {\r\n      initInfo() {\r\n        this.ticketId = this.$route.query.ticketId\r\n        this.lat = this.$route.query.lat\r\n        this.lng = this.$route.query.lng\r\n        this.userPhone = this.$route.query?.userPhone || ''\r\n        this.plateNumber = this.$route.query?.plateNumber || ''\r\n      },\r\n      setTimer() {\r\n        if( !this.timer ) {\r\n          this.timer = setInterval(async () => {\r\n            await this.getOrderInfo()\r\n          }, 2000)\r\n        }\r\n      },\r\n      markerFn(lng, lat, marker , markerCls) {\r\n        if(marker) {\r\n          this.map.remove(marker)\r\n        }\r\n        let content = `<div class=\"${markerCls}\"></div>`;\r\n        marker = new AMap.Marker({\r\n          position: new AMap.LngLat( lng, lat ),\r\n          content: content,\r\n          offset: new AMap.Pixel(-13, -30)\r\n        });\r\n        this.map.add(marker)\r\n      },\r\n      callClient() {\r\n        window.location.href = 'tel:' + localStorage.getItem('client');\r\n      },\r\n      initMap() {\r\n        this.map = new AMap.Map('mapId', {\r\n          viewMode: '2D',  // 默认使用 2D 模式\r\n          zoom:13,  //初始化地图层级\r\n          center: [this.lng, this.lat]  //初始化地图中心点\r\n        })\r\n      },\r\n      async getAmountHandler() {\r\n        let res = await getAmount({\r\n          appCode: localStorage.getItem('appCode'),\r\n          ticketId: this.ticketId,\r\n        })\r\n        this.extraFee =  res.extraFee;\r\n      },\r\n      async payHandler() {\r\n        let res = await pay({\r\n          // amount: this.extraFee,\r\n          amount: 0.01,\r\n          code: this.ticketId,\r\n          appid: 'wxd6e70d02102c9cff'\r\n        })\r\n        if ( res ) {\r\n          window.location.href = res  + '&redirect_url=https:www.baidu.com'\r\n          // window.location.replace(res)\r\n        }\r\n      },\r\n      async getOrderInfo() {\r\n        this.orderInfo = await getCurrentOrder({\r\n          ticketId: this.ticketId,\r\n          appCode: localStorage.getItem('appCode'),\r\n          userPhone: this.userPhone,\r\n          plateNumber: this.plateNumber\r\n        })\r\n        await this.goDetail(this.orderInfo)\r\n      },\r\n      goDetail(result) {\r\n        if( result.orderStatus != 17 ) {     // 代付款页\r\n          this.goPage('orderStatus', {\r\n            ticketId: result.ticketId,\r\n            userPhone: this.userPhone,\r\n            plateNumber: this.plateNumber\r\n          })\r\n        }\r\n      },\r\n    }\r\n  }\r\n</script>\r\n\r\n<style scoped lang=\"less\">\r\n.pay_wrap {\r\n  height: 100%;\r\n  display: flex;\r\n  flex-direction: column;\r\n  box-sizing: border-box;\r\n  .map_wrap {\r\n    flex: 1;\r\n  }\r\n  .pay_container {\r\n    background: #fff;\r\n    .top_wrap {\r\n      padding-top: 10px;\r\n      background: #fafafa;\r\n      .top_line {\r\n        width: 34px;\r\n        height: 3px;\r\n        background: #9FA5B4;\r\n        border-radius: 3px;\r\n        opacity: 0.19;\r\n        margin: 0 auto;\r\n      }\r\n    }\r\n    .pay_info {\r\n      padding: 40px 0;\r\n      text-align: center;\r\n      .fee_desc {\r\n        color: rgba(0,0,0,0.7);\r\n        font-size: 14px;\r\n      }\r\n      .money_detail {\r\n        color: #2C2A53;\r\n        font-size: 15px;\r\n        img {\r\n          width: 17px;\r\n          height: 17px;\r\n        }\r\n        .money_count {\r\n          font-size: 34px;\r\n        }\r\n      }\r\n      .btn_wrap {\r\n        width: 80%;\r\n        margin: 15px auto 25px;\r\n      }\r\n    }\r\n  }\r\n}\r\n</style>\r\n<style>\r\n  @import '@/styles/common.css';\r\n</style>\r\n\r\n"],"mappings":"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"},"metadata":{},"sourceType":"module","externalDependencies":[]}