icon-items-list.vue 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180
  1. <template>
  2. <div class="icon-items-list" :class="'icon-items-list-'+type">
  3. <div class="icon-items-icons" :style="{width:itemWidth,marginBottom:circle?'5px':'0px'}" v-for="(item,index) in list" :key="item.id" @click="toPage(item,index)">
  4. <div class="icon-items-imgse" :class="circle?'icon-items-imgse-circle':''" >
  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" :class="circle?'icon-items-text-circle':''">{{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. import { toAuthStore } from "@/utils/index.js"
  18. export default {
  19. name: "iconItemsList",
  20. props:{
  21. // 套餐服务项 或配件id
  22. list:{
  23. type: Array,
  24. default: function(){
  25. return []
  26. }
  27. },
  28. itemWidth: {
  29. type: String,
  30. default: '25%'
  31. },
  32. iconSize: {
  33. type: Number,
  34. default: 60
  35. },
  36. type: {
  37. type: String,
  38. default: 'icon'
  39. },
  40. noDataText: {
  41. type: String,
  42. default: '暂无数据'
  43. },
  44. isLogin: {
  45. type: Boolean,
  46. default: false
  47. },
  48. sysUserFlag: {
  49. type: String,
  50. default: '1'
  51. },
  52. circle: {
  53. type: Boolean,
  54. default: false
  55. }
  56. },
  57. data() {
  58. return {
  59. datas: this.list
  60. }
  61. },
  62. methods: {
  63. toPage(item,index){
  64. if(this.isLogin){
  65. if(item.url&&item.url!=''){
  66. if(!item.ignoreAuth){
  67. // 游客去认证
  68. if(this.sysUserFlag == '0'){
  69. toAuthStore()
  70. return true
  71. }
  72. }
  73. if(item.target == 'page'){
  74. uni.navigateTo({
  75. url: item.url
  76. })
  77. }
  78. if(item.target == 'tabPage'){
  79. uni.switchTab({
  80. url: item.url
  81. })
  82. }
  83. if(item.target == 'fun'){
  84. this.$emit('callback',item)
  85. }
  86. }
  87. }else{
  88. uni.navigateTo({
  89. url: '/pages/login/login'
  90. })
  91. }
  92. }
  93. }
  94. }
  95. </script>
  96. <style lang="less">
  97. .icon-items-list{
  98. align-items: flex-start;
  99. display: flex;
  100. flex-wrap: wrap;
  101. .nodata{
  102. text-align: center;
  103. font-size: 24upx;
  104. width: 100%;
  105. color: #999999;
  106. }
  107. }
  108. .icon-items-list-img{
  109. .icon-items-icons{
  110. margin-bottom: 5px;
  111. .icon-items-text{
  112. font-size: 24upx;
  113. color: #333;
  114. }
  115. .icon-items-text-circle{
  116. font-size: 28upx;
  117. color: #333;
  118. }
  119. }
  120. .icon-items-imgse{
  121. position: relative;
  122. width: 60upx;
  123. height: 60upx;
  124. margin-bottom: 6upx;
  125. display:flex;
  126. align-items: center;
  127. justify-content: center;
  128. border-radius:10upx;
  129. overflow: hidden;
  130. .imgs{
  131. width: 100%;
  132. height: 100%;
  133. }
  134. .tag{
  135. position: absolute;
  136. top: -5upx;
  137. right: -5upx;
  138. }
  139. }
  140. .icon-items-imgse-circle{
  141. border-radius:100rpx;
  142. overflow: hidden;
  143. width: 100upx;
  144. height: 100upx;
  145. background: linear-gradient(#fff,#eee);
  146. .imgs{
  147. width: 80%;
  148. height: 80%;
  149. }
  150. }
  151. }
  152. .icon-items-list-icon{
  153. .icon-items-imgse{
  154. position: relative;
  155. width: 100upx;
  156. margin-bottom: 6upx;
  157. display:flex;
  158. align-items: center;
  159. justify-content: center;
  160. .tag{
  161. position: absolute;
  162. top: -5upx;
  163. right: -5upx;
  164. }
  165. }
  166. .icon-items-text{
  167. font-size: 24upx;
  168. color: #333;
  169. }
  170. }
  171. .icon-items-icons{
  172. text-align: center;
  173. display: flex;
  174. align-items: center;
  175. flex-direction: column;
  176. justify-content: center;
  177. }
  178. </style>