empty.nvue 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143
  1. <template>
  2. <view class="u-page">
  3. <view class="u-page__top-box">
  4. <text class="u-demo-block__title">演示效果</text>
  5. </view>
  6. <u-empty
  7. :mode="mode"
  8. :icon="imgList[mode]"
  9. >
  10. <u-button
  11. size="small"
  12. type="primary"
  13. :style="{marginTop:10+'px'}"
  14. v-if="mode=='car'"
  15. text="查看更多商品"
  16. >
  17. </u-button>
  18. </u-empty>
  19. <div class="empty-select">
  20. <u-cell
  21. :titleStyle="{fontWeight: 500}"
  22. @click="openImg(item.imgName)"
  23. :title="item.title"
  24. v-for="(item, index) in list"
  25. :key="index"
  26. isLink
  27. >
  28. <image
  29. slot="icon"
  30. class="u-cell-icon"
  31. :src="item.iconUrl"
  32. mode="widthFix"
  33. ></image>
  34. </u-cell>
  35. </div>
  36. </view>
  37. </template>
  38. <script>
  39. export default {
  40. data() {
  41. // 如果使用这些图片,请勿直接引入cdn.uviewui.com的资源,因为此资源路径随时会有变动
  42. // 变动后,您将会访问图片失败,如有需要,您可以将这些图片上传到自己的oss或者服务器再使用
  43. const baseUrl = 'http://cdn.uviewui.com/uview/empty/'
  44. return {
  45. mode: 'car',
  46. imgList: {
  47. car: baseUrl + 'car.png',
  48. address: baseUrl + 'address.png',
  49. comment: baseUrl + 'comment.png',
  50. coupon: baseUrl + 'coupon.png',
  51. data: baseUrl + 'data.png',
  52. history: baseUrl + 'history.png',
  53. list: baseUrl + 'list.png',
  54. message: baseUrl + 'message.png',
  55. news: baseUrl + 'news.png',
  56. order: baseUrl + 'order.png',
  57. page: baseUrl + 'page.png',
  58. permission: baseUrl + 'permission.png',
  59. search: baseUrl + 'search.png',
  60. wifi: baseUrl + 'wifi.png',
  61. },
  62. list: [{
  63. imgName: 'car',
  64. title: '购物车为空(同时传入slot)',
  65. iconUrl: 'https://cdn.uviewui.com/uview/demo/empty/car.png'
  66. },
  67. {
  68. imgName: 'data',
  69. title: '数据为空',
  70. iconUrl: 'https://cdn.uviewui.com/uview/demo/empty/data.png'
  71. }, {
  72. imgName: 'comment',
  73. title: '评论为空',
  74. iconUrl: 'https://cdn.uviewui.com/uview/demo/empty/comment.png'
  75. }, {
  76. imgName: 'coupon',
  77. title: '没有优惠券',
  78. iconUrl: 'https://cdn.uviewui.com/uview/demo/empty/coupon.png'
  79. }, {
  80. imgName: 'history',
  81. title: '无历史记录',
  82. iconUrl: 'https://cdn.uviewui.com/uview/demo/empty/history.png'
  83. }, {
  84. imgName: 'list',
  85. title: '列表为空',
  86. iconUrl: 'https://cdn.uviewui.com/uview/demo/empty/list.png'
  87. }, {
  88. imgName: 'message',
  89. title: '消息列表为空',
  90. iconUrl: 'https://cdn.uviewui.com/uview/demo/empty/message.png'
  91. }, {
  92. imgName: 'news',
  93. title: '无新闻列表',
  94. iconUrl: 'https://cdn.uviewui.com/uview/demo/empty/news.png'
  95. }, {
  96. imgName: 'order',
  97. title: '订单为空',
  98. iconUrl: 'https://cdn.uviewui.com/uview/demo/empty/order.png'
  99. }, {
  100. imgName: 'page',
  101. title: '页面不存在',
  102. iconUrl: 'https://cdn.uviewui.com/uview/demo/empty/page.png'
  103. }, {
  104. imgName: 'permission',
  105. title: '无权限',
  106. iconUrl: 'https://cdn.uviewui.com/uview/demo/empty/permission.png'
  107. }, {
  108. imgName: 'search',
  109. title: '没有搜索结果',
  110. iconUrl: 'https://cdn.uviewui.com/uview/demo/empty/search.png'
  111. }, {
  112. imgName: 'wifi',
  113. title: '没有WiFi',
  114. iconUrl: 'https://cdn.uviewui.com/uview/demo/empty/wifi.png'
  115. },
  116. ]
  117. }
  118. },
  119. methods: {
  120. //点击改变图片
  121. openImg(imgName) {
  122. // this.mode = this.imgList[imgName]
  123. this.mode = imgName;
  124. }
  125. }
  126. }
  127. </script>
  128. <style lang="scss">
  129. .u-page {
  130. padding: 40rpx 0px;
  131. &__top-box {
  132. padding-left: 40rpx;
  133. }
  134. }
  135. .empty-select {
  136. margin-top: 10px;
  137. }
  138. </style>