@uxda/appkit 1.2.80 → 3.2.20

package/src/user/components/UserInfo.vue

@@ -1,5 +1,8 @@
 <template>
-  <scroll-view :scroll-y="!userState.visible && !avatarVisible" class="user-info">
+  <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>
@@ -34,11 +37,36 @@
           :desc="encodePhone(userInfo.mobile || '')"
           @click="toBinding"
         />
+        <nut-cell
+          v-if="props.isPersonal"
+          title="昵称"
+          is-link
+          @click="onNickNameChange"
+          :desc="userInfo?.nickName || '--'"
+        />
+        <nut-cell v-else title="昵称" :desc="userInfo?.nickName || '--'" />
+        <nut-cell title="认证信息" is-link @click="toAuth">
+          <template #desc>
+            <span v-if="userInfo?.verifyResult === 1">已认证</span>
+            <span v-if="userInfo?.verifyResult === 0" style="color: #e8523f"
+              >已失效，重新认证</span
+            >
+            <span
+              v-if="userInfo?.verifyResult != 0 && userInfo?.verifyResult != 1"
+              style="color: #017fff"
+              >未认证，去认证</span
+            >
+          </template>
+        </nut-cell>
       </div>
-
-      <div class="user-info-tit">企业/团队</div>
+      <div v-if="hasQiyezuhu" 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
+          v-if="hasQiyezuhu"
+          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"
@@ -65,7 +93,10 @@
               >
                 {{ aitem.appAbbr }}
               </div>
-              <div class="user-info-team-item-role-btn" @click="toShowRole(item)">
+              <div
+                class="user-info-team-item-role-btn"
+                @click="toShowRole(item)"
+              >
                 角色详情
                 <img
                   :class="{ showRole: item.showRole }"
@@ -81,7 +112,9 @@
                 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-name">
+                  {{ aitem.appAbbr }}
+                </div>
                 <div class="user-info-team-item-role-item-info">
                   {{ aitem.roleName }}
                 </div>
@@ -110,7 +143,12 @@
       </div>
 
       <div class="user-info-ft">
-        <nut-button class="user-info-ft-btn" @click="toLogout" plain type="primary"
+        <nut-button
+          class="user-info-ft-btn"
+          style="width: 100%; margin-top: 12px"
+          @click="toLogout"
+          plain
+          type="primary"
           >退出登录</nut-button
         >
       </div>
@@ -125,12 +163,64 @@
     v-model:visible="userState.visible"
     @cancel="onUserNameCancel"
   >
-    <nut-input label="" :max-length="20" placeholder="请输入新的用户名" v-model="userState.value" />
+    <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-dialog
+    title="输入新的昵称"
+    :border="false"
+    pop-class="change-username-popup"
+    v-model:visible="nickNameState.visible"
+    @cancel="onNickNameCancel"
+  >
+    <input
+      v-model="nickNameState.value"
+      style="
+        background: #f5f5f5;
+        border-radius: 6px;
+        line-height: 40px;
+        padding: 10px 25px;
+        font-size: 16px;
+      "
+      :max-length="20"
+      placeholder="请输入新的昵称"
+      type="nickname"
+    />
+
     <template #footer>
-      <nut-button class="change-username-popup-cancel" type="default" @click="onUserNameCancel">
+      <nut-button
+        class="change-username-popup-cancel"
+        type="default"
+        @click="onNickNameCancel"
+      >
         取消
       </nut-button>
-      <nut-button class="change-username-popup-ok" type="primary" @click="onUserNameOk">
+      <nut-button
+        class="change-username-popup-ok"
+        type="primary"
+        @click="onNickNameOk"
+      >
         确定
       </nut-button>
     </template>
@@ -164,78 +254,82 @@
 </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'
+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?: string;
+    app?: string;
+    userId: string;
+    hasQiyezuhu: number;
+    isPersonal: number;
   }>(),
   {
-    miniType: '05',
-    app: '',
-    userId: '',
+    miniType: "05",
+    app: "",
+    userId: "",
+    hasQiyezuhu: 0,
+    isPersonal: 0,
   }
-)
+);
 
-const { encodePhone } = useEncode()
+const { encodePhone } = useEncode();
 
 useDidShow(() => {
-  getUserInfoByUserId()
-})
+  getUserInfoByUserId();
+});
 onMounted(() => {
-  Taro.eventCenter.on('USER-HEAD-CROP-OK', updateImage)
-})
+  Taro.eventCenter.on("USER-HEAD-CROP-OK", updateImage);
+});
 onUnmounted(() => {
-  Taro.eventCenter.off('USER-HEAD-CROP-OK')
-})
+  Taro.eventCenter.off("USER-HEAD-CROP-OK");
+});
 
-const firstLoading = ref(true)
-const userInfo = ref<any>({})
+const firstLoading = ref(true);
+const userInfo = ref<any>({});
 // 根据用户id，查询用户所在租户列表
 function getUserInfoByUserId() {
-  const $http = useHttp()
+  const $http = useHttp();
 
   $http
     .get(`/cas/sysAccount/getAccountInfo/${props.userId}`)
     .then((result: any) => {
-      userInfo.value = result
-      firstLoading.value = false
+      userInfo.value = result;
+      firstLoading.value = false;
     })
     .catch(() => {
-      firstLoading.value = false
-    })
+      firstLoading.value = false;
+    });
 }
 
 // 修改头像弹框
-const avatarVisible = ref(false)
+const avatarVisible = ref(false);
 
 // 去上传头像
 async function toUpload() {
   if (!userInfo.value.avatar) {
     const profile = await Taro.getUserProfile({
-      desc: '头像用于改变默认头像',
-    })
+      desc: "头像用于改变默认头像",
+    });
 
     const res = await Taro.downloadFile({
       url: profile.userInfo.avatarUrl,
-    })
+    });
 
-    updateImage(res.tempFilePath)
+    updateImage(res.tempFilePath);
   } else {
     let res = await Taro.chooseImage({
       count: 1,
-    })
+    });
     if (res.tempFilePaths) {
-      const filePath = res.tempFilePaths[0]
+      const filePath = res.tempFilePaths[0];
 
-      emits('crop', filePath)
+      emits("crop", filePath);
     }
   }
 }
@@ -243,15 +337,15 @@ async function toUpload() {
 // 上传图片
 async function updateImage(filePath: string) {
   Taro.showLoading({
-    title: '上传中...',
-  })
-  const appkitOptions = useAppKitOptions()
-  const $http = useHttp()
+    title: "上传中...",
+  });
+  const appkitOptions = useAppKitOptions();
+  const $http = useHttp();
 
   let Res: any = await Taro.uploadFile({
     url: `${appkitOptions.baseUrl()}/cas/file/uploadImg`,
     filePath: filePath,
-    name: 'file',
+    name: "file",
     formData: {
       objectNo: `${userInfo.value.mobile}${Date.now()}`,
       objectTypeCode: `MINI_HEADIMAGE${props.miniType}`,
@@ -259,115 +353,175 @@ async function updateImage(filePath: string) {
     header: {
       token: appkitOptions.tempToken() || appkitOptions.token(),
     },
-  })
-  avatarVisible.value = false
+  });
+  avatarVisible.value = false;
 
-  const res = JSON.parse(Res.data)
+  const res = JSON.parse(Res.data);
   if (res.success) {
     $http
-      .post('/cas/sysUser/update', {
+      .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)
+        Taro.hideLoading();
+        Taro.showToast({ title: "头像上传成功", icon: "none" });
+        getUserInfoByUserId();
+        emits("avatar-success", res.result);
       })
       .catch(() => {
-        Taro.hideLoading()
-      })
+        Taro.hideLoading();
+      });
   } else {
-    Taro.hideLoading()
+    Taro.hideLoading();
   }
 }
 
 // 查看角色详情
 function toShowRole(item: any) {
-  item.showRole = !item.showRole
+  item.showRole = !item.showRole;
 }
 
+const nickNameState = reactive({
+  visible: false,
+  value: "",
+});
 // 更换用户名
 const userState = reactive({
   visible: false,
-  value: '',
-  oldName: '',
-  tenantId: '',
-})
+  value: "",
+  oldName: "",
+  tenantId: "",
+});
 function toUserNameChange(item: any) {
-  userState.visible = true
-  userState.oldName = item.fullName
-  userState.tenantId = item.tenantId
+  userState.visible = true;
+  userState.oldName = item.fullName;
+  userState.tenantId = item.tenantId;
 }
 function onUserNameCancel() {
-  userState.visible = false
-  userState.value = ''
-  userState.oldName = ''
-  userState.tenantId = ''
+  userState.visible = false;
+  userState.value = "";
+  userState.oldName = "";
+  userState.tenantId = "";
+}
+
+function onNickNameCancel() {
+  nickNameState.visible = false;
+  nickNameState.value = "";
+}
+function onNickNameChange() {
+  nickNameState.visible = true;
+  nickNameState.value = "";
 }
 function onUserNameOk() {
   if (!userState.value) {
     return Taro.showToast({
-      title: '请输入用户名',
-      icon: 'none',
-    })
+      title: "请输入用户名",
+      icon: "none",
+    });
   }
   if (userState.value === userState.oldName) {
     return Taro.showToast({
-      title: '用户名不能与原用户名相同',
-      icon: 'none',
-    })
+      title: "用户名不能与原用户名相同",
+      icon: "none",
+    });
   }
 
-  const $http = useHttp()
+  const $http = useHttp();
 
   $http
-    .post('/cas/sysUser/updateUserInfoByTenantId', {
+    .post("/cas/sysUser/updateUserInfoByTenantId", {
       fullName: userState.value,
       tenantId: userState.tenantId,
       userId: props.userId,
     })
     .then(() => {
-      Taro.showToast({ title: '用户名修改成功', icon: 'none' })
-      getUserInfoByUserId()
-      onUserNameCancel()
-      emits('username-success')
-    })
+      Taro.showToast({ title: "用户名修改成功", icon: "none" });
+      getUserInfoByUserId();
+      onUserNameCancel();
+      emits("username-success");
+    });
 }
 
+function onNickNameOk() {
+  if (!nickNameState.value) {
+    return Taro.showToast({
+      title: "请输入昵称",
+      icon: "none",
+    });
+  }
+  // if (userState.value === userState.oldName) {
+  //   return Taro.showToast({
+  //     title: "用户名不能与原用户名相同",
+  //     icon: "none",
+  //   });
+  // }
+
+  const $http = useHttp();
+
+  $http
+    .post("/cas/sysAccount/updateAccountInfo", {
+      nickName: nickNameState.value,
+    })
+    .then(() => {
+      Taro.showToast({ title: "昵称修改成功", icon: "none" });
+      getUserInfoByUserId();
+      onNickNameCancel();
+      // emits("username-success");
+    });
+}
 // 退出登录
 function toLogout() {
   Taro.showModal({
-    title: '提示',
-    content: '确定要退出登录吗？',
-    confirmText: '确定',
+    title: "提示",
+    content: "确定要退出登录吗？",
+    confirmText: "确定",
     success: async (e: any) => {
       if (e.confirm) {
-        emits('logout')
+        emits("logout");
       }
     },
-  })
+  });
 }
 
 // 去绑定手机号
 function toBinding() {
-  emits('binding', userInfo.value.mobile || '')
+  emits("binding", userInfo.value.mobile || "");
+}
+
+// 去认证页
+function toAuth() {
+  emits(
+    "auth",
+    props.userId,
+    userInfo.value?.verifyResult,
+    userInfo.value?.mobile
+  );
 }
 
 // 父组件事件
-const emits = defineEmits(['avatar-success', 'logout', 'crop', 'binding', 'username-success'])
+const emits = defineEmits([
+  "avatar-success",
+  "logout",
+  "crop",
+  "binding",
+  "username-success",
+  "auth",
+]);
 
 // 外部访问
 defineExpose({
   updateImage,
-})
+});
 </script>
 
 <style lang="scss">
 .user-info {
   height: 100vh;
+  .nut-cell {
+    border-radius: 0px;
+  }
 
   &-wrap {
     padding: 0 12px;
@@ -375,6 +529,7 @@ defineExpose({
     box-sizing: border-box;
     min-height: 100%;
   }
+
   &-tit {
     height: 38px;
     display: flex;
@@ -383,22 +538,26 @@ defineExpose({
     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;
@@ -411,12 +570,14 @@ defineExpose({
       display: flex;
       align-items: center;
       justify-content: center;
+
       &-icon {
         width: 17px;
         height: 17px;
       }
     }
   }
+
   &-team {
     &-item {
       border-radius: 5px;
@@ -424,6 +585,7 @@ defineExpose({
       display: flex;
       padding: 15px;
       margin-bottom: 10px;
+
       &-avatar {
         width: 38px;
         height: 38px;
@@ -433,24 +595,29 @@ defineExpose({
         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;
@@ -463,69 +630,83 @@ defineExpose({
           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);
           }
@@ -548,16 +729,19 @@ defineExpose({
     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;
@@ -565,6 +749,7 @@ defineExpose({
     align-items: center;
     justify-content: center;
   }
+
   &-avatar {
     width: 320px;
     height: 320px;
@@ -572,6 +757,7 @@ defineExpose({
     border-radius: 50%;
     margin-bottom: 50px;
   }
+
   &-btn {
     width: 106px;
     height: 37px;
@@ -584,10 +770,12 @@ defineExpose({
     font-size: 16px;
   }
 }
+
 .change-username-popup {
   .nut-dialog {
     min-height: auto;
   }
+
   .nut-input {
     height: 40px;
     padding: 0;
@@ -595,11 +783,13 @@ defineExpose({
     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 {
@@ -608,20 +798,24 @@ defineExpose({
       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;