@uxda/appkit 4.0.0 → 4.0.3

package/src/user/components/UserInfo.vue

@@ -0,0 +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>

package/src/user/components/UserResourceEmpty.vue

@@ -0,0 +1,75 @@
+<template>
+  <div class="user-resource-empty" :style="style" v-if="show">
+    <img
+      class="user-resource-empty-img"
+      src="https://cdn.ddjf.com/static/images/nutshell/empty-permission.png"
+    />
+    <div class="user-resource-empty-text">
+      应用已于{{ dayjs(appInfo.endTime).format('YYYY年MM月DD日') }}到期，如需继续使用，
+      请联系大道客户总监进行续费
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue'
+import { useSafeArea } from '../../shared/composables'
+import dayjs from 'dayjs'
+
+const props = withDefaults(
+  defineProps<{
+    appInfo: any
+    withTabbar?: boolean
+    withNavbar?: boolean
+    show?: boolean
+  }>(),
+  {
+    appInfo: {},
+    withTabbar: false,
+    withNavbar: false,
+    show: true,
+  }
+)
+
+const safeArea = useSafeArea()
+
+const style = computed(() => {
+  let str = ''
+  if (props.withTabbar) {
+    str += `bottom: ${safeArea.menuRect.bottom + 5}px;`
+  }
+  if (props.withNavbar) {
+    str += `top: ${safeArea.nav + safeArea.status + 5}px;`
+  }
+  return str
+})
+</script>
+
+<style lang="scss">
+.user-resource-empty {
+  position: fixed;
+  z-index: 4;
+  left: 12px;
+  top: 10px;
+  bottom: 10px;
+  align-items: center;
+  width: calc(100% - 24px);
+  background: #ffffff;
+  border-radius: 5px;
+  display: flex;
+  flex-direction: column;
+  &-img {
+    margin-top: 50%;
+    height: 111px;
+    width: 198px;
+  }
+  &-text {
+    margin-top: 10px;
+    color: #353535;
+    opacity: 0.4;
+    font-size: 12px;
+    padding: 0 30px;
+    text-align: center;
+  }
+}
+</style>