页面切图

pages/index/index.vue

@@ -2,27 +2,17 @@
     <Cn-page :loading="loading">
         <view slot="body">
             <view class="index">
-                <div class="header">
-                    <div class="header-content">
-                        <div class="header-content-item">
-                            <div class="header-content-item-value">3</div>
-                            <div class="header-content-item-label">正常设备</div>
-                        </div>
-                        <div class="header-content-item">
-                            <div class="header-content-item-value">1</div>
-                            <div class="header-content-item-label">报警设备</div>
-                        </div>
-                        <div class="header-content-item">
-                            <div class="header-content-item-value">0</div>
-                            <div class="header-content-item-label">离线设备</div>
-                        </div>
-                    </div>
-                </div>
-                <uni-card title="基础设备" sub-title="副标题" extra="APF" v-for="item in 3" :key="item" @click="jump"
-                    thumbnail="/static/device.png">
-                    <text>设备基础信息 </text>
-                </uni-card>
-                <uni-load-more status="nomore"></uni-load-more>
+                <!-- 运维 -->
+                <YunWei v-if="userInfo.role == 1" />
+                <!-- 专职 -->
+                <ZhuanZhi v-if="userInfo.role == 2" />
+                <!-- 工程 -->
+                <GongCheng v-if="userInfo.role == 3" />
+                <!-- 主用户 -->
+                <ZhuYongHu v-if="userInfo.role == 4" />
+                <!-- 子用户 -->
+                <ZiYongHu v-if="userInfo.role == 5" />
+
                 <uni-fab ref="fab" direction="vertical" horizontal="right" vertical="bottom" :content="content"
                     @trigger="trigger" />
             </view>
@@ -30,18 +20,57 @@
     </Cn-page>
 </template>
 <script>
+import YunWei from "./comp/indexYunWei.vue";
+import GongCheng from "./comp/indexGongCheng.vue";
+import ZhuYongHu from "./comp/indexZhuYongHu.vue";
+import ZiYongHu from "./comp/indexZiYongHu.vue";
+import ZhuanZhi from "./comp/indexZhuanZhi.vue";
 export default {
+    components: {
+        YunWei,
+        GongCheng,
+        ZhuYongHu,
+        ZiYongHu,
+        ZhuanZhi
+    },
     data () {
         return {
             loading: false,
-            content: [{
-                iconPath: '/static/device.png',
-                text: '添加设备',
+            userInfo: {
+                role: 1
+            }
+        }
+    },
+    computed: {
+        content () {
+            let arr = [1, 3, 4]
+            let content = [{
+                iconPath: '/static/mine3.png',
+                text: '运维管理',
             }, {
-                iconPath: '/static/gateway.png',
-                text: '添加网关',
-            },
+                iconPath: '/static/mine3.png',
+                text: '专职管理',
+            }, {
+                iconPath: '/static/mine3.png',
+                text: '工程',
+            }, {
+                iconPath: '/static/mine3.png',
+                text: '主用户',
+            }, {
+                iconPath: '/static/mine3.png',
+                text: '子用户',
+            }
             ]
+            if (arr.indexOf(this.userInfo.role) > -1) {
+                content.push({
+                    iconPath: '/static/device.png',
+                    text: '添加设备',
+                }, {
+                    iconPath: '/static/gateway.png',
+                    text: '添加网关',
+                })
+            }
+            return content
         }
     },
     methods: {
@@ -57,58 +86,55 @@ export default {
                 }
             })
         },
-        jump () {
-            uni.navigateTo({
-                url: '/pages/device/detailAPF'
-            })
-        },
+
         trigger (e) {
-            if (e.index === 0) {
+            if (e.index === 5) {
                 uni.navigateTo({
                     url: '/pages/device/new'
                 })
-            }else if(e.index === 1){
+            } else if (e.index === 6) {
                 uni.navigateTo({
                     url: '/pages/gateway/new'
                 })
+            } else {
+                this.userInfo.role = e.index + 1
+                uni.setStorageSync('userInfo', {
+                    role: e.index + 1
+                })
+                let roleName = ''
+                switch (e.index + 1) {
+                    case 1:
+                        roleName = '运维管理'
+                        break
+                    case 2:
+                        roleName = '专职管理'
+                        break
+                    case 3:
+                        roleName = '工程'
+                        break
+                    case 4:
+                        roleName = '主用户'
+                        break
+                    case 5:
+                        roleName = '子用户'
+                        break
+                }
+                this.$util.toast(roleName + '角色切换成功')
             }
+            this.$refs.fab.close()
         }
     },
+    onLoad (options) {
+        this.loading = false
+    },
     onShow () {
-        setTimeout(() => {
-            this.loading = false
-        }, 500);
+        this.userInfo = uni.getStorageSync(this.$cacheKey.userInfo) || { role: 1 }
     }
 }
 </script>
 <style lang="scss">
 .index {
     padding: 34rpx 0;
-
-    .header {
-        margin: 0 30rpx;
-        background: $uni-theme-white;
-        border-radius: 12rpx;
-        background: $uni-color-primary;
-        padding: 30rpx 10rpx 40rpx;
-
-        .header-content {
-            display: flex;
-            justify-content: space-around;
-
-            .header-content-item {
-                display: flex;
-                flex-direction: column;
-                align-items: center;
-                color: #fff;
-                font-size: 28rpx;
-
-                .header-content-item-value {
-                    margin-bottom: 10rpx;
-                }
-            }
-        }
-    }
 }
 
 /deep/ .uni-card {