index.vue 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216
  1. <!--
  2. * @Author: yangpeiqin
  3. * @Date: 2023-12-11 10:33:23
  4. * @LastEditors: zhangmudan
  5. * @LastEditTime: 2024-07-24 14:26:54
  6. * @FilePath: \tqApp\components\sidebar\index.vue
  7. -->
  8. <template>
  9. <view class="sidebar-container" v-if="$hasPermiOr(allPermission)">
  10. <view class="container" v-if="direction=='vertical'">
  11. <template v-for="(item,index) in sidebarList">
  12. <view :index="index" v-if="$hasPermi(item.permission) && (item.hasOwnProperty('isShow')?item.isShow: true)" class="sidebar-list">
  13. <view @click="handleFun(item)" class="sidebar-item">
  14. <image :src="item.icon" class="background-image"></image>
  15. <view class="info">
  16. <view class="label-title">{{ item.label }}</view>
  17. <view class="icon-warp">点击进入<image :src="$getImages('/assetsMobile/images/index/icon-in.png')" class="icon-image"></image></view>
  18. </view>
  19. </view>
  20. </view>
  21. </template>
  22. </view>
  23. <view class="container" v-else-if="direction=='user' || (!hasPlat(['sanitation']) && !hasPlat(['enterprises']))">
  24. <view class="sidebar-title" v-if="hasTitle">{{ label }}</view>
  25. <u-row customStyle="width: 100%;flex-wrap: wrap;">
  26. <template v-for="(item,index) in sidebarList">
  27. <u-col :span="span" :index="index" v-if="$hasPermi(item.permission) && (item.hasOwnProperty('isShow')?item.isShow: true)">
  28. <view @click="handleFun(item)">
  29. <SidebarItem :info="item" :direction="direction"></SidebarItem>
  30. </view>
  31. <!-- <navigator v-else :url="item.url">
  32. <SidebarItem :info="item"></SidebarItem>
  33. </navigator> -->
  34. </u-col>
  35. </template>
  36. </u-row >
  37. </view>
  38. <view class="container" v-else>
  39. <view class="sidebar-title" v-if="hasTitle">
  40. <image :src="titleIcon" class="title-image" v-if="titleIcon"></image>
  41. {{ label }}
  42. </view>
  43. <u-row class="sidebar-row">
  44. <template v-for="(item,index) in sidebarList">
  45. <u-col :span="span" :index="index" v-if="$hasPermi(item.permission) && (item.hasOwnProperty('isShow')?item.isShow: true)" class="sidebar-col">
  46. <image :src="$getImages(`/assetsMobile/images/index/icon-hbg${item.iconbg}.png`)" class="hbg-image"></image>
  47. <view @click="handleFun(item)">
  48. <SidebarItem :info="item"></SidebarItem>
  49. </view>
  50. <!-- <navigator v-else :url="item.url">
  51. <SidebarItem :info="item"></SidebarItem>
  52. </navigator> -->
  53. </u-col>
  54. </template>
  55. </u-row>
  56. </view>
  57. </view>
  58. </template>
  59. <script>
  60. import SidebarItem from './module/sidebarItem.vue'
  61. export default {
  62. components: {
  63. SidebarItem,
  64. },
  65. props: {
  66. label: {
  67. type: String,
  68. default: ''
  69. },
  70. sidebarList: {
  71. type: Array,
  72. default: () => {
  73. return []
  74. }
  75. },
  76. span: {
  77. type: Number,
  78. default: 3
  79. },
  80. hasTitle: {
  81. type: Boolean,
  82. default: true
  83. },
  84. direction:{
  85. type: String,
  86. default: 'horizontal'
  87. },
  88. titleIcon:{
  89. type: String,
  90. default: ''
  91. }
  92. },
  93. computed: {
  94. allPermission() {
  95. return this.sidebarList.map((e) => e.permission)
  96. }
  97. },
  98. data() {
  99. return {
  100. }
  101. },
  102. onLoad() {
  103. },
  104. methods: {
  105. handleFun(item) {
  106. if(item.event) {
  107. this.$emit(`${item.event}`)
  108. } else if (item.url) {
  109. uni.navigateTo({
  110. url: item.url,
  111. })
  112. }else {
  113. uni.showToast({
  114. title: '功能正在开发',
  115. icon: 'none'
  116. })
  117. }
  118. }
  119. }
  120. }
  121. </script>
  122. <style lang="scss" scoped>
  123. .sidebar-container {
  124. position: relative;
  125. width: 100%;
  126. height: auto;
  127. .container {
  128. position: relative;
  129. width: 100%;
  130. height: auto;
  131. display: flex;
  132. flex-flow: column nowrap;
  133. align-items: flex-start;
  134. .sidebar-title {
  135. font-family: PingFangSC, PingFang SC;
  136. width: 100%;
  137. font-weight: bold;
  138. color: #333333;
  139. font-size: 16px;
  140. margin-bottom: 24rpx;
  141. display: flex;
  142. align-items: center;
  143. }
  144. .title-image{
  145. width: 40rpx;
  146. height: 40rpx;
  147. margin-right: 6rpx;
  148. }
  149. .sidebar-list{
  150. width: 100%;
  151. height: 144rpx;
  152. margin-bottom: 16rpx;
  153. .sidebar-item{
  154. height: 100%;
  155. position: relative;
  156. .background-image {
  157. position: absolute;
  158. bottom: 0;
  159. right: 0;
  160. width: 100%;
  161. height: 100%;
  162. }
  163. .icon-image{
  164. width: 28rpx;
  165. height: 28rpx;
  166. margin-left: 12rpx;
  167. }
  168. .info{
  169. position: absolute;
  170. left: 40rpx;
  171. top: 28rpx;
  172. color: #fff;
  173. font-size: 24rpx;
  174. .label-title{
  175. font-size: 32rpx;
  176. }
  177. .icon-warp{
  178. display: flex;
  179. align-items: center;
  180. margin-top: 12rpx;
  181. }
  182. }
  183. }
  184. }
  185. .hbg-image{
  186. position: absolute;
  187. width: 146rpx;
  188. height: 148rpx;
  189. }
  190. .sidebar-row{
  191. width: 100%;
  192. flex-wrap: wrap;
  193. // margin-bottom: 20rpx;
  194. }
  195. .sidebar-col{
  196. height: 148rpx;
  197. margin-bottom: 20rpx;
  198. display: flex;
  199. align-items: center !important;
  200. }
  201. }
  202. }
  203. ::v-deep {
  204. }
  205. </style>