123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216 |
- <!--
- * @Author: yangpeiqin
- * @Date: 2023-12-11 10:33:23
- * @LastEditors: zhangmudan
- * @LastEditTime: 2024-07-24 14:26:54
- * @FilePath: \tqApp\components\sidebar\index.vue
- -->
- <template>
- <view class="sidebar-container" v-if="$hasPermiOr(allPermission)">
- <view class="container" v-if="direction=='vertical'">
- <template v-for="(item,index) in sidebarList">
- <view :index="index" v-if="$hasPermi(item.permission) && (item.hasOwnProperty('isShow')?item.isShow: true)" class="sidebar-list">
- <view @click="handleFun(item)" class="sidebar-item">
- <image :src="item.icon" class="background-image"></image>
- <view class="info">
- <view class="label-title">{{ item.label }}</view>
- <view class="icon-warp">点击进入<image :src="$getImages('/assetsMobile/images/index/icon-in.png')" class="icon-image"></image></view>
- </view>
- </view>
- </view>
- </template>
- </view>
- <view class="container" v-else-if="direction=='user' || (!hasPlat(['sanitation']) && !hasPlat(['enterprises']))">
- <view class="sidebar-title" v-if="hasTitle">{{ label }}</view>
- <u-row customStyle="width: 100%;flex-wrap: wrap;">
- <template v-for="(item,index) in sidebarList">
- <u-col :span="span" :index="index" v-if="$hasPermi(item.permission) && (item.hasOwnProperty('isShow')?item.isShow: true)">
- <view @click="handleFun(item)">
- <SidebarItem :info="item" :direction="direction"></SidebarItem>
- </view>
- <!-- <navigator v-else :url="item.url">
- <SidebarItem :info="item"></SidebarItem>
- </navigator> -->
- </u-col>
- </template>
- </u-row >
- </view>
- <view class="container" v-else>
- <view class="sidebar-title" v-if="hasTitle">
- <image :src="titleIcon" class="title-image" v-if="titleIcon"></image>
- {{ label }}
- </view>
- <u-row class="sidebar-row">
- <template v-for="(item,index) in sidebarList">
- <u-col :span="span" :index="index" v-if="$hasPermi(item.permission) && (item.hasOwnProperty('isShow')?item.isShow: true)" class="sidebar-col">
- <image :src="$getImages(`/assetsMobile/images/index/icon-hbg${item.iconbg}.png`)" class="hbg-image"></image>
- <view @click="handleFun(item)">
- <SidebarItem :info="item"></SidebarItem>
- </view>
- <!-- <navigator v-else :url="item.url">
- <SidebarItem :info="item"></SidebarItem>
- </navigator> -->
- </u-col>
-
-
- </template>
- </u-row>
- </view>
- </view>
- </template>
- <script>
- import SidebarItem from './module/sidebarItem.vue'
- export default {
- components: {
- SidebarItem,
- },
- props: {
- label: {
- type: String,
- default: ''
- },
- sidebarList: {
- type: Array,
- default: () => {
- return []
- }
- },
- span: {
- type: Number,
- default: 3
- },
- hasTitle: {
- type: Boolean,
- default: true
- },
- direction:{
- type: String,
- default: 'horizontal'
- },
- titleIcon:{
- type: String,
- default: ''
- }
- },
- computed: {
- allPermission() {
- return this.sidebarList.map((e) => e.permission)
- }
- },
- data() {
- return {
-
- }
- },
- onLoad() {
- },
- methods: {
- handleFun(item) {
-
- if(item.event) {
- this.$emit(`${item.event}`)
- } else if (item.url) {
- uni.navigateTo({
- url: item.url,
- })
- }else {
- uni.showToast({
- title: '功能正在开发',
- icon: 'none'
- })
- }
- }
- }
- }
- </script>
- <style lang="scss" scoped>
- .sidebar-container {
- position: relative;
- width: 100%;
- height: auto;
- .container {
- position: relative;
- width: 100%;
- height: auto;
- display: flex;
- flex-flow: column nowrap;
- align-items: flex-start;
- .sidebar-title {
- font-family: PingFangSC, PingFang SC;
- width: 100%;
- font-weight: bold;
- color: #333333;
- font-size: 16px;
- margin-bottom: 24rpx;
- display: flex;
- align-items: center;
- }
- .title-image{
- width: 40rpx;
- height: 40rpx;
- margin-right: 6rpx;
- }
- .sidebar-list{
- width: 100%;
- height: 144rpx;
- margin-bottom: 16rpx;
- .sidebar-item{
- height: 100%;
- position: relative;
- .background-image {
- position: absolute;
- bottom: 0;
- right: 0;
- width: 100%;
- height: 100%;
- }
- .icon-image{
- width: 28rpx;
- height: 28rpx;
- margin-left: 12rpx;
- }
- .info{
- position: absolute;
- left: 40rpx;
- top: 28rpx;
- color: #fff;
- font-size: 24rpx;
- .label-title{
- font-size: 32rpx;
- }
- .icon-warp{
- display: flex;
- align-items: center;
- margin-top: 12rpx;
- }
- }
- }
- }
- .hbg-image{
- position: absolute;
- width: 146rpx;
- height: 148rpx;
- }
- .sidebar-row{
- width: 100%;
- flex-wrap: wrap;
- // margin-bottom: 20rpx;
- }
- .sidebar-col{
- height: 148rpx;
- margin-bottom: 20rpx;
- display: flex;
- align-items: center !important;
- }
-
-
- }
- }
- ::v-deep {
-
- }
- </style>
|