icon-items-list.vue 2.1 KB

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