no-data.vue 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136
  1. <template>
  2. <!-- 无数据展示 -->
  3. <view class="no-data-container" :style="{top: top === 0 ? 0 : `${navBarHeight + topCOM}px`}">
  4. <view class="no-data-box">
  5. <slot v-if="custom"></slot>
  6. <view v-else class="text-center">
  7. <!-- <view class="flex jcc">
  8. <image class="status-img" mode="widthFix" v-if="statusImgUrl" :src="statusImgUrl"></image>
  9. </view> -->
  10. <view class="no-data-tips">{{tipsTextCOM}}</view>
  11. <u-button :customStyle="{fontSize: '32rpx'}" v-if="buttonTextCOM" type="primary" :text="buttonTextCOM" shape="circle"
  12. @click="buttonHandle">
  13. </u-button>
  14. <view v-if="login" style="margin-top: 20rpx;">
  15. <u-button :customStyle="{fontSize: '32rpx'}" text="暂不登录" shape="circle" @click="inBuyer">
  16. </u-button>
  17. </view>
  18. </view>
  19. </view>
  20. </view>
  21. </template>
  22. <script>
  23. import {
  24. toPx
  25. } from '@/utils/calculate.js'
  26. // import defaultConfig from '@/config/default.js'
  27. export default {
  28. props: {
  29. top: { // 顶部位置 设置0则置顶 不设置则根据顶部导航高度自适应
  30. type: [Number, String],
  31. default: ''
  32. },
  33. statusType: { // 空状态类型
  34. type: Number,
  35. default: 8
  36. },
  37. custom: Boolean, // 是否自定义插槽
  38. tipsText: String, // 文案
  39. buttonText: String,
  40. login: Boolean // 是否是登录按钮
  41. },
  42. data() {
  43. return {
  44. navBarHeight: this.$getSS('navBarHeight')
  45. }
  46. },
  47. computed: {
  48. topCOM() {
  49. return toPx(this.top)
  50. },
  51. // statusImgUrl() {
  52. // let url = ''
  53. // const maps = this.$store.state.emptyStatus.status
  54. // const index = maps.findIndex(item => item.type === this.statusType)
  55. // url = index !== -1 ? defaultConfig.ossImgUrl + maps[index].url : ''
  56. // return url
  57. // },
  58. buttonTextCOM() {
  59. let text = ''
  60. if (this.login) {
  61. text = '去登录'
  62. } else {
  63. text = this.buttonText
  64. }
  65. if (this.statusType === 8) {
  66. text = ''
  67. }
  68. return text
  69. },
  70. tipsTextCOM() {
  71. let text = ''
  72. if (this.login) {
  73. text = '您还未登录哦 点击下方按钮去登录或者去首页逛逛'
  74. } else {
  75. text = this.tipsText
  76. }
  77. if (this.statusType === 8) {
  78. text = '暂无数据'
  79. }
  80. return text
  81. }
  82. },
  83. methods: {
  84. // 去首页
  85. inBuyer() {
  86. this.$setSS('__platformType', 1)
  87. this.$Router.replace({
  88. name: 'bus'
  89. })
  90. },
  91. buttonHandle() {
  92. this.$emit('buttonHandle')
  93. if (this.login) {
  94. this.$navigateTo({
  95. name: 'login'
  96. })
  97. }
  98. }
  99. }
  100. }
  101. </script>
  102. <style lang="scss" scoped>
  103. .no-data-container {
  104. position: fixed;
  105. left: 0;
  106. width: 100%;
  107. bottom: 0;
  108. padding: 24rpx 18rpx 0;
  109. // background-color: $bg-color-main;
  110. z-index: 996;
  111. .status-img {
  112. width: 50%;
  113. margin-bottom: 60rpx;
  114. }
  115. .no-data-box {
  116. border-radius: 24rpx 24rpx 0 0;
  117. // background-color: #fff;
  118. width: 100%;
  119. height: 100%;
  120. padding: 180rpx 34rpx;
  121. }
  122. .no-data-tips {
  123. color: #707476;
  124. font-size: 28rpx;
  125. line-height: 40rpx;
  126. margin-bottom: 34rpx;
  127. text-align: center;
  128. padding: 0 50rpx;
  129. }
  130. }
  131. </style>