diff --git a/resources/assets/js/pages/manage/components/UserDetail.vue b/resources/assets/js/pages/manage/components/UserDetail.vue index 179932dcc..b525d992c 100755 --- a/resources/assets/js/pages/manage/components/UserDetail.vue +++ b/resources/assets/js/pages/manage/components/UserDetail.vue @@ -5,120 +5,82 @@ :fullscreen="isFullscreen" :mask-closable="false" :footer-hide="true" - width="600"> + width="420">
- - -
- - +
+
+
+ +
+
+
+ + +
+ + + +
+ +
+

{{userData.introduction || 'CEO System D, Because your satisfaction is everything & Standing out from the rest, and that\'s what we want you to be as well.'}}

+
+ +
+

{{$L('Information')}}

+
    +
  • + + {{$L('Website')}} + www.Arnoldy.com +
    • +
  • + + {{$L('Email')}} + Hello@adalahreza.com +
    • +
  • + + {{$L('Phone')}} + +62 517 218 92 00 +
    • +
  • + + {{$L('Joined')}} + {{$A.newDateString(userData.line_at, 'DD MMMM, YYYY')}} +
    • +
+
+ +
+
+ {{tag.name}} + UI Designer + UX Designer + Design System + Product + Succesfull +
+ {{$L('暂无个性标签')}} +
- - - -
-
- -
-
-
- -

{{$L('暂无共同群组')}}

-
-
-
-
-
- - - - - - -
-
-
-
- {{$L('(*)人', dialog.people || 0)}} - {{$A.timeFormat(dialog.last_at)}} -
-
- -
-
- -
-
-
- import emitter from "../../../store/events"; -import transformEmojiToHtml from "../../../utils/emoji"; import {mapState} from "vuex"; import UserTagsModal from "./UserTagsModal.vue"; @@ -143,20 +104,8 @@ export default { userData: { userid: 0 }, - showModal: false, - tagModalVisible: false, - - commonDialog: { - userid: null, - total: null, - list: [], - page: 1, - has_more: false, - }, - commonDialogShow: false, - commonDialogLoading: 0, } }, @@ -170,13 +119,6 @@ export default { watch: { ...mapState(['cacheUserBasic']), - - commonDialogShow() { - if (!this.commonDialogShow || this.commonDialog.list.length > 0) { - return; - } - this.loadCommonDialogList(false); - } }, computed: { @@ -184,10 +126,6 @@ export default { return windowWidth < 576 }, - commonDialogList() { - return this.commonDialog.list || []; - }, - displayTags() { return Array.isArray(this.userData.personal_tags) ? this.userData.personal_tags : []; }, @@ -201,8 +139,6 @@ export default { }, methods: { - transformEmojiToHtml, - onShow(userid) { if (!/^\d+$/.test(userid)) { return @@ -212,14 +148,12 @@ export default { this.userData = user; this.ensureTagDefaults(); this.showModal = true; - this.loadCommonDialogCount() }).finally(_ => { this.$store.dispatch("hiddenSpinner") }); }, onHide() { - this.commonDialogShow = false; this.showModal = false; this.tagModalVisible = false; }, @@ -236,20 +170,6 @@ export default { }); }, - onOpenCreateGroup() { - const userids = []; - if (this.userId) { - userids.push(this.userId); - } - if (this.userData.userid && this.userData.userid !== this.userId) { - userids.push(this.userData.userid); - } - if (userids.length === 0 && this.userData.userid) { - userids.push(this.userData.userid); - } - emitter.emit('createGroup', userids); - }, - ensureTagDefaults() { if (!Array.isArray(this.userData.personal_tags)) { this.$set(this.userData, 'personal_tags', []); @@ -270,152 +190,11 @@ export default { this.$set(this.userData, 'personal_tags', Array.isArray(top) ? top : []); this.$set(this.userData, 'personal_tags_total', typeof total === 'number' ? total : this.userData.personal_tags.length); }, - - loadCommonDialogCount() { - const target_userid = this.userData.userid; - const previousUserId = this.commonDialog.userid; - if (!target_userid) { - this.commonDialog = { - ...this.commonDialog, - userid: target_userid || null, - total: null, - list: [], - page: 1, - has_more: false, - }; - return; - } - - if (previousUserId !== target_userid) { - this.commonDialog = { - ...this.commonDialog, - userid: target_userid, - total: null, - list: [], - page: 1, - has_more: false, - }; - } - - const cacheMap = this.$store.state.dialogCommonCountCache || {}; - const cached = cacheMap[String(target_userid)]; - if (cached && typeof cached.total !== 'undefined') { - this.commonDialog = { - ...this.commonDialog, - total: cached.total, - }; - } - - this.$store.dispatch('call', { - url: 'dialog/common/list', - data: { - target_userid, - only_count: 'yes' - } - }).then(({data}) => { - if (target_userid !== this.userData.userid) { - return - } - const parsedTotal = Number(data.total); - const total = Number.isNaN(parsedTotal) ? 0 : parsedTotal; - this.commonDialog = { - ...this.commonDialog, - userid: target_userid, - total, - list: [], - page: 1, - has_more: false, - }; - this.$store.commit('common/dialog/count/save', { - userid: target_userid, - total, - }); - }); - }, - - loadCommonDialogList(loadMore = false) { - this.commonDialogLoading++; - const target_userid = this.userData.userid; - this.$store.dispatch('call', { - url: 'dialog/common/list', - data: { - target_userid, - page: loadMore ? this.commonDialog.page + 1 : 1 - } - }).then(({data}) => { - if (target_userid !== this.userData.userid) { - return; - } - this.commonDialog = { - ...this.commonDialog, - list: loadMore ? [...this.commonDialog.list, ...data.data] : data.data, - total: data.total, - page: data.current_page, - has_more: !!data.next_page_url - } - }).catch(({msg}) => { - $A.modalError(msg || this.$L('加载失败')); - }).finally(() => { - this.commonDialogLoading--; - }); - }, - - onOpenCommonDialogChat(dialog) { - this.$store.dispatch("openDialog", dialog.id).then(() => { - this.onHide(); - }).catch(({msg}) => { - $A.modalError(msg); - }); - }, } }; diff --git a/resources/assets/sass/pages/components/user-detail.scss b/resources/assets/sass/pages/components/user-detail.scss index ff2a47489..176a7a8ca 100755 --- a/resources/assets/sass/pages/components/user-detail.scss +++ b/resources/assets/sass/pages/components/user-detail.scss @@ -1,89 +1,125 @@ .common-user-detail-modal { - .ivu-modal { - max-width: 90%; - - &.ivu-modal-fullscreen { - max-width: none; - - .ivu-modal-content { - margin-top: calc(var(--status-bar-height) + 46px); - margin-bottom: 0; - border-top-left-radius: 18px !important; - border-top-right-radius: 18px !important; - - .ivu-modal-body { - .user-detail-body { - padding-bottom: var(--navigation-bar-height); - } + .ivu-modal-content { + border-radius: 16px; + } + .ivu-modal-body { + padding: 0 !important; + } + .user-detail-body { + .profile-header { + position: relative; + height: 120px; + .cover-photo { + background: #1a2c47; + height: 80px; + border-top-left-radius: 16px; + border-top-right-radius: 16px; + } + .profile-avatar { + position: absolute; + bottom: 0; + left: 50%; + transform: translateX(-50%); + border: 4px solid #fff; + border-radius: 50%; + .user-avatar { + display: block; } } } + .profile-content { + padding: 16px 24px 24px; + text-align: center; - .user-detail-actions { - display: flex; - gap: 10px; - } - - .ivu-modal-content { - overflow: hidden; - - .ivu-modal-body { - padding: 0 !important; - display: flex; - flex-direction: column; - - .user-detail-body { + .user-info-top { + .username { + color: #808695; + font-size: 14px; + } + .fullname { + font-size: 20px; + font-weight: bold; + margin: 4px 0; + } + .meta { display: flex; - flex-direction: column; + justify-content: center; align-items: center; - gap: 16px; - padding: 84px 24px; - - .avatar-wrapper { - cursor: pointer; + color: #808695; + font-size: 12px; + .separator { + margin: 0 8px; } + } + } - > ul { - width: 80%; + .profile-actions { + margin: 16px 0; + display: flex; + justify-content: center; + gap: 8px; + } - > li { - list-style: none; - display: flex; - justify-content: center; - margin: 12px auto; + .profile-bio { + color: #515a6e; + line-height: 1.5; + margin: 16px 0; + } - &.user-name { - align-items: center; - } + .profile-information { + text-align: left; + background-color: #f8f8f9; + padding: 16px; + border-radius: 8px; - > em { - font-style: normal; - &.disabled, - &.deleted { - display: inline-block; - margin-left: 2px; - white-space: nowrap; - font-size: 12px; - height: 20px; - line-height: 20px; - padding: 0 6px; - border-radius: 3px; - transform: scale(0.9); - transform-origin: right center; - color: #ffffff; - background-color: #ED4014; - } - } + h2 { + font-size: 16px; + margin-bottom: 12px; + } - > span { - flex-shrink: 0; - opacity: 0.8; - padding-right: 4px; - } + ul { + list-style: none; + padding: 0; + margin: 0; + + li { + display: flex; + align-items: center; + padding: 8px 0; + font-size: 14px; + + .ivu-icon { + font-size: 20px; + margin-right: 12px; + color: #808695; + } + + .label { + color: #515a6e; + } + + .value { + margin-left: auto; + color: #17233d; + font-weight: 500; } } } } + + .profile-tags { + margin-top: 24px; + cursor: pointer; + .tags-list { + display: flex; + flex-wrap: wrap; + gap: 8px; + justify-content: center; + } + .ivu-tag { + margin: 0; + } + } } } }