icon-items-list.vue 2.3 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. <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. </div>
  7. <div class="nodata" v-if="list.length==0">
  8. <u-empty :text="noDataText" mode="list"></u-empty>
  9. </div>
  10. </div>
  11. </template>
  12. <script>
  13. export default {
  14. name: "iconItemsList",
  15. props:{
  16. // 套餐服务项 或配件id
  17. list:{
  18. type: Array,
  19. default: function(){
  20. return []
  21. }
  22. },
  23. itemWidth: {
  24. type: String,
  25. default: '25%'
  26. },
  27. type: {
  28. type: String,
  29. default: 'icon'
  30. },
  31. noDataText: {
  32. type: String,
  33. default: '暂无数据'
  34. }
  35. },
  36. data() {
  37. return {
  38. datas: this.list
  39. }
  40. },
  41. methods: {
  42. toPage(item,index){
  43. if(!item.auth){
  44. uni.showToast({icon: 'none',title: '你无权限操作此功能'})
  45. return
  46. }
  47. if(item.url&&item.url!=''){
  48. if(item.target == 'page'){
  49. // console.log(item.url)
  50. // 生意经
  51. if(this.type=="knowledge"){
  52. this.$store.state.vuex_knowledgePageNo = index
  53. }
  54. uni.navigateTo({
  55. url: item.url
  56. })
  57. }
  58. if(item.target == 'tabPage'){
  59. uni.switchTab({
  60. url: item.url
  61. })
  62. }
  63. if(item.target == 'fun'){
  64. item.url()
  65. }
  66. }
  67. }
  68. }
  69. }
  70. </script>
  71. <style lang="less">
  72. .icon-items-list{
  73. align-items: center;
  74. display: flex;
  75. flex-wrap: wrap;
  76. .nodata{
  77. text-align: center;
  78. font-size: 24upx;
  79. width: 100%;
  80. color: #999999;
  81. }
  82. }
  83. .icon-items-list-icon{
  84. .icon-items-imgse{
  85. width: 64upx;
  86. height: 64upx;
  87. }
  88. .icon-items-text{
  89. font-size: 28upx;
  90. color: #666666;
  91. }
  92. }
  93. .icon-items-icons{
  94. text-align: center;
  95. margin: 20upx 0;
  96. }
  97. // 生意经
  98. .icon-items-list-knowledge{
  99. align-items: flex-start;
  100. justify-content: space-between;
  101. .icon-items-imgse{
  102. width: 100%;
  103. height: 140upx;
  104. border-radius: 10upx;
  105. }
  106. .icon-items-text{
  107. font-size: 28upx;
  108. color: #666666;
  109. padding: 0 10upx;
  110. min-height: 70upx;
  111. }
  112. }
  113. </style>