|
@@ -1,466 +0,0 @@
|
|
|
-<template>
|
|
|
- <view :data-theme="'theme-' + proxy.$settingStore.themeColor.name" class="mine-container" :style="{ height: `calc(100vh - 50.67px)` }">
|
|
|
- <!--顶部个人信息栏-->
|
|
|
- <view class="header-section" :class="'bg-' + themeColor.name" :style="{ paddingTop: proxy.$settingStore.StatusBar ? proxy.$settingStore.StatusBar + 20 + '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 ucicon-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="proxy.$settingStore.handleToEditInfo()">
|
|
|
- <view class="menu-item-box">
|
|
|
- <view class="iconfont ucicon-user menu-icon"></view>
|
|
|
- <view>我的信息</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="list-cell list-cell-arrow" @click="proxy.$settingStore.handleToSecure()">
|
|
|
- <view class="menu-item-box">
|
|
|
- <view class="iconfont ucicon-yanzheng menu-icon"></view>
|
|
|
- <view>账号与安全</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="list-cell list-cell-arrow" @click="proxy.$settingStore.handleAbout()">
|
|
|
- <view class="menu-item-box">
|
|
|
- <view class="iconfont ucicon-aixin menu-icon"></view>
|
|
|
- <view>关于我们</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="list-cell list-cell-arrow" @click="proxy.$settingStore.handleHelp()">
|
|
|
- <view class="menu-item-box">
|
|
|
- <view class="iconfont ucicon-Help menu-icon"></view>
|
|
|
- <view>常见问题</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="list-cell list-cell-arrow" @click="proxy.$settingStore.handleCleanTmp()">
|
|
|
- <view class="menu-item-box">
|
|
|
- <view class="iconfont ucicon-qinglihuancun 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="proxy.$settingStore.handleToUpgrade()">
|
|
|
- <view class="menu-item-box">
|
|
|
- <view class="iconfont ucicon-jianchagengxin menu-icon"></view>
|
|
|
- <view>检查更新</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <!-- <view class="list-cell list-cell-arrow" @click="proxy.$settingStore.handleSetting()">
|
|
|
- <view class="menu-item-box">
|
|
|
- <view class="iconfont ucicon-shezhi 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 ucicon-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 ucicon-aixin menu-icon"></view>
|
|
|
- <view>建筑管理</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="list-cell list-cell-arrow" @click="goFunReport()">
|
|
|
- <view class="menu-item-box">
|
|
|
- <view class="iconfont ucicon-aixin 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-' + themeColor.name"></text>
|
|
|
- <view class="padding solid radius shadow-blur" :class="'bg-' + themeColor.name" style="margin-left: 10px"></view>
|
|
|
- <view class="title" style="margin-left: 10px">
|
|
|
- 主题色:<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 ucicon-colorlens"></text>
|
|
|
- 选择主题
|
|
|
- </button>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="cu-list menu">
|
|
|
- <view class="cu-item">
|
|
|
- <view class="content text-center" @click="proxy.$settingStore.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"></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"></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>
|
|
|
-
|
|
|
- <oa-tabbar :tabbarValue="2"></oa-tabbar>
|
|
|
-</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 { publicStores, useStores } from "@/store/modules/index";
|
|
|
-
|
|
|
-import { uploadAvatar, updateUserProfile } from "@/api/system/user";
|
|
|
-import { getAuthorization } from "@/api/business/zhxf/messagePush/index.js";
|
|
|
-
|
|
|
-const useStore = useStores();
|
|
|
-
|
|
|
-const { proxy } = getCurrentInstance();
|
|
|
-
|
|
|
-const avatar = computed(() => {
|
|
|
- return useStore.$state.avatar;
|
|
|
-});
|
|
|
-
|
|
|
-const themeColor = computed(() => {
|
|
|
- return proxy.$settingStore.themeColor;
|
|
|
-});
|
|
|
-
|
|
|
-const windowHeight = computed(() => {
|
|
|
- return uni.getSystemInfoSync().windowHeight - 50;
|
|
|
-});
|
|
|
-
|
|
|
-const data = reactive({
|
|
|
- name: useStore.$state.name,
|
|
|
- phone: useStore.$state.phonenumber,
|
|
|
- version: 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() {
|
|
|
- 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.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");
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-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(() => {});
|
|
|
-
|
|
|
-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: 100vh;
|
|
|
-
|
|
|
- .header-section {
|
|
|
- padding: 55px 15px 0 15px;
|
|
|
-
|
|
|
- .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;
|
|
|
- padding-bottom: 50.67px;
|
|
|
- background-color: #f5f6f7;
|
|
|
-
|
|
|
- .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>
|