icon-items-list.vue 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154
  1. <template>
  2. <div class="icon-items-list" :class="'icon-items-list-'+type">
  3. <div class="icon-items-icons" :style="{width:itemWidth}" v-for="(item,index) in list" :key="item.id" @click="toPage(item,index)">
  4. <div class="icon-items-imgse" >
  5. <image class="imgs" v-if="type=='img'" :class="item.auth?'':'uni-img-gray'" :fade-show='true' :src="item.icon||'/static/def_imgs.png'"></image>
  6. <u-icon class="icons" v-if="type=='icon'" :color="item.color" :size="iconSize" :name="item.icon" custom-prefix="custom-icon"></u-icon>
  7. <u-badge class="tag" :absolute="false" type="error" v-if="item.nums" :count="item.nums"></u-badge>
  8. </div>
  9. <div class="icon-items-text">{{item.name}}</div>
  10. </div>
  11. <div class="nodata" v-if="list.length==0">
  12. <u-empty :text="noDataText" mode="list"></u-empty>
  13. </div>
  14. </div>
  15. </template>
  16. <script>
  17. export default {
  18. name: "iconItemsList",
  19. props:{
  20. // 套餐服务项 或配件id
  21. list:{
  22. type: Array,
  23. default: function(){
  24. return []
  25. }
  26. },
  27. itemWidth: {
  28. type: String,
  29. default: '25%'
  30. },
  31. iconSize: {
  32. type: Number,
  33. default: 60
  34. },
  35. type: {
  36. type: String,
  37. default: 'icon'
  38. },
  39. noDataText: {
  40. type: String,
  41. default: '暂无数据'
  42. },
  43. isLogin: {
  44. type: Boolean,
  45. default: false
  46. },
  47. sysUserFlag: {
  48. type: String,
  49. default: '1'
  50. }
  51. },
  52. data() {
  53. return {
  54. datas: this.list
  55. }
  56. },
  57. methods: {
  58. toPage(item,index){
  59. if(this.isLogin){
  60. // 游客去认证
  61. if(this.sysUserFlag == '0'){
  62. uni.navigateTo({
  63. url: '/pages/storeManage/storeAuth'
  64. })
  65. return true
  66. }
  67. if(item.url&&item.url!=''){
  68. if(item.target == 'page'){
  69. uni.navigateTo({
  70. url: item.url
  71. })
  72. }
  73. if(item.target == 'tabPage'){
  74. uni.switchTab({
  75. url: item.url
  76. })
  77. }
  78. if(item.target == 'fun'){
  79. this.$emit('callback',item)
  80. }
  81. }
  82. }else{
  83. uni.navigateTo({
  84. url: '/pages/login/login'
  85. })
  86. }
  87. }
  88. }
  89. }
  90. </script>
  91. <style lang="less">
  92. .icon-items-list{
  93. align-items: flex-start;
  94. display: flex;
  95. flex-wrap: wrap;
  96. .nodata{
  97. text-align: center;
  98. font-size: 24upx;
  99. width: 100%;
  100. color: #999999;
  101. }
  102. }
  103. .icon-items-list-img{
  104. .icon-items-icons{
  105. margin-bottom: 5px;
  106. }
  107. .icon-items-imgse{
  108. position: relative;
  109. width: 100upx;
  110. height: 100upx;
  111. margin-bottom: 6upx;
  112. display:flex;
  113. align-items: center;
  114. justify-content: center;
  115. .imgs{
  116. width: 90upx;
  117. height: 90upx;
  118. }
  119. .tag{
  120. position: absolute;
  121. top: -5upx;
  122. right: -5upx;
  123. }
  124. }
  125. }
  126. .icon-items-list-icon{
  127. .icon-items-imgse{
  128. position: relative;
  129. width: 100upx;
  130. margin-bottom: 6upx;
  131. display:flex;
  132. align-items: center;
  133. justify-content: center;
  134. .tag{
  135. position: absolute;
  136. top: -5upx;
  137. right: -5upx;
  138. }
  139. }
  140. .icon-items-text{
  141. font-size: 24upx;
  142. color: #333;
  143. }
  144. }
  145. .icon-items-icons{
  146. text-align: center;
  147. display: flex;
  148. align-items: center;
  149. flex-direction: column;
  150. justify-content: center;
  151. }
  152. </style>