@uxda/appkit 4.0.3 → 4.0.14

package/src/user/components/UserInfo.vue

@@ -1,632 +1,632 @@
-<template>
-  <scroll-view :scroll-y="!userState.visible && !avatarVisible" class="user-info">
-    <DdSkeleton v-if="firstLoading" :row="3"></DdSkeleton>
-    <div v-else class="user-info-wrap">
-      <div class="user-info-tit">账号信息</div>
-      <div class="user-info-head">
-        <div class="user-info-head-avatar" @click="avatarVisible = true">
-          <img
-            class="user-info-head-img"
-            mode="aspectFit"
-            v-if="userInfo.avatar"
-            :src="userInfo.avatar"
-            alt=""
-          />
-          <img
-            class="user-info-head-img"
-            mode="aspectFit"
-            v-else
-            src="https://cdn.ddjf.com/static/images/wx-yunservice/account-head.png"
-            alt=""
-          />
-          <div class="user-info-head-upload">
-            <img
-              class="user-info-head-upload-icon"
-              mode="aspectFit"
-              src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzQiIGhlaWdodD0iMzQiIHZpZXdCb3g9IjAgMCAzNCAzNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yMi4wOTk5IDE4LjQyMjRDMjIuMDk5OSAxNS41ODMyIDE5LjgxNjYgMTMuMjgxNiAxNi45OTk5IDEzLjI4MTZDMTQuMTgzMyAxMy4yODE2IDExLjg5OTkgMTUuNTgzMiAxMS44OTk5IDE4LjQyMjRDMTEuODk5OSAyMS4yNjE2IDE0LjE4MzMgMjMuNTYzMiAxNi45OTk5IDIzLjU2MzJDMTkuODE2NiAyMy41NjMyIDIyLjA5OTkgMjEuMjYxNiAyMi4wOTk5IDE4LjQyMjRWMTguNDIyNFoiIHN0cm9rZT0id2hpdGUiIHN0cm9rZS13aWR0aD0iMi41NSIgc3Ryb2tlLWxpbmVjYXA9InNxdWFyZSIvPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTIzLjc5OTkgNS45OTg4QzIzLjc5OTkgNi4yMzUzOSAyMy45OTAyIDYuNDI3MiAyNC4yMjQ5IDYuNDI3MkgyNS45MjVDMjkuNDQ1OCA2LjQyNzIgMzIuMyA5LjMwNDIxIDMyLjMgMTIuODUzMlYyMy45OTE2QzMyLjMgMjcuNTQwNiAyOS40NDU4IDMwLjQxNzYgMjUuOTI1IDMwLjQxNzZIOC4wNzQ5NEM0LjU1NDE0IDMwLjQxNzYgMS42OTk5NSAyNy41NDA2IDEuNjk5OTUgMjMuOTkxNlYxMi44NTMyQzEuNjk5OTUgOS4zMDQyMSA0LjU1NDE0IDYuNDI3MiA4LjA3NDk0IDYuNDI3Mkg5Ljc3NDk1QzEwLjAwOTcgNi40MjcyIDEwLjIgNi4yMzUzOSAxMC4yIDUuOTk4OEMxMC4yIDUuNzA5NDkgMTAuMjQwNiA1LjQyOTc1IDEwLjMxNjUgNS4xNjUwNkMxMC42NzQ4IDMuOTE0NTEgMTEuODE4OSAzIDEzLjE3NSAzSDIwLjgyNUMyMi40NjggMyAyMy43OTk5IDQuMzQyNjEgMjMuNzk5OSA1Ljk5ODhWNS45OTg4WiIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIyLjU1IiBzdHJva2UtbGluZWNhcD0ic3F1YXJlIi8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNNy42NDk5IDEwLjI4MjhDOC44MjM1MSAxMC4yODI4IDkuNzc0OSAxMS4yNDE4IDkuNzc0OSAxMi40MjQ4QzkuNzc0OSAxMy42MDc4IDguODIzNTEgMTQuNTY2OCA3LjY0OTkgMTQuNTY2OEM2LjQ3NjMgMTQuNTY2OCA1LjUyNDkgMTMuNjA3OCA1LjUyNDkgMTIuNDI0OEM1LjUyNDkgMTEuMjQxOCA2LjQ3NjMgMTAuMjgyOCA3LjY0OTkgMTAuMjgyOFoiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo="
-              alt=""
-            />
-          </div>
-        </div>
-        <nut-cell
-          title="登录手机号"
-          is-link
-          :desc="encodePhone(userInfo.mobile || '')"
-          @click="toBinding"
-        />
-      </div>
-
-      <div class="user-info-tit">企业/团队</div>
-      <div class="user-info-team">
-        <div v-for="(item, key) in userInfo.tenantInfoList" :key="key" class="user-info-team-item">
-          <div class="user-info-team-item-avatar">
-            <img
-              v-if="item.tenantLogo"
-              class="user-info-team-item-avatar-img"
-              mode="aspectFit"
-              :src="item.tenantLogo"
-              alt=""
-            />
-            <img
-              v-else
-              class="user-info-team-item-avatar-img empty"
-              mode="aspectFit"
-              src="https://cdn.ddjf.com/static/images/customer-center/tenant-logo.png"
-              alt=""
-            />
-          </div>
-          <div class="user-info-team-item-bd">
-            <div class="user-info-team-item-title">{{ item.tenantName }}</div>
-            <div class="user-info-team-item-app" v-if="item.appRoleInfo">
-              <div
-                class="user-info-team-item-app-tag"
-                v-for="(aitem, akey) in item.appRoleInfo || []"
-                :key="akey"
-              >
-                {{ aitem.appAbbr }}
-              </div>
-              <div class="user-info-team-item-role-btn" @click="toShowRole(item)">
-                角色详情
-                <img
-                  :class="{ showRole: item.showRole }"
-                  class="user-info-team-item-role-btn-icon"
-                  src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE4IDlMMTIgMTVMNiA5IiBzdHJva2U9IiMwMTdGRkYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo="
-                  alt=""
-                />
-              </div>
-            </div>
-            <div class="user-info-team-item-role" v-if="item.showRole">
-              <div
-                class="user-info-team-item-role-item"
-                v-for="(aitem, akey) in item.appRoleInfo || []"
-                :key="akey"
-              >
-                <div class="user-info-team-item-role-item-name">{{ aitem.appAbbr }}</div>
-                <div class="user-info-team-item-role-item-info">
-                  {{ aitem.roleName }}
-                </div>
-              </div>
-            </div>
-            <div class="user-info-team-item-user">
-              {{ item.fullName }}
-              <img
-                @click="toUserNameChange(item)"
-                class="user-info-team-item-user-icon"
-                src="https://cdn.ddjf.com/static/images/appkit/edit.png"
-                alt=""
-              />
-            </div>
-            <div class="user-info-team-item-dept">
-              <div
-                v-for="(ditem, dkey) in item.deptNames"
-                :key="dkey"
-                class="user-info-team-item-dept-item"
-              >
-                {{ ditem }}
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <div class="user-info-ft">
-        <nut-button class="user-info-ft-btn" @click="toLogout" plain type="primary"
-          >退出登录</nut-button
-        >
-      </div>
-    </div>
-  </scroll-view>
-
-  <!-- 修改用户名弹框 -->
-  <nut-dialog
-    title="输入新的用户名"
-    :border="false"
-    pop-class="change-username-popup"
-    v-model:visible="userState.visible"
-    @cancel="onUserNameCancel"
-  >
-    <nut-input :max-length="20" placeholder="请输入新的用户名" v-model="userState.value" />
-    <template #footer>
-      <nut-button class="change-username-popup-cancel" type="default" @click="onUserNameCancel">
-        取消
-      </nut-button>
-      <nut-button class="change-username-popup-ok" type="primary" @click="onUserNameOk">
-        确定
-      </nut-button>
-    </template>
-  </nut-dialog>
-
-  <!-- 修改头像弹框 -->
-  <nut-popup
-    pop-class="upload-avatar-popup"
-    style="background: transparent"
-    v-model:visible="avatarVisible"
-    :overlay-style="{ background: 'rgba(0, 0, 0, 0.9)' }"
-  >
-    <div class="upload-avatar-popup-box">
-      <img
-        class="upload-avatar-popup-avatar"
-        mode="aspectFit"
-        v-if="userInfo.avatar"
-        :src="userInfo.avatar"
-        alt=""
-      />
-      <img
-        class="upload-avatar-popup-avatar"
-        mode="aspectFit"
-        v-else
-        src="https://cdn.ddjf.com/static/images/wx-yunservice/account-head.png"
-        alt=""
-      />
-      <div class="upload-avatar-popup-btn" @click="toUpload">更换头像</div>
-    </div>
-  </nut-popup>
-</template>
-
-<script lang="ts" setup>
-import Taro, { useDidShow } from '@tarojs/taro'
-import { ref, onMounted, reactive, onUnmounted } from 'vue'
-import { useAppKitOptions } from '../../Appkit'
-import { useEncode } from '../../shared/composables/useEncode'
-import DdSkeleton from '../../components/dd-skeleton/index.vue'
-import { useHttp } from '../api'
-
-const props = withDefaults(
-  defineProps<{
-    miniType?: string
-    app?: string
-    userId: string
-  }>(),
-  {
-    miniType: '05',
-    app: '',
-    userId: '',
-  }
-)
-
-const { encodePhone } = useEncode()
-
-useDidShow(() => {
-  getUserInfoByUserId()
-})
-onMounted(() => {
-  Taro.eventCenter.on('USER-HEAD-CROP-OK', updateImage)
-})
-onUnmounted(() => {
-  Taro.eventCenter.off('USER-HEAD-CROP-OK')
-})
-
-const firstLoading = ref(true)
-const userInfo = ref<any>({})
-// 根据用户id，查询用户所在租户列表
-function getUserInfoByUserId() {
-  const $http = useHttp()
-
-  $http
-    .get(`/cas/sysAccount/getAccountInfo/${props.userId}`)
-    .then((result: any) => {
-      userInfo.value = result
-      firstLoading.value = false
-    })
-    .catch(() => {
-      firstLoading.value = false
-    })
-}
-
-// 修改头像弹框
-const avatarVisible = ref(false)
-
-// 去上传头像
-async function toUpload() {
-  if (!userInfo.value.avatar) {
-    const profile = await Taro.getUserProfile({
-      desc: '头像用于改变默认头像',
-    })
-
-    const res = await Taro.downloadFile({
-      url: profile.userInfo.avatarUrl,
-    })
-
-    updateImage(res.tempFilePath)
-  } else {
-    let res = await Taro.chooseImage({
-      count: 1,
-    })
-    if (res.tempFilePaths) {
-      const filePath = res.tempFilePaths[0]
-
-      emits('crop', filePath)
-    }
-  }
-}
-
-// 上传图片
-async function updateImage(filePath: string) {
-  Taro.showLoading({
-    title: '上传中...',
-  })
-  const appkitOptions = useAppKitOptions()
-  const $http = useHttp()
-
-  let Res: any = await Taro.uploadFile({
-    url: `${appkitOptions.baseUrl()}/cas/file/uploadImg`,
-    filePath: filePath,
-    name: 'file',
-    formData: {
-      objectNo: `${userInfo.value.mobile}${Date.now()}`,
-      objectTypeCode: `MINI_HEADIMAGE${props.miniType}`,
-    },
-    header: {
-      token: appkitOptions.tempToken() || appkitOptions.token(),
-    },
-  })
-  avatarVisible.value = false
-
-  const res = JSON.parse(Res.data)
-  if (res.success) {
-    $http
-      .post('/cas/sysUser/update', {
-        appCode: props.app,
-        avatar: res.result,
-        userId: props.userId,
-      })
-      .then(() => {
-        Taro.hideLoading()
-        Taro.showToast({ title: '头像上传成功', icon: 'none' })
-        getUserInfoByUserId()
-        emits('avatar-success', res.result)
-      })
-      .catch(() => {
-        Taro.hideLoading()
-      })
-  } else {
-    Taro.hideLoading()
-  }
-}
-
-// 查看角色详情
-function toShowRole(item: any) {
-  item.showRole = !item.showRole
-}
-
-// 更换用户名
-const userState = reactive({
-  visible: false,
-  value: '',
-  oldName: '',
-  tenantId: '',
-})
-function toUserNameChange(item: any) {
-  userState.visible = true
-  userState.oldName = item.fullName
-  userState.tenantId = item.tenantId
-}
-function onUserNameCancel() {
-  userState.visible = false
-  userState.value = ''
-  userState.oldName = ''
-  userState.tenantId = ''
-}
-function onUserNameOk() {
-  if (!userState.value) {
-    return Taro.showToast({
-      title: '请输入用户名',
-      icon: 'none',
-    })
-  }
-  if (userState.value === userState.oldName) {
-    return Taro.showToast({
-      title: '用户名不能与原用户名相同',
-      icon: 'none',
-    })
-  }
-
-  const $http = useHttp()
-
-  $http
-    .post('/cas/sysUser/updateUserInfoByTenantId', {
-      fullName: userState.value,
-      tenantId: userState.tenantId,
-      userId: props.userId,
-    })
-    .then(() => {
-      Taro.showToast({ title: '用户名修改成功', icon: 'none' })
-      getUserInfoByUserId()
-      onUserNameCancel()
-      emits('username-success')
-    })
-}
-
-// 退出登录
-function toLogout() {
-  Taro.showModal({
-    title: '提示',
-    content: '确定要退出登录吗？',
-    confirmText: '确定',
-    success: async (e: any) => {
-      if (e.confirm) {
-        emits('logout')
-      }
-    },
-  })
-}
-
-// 去绑定手机号
-function toBinding() {
-  emits('binding', userInfo.value.mobile || '')
-}
-
-// 父组件事件
-const emits = defineEmits(['avatar-success', 'logout', 'crop', 'binding', 'username-success'])
-
-// 外部访问
-defineExpose({
-  updateImage,
-})
-</script>
-
-<style lang="scss">
-.user-info {
-  height: 100vh;
-
-  &-wrap {
-    padding: 0 12px;
-    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
-    box-sizing: border-box;
-    min-height: 100%;
-  }
-  &-tit {
-    height: 38px;
-    display: flex;
-    align-items: center;
-    color: #666666;
-    font-size: 12px;
-    padding-left: 10px;
-  }
-  &-head {
-    border-radius: 5px;
-    background: #fff;
-    padding: 30px 11px 0;
-    &-avatar {
-      position: relative;
-      width: 80px;
-      height: 80px;
-      margin: 0 auto 25px;
-    }
-    &-img {
-      width: 100%;
-      height: 100%;
-      overflow: hidden;
-      border-radius: 50%;
-    }
-    &-upload {
-      position: absolute;
-      bottom: -2px;
-      left: 52px;
-      width: 29px;
-      height: 29px;
-      background: #333333;
-      overflow: hidden;
-      border-radius: 50%;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      &-icon {
-        width: 17px;
-        height: 17px;
-      }
-    }
-  }
-  &-team {
-    &-item {
-      border-radius: 5px;
-      background: #fff;
-      display: flex;
-      padding: 15px;
-      margin-bottom: 10px;
-      &-avatar {
-        width: 38px;
-        height: 38px;
-        margin-right: 15px;
-        border-radius: 5px;
-        background: rgba(1, 127, 255, 0.3);
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        &-img {
-          width: 100%;
-          height: 100%;
-        }
-        .empty {
-          width: 20px;
-          height: 40px;
-        }
-      }
-      &-title {
-        font-size: 16px;
-        font-weight: 500;
-        margin-bottom: 5px;
-      }
-      &-app {
-        display: flex;
-        align-items: center;
-        flex-wrap: wrap;
-        &-tag {
-          border: 1px solid rgba(53, 53, 53, 0.2);
-          font-size: 10px;
-          height: 18px;
-          display: inline-flex;
-          align-items: center;
-          justify-content: center;
-          padding: 0 6px;
-          border-radius: 2px;
-          margin: 0 10px 6px 0;
-        }
-      }
-      &-bd {
-        flex: 1;
-      }
-      &-role {
-        padding: 10px;
-        background: rgba(245, 245, 245, 0.5);
-        border-radius: 5px;
-        margin-bottom: 10px;
-        &-btn {
-          color: var(--app-primary-color, #017fff);
-          font-size: 10px;
-          display: inline-flex;
-          align-items: center;
-          margin-bottom: 6px;
-          &-icon {
-            width: 12px;
-            height: 12px;
-            position: relative;
-            top: 1px;
-            &.showRole {
-              transform: rotate(180deg);
-            }
-          }
-        }
-        &-item {
-          display: flex;
-          font-size: 10px;
-          margin-bottom: 10px;
-          &:last-child {
-            margin-bottom: 0;
-          }
-          &-name {
-            opacity: 0.5;
-            white-space: nowrap;
-            margin-right: 10px;
-            min-width: 40px;
-          }
-          &-info {
-            flex: 1;
-            color: #1a1a1a;
-          }
-        }
-      }
-      &-user {
-        margin-bottom: 4px;
-        font-size: 12px;
-        display: flex;
-        align-items: center;
-        &-icon {
-          width: 10px;
-          height: 10px;
-          margin-left: 4px;
-        }
-      }
-      &-dept {
-        display: flex;
-        flex-wrap: wrap;
-        font-size: 10px;
-        color: rgba(26, 26, 26, 0.8);
-        &-item {
-          font-size: 10px;
-          color: rgba(26, 26, 26, 0.5);
-          margin: 4px 10px 4px 0;
-          &:first-child {
-            color: rgba(26, 26, 26, 0.8);
-          }
-        }
-      }
-    }
-  }
-
-  &-ft {
-    &-btn {
-      width: 100%;
-      border-color: transparent !important;
-      color: rgba(27, 63, 107, 0.8) !important;
-    }
-  }
-
-  .nut-cell {
-    padding: 11px 0;
-    margin: 0;
-    box-shadow: none;
-    border-bottom: 1px solid #f0f0f0;
-    font-size: 16px;
-    .nut-cell__value {
-      font-size: 16px;
-      color: #000;
-    }
-    .nut-cell__link {
-      color: #ccc;
-      margin-left: 8px;
-    }
-  }
-}
-.upload-avatar-popup {
-  &-box {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-  }
-  &-avatar {
-    width: 320px;
-    height: 320px;
-    overflow: hidden;
-    border-radius: 50%;
-    margin-bottom: 50px;
-  }
-  &-btn {
-    width: 106px;
-    height: 37px;
-    border-radius: 50px;
-    border: 1px solid #ffffff;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    color: #ffffff;
-    font-size: 16px;
-  }
-}
-.change-username-popup {
-  .nut-dialog {
-    min-height: auto;
-  }
-  .nut-input {
-    height: 40px;
-    padding: 0;
-    display: flex;
-    align-items: center;
-    font-size: 16px;
-    border: none;
-    .input-text {
-      width: 100%;
-      height: 100%;
-      font-size: 14px;
-    }
-    .nut-input-value,
-    .nut-input-inner,
-    .nut-input-box {
-      height: 100%;
-      overflow: hidden;
-      background: #f5f5f5;
-      border-radius: 6px;
-    }
-    .nut-placeholder {
-      color: #cccccc;
-      line-height: 38px;
-      height: 38px;
-    }
-    .nut-input-box {
-      padding: 0 15px;
-    }
-  }
-  &-cancel.nut-button {
-    border-radius: 15px;
-    font-size: 14px;
-    height: 30px;
-  }
-  &-ok.nut-button {
-    background: var(--app-primary-color, #017fff);
-    height: 30px;
-    font-size: 14px;
-    border-radius: 15px;
-  }
-}
-</style>
+<template>
+  <scroll-view :scroll-y="!userState.visible && !avatarVisible" class="user-info">
+    <DdSkeleton v-if="firstLoading" :row="3"></DdSkeleton>
+    <div v-else class="user-info-wrap">
+      <div class="user-info-tit">账号信息</div>
+      <div class="user-info-head">
+        <div class="user-info-head-avatar" @click="avatarVisible = true">
+          <img
+            class="user-info-head-img"
+            mode="aspectFit"
+            v-if="userInfo.avatar"
+            :src="userInfo.avatar"
+            alt=""
+          />
+          <img
+            class="user-info-head-img"
+            mode="aspectFit"
+            v-else
+            src="https://cdn.ddjf.com/static/images/wx-yunservice/account-head.png"
+            alt=""
+          />
+          <div class="user-info-head-upload">
+            <img
+              class="user-info-head-upload-icon"
+              mode="aspectFit"
+              src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzQiIGhlaWdodD0iMzQiIHZpZXdCb3g9IjAgMCAzNCAzNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yMi4wOTk5IDE4LjQyMjRDMjIuMDk5OSAxNS41ODMyIDE5LjgxNjYgMTMuMjgxNiAxNi45OTk5IDEzLjI4MTZDMTQuMTgzMyAxMy4yODE2IDExLjg5OTkgMTUuNTgzMiAxMS44OTk5IDE4LjQyMjRDMTEuODk5OSAyMS4yNjE2IDE0LjE4MzMgMjMuNTYzMiAxNi45OTk5IDIzLjU2MzJDMTkuODE2NiAyMy41NjMyIDIyLjA5OTkgMjEuMjYxNiAyMi4wOTk5IDE4LjQyMjRWMTguNDIyNFoiIHN0cm9rZT0id2hpdGUiIHN0cm9rZS13aWR0aD0iMi41NSIgc3Ryb2tlLWxpbmVjYXA9InNxdWFyZSIvPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTIzLjc5OTkgNS45OTg4QzIzLjc5OTkgNi4yMzUzOSAyMy45OTAyIDYuNDI3MiAyNC4yMjQ5IDYuNDI3MkgyNS45MjVDMjkuNDQ1OCA2LjQyNzIgMzIuMyA5LjMwNDIxIDMyLjMgMTIuODUzMlYyMy45OTE2QzMyLjMgMjcuNTQwNiAyOS40NDU4IDMwLjQxNzYgMjUuOTI1IDMwLjQxNzZIOC4wNzQ5NEM0LjU1NDE0IDMwLjQxNzYgMS42OTk5NSAyNy41NDA2IDEuNjk5OTUgMjMuOTkxNlYxMi44NTMyQzEuNjk5OTUgOS4zMDQyMSA0LjU1NDE0IDYuNDI3MiA4LjA3NDk0IDYuNDI3Mkg5Ljc3NDk1QzEwLjAwOTcgNi40MjcyIDEwLjIgNi4yMzUzOSAxMC4yIDUuOTk4OEMxMC4yIDUuNzA5NDkgMTAuMjQwNiA1LjQyOTc1IDEwLjMxNjUgNS4xNjUwNkMxMC42NzQ4IDMuOTE0NTEgMTEuODE4OSAzIDEzLjE3NSAzSDIwLjgyNUMyMi40NjggMyAyMy43OTk5IDQuMzQyNjEgMjMuNzk5OSA1Ljk5ODhWNS45OTg4WiIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIyLjU1IiBzdHJva2UtbGluZWNhcD0ic3F1YXJlIi8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNNy42NDk5IDEwLjI4MjhDOC44MjM1MSAxMC4yODI4IDkuNzc0OSAxMS4yNDE4IDkuNzc0OSAxMi40MjQ4QzkuNzc0OSAxMy42MDc4IDguODIzNTEgMTQuNTY2OCA3LjY0OTkgMTQuNTY2OEM2LjQ3NjMgMTQuNTY2OCA1LjUyNDkgMTMuNjA3OCA1LjUyNDkgMTIuNDI0OEM1LjUyNDkgMTEuMjQxOCA2LjQ3NjMgMTAuMjgyOCA3LjY0OTkgMTAuMjgyOFoiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo="
+              alt=""
+            />
+          </div>
+        </div>
+        <nut-cell
+          title="登录手机号"
+          is-link
+          :desc="encodePhone(userInfo.mobile || '')"
+          @click="toBinding"
+        />
+      </div>
+
+      <div class="user-info-tit">企业/团队</div>
+      <div class="user-info-team">
+        <div v-for="(item, key) in userInfo.tenantInfoList" :key="key" class="user-info-team-item">
+          <div class="user-info-team-item-avatar">
+            <img
+              v-if="item.tenantLogo"
+              class="user-info-team-item-avatar-img"
+              mode="aspectFit"
+              :src="item.tenantLogo"
+              alt=""
+            />
+            <img
+              v-else
+              class="user-info-team-item-avatar-img empty"
+              mode="aspectFit"
+              src="https://cdn.ddjf.com/static/images/customer-center/tenant-logo.png"
+              alt=""
+            />
+          </div>
+          <div class="user-info-team-item-bd">
+            <div class="user-info-team-item-title">{{ item.tenantName }}</div>
+            <div class="user-info-team-item-app" v-if="item.appRoleInfo">
+              <div
+                class="user-info-team-item-app-tag"
+                v-for="(aitem, akey) in item.appRoleInfo || []"
+                :key="akey"
+              >
+                {{ aitem.appAbbr }}
+              </div>
+              <div class="user-info-team-item-role-btn" @click="toShowRole(item)">
+                角色详情
+                <img
+                  :class="{ showRole: item.showRole }"
+                  class="user-info-team-item-role-btn-icon"
+                  src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE4IDlMMTIgMTVMNiA5IiBzdHJva2U9IiMwMTdGRkYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo="
+                  alt=""
+                />
+              </div>
+            </div>
+            <div class="user-info-team-item-role" v-if="item.showRole">
+              <div
+                class="user-info-team-item-role-item"
+                v-for="(aitem, akey) in item.appRoleInfo || []"
+                :key="akey"
+              >
+                <div class="user-info-team-item-role-item-name">{{ aitem.appAbbr }}</div>
+                <div class="user-info-team-item-role-item-info">
+                  {{ aitem.roleName }}
+                </div>
+              </div>
+            </div>
+            <div class="user-info-team-item-user">
+              {{ item.fullName }}
+              <img
+                @click="toUserNameChange(item)"
+                class="user-info-team-item-user-icon"
+                src="https://cdn.ddjf.com/static/images/appkit/edit.png"
+                alt=""
+              />
+            </div>
+            <div class="user-info-team-item-dept">
+              <div
+                v-for="(ditem, dkey) in item.deptNames"
+                :key="dkey"
+                class="user-info-team-item-dept-item"
+              >
+                {{ ditem }}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="user-info-ft">
+        <nut-button class="user-info-ft-btn" @click="toLogout" plain type="primary"
+          >退出登录</nut-button
+        >
+      </div>
+    </div>
+  </scroll-view>
+
+  <!-- 修改用户名弹框 -->
+  <nut-dialog
+    title="输入新的用户名"
+    :border="false"
+    pop-class="change-username-popup"
+    v-model:visible="userState.visible"
+    @cancel="onUserNameCancel"
+  >
+    <nut-input :max-length="20" placeholder="请输入新的用户名" v-model="userState.value" />
+    <template #footer>
+      <nut-button class="change-username-popup-cancel" type="default" @click="onUserNameCancel">
+        取消
+      </nut-button>
+      <nut-button class="change-username-popup-ok" type="primary" @click="onUserNameOk">
+        确定
+      </nut-button>
+    </template>
+  </nut-dialog>
+
+  <!-- 修改头像弹框 -->
+  <nut-popup
+    pop-class="upload-avatar-popup"
+    style="background: transparent"
+    v-model:visible="avatarVisible"
+    :overlay-style="{ background: 'rgba(0, 0, 0, 0.9)' }"
+  >
+    <div class="upload-avatar-popup-box">
+      <img
+        class="upload-avatar-popup-avatar"
+        mode="aspectFit"
+        v-if="userInfo.avatar"
+        :src="userInfo.avatar"
+        alt=""
+      />
+      <img
+        class="upload-avatar-popup-avatar"
+        mode="aspectFit"
+        v-else
+        src="https://cdn.ddjf.com/static/images/wx-yunservice/account-head.png"
+        alt=""
+      />
+      <div class="upload-avatar-popup-btn" @click="toUpload">更换头像</div>
+    </div>
+  </nut-popup>
+</template>
+
+<script lang="ts" setup>
+import Taro, { useDidShow } from '@tarojs/taro'
+import { ref, onMounted, reactive, onUnmounted } from 'vue'
+import { useAppKitOptions } from '../../Appkit'
+import { useEncode } from '../../shared/composables/useEncode'
+import DdSkeleton from '../../components/dd-skeleton/index.vue'
+import { useHttp } from '../api'
+
+const props = withDefaults(
+  defineProps<{
+    miniType?: string
+    app?: string
+    userId: string
+  }>(),
+  {
+    miniType: '05',
+    app: '',
+    userId: '',
+  }
+)
+
+const { encodePhone } = useEncode()
+
+useDidShow(() => {
+  getUserInfoByUserId()
+})
+onMounted(() => {
+  Taro.eventCenter.on('USER-HEAD-CROP-OK', updateImage)
+})
+onUnmounted(() => {
+  Taro.eventCenter.off('USER-HEAD-CROP-OK')
+})
+
+const firstLoading = ref(true)
+const userInfo = ref<any>({})
+// 根据用户id，查询用户所在租户列表
+function getUserInfoByUserId() {
+  const $http = useHttp()
+
+  $http
+    .get(`/cas/sysAccount/getAccountInfo/${props.userId}`)
+    .then((result: any) => {
+      userInfo.value = result
+      firstLoading.value = false
+    })
+    .catch(() => {
+      firstLoading.value = false
+    })
+}
+
+// 修改头像弹框
+const avatarVisible = ref(false)
+
+// 去上传头像
+async function toUpload() {
+  if (!userInfo.value.avatar) {
+    const profile = await Taro.getUserProfile({
+      desc: '头像用于改变默认头像',
+    })
+
+    const res = await Taro.downloadFile({
+      url: profile.userInfo.avatarUrl,
+    })
+
+    updateImage(res.tempFilePath)
+  } else {
+    let res = await Taro.chooseImage({
+      count: 1,
+    })
+    if (res.tempFilePaths) {
+      const filePath = res.tempFilePaths[0]
+
+      emits('crop', filePath)
+    }
+  }
+}
+
+// 上传图片
+async function updateImage(filePath: string) {
+  Taro.showLoading({
+    title: '上传中...',
+  })
+  const appkitOptions = useAppKitOptions()
+  const $http = useHttp()
+
+  let Res: any = await Taro.uploadFile({
+    url: `${appkitOptions.baseUrl()}/cas/file/uploadImg`,
+    filePath: filePath,
+    name: 'file',
+    formData: {
+      objectNo: `${userInfo.value.mobile}${Date.now()}`,
+      objectTypeCode: `MINI_HEADIMAGE${props.miniType}`,
+    },
+    header: {
+      token: appkitOptions.tempToken() || appkitOptions.token(),
+    },
+  })
+  avatarVisible.value = false
+
+  const res = JSON.parse(Res.data)
+  if (res.success) {
+    $http
+      .post('/cas/sysUser/update', {
+        appCode: props.app,
+        avatar: res.result,
+        userId: props.userId,
+      })
+      .then(() => {
+        Taro.hideLoading()
+        Taro.showToast({ title: '头像上传成功', icon: 'none' })
+        getUserInfoByUserId()
+        emits('avatar-success', res.result)
+      })
+      .catch(() => {
+        Taro.hideLoading()
+      })
+  } else {
+    Taro.hideLoading()
+  }
+}
+
+// 查看角色详情
+function toShowRole(item: any) {
+  item.showRole = !item.showRole
+}
+
+// 更换用户名
+const userState = reactive({
+  visible: false,
+  value: '',
+  oldName: '',
+  tenantId: '',
+})
+function toUserNameChange(item: any) {
+  userState.visible = true
+  userState.oldName = item.fullName
+  userState.tenantId = item.tenantId
+}
+function onUserNameCancel() {
+  userState.visible = false
+  userState.value = ''
+  userState.oldName = ''
+  userState.tenantId = ''
+}
+function onUserNameOk() {
+  if (!userState.value) {
+    return Taro.showToast({
+      title: '请输入用户名',
+      icon: 'none',
+    })
+  }
+  if (userState.value === userState.oldName) {
+    return Taro.showToast({
+      title: '用户名不能与原用户名相同',
+      icon: 'none',
+    })
+  }
+
+  const $http = useHttp()
+
+  $http
+    .post('/cas/sysUser/updateUserInfoByTenantId', {
+      fullName: userState.value,
+      tenantId: userState.tenantId,
+      userId: props.userId,
+    })
+    .then(() => {
+      Taro.showToast({ title: '用户名修改成功', icon: 'none' })
+      getUserInfoByUserId()
+      onUserNameCancel()
+      emits('username-success')
+    })
+}
+
+// 退出登录
+function toLogout() {
+  Taro.showModal({
+    title: '提示',
+    content: '确定要退出登录吗？',
+    confirmText: '确定',
+    success: async (e: any) => {
+      if (e.confirm) {
+        emits('logout')
+      }
+    },
+  })
+}
+
+// 去绑定手机号
+function toBinding() {
+  emits('binding', userInfo.value.mobile || '')
+}
+
+// 父组件事件
+const emits = defineEmits(['avatar-success', 'logout', 'crop', 'binding', 'username-success'])
+
+// 外部访问
+defineExpose({
+  updateImage,
+})
+</script>
+
+<style lang="scss">
+.user-info {
+  height: 100vh;
+
+  &-wrap {
+    padding: 0 12px;
+    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
+    box-sizing: border-box;
+    min-height: 100%;
+  }
+  &-tit {
+    height: 38px;
+    display: flex;
+    align-items: center;
+    color: #666666;
+    font-size: 12px;
+    padding-left: 10px;
+  }
+  &-head {
+    border-radius: 5px;
+    background: #fff;
+    padding: 30px 11px 0;
+    &-avatar {
+      position: relative;
+      width: 80px;
+      height: 80px;
+      margin: 0 auto 25px;
+    }
+    &-img {
+      width: 100%;
+      height: 100%;
+      overflow: hidden;
+      border-radius: 50%;
+    }
+    &-upload {
+      position: absolute;
+      bottom: -2px;
+      left: 52px;
+      width: 29px;
+      height: 29px;
+      background: #333333;
+      overflow: hidden;
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      &-icon {
+        width: 17px;
+        height: 17px;
+      }
+    }
+  }
+  &-team {
+    &-item {
+      border-radius: 5px;
+      background: #fff;
+      display: flex;
+      padding: 15px;
+      margin-bottom: 10px;
+      &-avatar {
+        width: 38px;
+        height: 38px;
+        margin-right: 15px;
+        border-radius: 5px;
+        background: rgba(1, 127, 255, 0.3);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        &-img {
+          width: 100%;
+          height: 100%;
+        }
+        .empty {
+          width: 20px;
+          height: 40px;
+        }
+      }
+      &-title {
+        font-size: 16px;
+        font-weight: 500;
+        margin-bottom: 5px;
+      }
+      &-app {
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+        &-tag {
+          border: 1px solid rgba(53, 53, 53, 0.2);
+          font-size: 10px;
+          height: 18px;
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          padding: 0 6px;
+          border-radius: 2px;
+          margin: 0 10px 6px 0;
+        }
+      }
+      &-bd {
+        flex: 1;
+      }
+      &-role {
+        padding: 10px;
+        background: rgba(245, 245, 245, 0.5);
+        border-radius: 5px;
+        margin-bottom: 10px;
+        &-btn {
+          color: var(--app-primary-color, #017fff);
+          font-size: 10px;
+          display: inline-flex;
+          align-items: center;
+          margin-bottom: 6px;
+          &-icon {
+            width: 12px;
+            height: 12px;
+            position: relative;
+            top: 1px;
+            &.showRole {
+              transform: rotate(180deg);
+            }
+          }
+        }
+        &-item {
+          display: flex;
+          font-size: 10px;
+          margin-bottom: 10px;
+          &:last-child {
+            margin-bottom: 0;
+          }
+          &-name {
+            opacity: 0.5;
+            white-space: nowrap;
+            margin-right: 10px;
+            min-width: 40px;
+          }
+          &-info {
+            flex: 1;
+            color: #1a1a1a;
+          }
+        }
+      }
+      &-user {
+        margin-bottom: 4px;
+        font-size: 12px;
+        display: flex;
+        align-items: center;
+        &-icon {
+          width: 10px;
+          height: 10px;
+          margin-left: 4px;
+        }
+      }
+      &-dept {
+        display: flex;
+        flex-wrap: wrap;
+        font-size: 10px;
+        color: rgba(26, 26, 26, 0.8);
+        &-item {
+          font-size: 10px;
+          color: rgba(26, 26, 26, 0.5);
+          margin: 4px 10px 4px 0;
+          &:first-child {
+            color: rgba(26, 26, 26, 0.8);
+          }
+        }
+      }
+    }
+  }
+
+  &-ft {
+    &-btn {
+      width: 100%;
+      border-color: transparent !important;
+      color: rgba(27, 63, 107, 0.8) !important;
+    }
+  }
+
+  .nut-cell {
+    padding: 11px 0;
+    margin: 0;
+    box-shadow: none;
+    border-bottom: 1px solid #f0f0f0;
+    font-size: 16px;
+    .nut-cell__value {
+      font-size: 16px;
+      color: #000;
+    }
+    .nut-cell__link {
+      color: #ccc;
+      margin-left: 8px;
+    }
+  }
+}
+.upload-avatar-popup {
+  &-box {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
+  &-avatar {
+    width: 320px;
+    height: 320px;
+    overflow: hidden;
+    border-radius: 50%;
+    margin-bottom: 50px;
+  }
+  &-btn {
+    width: 106px;
+    height: 37px;
+    border-radius: 50px;
+    border: 1px solid #ffffff;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: #ffffff;
+    font-size: 16px;
+  }
+}
+.change-username-popup {
+  .nut-dialog {
+    min-height: auto;
+  }
+  .nut-input {
+    height: 40px;
+    padding: 0;
+    display: flex;
+    align-items: center;
+    font-size: 16px;
+    border: none;
+    .input-text {
+      width: 100%;
+      height: 100%;
+      font-size: 14px;
+    }
+    .nut-input-value,
+    .nut-input-inner,
+    .nut-input-box {
+      height: 100%;
+      overflow: hidden;
+      background: #f5f5f5;
+      border-radius: 6px;
+    }
+    .nut-placeholder {
+      color: #cccccc;
+      line-height: 38px;
+      height: 38px;
+    }
+    .nut-input-box {
+      padding: 0 15px;
+    }
+  }
+  &-cancel.nut-button {
+    border-radius: 15px;
+    font-size: 14px;
+    height: 30px;
+  }
+  &-ok.nut-button {
+    background: var(--app-primary-color, #017fff);
+    height: 30px;
+    font-size: 14px;
+    border-radius: 15px;
+  }
+}
+</style>