icon-items-list.vue 2.2 KB

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