|
|
@@ -0,0 +1,495 @@
|
|
|
+<template>
|
|
|
+ <view class="mine-page-page">
|
|
|
+ <view class="mine-page-header">
|
|
|
+ <wd-navbar placeholder :bordered="false" safeAreaInsetTop customClass="navbar">
|
|
|
+ <template #title>
|
|
|
+ <view class="navbar-title">我的</view>
|
|
|
+ </template>
|
|
|
+ </wd-navbar>
|
|
|
+
|
|
|
+ <view class="user-card">
|
|
|
+ <template v-if="!isLoggedIn">
|
|
|
+ <view class="user-card-guest" @click="navigateToLogin">
|
|
|
+ <image
|
|
|
+ class="user-card-avatar"
|
|
|
+ src="https://yy-cloud-oss.oss-cn-beijing.aliyuncs.com/img/default_avatar.png"
|
|
|
+ />
|
|
|
+ <view class="user-card-guest-text">点击登录</view>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <template v-else>
|
|
|
+ <view class="user-card-header" @click="handleCompanySelect">
|
|
|
+ <view class="user-card-company">
|
|
|
+ <text class="user-card-company-name">
|
|
|
+ {{ currentUserInfo?.deptName || '' }}
|
|
|
+ </text>
|
|
|
+ <image
|
|
|
+ class="user-card-company-arrow"
|
|
|
+ src="https://yy-cloud-oss.oss-cn-beijing.aliyuncs.com/img/qiehuan.png"
|
|
|
+ />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="user-card-body">
|
|
|
+ <image
|
|
|
+ class="user-card-avatar"
|
|
|
+ :src="
|
|
|
+ currentUserInfo?.avatar ||
|
|
|
+ 'https://yy-cloud-oss.oss-cn-beijing.aliyuncs.com/img/default_avatar.png'
|
|
|
+ "
|
|
|
+ />
|
|
|
+
|
|
|
+ <view class="user-card-info">
|
|
|
+ <view class="user-card-name">
|
|
|
+ <text>
|
|
|
+ {{ currentUserInfo?.realname }}({{
|
|
|
+ currentUserInfo?.phone || currentUserInfo?.deptName
|
|
|
+ }})
|
|
|
+ </text>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="user-card-meta">
|
|
|
+ <text>{{ getRolesName(currentUserInfo?.roles) }}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="mine-page-content">
|
|
|
+ <view class="auth card">
|
|
|
+ <view class="auth-item">
|
|
|
+ <view class="auth-item-content">
|
|
|
+ <image
|
|
|
+ class="auth-item-icon"
|
|
|
+ src="https://yy-cloud-oss.oss-cn-beijing.aliyuncs.com/img/renzheng.png"
|
|
|
+ mode="aspectFit"
|
|
|
+ />
|
|
|
+ <view class="auth-item-text">
|
|
|
+ <view class="auth-item-title">认证服务</view>
|
|
|
+ <view class="auth-item-desc">签约前请先完成平台认证</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="auth-item-action">
|
|
|
+ <text class="auth-item-action-text">去认证</text>
|
|
|
+ <wd-icon name="arrow-right" color="#3FA3F1" size="36rpx" />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="auth-item auth-item-last">
|
|
|
+ <view class="auth-item-content">
|
|
|
+ <image class="auth-item-icon" mode="aspectFit" />
|
|
|
+ <view class="auth-item-text">
|
|
|
+ <view class="auth-item-title">签约结算渠道</view>
|
|
|
+ <view class="auth-item-desc">结算前请先完成渠道签约</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="auth-item-action">
|
|
|
+ <text class="auth-item-action-text">去签约</text>
|
|
|
+ <wd-icon name="arrow-right" color="#3FA3F1" size="36rpx" />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="card menu-list">
|
|
|
+ <view class="menu-item" v-for="item in menuList" :key="item.path">
|
|
|
+ <view class="menu-item-content">
|
|
|
+ <image class="menu-item-icon" :src="item.icon" mode="aspectFit" />
|
|
|
+ <view class="menu-item-text">{{ item.txt }}</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="menu-item-arrow">
|
|
|
+ <wd-icon name="arrow-right" color="#333333" size="32rpx" />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="card common-panel">
|
|
|
+ <view class="common-panel-title">常用功能</view>
|
|
|
+ <view class="common-grid">
|
|
|
+ <view class="common-grid-item" v-for="item in functionList" :key="item.key">
|
|
|
+ <image class="common-grid-icon" :src="item.icon" mode="aspectFit" />
|
|
|
+ <view class="common-grid-text">{{ item.txt }}</view>
|
|
|
+ </view>
|
|
|
+ <view class="common-grid-item common-grid-item-message">
|
|
|
+ <view class="common-grid-icon-wrap">
|
|
|
+ <image
|
|
|
+ class="common-grid-icon"
|
|
|
+ src="https://yy-cloud-oss-public.oss-cn-beijing.aliyuncs.com/image/message-icon.png"
|
|
|
+ mode="aspectFit"
|
|
|
+ />
|
|
|
+ <view class="common-grid-badge"></view>
|
|
|
+ </view>
|
|
|
+ <view class="common-grid-text">消息通知</view>
|
|
|
+ </view>
|
|
|
+ <view class="common-grid-item common-grid-item-osais">
|
|
|
+ <image
|
|
|
+ class="common-grid-icon"
|
|
|
+ src="https://yy-cloud-oss-public.oss-cn-beijing.aliyuncs.com/image/osais-logo.png"
|
|
|
+ mode="aspectFit"
|
|
|
+ />
|
|
|
+ <view class="common-grid-text">奥塞斯</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="login-out" v-if="isLoggedIn" @click="handleLogoutClick">退出登录</view>
|
|
|
+ </view>
|
|
|
+ <!-- 切换企业 -->
|
|
|
+ <wd-action-sheet
|
|
|
+ title="选择企业"
|
|
|
+ v-model="handleCompanyShow"
|
|
|
+ :actions="companyList"
|
|
|
+ @close="handleCompanyShow = false"
|
|
|
+ @select="handleCompanyConfirm"
|
|
|
+ cancel-text="取消"
|
|
|
+ />
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup lang="ts">
|
|
|
+import { computed, ref } from 'vue'
|
|
|
+
|
|
|
+import { useUserStore } from '@/stores/modules/user'
|
|
|
+
|
|
|
+import { functionList, menuList, rolesList } from './mine.config.ts'
|
|
|
+
|
|
|
+const userStore = useUserStore()
|
|
|
+
|
|
|
+const isLoggedIn = computed(() => userStore.isLoggedIn)
|
|
|
+const currentUserInfo = computed(() => userStore.currentUserInfo)
|
|
|
+
|
|
|
+const isBlacklisted = computed(() => userStore.isBlacklisted)
|
|
|
+
|
|
|
+const navigateToLogin = () => {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: '/pages/login/index',
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+const getRolesName = (roles: number[]) => {
|
|
|
+ const rile = roles?.[0] || 0
|
|
|
+ const roleList = rolesList.find((role) => role.value === rile)
|
|
|
+ return roleList?.name || ''
|
|
|
+}
|
|
|
+// 切换企业
|
|
|
+const companyList = ref<{ name: string; color: string }[]>([])
|
|
|
+const handleCompanyShow = ref(false)
|
|
|
+const handleCompanySelect = () => {
|
|
|
+ if (isBlacklisted.value) return
|
|
|
+ const userInfoList = userStore.userInfoList
|
|
|
+ const currentUserInfoIndex = userStore.currentUserInfoIndex || 0
|
|
|
+ const arr = userInfoList.map((info) => ({
|
|
|
+ name: info?.deptName,
|
|
|
+ color: '#333333',
|
|
|
+ }))
|
|
|
+
|
|
|
+ arr[currentUserInfoIndex].color = '#3FA3F1'
|
|
|
+ companyList.value = arr
|
|
|
+ handleCompanyShow.value = true
|
|
|
+}
|
|
|
+const handleCompanyConfirm = (curr: { item: { name: string; color: string }; index: number }) => {
|
|
|
+ const index = curr.index
|
|
|
+ if (index === userStore.currentUserInfoIndex) return
|
|
|
+ userStore.setCurrentUserInfoIndex(index)
|
|
|
+}
|
|
|
+
|
|
|
+const handleLogoutClick = () => {
|
|
|
+ uni.showModal({
|
|
|
+ title: '提示',
|
|
|
+ content: '是否退出登录',
|
|
|
+ success: function (res) {
|
|
|
+ if (res.confirm) {
|
|
|
+ userStore.logout()
|
|
|
+ uni.reLaunch({
|
|
|
+ url: '/pages/login/index',
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ })
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.mine-page-page {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ background: #f5f5f5;
|
|
|
+ min-height: 100vh;
|
|
|
+
|
|
|
+ .mine-page-header {
|
|
|
+ position: relative;
|
|
|
+ background-image: var(--workbench-bg);
|
|
|
+ background-size: 100% 100%;
|
|
|
+ height: 33vh;
|
|
|
+ width: 750rpx;
|
|
|
+
|
|
|
+ :deep(.navbar) {
|
|
|
+ background-color: transparent;
|
|
|
+ }
|
|
|
+ .navbar-title {
|
|
|
+ color: #fff;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+
|
|
|
+ .user-card {
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .user-card-guest {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-top: 60rpx;
|
|
|
+ padding: 0 30rpx;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 28rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .user-card-guest-text {
|
|
|
+ line-height: 40rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .user-card-header {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .user-card-company {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .user-card-company-name {
|
|
|
+ font-size: 22rpx;
|
|
|
+ line-height: 32rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .user-card-company-arrow {
|
|
|
+ width: 24rpx;
|
|
|
+ height: 17rpx;
|
|
|
+ margin-left: 12rpx;
|
|
|
+ flex-shrink: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .user-card-body {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-top: 36rpx;
|
|
|
+ padding: 0 30rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .user-card-avatar {
|
|
|
+ width: 120rpx;
|
|
|
+ height: 120rpx;
|
|
|
+ margin-right: 30rpx;
|
|
|
+ flex-shrink: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .user-card-info {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ min-width: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .user-card-name {
|
|
|
+ color: #fff;
|
|
|
+ font-size: 36rpx;
|
|
|
+ font-weight: 600;
|
|
|
+ line-height: 50rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .user-card-meta {
|
|
|
+ color: #fff;
|
|
|
+ font-size: 22rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ line-height: 36rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .mine-page-content {
|
|
|
+ position: relative;
|
|
|
+ top: -100rpx;
|
|
|
+ .card {
|
|
|
+ width: 690rpx;
|
|
|
+ margin: 0 30rpx 16rpx;
|
|
|
+ padding: 24rpx 20rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ background: #fff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .auth {
|
|
|
+ min-height: 200rpx;
|
|
|
+
|
|
|
+ .auth-item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-bottom: 24rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .auth-item-last {
|
|
|
+ margin-bottom: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .auth-item-content {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .auth-item-icon {
|
|
|
+ width: 72rpx;
|
|
|
+ height: 72rpx;
|
|
|
+ margin-right: 15rpx;
|
|
|
+ flex-shrink: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .auth-item-text {
|
|
|
+ color: var(--font-color-333);
|
|
|
+ }
|
|
|
+
|
|
|
+ .auth-item-title {
|
|
|
+ color: var(--font-color-333);
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-weight: 700;
|
|
|
+ line-height: 42rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .auth-item-desc {
|
|
|
+ color: var(--font-color-333);
|
|
|
+ font-size: 20rpx;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 28rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .auth-item-action {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ flex-shrink: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .auth-item-action-text {
|
|
|
+ margin-right: 6rpx;
|
|
|
+ color: var(--main-color);
|
|
|
+ font-size: 26rpx;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .menu-list {
|
|
|
+ .menu-item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ min-height: 48rpx;
|
|
|
+ padding: 8rpx 0;
|
|
|
+ margin-bottom: 36rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .menu-item:last-child {
|
|
|
+ margin-bottom: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .menu-item-content {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ flex: 1;
|
|
|
+ min-width: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .menu-item-icon {
|
|
|
+ width: 40rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ margin-right: 16rpx;
|
|
|
+ flex-shrink: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .menu-item-text {
|
|
|
+ color: #000;
|
|
|
+ font-size: 30rpx;
|
|
|
+ line-height: 42rpx;
|
|
|
+ word-break: break-all;
|
|
|
+ }
|
|
|
+
|
|
|
+ .menu-item-arrow {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ margin-left: 24rpx;
|
|
|
+ flex-shrink: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .common-panel {
|
|
|
+ min-height: 240rpx;
|
|
|
+
|
|
|
+ .common-panel-title {
|
|
|
+ color: var(--font-color-333);
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ line-height: 40rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .common-grid {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ margin-top: 36rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .common-grid-item {
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ width: 25%;
|
|
|
+ margin-bottom: 36rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .common-grid-icon-wrap {
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ width: 56rpx;
|
|
|
+ height: 56rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .common-grid-icon {
|
|
|
+ width: 56rpx;
|
|
|
+ height: 56rpx;
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+
|
|
|
+ .common-grid-text {
|
|
|
+ margin-top: 20rpx;
|
|
|
+ color: var(--font-color-333);
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 34rpx;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .common-grid-badge {
|
|
|
+ position: absolute;
|
|
|
+ top: -4rpx;
|
|
|
+ right: -8rpx;
|
|
|
+ width: 12rpx;
|
|
|
+ height: 12rpx;
|
|
|
+ border-radius: 50%;
|
|
|
+ background: #ff4d4f;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .login-out {
|
|
|
+ margin: 0 auto;
|
|
|
+ width: 690rpx;
|
|
|
+ margin-top: 16rpx;
|
|
|
+ background: #ffffff;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 90rpx;
|
|
|
+ color: var(--font-color-333);
|
|
|
+ font-size: 32rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
