{"ast":null,"code":"import { getAmount } 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      clientPhone: 'tel:' + localStorage.getItem('client')\n    };\n  },\n  components: {\n    AttentionItem,\n    commonBtn,\n    operationBtn\n  },\n  async mounted() {\n    this.ticketId = this.$route.query.ticketId;\n    await this.initMap();\n    await this.getAmountHandler();\n  },\n  methods: {\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: 11,\n        //初始化地图层级\n        center: [116.397428, 39.90923] //初始化地图中心点\n      });\n    },\n\n    async getAmountHandler() {\n      let res = await getAmount({\n        appCode: localStorage.getItem('appCode') || 'XCHRSA',\n        ticketId: this.ticketId\n      });\n      this.extraFee = res.extraFee;\n    }\n  }\n};","map":{"version":3,"names":["getAmount","AttentionItem","commonBtn","operationBtn","name","data","map","extraFee","clientPhone","localStorage","getItem","components","mounted","ticketId","$route","query","initMap","getAmountHandler","methods","callClient","window","location","href","AMap","Map","viewMode","zoom","center","res","appCode"],"sources":["src/views/index/pay.vue"],"sourcesContent":["<template>\r\n  <div class=\"pay_wrap\">\r\n    <div class=\"map_wrap\" id=\"mapId\">\r\n      map\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=\"支 付\"></common-btn>\r\n        </div>\r\n        <div >\r\n          <a :href='clientPhone' class=\"operation_btn\">\r\n            <img src=\"@/assets/callPhone.png\" alt=\"\">\r\n            <span>联系客服</span>\r\n          </a>\r\n<!--          <operation-btn title=\"联系客服\" :url=\"require('@/assets/callPhone.png')\" @ownClick=\"callClient\"></operation-btn>-->\r\n          <operation-btn title=\"取消订单\" :url=\"require('@/assets/cancel.png')\" :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 { getAmount } 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        clientPhone: 'tel:' + localStorage.getItem('client')\r\n      }\r\n    },\r\n    components: {\r\n      AttentionItem,\r\n      commonBtn,\r\n      operationBtn\r\n    },\r\n    async mounted() {\r\n      this.ticketId = this.$route.query.ticketId\r\n      await this.initMap()\r\n      await this.getAmountHandler()\r\n    },\r\n    methods: {\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:11,  //初始化地图层级\r\n          center: [116.397428, 39.90923]  //初始化地图中心点\r\n        })\r\n      },\r\n      async getAmountHandler() {\r\n        let res = await getAmount({\r\n          appCode: localStorage.getItem('appCode') || 'XCHRSA',\r\n          ticketId: this.ticketId,\r\n        })\r\n        this.extraFee =  res.extraFee;\r\n      },\r\n    }\r\n  }\r\n</script>\r\n\r\n<style scoped lang=\"less\">\r\n.pay_wrap {\r\n  height: 100vh;\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\r\n.operation_btn {\r\n  display: inline-block;\r\n  padding: 6px 8px;\r\n  text-align: center;\r\n  font-size: 11px;\r\n  border: 1px solid #DDDDDD;\r\n  color: rgba(0,0,0,0.7);\r\n  border-radius: 5px;\r\n  margin-top: 5px;\r\n  img {\r\n    width: 13px;\r\n    height: 13px;\r\n    margin-right: 5px;\r\n    vertical-align: text-top;\r\n  }\r\n}\r\n</style>\r\n"],"mappings":"AAmCA,SAAAA,SAAA;AACA,OAAAC,aAAA;AACA,OAAAC,SAAA;AACA,OAAAC,YAAA;AACA;EACAC,IAAA;EACAC,KAAA;IACA;MACAC,GAAA;MACAC,QAAA;MACAC,WAAA,WAAAC,YAAA,CAAAC,OAAA;IACA;EACA;EACAC,UAAA;IACAV,aAAA;IACAC,SAAA;IACAC;EACA;EACA,MAAAS,QAAA;IACA,KAAAC,QAAA,QAAAC,MAAA,CAAAC,KAAA,CAAAF,QAAA;IACA,WAAAG,OAAA;IACA,WAAAC,gBAAA;EACA;EACAC,OAAA;IACAC,WAAA;MACAC,MAAA,CAAAC,QAAA,CAAAC,IAAA,YAAAb,YAAA,CAAAC,OAAA;IACA;IACAM,QAAA;MACA,KAAAV,GAAA,OAAAiB,IAAA,CAAAC,GAAA;QACAC,QAAA;QAAA;QACAC,IAAA;QAAA;QACAC,MAAA;MACA;IACA;;IACA,MAAAV,iBAAA;MACA,IAAAW,GAAA,SAAA5B,SAAA;QACA6B,OAAA,EAAApB,YAAA,CAAAC,OAAA;QACAG,QAAA,OAAAA;MACA;MACA,KAAAN,QAAA,GAAAqB,GAAA,CAAArB,QAAA;IACA;EACA;AACA"},"metadata":{},"sourceType":"module","externalDependencies":[]}