usky-web-mobile/src/pages/mine.vue

<template>
  <oa-scroll
    customClass="mine-container scroll-height"
    :customStyle="{ height: `calc(100vh - (50px + ${proxy.$settingStore.tabBarHeight}))`, position: 'relative' }"
    :isSticky="false"
    :refresherLoad="false"
    :refresherEnabled="false"
    :refresherEnabledTitle="false"
    :refresherDefaultStyle="'none'"
    :refresherThreshold="44"
    :refresherBackground="'#f5f6f7'"
  >
    <template #default>
      <!--顶部个人信息栏-->
      <view class="top-area" :class="'bg-' + themeColor.name" :style="{ paddingTop: proxy.$settingStore.StatusBar ? proxy.$settingStore.StatusBar + 20 + 'px' : '55px' }">
        <view class="flex justify-between p15">
          <view class="flex align-center">
            <view class="cu-avatar xl round border bg-white" v-if="!avatar" @click="!state.nickName ? proxy.$settingStore.handleToLogin() : proxy.$settingStore.handleToAvatar(1)">
              <view class="iconfont oaIcon-people text-gray"></view>
            </view>
            <image class="cu-avatar xl round border bg-white" v-if="avatar" :src="avatar" @click="proxy.$settingStore.handleToAvatar(2)"> </image>
            <view class="login-tip" v-if="!state.nickName" @click="proxy.$settingStore.handleToLogin()"> 点击登录 </view>
            <view class="user-info" v-if="state.nickName">
              <view class="u_title"> {{ state.nickName }} </view>
              <view class="u_title"> {{ state.phone ? state.phone.substr(0, 3) + "******" + state.phone.substr(9) : "" }} </view>
            </view>
          </view>
          <view class="flex align-center"> </view>
        </view>

        <view class="vip-card-box"> </view>
      </view>

      <oa-transForm>
        <template #content>
          <view class="menu-list">
            <view class="list-cell list-cell-arrow" @click="proxy.$settingStore.handleToEditInfo()">
              <view class="menu-item">
                <view class="iconfont oaIcon-user menu-item-icon"></view>
                <view>我的信息</view>
              </view>
            </view>
            <view class="list-cell list-cell-arrow" @click="proxy.$settingStore.handleToSecure()">
              <view class="menu-item">
                <view class="iconfont oaIcon-yanzheng menu-item-icon"></view>
                <view>账号与安全</view>
              </view>
            </view>
            <view class="list-cell list-cell-arrow" @click="proxy.$settingStore.handleToMessage()">
              <view class="menu-item">
                <view class="iconfont oaIcon-tongzhi menu-item-icon"></view>
                <view>新消息通知</view>
              </view>
            </view>
            <view class="list-cell list-cell-arrow" @click="proxy.$settingStore.handleAbout()">
              <view class="menu-item">
                <view class="iconfont oaIcon-aixin menu-item-icon"></view>
                <view>关于我们</view>
              </view>
            </view>
            <view class="list-cell list-cell-arrow" @click="proxy.$settingStore.handleHelp()">
              <view class="menu-item">
                <view class="iconfont oaIcon-Help menu-item-icon"></view>
                <view>常见问题</view>
              </view>
            </view>
            <view class="list-cell list-cell-arrow" @click="proxy.$settingStore.handleCleanTmp()">
              <view class="menu-item">
                <view class="iconfont oaIcon-qinglihuancun menu-item-icon"></view>
                <view>清理缓存</view>
                <view class="mr15 ml-auto text-right">{{ proxy.$settingStore.currentSize }}</view>
              </view>
            </view>
            <view class="list-cell list-cell-arrow" @click="handleToUpgrade" v-if="proxy.$common.isVisible()">
              <view class="menu-item">
                <view class="iconfont oaIcon-jianchagengxin menu-item-icon"></view>
                <view>检查更新</view>
              </view>
            </view>
            <!-- <view class="list-cell list-cell-arrow" @click="proxy.$settingStore.handleSetting()">
              <view class="menu-item">
                <view class="iconfont oaIcon-shezhi menu-item-icon"></view>
                <view>设置</view>
              </view>
            </view> -->
          </view>

          <!-- <view class="menu-list">
            <view class="list-cell list-cell-arrow" @click="goMessagePush()">
              <view class="menu-item">
                <view class="iconfont oaIcon-aixin menu-item-icon"></view>
                <view>推送设置</view>
              </view>
            </view>
            <view class="list-cell list-cell-arrow" @click="goBuilding()">
              <view class="menu-item">
                <view class="iconfont oaIcon-aixin menu-item-icon"></view>
                <view>建筑管理</view>
              </view>
            </view>
            <view class="list-cell list-cell-arrow" @click="goFunReport()">
              <view class="menu-item">
                <view class="iconfont oaIcon-aixin menu-item-icon"></view>
                <view>功能报备</view>
              </view>
            </view>
          </view> -->

          <view class="cu-list menu">
            <view class="cu-item mt0">
              <view class="content flex align-center">
                <text class="iconfont oaIcon-colorlens" :class="'text-' + themeColor.name"></text>
                <view class="padding solid radius shadow-blur ml10" :class="'bg-' + themeColor.name"></view>
                <view class="title ml10">
                  主题色：<text :class="'text-' + themeColor.name">{{ themeColor.title }}</text>
                </view>
              </view>
              <view class="action">
                <button class="cu-btn round shadow" @click="colorModal = true" :class="'bg-' + themeColor.name">
                  <text class="iconfont oaIcon-colorlens"></text>
                  选择主题
                </button>
              </view>
            </view>
          </view>

          <view class="menu-list" @click="proxy.$settingStore.handleLogout">
            <view class="list-cell">
              <view class="menu-item">
                <view class="button">退 出 登 录</view>
              </view>
            </view>
          </view>

          <!-- <view class="menu-list">
            <view class="list-cell list-cell-arrow" @tap="goSiteManage" v-if="permissionLabel == 1">
              <view class="menu-item">
                <image class="menu-item-image" src="@/static/images/setting/setting-icon2.png" style="width: 15px; height: 15px"></image>
                <view>站点管理</view>
              </view>
            </view>
            <view class="list-cell list-cell-arrow" @tap="goAuthManage" v-if="permissionLabel == 1">
              <view class="menu-item">
                <image class="menu-item-image" src="@/static/images/setting/setting-icon4.png" style="width: 15px; height: 15px"></image>
                <view>权限管理</view>
              </view>
            </view>
          </view> -->
        </template>
      </oa-transForm>
    </template>
  </oa-scroll>

  <!-- 选择颜色模态框 -->
  <view class="cu-modal" :class="{ show: colorModal }">
    <view class="cu-dialog">
      <view class="cu-bar justify-end solid-bottom">
        <view class="content">选择颜色</view>
        <view class="action" @tap="colorModal = false">
          <u-icon name="close" size="14"></u-icon>
          <text class="cuIcon-close text-red"></text>
        </view>
      </view>
      <view class="grid col-5 padding">
        <view class="padding-xs" v-for="(item, index) in themeList" :key="index" @tap="SetColor(item)" :data-color="item.name">
          <view class="padding-tb radius" :class="'bg-' + item.name">
            {{ item.title }}
          </view>
        </view>
      </view>
    </view>
  </view>

  <oa-upgrade ref="oaUpgradeRef" :themesColor="proxy.$settingStore.themeColor.color" />

  <oa-tabbar :tabbarValue="2" :tabbarList="proxy.$constData.homeTabbar"></oa-tabbar>
</template>

<script setup>
/*----------------------------------依赖引入-----------------------------------*/
import { onLoad, onShow, onReady, onHide, onLaunch, onNavigationBarButtonTap, onPageScroll } from "@dcloudio/uni-app";
import { ref, reactive, computed, getCurrentInstance, toRefs, inject } from "vue";
/*----------------------------------接口引入-----------------------------------*/
/*----------------------------------组件引入-----------------------------------*/
/*----------------------------------store引入-----------------------------------*/
import { useStores, commonStores } from "@/store/modules/index";
/*----------------------------------公共方法引入-----------------------------------*/
import config from "@/config";
/*----------------------------------公共变量-----------------------------------*/
const { proxy } = getCurrentInstance();
const useStore = useStores();
const commonStore = commonStores();
/*----------------------------------变量声明-----------------------------------*/
const state = reactive({
  avatar: computed(() => {
    return useStore.avatar;
  }),
  themeColor: computed(() => {
    return proxy.$settingStore.themeColor;
  }),

  nickName: useStore.nickName,
  phone: useStore.phonenumber,
  version: config.appInfo.version,

  colorModal: false,
  themeList: proxy.$constData.themeList,
});

const { avatar, themeColor, colorModal, themeList } = toRefs(state);

/**
 * @检查更新
 */
function handleToUpgrade() {
  proxy.$settingStore.handleToUpgrade({
    success: (res) => {
      proxy.$refs["oaUpgradeRef"].openUpgrade({
        modalArray: res.data,
      });
    },
  });
}

/**
 * @推送设置
 */
function goMessagePush() {
  proxy.$tab.navigateTo("/pages/business/zhxf/messagePush/index");
}

/**
 * @建筑管理
 */
function goBuilding() {
  proxy.$tab.navigateTo("/pages/business/zhxf/building/index");
}

/**
 * @功能报备
 */
function goFunReport() {
  proxy.$tab.navigateTo("/pages/business/zhxf/funReport/index");
}

/**
 * @主题颜色选择
 */
function SetColor(item) {
  colorModal.value = false;
  proxy.$settingStore.initThemeColor(item);
  proxy.$settingStore.systemThemeColor([1, 2]);
}

onShow(() => {});

onReady(() => {});

onLoad((options) => {
  uni.hideTabBar(); //隐藏自带tabbar
});

// 自定义导航事件
onNavigationBarButtonTap((e) => {
  if (e.float == "right") {
    proxy.$tab.navigateTo("/pages/mine/setting/index");
  }
});
</script>

<style lang="scss" scoped>
.mine-container {
  width: 100%;
  height: calc(100vh - (50px + constant(safe-area-inset-bottom)));
  height: calc(100vh - (50px + env(safe-area-inset-bottom)));

  .top-area {
    padding: 55px 0.625rem 0 0.625rem;

    .login-tip {
      font-size: 18px;
      margin-left: 10px;
    }

    .user-info {
      margin-left: 15px;

      .u_title {
        font-size: 18px;
        line-height: 30px;
      }
    }

    .vip-card-box {
      display: flex;
      flex-direction: column;
      color: #f7d680;
      height: 132px;
      background: url("@/static/images/mine/vip-card.png");
      background-size: 100% 100%;
      border-radius: 8px 8px 0 0;
      overflow: hidden;
      position: relative;
      padding: 11px 13px;
    }
  }

  .scrollView {
    height: calc(100vh - (50px + constant(safe-area-inset-bottom) + 55px + 0.9375rem + 0.9375rem + 4rem + 47px));
    height: calc(100vh - (50px + env(safe-area-inset-bottom) + 55px + 0.9375rem + 0.9375rem + 4rem + 47px));
  }
}
</style>