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

<template>
  <view class="mine-container">
    <!--顶部个人信息栏-->
    <view class="header-section" :class="'bg-' + proxy.$settingStore.themeColor.name" :style="{ paddingTop: proxy.$settingStore.StatusBar ? proxy.$settingStore.StatusBar + 44 + 'px' : '55px' }">
      <view class="flex padding justify-between">
        <view class="flex align-center">
          <view v-if="!avatar" class="cu-avatar xl round bg-white" @click="handleToAvatar(1)">
            <view class="iconfont icon-people text-gray icon"></view>
          </view>
          <image v-if="avatar" @click="handleToAvatar(2)" :src="avatar" class="cu-avatar xl round"> </image>
          <view v-if="!data.name" @click="handleToLogin" class="login-tip"> 点击登录 </view>
          <view v-if="data.name" class="user-info">
            <view class="u_title"> {{ data.name }} </view>
            <view class="u_title"> {{ data.phone }} </view>
          </view>
        </view>
        <view class="flex align-center"> </view>
      </view>

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

    <view
      class="content-section"
      :style="[
        {
          transform: coverTransform,
          transition: coverTransition,
        },
      ]"
      @touchstart="coverTouchstart"
      @touchmove="coverTouchmove"
      @touchend="coverTouchend"
    >
      <image class="mine-image" src="@/static/images/mine/arc.png"></image>

      <view class="menu-list">
        <view class="list-cell list-cell-arrow" @click="handleToEditInfo">
          <view class="menu-item-box">
            <view class="iconfont icon-user menu-icon"></view>
            <view>个人资料</view>
          </view>
        </view>
        <view class="list-cell list-cell-arrow" @click="handleToPwd">
          <view class="menu-item-box">
            <view class="iconfont icon-password menu-icon"></view>
            <view>修改密码</view>
          </view>
        </view>
      </view>

      <view class="menu-list">
        <view class="list-cell list-cell-arrow" @click="handleAbout">
          <view class="menu-item-box">
            <view class="iconfont icon-aixin menu-icon"></view>
            <view>关于我们</view>
          </view>
        </view>
        <view class="list-cell list-cell-arrow" @click="handleHelp">
          <view class="menu-item-box">
            <view class="iconfont icon-help menu-icon"></view>
            <view>常见问题</view>
          </view>
        </view>
        <view class="list-cell list-cell-arrow" @click="handleCleanTmp">
          <view class="menu-item-box">
            <view class="iconfont icon-clean menu-icon"></view>
            <view>清理缓存</view>
            <view style="margin: 0 15px 0 auto; font-size: 14px; color: #909399">{{ proxy.$settingStore.currentSize }}</view>
          </view>
        </view>
        <view class="list-cell list-cell-arrow" @click="handleToUpgrade">
          <view class="menu-item-box">
            <view class="iconfont icon-refresh menu-icon"></view>
            <view>检查更新</view>
          </view>
        </view>
      </view>

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

      <view class="cu-list menu">
        <view class="cu-item" style="margin-top: 0; margin-bottom: 0">
          <view class="content flex align-center">
            <text class="iconfont ucicon-colorlens" :class="'text-' + proxy.$settingStore.themeColor.name"></text>
            <view class="padding solid radius shadow-blur" :class="'bg-' + proxy.$settingStore.themeColor.name" style="margin-left: 10px"></view>
            <view class="title" style="margin-left: 10px">
              主题色：<text :class="'text-' + proxy.$settingStore.themeColor.name">{{ proxy.$settingStore.themeColor.title }}</text>
            </view>
          </view>
          <view class="action">
            <button class="cu-btn round shadow" @click="colorModal = true" :class="'bg-' + proxy.$settingStore.themeColor.name">
              <text class="iconfont ucicon-colorlens"></text>
              选择主题
            </button>
          </view>
        </view>
      </view>

      <view class="cu-list menu">
        <view class="cu-item">
          <view class="content text-center" @click="handleLogout">
            <text class="text-black">退出登录</text>
          </view>
        </view>
      </view>
    </view>

    <view class="cu-list menu-avatar padding-lr-sm padding-top-sm">
      <!-- <view class="cu-item" @tap="goSiteManage" v-if="permissionLabel == 1">
        <view class="cu-avatar" style="background-image: url(@/static/images/setting/setting-icon2.png)"></view>
        <view class="content">
          <view class="">站点管理</view>
        </view>
        <view class="nav-right">
          <view class="text-grey">
            <text class="icon iconfont margin-right-xs margin-left-lg">&#xe629;</text>
          </view>
        </view>
      </view>
      <view class="cu-item" @tap="goAuthManage" v-if="permissionLabel == 1">
        <view class="cu-avatar" style="background-image: url(@/static/images/setting/setting-icon4.png)"></view>
        <view class="content">
          <view class="">权限管理</view>
        </view>
        <view class="nav-right">
          <view class="text-grey">
            <text class="icon iconfont margin-right-xs margin-left-lg">&#xe629;</text>
          </view>
        </view>
      </view> -->
    </view>

    <!-- 选择颜色模态框 -->
    <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>
  </view>
</template>

<script setup>
import config from "@/config";
import storage from "@/utils/storage";
import { onLoad, onShow, onReady, onHide, onLaunch, onNavigationBarButtonTap, onPageScroll } from "@dcloudio/uni-app";
import { ref, reactive, computed, getCurrentInstance, toRefs, inject } from "vue";

import { uploadAvatar, updateUserProfile } from "@/api/system/user";
import { getAuthorization } from "@/api/setting/index.js";

import useStores from "@/store/modules/user.js";
const useStore = useStores();

const { proxy } = getCurrentInstance();

const avatar = computed(() => {
  return useStore.$state.avatar;
});

const windowHeight = computed(() => {
  return uni.getSystemInfoSync().windowHeight - 50;
});

const data = reactive({
  name: useStore.$state.name,
  phone: useStore.$state.phonenumber,
  version: getApp().globalData.config.appInfo.version,

  coverTransform: "translateY(0px)",
  coverTransition: "0s",
  moving: false,

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

const { coverTransform, coverTransition, moving, colorModal, themeList } = toRefs(data);

const permissionLabel = ref(0);

function getAuthorizationApi(params) {
  getAuthorization(params).then((res) => {
    permissionLabel.value = res.data.permissionLabel;
  });
}

function goMessagePush() {
  uni.navigateTo({
    url: "/pages/setting/messagePush/messagePush",
    success: (res) => {},
    fail: () => {},
    complete: () => {},
  });
}
function goBuilding() {
  uni.navigateTo({
    url: "/pages/setting/building/building",
    success: (res) => {},
    fail: () => {},
    complete: () => {},
  });
}
function goFunReport() {
  uni.navigateTo({
    url: "/pages/setting/funReport/funReport",
    success: (res) => {},
    fail: () => {},
    complete: () => {},
  });
}

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

/**
 * @点击登录
 */
function handleToLogin() {
  proxy.$tab.reLaunch("/pages/login");
}

/**
 * @upload上传头像
 * @api接口请求
 */
function uploadApi(res) {
  let data = { name: "file", filePath: res.tempFilePaths[0] };
  uploadAvatar(data).then((response) => {
    useStore.$state.avatar = response.data.url;
    updateUserProfile({
      avatar: response.data.url,
    }).then(() => {});
  });
}

/**
 * @点击头像
 */
function handleToAvatar(type) {
  if (type == 1) {
    uni.chooseImage({
      count: 1, //默认9
      sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
      sourceType: ["album", "camera"], //从相册选择、摄像头
      success: function (res) {
        uploadApi(res);
      },
    });
  } else if (type == 2) {
    proxy.$tab.navigateTo("/pages/mine/avatar/index");
  }
}

/**
 * @退出登录
 */
function handleLogout() {
  proxy.$modal.confirm("确定注销并退出系统吗？").then(() => {
    useStore.LogOut().then(() => {
      proxy.$tab.reLaunch("/pages/index");
    });
  });
}

/**
 * @常见问题
 */
function handleHelp() {
  proxy.$tab.navigateTo("/pages/mine/help/index");
}

/**
 * @个人资料
 */
function handleToEditInfo() {
  proxy.$tab.navigateTo("/pages/mine/info/index");
}

/**
 * @修改密码
 */
function handleToPwd() {
  proxy.$tab.navigateTo("/pages/mine/pwd/index");
}

/**
 * @检查更新
 */
function handleToUpgrade() {
  proxy.$modal.showToast("模块建设中~");
}

/**
 * @关于我们
 */
function handleAbout() {
  proxy.$tab.navigateTo("/pages/mine/about/index");
}

/**
 * @清理缓存
 */
function handleCleanTmp() {
  // #ifdef H5
  proxy.$modal.showToast("H5暂不支持此功能");
  // #endif

  // #ifdef APP-PLUS
  proxy.$setting.clearCache();
  // #endif
}

let startY = 0,
  moveY = 0,
  pageAtTop = true;

/**
 * @触摸开始
 */
function coverTouchstart(e) {
  if (pageAtTop === false) {
    return;
  }
  coverTransition.value = "transform .1s linear";
  startY = e.touches[0].clientY;
}

/**
 * @触摸移动
 */
function coverTouchmove(e) {
  moveY = e.touches[0].clientY;
  let moveDistance = moveY - startY;
  if (moveDistance < 0) {
    moving.value = false;
    return;
  }
  moving.value = true;
  if (moveDistance >= 80 && moveDistance < 100) {
    moveDistance = 80;
  }
  if (moveDistance > 0 && moveDistance <= 80) {
    coverTransform.value = `translateY(${moveDistance}px)`;
  }
}

/**
 * @触摸结束
 */
function coverTouchend() {
  if (moving.value === false) {
    return;
  }
  moving.value = false;
  coverTransition.value = "transform 0.3s cubic-bezier(.21,1.93,.53,.64)";
  coverTransform.value = "translateY(0px)";
}

onShow(() => {});

onReady(() => {
  //调用系统主题颜色
  proxy.$settingStore.systemThemeColor([1, 2]);
});

onLoad((options) => {});

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

<style lang="scss" scoped>
.mine-container {
  width: 100%;
  height: 100vh;
  background-color: #f8f8f8;

  .header-section {
    padding: 55px 15px 0 15px;
    color: white;

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

    .cu-avatar {
      border: 2px solid #eaeaea;

      .icon {
        font-size: 40px;
      }
    }

    .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;
    }
  }

  .content-section {
    position: relative;
    margin-top: -85px;
    // #ifdef H5
    padding-bottom: 50px;
    // #endif
    background-color: #f8f8f8;

    .mine-image {
      position: absolute;
      left: 0;
      top: -16px;
      width: 100%;
      height: 36upx;
    }

    .mine-actions {
      margin: 0.625rem 0.625rem;
      padding: 20px 0px;
      border-radius: 8px;
      background-color: white;

      .action-item {
        .icon {
          font-size: 28px;
        }

        .text {
          display: block;
          font-size: 13px;
          margin: 8px 0px;
        }
      }
    }
  }

  .cu-list.menu-avatar .cu-item {
    border-radius: 5px;
    padding: 30rpx 0;
    box-shadow: 1px 1px 4px rgb(26 26 26 / 10%);
    .cu-avatar {
      background-color: rgba(0, 0, 0, 0);
      background-size: 100% 100%;
      left: 26rpx;
    }
    .content {
      left: 130rpx;
      font-size: 32rpx;
    }
  }
}

.item-box {
  background-color: #ffffff;
  margin: 30rpx;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 10rpx;
  border-radius: 8rpx;
  color: #303133;
  font-size: 32rpx;
}
</style>