123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420 |
- <template>
- <div :class="['TUI-profile', !isPC && 'TUI-profile-h5']">
- <div
- v-if="displayType !== 'setting'"
- :class="['TUI-profile-basic', !isPC && 'TUI-profile-h5-basic']"
- >
- <img
- :class="['TUI-profile-basic-avatar', !isPC && 'TUI-profile-h5-basic-avatar']"
- :src="
- userProfile.avatar ||
- 'https://bucket.sxdirectpurchase.com/wx/static/img/ImAvatar.png'
- "
- />
- <div :class="['TUI-profile-basic-info', !isPC && 'TUI-profile-h5-basic-info']">
- <div
- :class="[
- 'TUI-profile-basic-info-nick',
- !isPC && 'TUI-profile-h5-basic-info-nick',
- ]"
- >
- {{ userProfile.nick || "-" }}
- </div>
- <div
- :class="['TUI-profile-basic-info-id', !isPC && 'TUI-profile-h5-basic-info-id']"
- >
- <label
- :class="[
- 'TUI-profile-basic-info-id-label',
- !isPC && 'TUI-profile-h5-basic-info-id-label',
- ]"
- >{{ "用户ID" }}:</label
- >
- <div
- :class="[
- 'TUI-profile-basic-info-id-value',
- !isPC && 'TUI-profile-h5-basic-info-id-value',
- ]"
- >
- {{ userProfile.userID }}
- </div>
- </div>
- </div>
- </div>
- <div
- v-if="displayType !== 'profile' && (!isPC || showSetting)"
- ref="settingDomRef"
- :class="['TUI-profile-setting', !isPC && 'TUI-profile-h5-setting']"
- >
- <div
- v-for="(item, key) in settingList"
- :key="key"
- :class="[
- 'TUI-profile-setting-item',
- !isPC && 'TUI-profile-h5-setting-item',
- item.value === 'exit' && 'TUI-profile-h5-setting-item-exit',
- ]"
- >
- <div
- :class="[
- 'TUI-profile-setting-item-label',
- !isPC && 'TUI-profile-h5-setting-item-label',
- ]"
- @click="handleSettingListItemOnClick(item)"
- >
- <div :class="['label-left']">
- <div :class="['label-title']">
- {{ item.label }}
- </div>
- <div
- v-if="item.children && !isPC && item.childrenShowType === 'switch'"
- :class="['label-desc']"
- >
- {{ item.value }}
- </div>
- </div>
- <div :class="['label-right']">
- <div
- v-if="
- !isPC &&
- item.children &&
- item.selectedChild &&
- item.childrenShowType === 'bottomPopup'
- "
- :class="[
- 'TUI-profile-setting-item-label-value',
- !isPC && 'TUI-profile-h5-setting-item-label-value',
- ]"
- >
- {{ generateLabel(item) }}
- </div>
- <Icon
- v-if="item.children"
- :file="rightArrowIcon"
- width="14px"
- height="14px"
- style="width: 14px; height: 14px; display: flex"
- />
- </div>
- </div>
- <!-- 移动端 children显示,分多个类型 -->
- <BottomPopup
- v-if="item.children && !isPC && item.childrenShowType === 'bottomPopup'"
- :show="item.showChildren"
- @onClose="bottomPopupOnClose(item)"
- >
- <div
- v-for="child in item.children"
- :class="[
- 'TUI-profile-setting-item-bottom-popup',
- !isPC && 'TUI-profile-h5-setting-item-bottom-popup',
- ]"
- @click="handleSettingListItemOnClick(child)"
- >
- {{ child.label }}
- </div>
- </BottomPopup>
- </div>
- </div>
- </div>
- </template>
- <script lang="ts" setup>
- import TUIChatEngine, {
- TUIUserService,
- TUIStore,
- StoreName,
- TUIChatService,
- } from "@tencentcloud/chat-uikit-engine";
- import { TUILogin } from "@tencentcloud/tui-core";
- import { TUIGlobal } from "@tencentcloud/universal-api";
- import { ref, defineProps, onMounted } from "../../TUIKit/adapter-vue";
- import { isPC } from "../../TUIKit/utils/env";
- import { Toast, TOAST_TYPE } from "../../TUIKit/components/common/Toast/index";
- import BottomPopup from "../../TUIKit/components/common/BottomPopup/index.vue";
- import Icon from "../../TUIKit/components/common/Icon.vue";
- import rightArrowIcon from "../../TUIKit/assets/icon/right-icon.svg";
- import { IUserProfile } from "../../TUIKit/interface";
- import { onHide } from "@dcloudio/uni-app";
- import { translator } from "../../TUIKit/components/TUIChat/utils/translation";
- import { removeTokenStorage } from "../../utils/token";
- const props = defineProps({
- displayType: {
- type: String,
- default: "all", // "profile"/"setting"/"all"
- },
- showSetting: {
- type: Boolean,
- default: false,
- },
- });
- const settingDomRef = ref();
- const userProfile = ref<IUserProfile>({});
- const settingList = ref<{
- [propsName: string]: {
- value: string;
- label: string;
- onClick?: any;
- // children相关
- selectedChild?: string;
- childrenShowType?: string; // "bottomPopup"/"switch"
- showChildren?: boolean;
- children?: {
- [propsName: string]: {
- value: string;
- label: string;
- onClick?: any;
- };
- };
- };
- }>({
- editProfile: {
- value: "editProfile",
- label: "编辑资料(暂未开放)",
- onClick: (item: any) => {
- console.warn("编辑资料功能努力开发中,敬请期待");
- },
- },
- allowType: {
- value: "allowType",
- label: "加我为好友时",
- selectedChild: "",
- childrenShowType: "bottomPopup",
- showChildren: false,
- onClick: (item: any) => {
- if (!isPC) {
- item.showChildren = true;
- }
- },
- children: {
- [TUIChatEngine.TYPES.ALLOW_TYPE_ALLOW_ANY]: {
- value: TUIChatEngine.TYPES.ALLOW_TYPE_ALLOW_ANY,
- label: "同意任何用户加好友",
- onClick: (item: any) => {
- updateMyProfile({ allowType: item.value });
- },
- },
- [TUIChatEngine.TYPES.ALLOW_TYPE_NEED_CONFIRM]: {
- value: TUIChatEngine.TYPES.ALLOW_TYPE_NEED_CONFIRM,
- label: "需要验证",
- onClick: (item: any) => {
- updateMyProfile({ allowType: item.value });
- },
- },
- [TUIChatEngine.TYPES.ALLOW_TYPE_DENY_ANY]: {
- value: TUIChatEngine.TYPES.ALLOW_TYPE_DENY_ANY,
- label: "拒绝任何人加好友",
- onClick: (item: any) => {
- updateMyProfile({ allowType: item.value });
- },
- },
- },
- },
- displayMessageReadReceipt: {
- value: "displayMessageReadReceipt",
- label: "消息阅读状态",
- selectedChild: "userLevelReadReceiptOpen",
- childrenShowType: "bottomPopup",
- showChildren: false,
- onClick(item: any) {
- if (!isPC) {
- item.showChildren = true;
- }
- },
- children: {
- userLevelReadReceiptOpen: {
- value: "userLevelReadReceiptOpen",
- label: "开启",
- onClick() {
- switchEnabelUserLevelReadRecript(true);
- },
- },
- userLevelReadReceiptClose: {
- value: "userLevelReadReceiptClose",
- label: "关闭",
- onClick() {
- switchEnabelUserLevelReadRecript(false);
- },
- },
- },
- },
- displayOnlineStatus: {
- value: "displayOnlineStatus",
- label: "显示在线状态",
- selectedChild: "userLevelOnlineStatusOpen",
- childrenShowType: "bottomPopup",
- showChildren: false,
- onClick(item: any) {
- if (!isPC) {
- item.showChildren = true;
- }
- },
- children: {
- userLevelOnlineStatusOpen: {
- value: "userLevelOnlineStatusOpen",
- label: "开启",
- onClick() {
- switchUserLevelOnlineStatus(true);
- },
- },
- userLevelOnlineStatusClose: {
- value: "userLevelOnlineStatusClose",
- label: "关闭",
- onClick() {
- switchUserLevelOnlineStatus(false);
- },
- },
- },
- },
- translateLanguage: {
- value: "translateLanguage",
- label: "翻译语言",
- selectedChild: "zh",
- childrenShowType: "bottomPopup",
- showChildren: false,
- onClick(item: any) {
- if (!isPC) {
- item.showChildren = true;
- }
- },
- children: {
- zh: {
- value: "zh",
- label: "中文",
- onClick() {
- switchTranslationTargetLanguage("zh");
- },
- },
- en: {
- value: "en",
- label: "English",
- onClick() {
- switchTranslationTargetLanguage("en");
- },
- },
- jp: {
- value: "jp",
- label: "日本語",
- onClick() {
- switchTranslationTargetLanguage("jp");
- },
- },
- kr: {
- value: "kr",
- label: "한국인",
- onClick() {
- switchTranslationTargetLanguage("kr");
- },
- },
- },
- },
- exit: {
- value: "exit",
- label: "退出登录",
- onClick: (item: any) => {
- TUILogin.logout().then(() => {
- uni.removeStorage({
- key: "userInfo",
- });
- removeTokenStorage();
- TUIGlobal?.reLaunch({
- url: "/pages/views/login",
- });
- });
- },
- },
- });
- const handleSettingListItemOnClick = (item: any) => {
- if (item?.onClick && typeof item?.onClick === "function") {
- item.onClick(item);
- }
- };
- const bottomPopupOnClose = (item: any) => {
- item.showChildren = false;
- };
- const generateLabel = (item: any) => {
- return item?.children[item?.selectedChild]?.label;
- };
- const updateMyProfile = (props: object) => {
- TUIUserService.updateMyProfile(props)
- .then((res: any) => {
- Toast({
- message: "更新用户资料成功",
- type: TOAST_TYPE.SUCCESS,
- duration: 0,
- });
- if ("allowType" in props) {
- settingList.value["allowType"].showChildren = false;
- }
- })
- .catch((err: any) => {
- console.warn("更新用户资料失败", err);
- Toast({
- message: "更新用户资料失败",
- type: TOAST_TYPE.ERROR,
- duration: 0,
- });
- });
- };
- TUIStore.watch(StoreName.USER, {
- userProfile: (userProfileData: IUserProfile) => {
- userProfile.value = userProfileData;
- if (userProfile?.value?.allowType) {
- settingList.value.allowType.selectedChild = userProfile?.value?.allowType;
- }
- },
- displayMessageReadReceipt(isDisplay: boolean) {
- settingList.value.displayMessageReadReceipt.selectedChild = isDisplay
- ? "userLevelReadReceiptOpen"
- : "userLevelReadReceiptClose";
- },
- displayOnlineStatus(isOnlineStatusDisplay: boolean) {
- settingList.value.displayOnlineStatus.selectedChild = isOnlineStatusDisplay
- ? "userLevelOnlineStatusOpen"
- : "userLevelOnlineStatusClose";
- },
- });
- // 规避TUIStore.watch userProfile 登录后暂时不能及时触发更新
- onMounted(() => {
- // 查询自己的资料
- TUIUserService.getUserProfile().then((res: any) => {
- userProfile.value = res.data;
- });
- });
- // tabbar 切换其他tab,关闭profile已经打开的设置弹窗
- onHide(() => {
- for (const settingItemKey in settingList.value) {
- if (settingList?.value[settingItemKey]?.hasOwnProperty("showChildren")) {
- settingList.value[settingItemKey].showChildren = false;
- }
- }
- });
- function switchEnabelUserLevelReadRecript(status: boolean) {
- TUIStore.update(StoreName.USER, "displayMessageReadReceipt", status);
- settingList.value["displayMessageReadReceipt"].showChildren = false;
- }
- function switchUserLevelOnlineStatus(status: boolean) {
- TUIUserService.switchUserStatus({ displayOnlineStatus: status });
- settingList.value["displayOnlineStatus"].showChildren = false;
- }
- function switchTranslationTargetLanguage(lang: string) {
- translator.clear();
- TUIChatService.setTranslationLanguage(lang);
- settingList.value.translateLanguage.selectedChild = lang;
- settingList.value.translateLanguage.showChildren = false;
- }
- </script>
- <style lang="scss" scoped src="../../styles/profile/index.scss"></style>
|