icon-items-list.vue 2.2 KB

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