index.vue 1.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455
  1. <template>
  2. <div class="layout">
  3. <slot></slot>
  4. <img src="@/assets/image/goBack-cion.png" alt="" class="go-back" @click="goBack" v-if="visible">
  5. </div>
  6. </template>
  7. <script>
  8. export default {
  9. name: 'layout',
  10. props: {
  11. isGoBack
  12. },
  13. data() {
  14. return {
  15. visible: true,
  16. isApp: null,
  17. isAndroid: null
  18. };
  19. },
  20. mounted() {
  21. // 如果是安卓的需要判断一下是否显示h5内置的返回按钮
  22. // 如果是H5、微信小程序,不需要显示次按钮
  23. // 如果是苹果就显示,不需要做任何处理
  24. this.isApp = this.$userAgent.isSzx || this.$userAgent.isSzxBrowser
  25. this.isAndroid = this.$userAgent.isAndroid;
  26. if(!this.isApp) return this.visible = false
  27. if(this.isApp && this.isAndroid) {
  28. this.visible = !!window.native.goneBack
  29. return
  30. }
  31. },
  32. methods: {
  33. goBack() {
  34. // 如果为true是最前一页
  35. if(isGoBack) {
  36. this.isAndroid ? window.native.backClick() : window.webkit.messageHandlers.appGoBack.postMessage({})
  37. return
  38. }
  39. this.$router.go(-1)
  40. }
  41. }
  42. };
  43. </script>
  44. <style lang="less" scoped>
  45. .go-back{
  46. position: fixed;
  47. width: 42px;
  48. height: 42px;
  49. left: 26px;
  50. bottom: 98px;
  51. }
  52. </style>