icon-items-list.vue 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131
  1. <template>
  2. <div class="icon-items-list" :class="'icon-items-list-'+type">
  3. <div class="icon-items-icons" :style="{width:itemWidth}" v-for="(item,index) in list" :key="item.id" @click="toPage(item,index)">
  4. <div class="icon-items-imgse" >
  5. <image class="imgs" v-if="type=='img'" :class="item.auth?'':'uni-img-gray'" :fade-show='true' :src="item.icon||'/static/def_imgs.png'"></image>
  6. <u-icon class="icons" v-if="type=='icon'" :color="item.color" :size="60" :name="item.icon" custom-prefix="custom-icon"></u-icon>
  7. <u-badge class="tag" :absolute="false" type="error" v-if="item.nums" :count="item.nums"></u-badge>
  8. </div>
  9. <div class="icon-items-text">{{item.name}}</div>
  10. </div>
  11. <div class="nodata" v-if="list.length==0">
  12. <u-empty :text="noDataText" mode="list"></u-empty>
  13. </div>
  14. </div>
  15. </template>
  16. <script>
  17. export default {
  18. name: "iconItemsList",
  19. props:{
  20. // 套餐服务项 或配件id
  21. list:{
  22. type: Array,
  23. default: function(){
  24. return []
  25. }
  26. },
  27. itemWidth: {
  28. type: String,
  29. default: '25%'
  30. },
  31. type: {
  32. type: String,
  33. default: 'icon'
  34. },
  35. noDataText: {
  36. type: String,
  37. default: '暂无数据'
  38. }
  39. },
  40. data() {
  41. return {
  42. datas: this.list
  43. }
  44. },
  45. methods: {
  46. toPage(item,index){
  47. console.log(item,index)
  48. if(item.url&&item.url!=''){
  49. if(item.target == 'page'){
  50. uni.navigateTo({
  51. url: item.url
  52. })
  53. }
  54. if(item.target == 'tabPage'){
  55. uni.switchTab({
  56. url: item.url
  57. })
  58. }
  59. if(item.target == 'fun'){
  60. this.$emit('callback',item)
  61. }
  62. }
  63. }
  64. }
  65. }
  66. </script>
  67. <style lang="less">
  68. .icon-items-list{
  69. align-items: flex-start;
  70. display: flex;
  71. flex-wrap: wrap;
  72. .nodata{
  73. text-align: center;
  74. font-size: 24upx;
  75. width: 100%;
  76. color: #999999;
  77. }
  78. }
  79. .icon-items-list-img{
  80. .icon-items-icons{
  81. margin: 0;
  82. }
  83. .icon-items-imgse{
  84. position: relative;
  85. width: 100upx;
  86. height: 100upx;
  87. margin-bottom: 6upx;
  88. display:flex;
  89. align-items: center;
  90. justify-content: center;
  91. .imgs{
  92. width: 90upx;
  93. height: 90upx;
  94. }
  95. .tag{
  96. position: absolute;
  97. top: -5upx;
  98. right: -5upx;
  99. }
  100. }
  101. }
  102. .icon-items-list-icon{
  103. .icon-items-imgse{
  104. position: relative;
  105. width: 100upx;
  106. margin-bottom: 6upx;
  107. display:flex;
  108. align-items: center;
  109. justify-content: center;
  110. .tag{
  111. position: absolute;
  112. top: -5upx;
  113. right: -5upx;
  114. }
  115. }
  116. .icon-items-text{
  117. font-size: 24upx;
  118. color: #666666;
  119. }
  120. }
  121. .icon-items-icons{
  122. text-align: center;
  123. margin: 20upx 0;
  124. display: flex;
  125. align-items: center;
  126. flex-direction: column;
  127. justify-content: center;
  128. }
  129. </style>