icon-items-list.vue 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117
  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. <image class="icon-items-imgse" :class="item.auth?'':'uni-img-gray'" :fade-show='true' :src="item.icon+'?x-oss-process=image/resize,m_fixed,h_140,w_215,color_ffffff'"></image>
  5. <div class="icon-items-text">{{item.name.slice(0,14)}}</div>
  6. <u-badge type="error" :count="item.count" :offset="[-10,30]"></u-badge>
  7. </div>
  8. <div class="nodata" v-if="list.length==0">
  9. <u-empty :text="noDataText" mode="list"></u-empty>
  10. </div>
  11. </div>
  12. </template>
  13. <script>
  14. export default {
  15. name: "iconItemsList",
  16. props:{
  17. // 套餐服务项 或配件id
  18. list:{
  19. type: Array,
  20. default: function(){
  21. return []
  22. }
  23. },
  24. itemWidth: {
  25. type: String,
  26. default: '25%'
  27. },
  28. type: {
  29. type: String,
  30. default: 'icon'
  31. },
  32. noDataText: {
  33. type: String,
  34. default: '暂无数据'
  35. }
  36. },
  37. data() {
  38. return {
  39. datas: this.list
  40. }
  41. },
  42. methods: {
  43. toPage(item,index){
  44. if(!item.auth){
  45. uni.showToast({icon: 'none',title: '你无权限操作此功能'})
  46. return
  47. }
  48. if(item.url&&item.url!=''){
  49. if(item.target == 'page'){
  50. // console.log(item.url)
  51. // 生意经
  52. if(this.type=="knowledge"){
  53. this.$store.state.vuex_knowledgePageNo = index
  54. }
  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. 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. width: 64upx;
  87. height: 64upx;
  88. }
  89. .icon-items-text{
  90. font-size: 28upx;
  91. color: #666666;
  92. }
  93. }
  94. .icon-items-icons{
  95. text-align: center;
  96. margin: 20upx 0;
  97. position: relative;
  98. }
  99. // 生意经
  100. .icon-items-list-knowledge{
  101. align-items: flex-start;
  102. justify-content: space-between;
  103. .icon-items-imgse{
  104. width: 100%;
  105. height: 140upx;
  106. border-radius: 10upx;
  107. }
  108. .icon-items-text{
  109. font-size: 28upx;
  110. color: #666666;
  111. padding: 0 10upx;
  112. min-height: 70upx;
  113. }
  114. }
  115. </style>