guoshilong
2023-11-02 f32cff008d5ebdf1fdf3c8369fb8f7b0c2b4448e
pages/user/center.vue
@@ -1,85 +1,72 @@
<template>
   <view class="container">
      <u-navbar height="48" bgColor="#5887f9" :autoBack="false" safeAreaInsetTop placeholder>
         <view slot="left">
            <u--text color="#ffffff" text="基层智治" size="18" />
   <view class="">
      <view class="header flex a-i-c">
         <u-avatar  size="80"></u-avatar>
         <view class="flex f-d-c ml-20">
            <text class="f-36 mb-20 fw">张三</text>
            <text class="f-28 c-99">您好业主,欢迎回家</text>
         </view>
      </u-navbar>
      </view>
      <view class="main">
         <view class="main-bg">
         </view>
         <view class="main-cell">
            <view class="cell-content">
               <u-cell-group :border="false">
                  <u-cell @click="navigator(item)" v-for="(item, index) in cellGroupData" :icon="item.icon"
                     :title="item.title" :key="index" :border="false"></u-cell>
                  <u-cell @click="navigator(item)" v-for="(item, index) in menuList" :icon="item.icon"
                     :title="item.title" :key="index" :border="false" :iconStyle="{width:'48rpx',height:'48rpx'}"  :isLink="true" ></u-cell>
               </u-cell-group>
            </view>
         </view>
      </view>
      <tabBar @change='change' :currentTab="1"></tabBar>
   </view>
</template>
<script>
   import tabBar from "@/components/tabBar/tabBar.vue";
   export default {
      components: {
         tabBar,
      },
      data() {
      data(){
         return {
            cellGroupData: [{
                  title: '我的家人',
                  icon: 'account-fill',
                  url: ''
            menuList:[
               {
                  icon:"/static/icon/menu-center-01.png",
                  title:"我的家人",
                  url:""
               },
               {
                  title: '切换角色',
                  icon: 'account-fill',
                  url: '/subPackage/user/role/index'
                  icon:"/static/icon/menu-center-02.png",
                  title:"切换角色",
                  url:"/subPackage/user/role/index"
               },
               {
                  title: '修改密码',
                  icon: 'account-fill',
                  url: ''
                  icon:"/static/icon/menu-center-03.png",
                  title:"修改密码",
                  url:""
               },
               {
                  title: '退出登录',
                  icon: 'account-fill',
                  url: ''
               }
                  icon:"/static/icon/menu-center-04.png",
                  title:"退出登录",
                  url:""
               },
            ]
         }
      },
      onShow() {
         uni.hideTabBar()
      },
      methods: {
      methods:{
         change(index) {
            let url = index
            this.$u.func.globalNavigator(url, "switchTab")
         },
         navigator(item) {
            if (item.title == '退出登录') {
               this.logOut()
            } else {
               this.$u.func.globalNavigator(item.url)
            }
         },
         logOut() {
            uni.setStorageSync("responIndex", 0)
            uni.clearStorageSync()
@@ -91,39 +78,15 @@
   }
</script>
<style lang="scss" scoped>
   .container {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      background: #F9F9FA;
      .main {
         position: relative;
         height: 0;
         flex: 1;
         overflow-y: auto;
         .main-bg {
            height: 36%;
            background: royalblue;
         }
         .main-cell {
            position: absolute;
            top: 34%;
            width: 100%;
            height: 66%;
            border-radius: 10rpx 10rpx 0 0;
            z-index: 11;
            background: #fff;
            .cell-content {
               margin-top: 240rpx;
            }
         }
      }
<style>
   page{
      width:100%;
      height:100%;
      background: linear-gradient(96deg, #E2EFFF 0%, rgba(255,255,255,0) 100%);
   }
   .header{
      width:100%;
      padding:120rpx 38rpx 80rpx;
      box-sizing: border-box;
   }
</style>