@uxda/appkit 4.3.8 → 4.3.11

package/src/user/components/UserInfo.vue

@@ -1,709 +1,709 @@
-<template>
-  <ScrollView :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" v-track-click="'用户信息-头像'" @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 || '')" v-track-click="'用户信息-登录手机号'" @click="toBinding" />
-        <nut-cell v-if="props.isPersonal" title="昵称" is-link v-track-click="'用户信息-昵称'" @click="onNickNameChange"
-          :desc="userInfo?.nickName || '--'" />
-        <nut-cell v-else title="昵称" :desc="userInfo?.nickName || '--'" />
-        <nut-cell title="认证信息" is-link v-track-click="'用户信息-认证信息'" @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 v-if="hasQiyezuhu" class="user-info-tit">企业/团队</div>
-      <div class="user-info-team">
-        <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" 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" v-track-click="'用户信息-角色详情'" @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 v-track-click="'用户信息-用户名'" @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 v-if="!isApp()" class="user-info-ft-btn" style="width: 100%; margin-top: 12px" v-track-click="'用户信息-退出登录'" @click="toLogout" plain
-          type="primary">退出登录</nut-button>
-      </div>
-    </div>
-  </ScrollView>
-
-  <!-- 修改用户名弹框 -->
-  <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" v-track-click="'用户信息-修改用户名-取消'" @click="onUserNameCancel">
-        取消
-      </nut-button>
-      <nut-button class="change-username-popup-ok" type="primary" v-track-click="'用户信息-修改用户名-确定'" @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" v-track-click="'用户信息-修改昵称-取消'" @click="onNickNameCancel">
-        取消
-      </nut-button>
-      <nut-button class="change-username-popup-ok" type="primary" v-track-click="'用户信息-修改昵称-确定'" @click="onNickNameOk">
-        确定
-      </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"  v-track-click="'用户信息-更换头像'" @click="toUpload">更换头像</div>
-    </div>
-  </nut-popup>
-</template>
-
-<script lang="ts" setup>
-import Taro, { useDidShow, showToast, showLoading, hideLoading, uploadFile, showModal, chooseMedia } 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 { ScrollView } from '@tarojs/components'
-import { isApp } from '../../utils/utils'
-
-const props = withDefaults(
-  defineProps<{
-    miniType?: string;
-    app?: string;
-    userId: string;
-    hasQiyezuhu: number;
-    isPersonal: number;
-  }>(),
-  {
-    miniType: "05",
-    app: "",
-    userId: "",
-    hasQiyezuhu: 0,
-    isPersonal: 0,
-  }
-);
-
-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 && Taro.getEnv() !== "WEB") {
-    const profile = await Taro.getUserProfile({
-      desc: "头像用于改变默认头像",
-    });
-
-    const res = await Taro.downloadFile({
-      url: profile.userInfo.avatarUrl,
-    });
-
-    updateImage(res.tempFilePath);
-  } else {
-    let res = await chooseMedia({
-      count: 1,
-      sourceType: ['album'], // "camera" | "album"
-    });
-    if (res.tempFiles) {
-      const { tempFilePath } = res.tempFiles[0];
-
-      if (Taro.getEnv() === "WEB") {
-        updateImage(tempFilePath);
-        return
-      }
-
-      emits("crop", tempFilePath);
-    }
-  }
-}
-
-// 上传图片
-async function updateImage(filePath: string) {
-  showLoading({
-    title: "上传中...",
-  });
-  const appkitOptions = useAppKitOptions();
-  const $http = useHttp();
-
-  let Res: any = await 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(() => {
-        hideLoading();
-        showToast({ title: "头像上传成功", icon: "none" });
-        getUserInfoByUserId();
-        emits("avatar-success", res.result);
-      })
-      .catch(() => {
-        hideLoading();
-      });
-  } else {
-    hideLoading();
-  }
-}
-
-// 查看角色详情
-function toShowRole(item: any) {
-  item.showRole = !item.showRole;
-}
-
-const nickNameState = reactive({
-  visible: false,
-  value: "",
-});
-// 更换用户名
-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 onNickNameCancel() {
-  nickNameState.visible = false;
-  nickNameState.value = "";
-}
-function onNickNameChange() {
-  nickNameState.visible = true;
-  nickNameState.value = "";
-}
-function onUserNameOk() {
-  if (!userState.value) {
-    return showToast({
-      title: "请输入用户名",
-      icon: "none",
-    });
-  }
-  if (userState.value === userState.oldName) {
-    return showToast({
-      title: "用户名不能与原用户名相同",
-      icon: "none",
-    });
-  }
-
-  const $http = useHttp();
-
-  $http
-    .post("/cas/sysUser/updateUserInfoByTenantId", {
-      fullName: userState.value,
-      tenantId: userState.tenantId,
-      userId: props.userId,
-    })
-    .then(() => {
-      showToast({ title: "用户名修改成功", icon: "none" });
-      getUserInfoByUserId();
-      onUserNameCancel();
-      emits("username-success");
-    });
-}
-
-function onNickNameOk() {
-  if (!nickNameState.value) {
-    return showToast({
-      title: "请输入昵称",
-      icon: "none",
-    });
-  }
-  // if (userState.value === userState.oldName) {
-  //   return showToast({
-  //     title: "用户名不能与原用户名相同",
-  //     icon: "none",
-  //   });
-  // }
-
-  const $http = useHttp();
-
-  $http
-    .post("/cas/sysAccount/updateAccountInfo", {
-      nickName: nickNameState.value,
-    })
-    .then(() => {
-      showToast({ title: "昵称修改成功", icon: "none" });
-      getUserInfoByUserId();
-      onNickNameCancel();
-      // emits("username-success");
-    });
-}
-// 退出登录
-function toLogout() {
-  showModal({
-    title: "提示",
-    content: "确定要退出登录吗？",
-    confirmText: "确定",
-    success: async (e: any) => {
-      if (e.confirm) {
-        emits("logout");
-      }
-    },
-  });
-}
-
-// 去绑定手机号
-function toBinding() {
-  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",
-  "auth",
-]);
-
-// 外部访问
-defineExpose({
-  updateImage,
-});
-</script>
-
-<style lang="scss">
-.user-info {
-  height: 100vh;
-
-  .nut-cell {
-    border-radius: 0px;
-  }
-
-  &-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>
+  <ScrollView :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" v-track-click="'用户信息-头像'" @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 || '')" v-track-click="'用户信息-登录手机号'" @click="toBinding" />
+        <nut-cell v-if="props.isPersonal" title="昵称" is-link v-track-click="'用户信息-昵称'" @click="onNickNameChange"
+          :desc="userInfo?.nickName || '--'" />
+        <nut-cell v-else title="昵称" :desc="userInfo?.nickName || '--'" />
+        <nut-cell title="认证信息" is-link v-track-click="'用户信息-认证信息'" @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 v-if="hasQiyezuhu" class="user-info-tit">企业/团队</div>
+      <div class="user-info-team">
+        <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" 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" v-track-click="'用户信息-角色详情'" @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 v-track-click="'用户信息-用户名'" @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 v-if="!isApp()" class="user-info-ft-btn" style="width: 100%; margin-top: 12px" v-track-click="'用户信息-退出登录'" @click="toLogout" plain
+          type="primary">退出登录</nut-button>
+      </div>
+    </div>
+  </ScrollView>
+
+  <!-- 修改用户名弹框 -->
+  <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" v-track-click="'用户信息-修改用户名-取消'" @click="onUserNameCancel">
+        取消
+      </nut-button>
+      <nut-button class="change-username-popup-ok" type="primary" v-track-click="'用户信息-修改用户名-确定'" @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" v-track-click="'用户信息-修改昵称-取消'" @click="onNickNameCancel">
+        取消
+      </nut-button>
+      <nut-button class="change-username-popup-ok" type="primary" v-track-click="'用户信息-修改昵称-确定'" @click="onNickNameOk">
+        确定
+      </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"  v-track-click="'用户信息-更换头像'" @click="toUpload">更换头像</div>
+    </div>
+  </nut-popup>
+</template>
+
+<script lang="ts" setup>
+import Taro, { useDidShow, showToast, showLoading, hideLoading, uploadFile, showModal, chooseMedia } 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 { ScrollView } from '@tarojs/components'
+import { isApp } from '../../utils/utils'
+
+const props = withDefaults(
+  defineProps<{
+    miniType?: string;
+    app?: string;
+    userId: string;
+    hasQiyezuhu: number;
+    isPersonal: number;
+  }>(),
+  {
+    miniType: "05",
+    app: "",
+    userId: "",
+    hasQiyezuhu: 0,
+    isPersonal: 0,
+  }
+);
+
+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 && Taro.getEnv() !== "WEB") {
+    const profile = await Taro.getUserProfile({
+      desc: "头像用于改变默认头像",
+    });
+
+    const res = await Taro.downloadFile({
+      url: profile.userInfo.avatarUrl,
+    });
+
+    updateImage(res.tempFilePath);
+  } else {
+    let res = await chooseMedia({
+      count: 1,
+      sourceType: ['album'], // "camera" | "album"
+    });
+    if (res.tempFiles) {
+      const { tempFilePath } = res.tempFiles[0];
+
+      if (Taro.getEnv() === "WEB") {
+        updateImage(tempFilePath);
+        return
+      }
+
+      emits("crop", tempFilePath);
+    }
+  }
+}
+
+// 上传图片
+async function updateImage(filePath: string) {
+  showLoading({
+    title: "上传中...",
+  });
+  const appkitOptions = useAppKitOptions();
+  const $http = useHttp();
+
+  let Res: any = await 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(() => {
+        hideLoading();
+        showToast({ title: "头像上传成功", icon: "none" });
+        getUserInfoByUserId();
+        emits("avatar-success", res.result);
+      })
+      .catch(() => {
+        hideLoading();
+      });
+  } else {
+    hideLoading();
+  }
+}
+
+// 查看角色详情
+function toShowRole(item: any) {
+  item.showRole = !item.showRole;
+}
+
+const nickNameState = reactive({
+  visible: false,
+  value: "",
+});
+// 更换用户名
+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 onNickNameCancel() {
+  nickNameState.visible = false;
+  nickNameState.value = "";
+}
+function onNickNameChange() {
+  nickNameState.visible = true;
+  nickNameState.value = "";
+}
+function onUserNameOk() {
+  if (!userState.value) {
+    return showToast({
+      title: "请输入用户名",
+      icon: "none",
+    });
+  }
+  if (userState.value === userState.oldName) {
+    return showToast({
+      title: "用户名不能与原用户名相同",
+      icon: "none",
+    });
+  }
+
+  const $http = useHttp();
+
+  $http
+    .post("/cas/sysUser/updateUserInfoByTenantId", {
+      fullName: userState.value,
+      tenantId: userState.tenantId,
+      userId: props.userId,
+    })
+    .then(() => {
+      showToast({ title: "用户名修改成功", icon: "none" });
+      getUserInfoByUserId();
+      onUserNameCancel();
+      emits("username-success");
+    });
+}
+
+function onNickNameOk() {
+  if (!nickNameState.value) {
+    return showToast({
+      title: "请输入昵称",
+      icon: "none",
+    });
+  }
+  // if (userState.value === userState.oldName) {
+  //   return showToast({
+  //     title: "用户名不能与原用户名相同",
+  //     icon: "none",
+  //   });
+  // }
+
+  const $http = useHttp();
+
+  $http
+    .post("/cas/sysAccount/updateAccountInfo", {
+      nickName: nickNameState.value,
+    })
+    .then(() => {
+      showToast({ title: "昵称修改成功", icon: "none" });
+      getUserInfoByUserId();
+      onNickNameCancel();
+      // emits("username-success");
+    });
+}
+// 退出登录
+function toLogout() {
+  showModal({
+    title: "提示",
+    content: "确定要退出登录吗？",
+    confirmText: "确定",
+    success: async (e: any) => {
+      if (e.confirm) {
+        emits("logout");
+      }
+    },
+  });
+}
+
+// 去绑定手机号
+function toBinding() {
+  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",
+  "auth",
+]);
+
+// 外部访问
+defineExpose({
+  updateImage,
+});
+</script>
+
+<style lang="scss">
+.user-info {
+  height: 100vh;
+
+  .nut-cell {
+    border-radius: 0px;
+  }
+
+  &-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>