pageButton.vue 2.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182
  1. <template>
  2. <view class="i-z-index3" v-show="isShow">
  3. <!-- 头部 -->
  4. <view class="i-pst-f i-l-p11 i-t-p5 i-z-index3 animate__animated" :class="pageStatus===1?'animate__fadeInLeft':pageStatus===3?'animate__fadeOutLeft':''">
  5. <view class=" i-flex i-al-center" @click="gotoLast()">
  6. <view class="i-radius-p50 i-bd-1 i-flex i-al-center i-jst-center">
  7. <uni-icons type="back" size="1.6rem" color="#FFF"></uni-icons>
  8. </view>
  9. <span class="i-c-fff i-ml-10 i-fs-30">{{nowTitle}}</span>
  10. </view>
  11. </view>
  12. <!-- 底部按钮 -->
  13. <view class="i-pst-f i-r-p10 i-b-p15 i-flex i-z-index3">
  14. <view class=" animate__animated" :class="pageStatus===1?'animate__fadeInRight':pageStatus===3?'animate__fadeOutRight':''">
  15. <view class=" i-flex i-al-center i-z-index3 i-bd-1 i-radius-40 i-plr-20 i-ptb-20 i-b-c-fff"
  16. @click="gotoLast()">
  17. <view class="i-radius-p50 i-bd-3 i-flex i-al-center i-jst-center">
  18. <uni-icons type="back" size="1.7rem" color="#000"></uni-icons>
  19. </view>
  20. <span class="i-c-000 i-ml-10 i-fs-26">返回上一级</span>
  21. </view>
  22. </view>
  23. <view class="i-ml-10 animate__animated" :class="pageStatus===1?'animate__fadeInRight':pageStatus===3?'animate__fadeOutRight':''">
  24. <view class=" i-flex i-al-center i-z-index3 i-bd-1 i-radius-40 i-plr-20 i-ptb-20 i-b-c-fff"
  25. @click="gotoBack()">
  26. <!-- <view class="i-radius-p50 i-bd-3 i-p-2"> -->
  27. <uni-icons type="home" size="1.9rem" color="#000"></uni-icons>
  28. <!-- </view> -->
  29. <span class="i-c-000 i-ml-10 i-fs-26">回到首页</span>
  30. </view>
  31. </view>
  32. </view>
  33. </view>
  34. </template>
  35. <script>
  36. export default {
  37. name: "pageButton",
  38. data() {
  39. return {
  40. };
  41. },
  42. props: {
  43. buttonData: {
  44. type: Object,
  45. },
  46. nowTitle: {
  47. type: String,
  48. default: '默认'
  49. },
  50. isShow: {
  51. type: Boolean,
  52. default: true
  53. },
  54. // 页面状态 动画效果
  55. pageStatus: {
  56. type: Number,
  57. default: 1,
  58. },
  59. },
  60. watch: {},
  61. methods: {
  62. // 返回上一页
  63. gotoLast() {
  64. // 先执行动画再返回
  65. if (this.buttonData.lastpage[this.buttonData.lastpage.length - 2] == 'default') {
  66. // this.buttonAnimation()
  67. }
  68. this.$emit('tolastEvent')
  69. },
  70. // 返回主页
  71. gotoBack() {
  72. this.$emit('backEvent')
  73. }
  74. }
  75. }
  76. </script>
  77. <style>
  78. </style>