312 lines
6.3 KiB
Vue
312 lines
6.3 KiB
Vue
<template>
|
|
<view class="page">
|
|
<app-top-push-notice />
|
|
<view class="tabback">
|
|
<view class="rtjt" @click="back">←</view>
|
|
<view class="name">{{ $i18n.t('companySpaceDetailTitle') }}</view>
|
|
<view class="tabback-placeholder"></view>
|
|
</view>
|
|
|
|
<scroll-view scroll-y class="body-scroll" :show-scrollbar="false">
|
|
<view v-if="loading" class="state state--muted">{{ $i18n.t('loading') }}</view>
|
|
<template v-else>
|
|
<view class="card">
|
|
<view v-if="coverUrl" class="cover-wrap">
|
|
<image class="cover" :src="coverUrl" mode="aspectFill" />
|
|
</view>
|
|
<text class="title">{{ spaceName }}</text>
|
|
<text v-if="spaceAddress" class="line">{{ spaceAddress }}</text>
|
|
<text v-if="spaceRemark" class="line muted">{{ spaceRemark }}</text>
|
|
</view>
|
|
|
|
<view class="section-head">{{ $i18n.t('companySpaceMembers') }}</view>
|
|
<view v-if="membersLoading" class="state state--muted sm">{{ $i18n.t('loading') }}</view>
|
|
<view v-else-if="members.length === 0" class="state state--muted sm">{{ $i18n.t('noMembersYet') }}</view>
|
|
<view v-for="(m, index) in members" :key="memberKey(m, index)" class="member-cell">
|
|
<view class="member-avatar-wrap">
|
|
<image
|
|
v-if="m.userAvatar"
|
|
class="member-avatar"
|
|
:src="m.userAvatar"
|
|
mode="aspectFill"
|
|
/>
|
|
<view v-else class="member-avatar member-avatar--ph"></view>
|
|
</view>
|
|
<view class="member-info">
|
|
<text class="member-name">{{ m.userName || m.name || '--' }}</text>
|
|
<text v-if="m.userEmail" class="member-email">{{ m.userEmail }}</text>
|
|
<text class="member-role">{{ memberRoleText(m) }}</text>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
</scroll-view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
spaceId: '',
|
|
loading: true,
|
|
space: {},
|
|
membersLoading: true,
|
|
members: []
|
|
}
|
|
},
|
|
computed: {
|
|
spaceName() {
|
|
const s = this.space
|
|
return s.name || s.spaceName || s.title || '--'
|
|
},
|
|
coverUrl() {
|
|
const s = this.space
|
|
const u = s.picture || s.cover || s.image || s.logo || ''
|
|
return u ? String(u).trim() : ''
|
|
},
|
|
spaceAddress() {
|
|
const s = this.space
|
|
const t = s.address || s.location || ''
|
|
return t ? String(t).trim() : ''
|
|
},
|
|
spaceRemark() {
|
|
const s = this.space
|
|
const t = s.remark || s.description || ''
|
|
return t ? String(t).trim() : ''
|
|
}
|
|
},
|
|
onLoad(options) {
|
|
this.spaceId = (options && options.id) ? String(options.id) : ''
|
|
if (!this.spaceId) {
|
|
uni.showToast({ title: this.$i18n.t('requestFailed'), icon: 'none' })
|
|
this.loading = false
|
|
this.membersLoading = false
|
|
return
|
|
}
|
|
this.fetchSpace()
|
|
this.fetchMembers()
|
|
},
|
|
methods: {
|
|
back() {
|
|
uni.navigateBack({ delta: 1 })
|
|
},
|
|
memberKey(m, index) {
|
|
const id = m && m.id
|
|
return id != null ? String(id) : 'm-' + index
|
|
},
|
|
memberRoleText(m) {
|
|
const perms = m.permissions
|
|
if (Array.isArray(perms) && perms.includes('admin')) {
|
|
return this.$i18n.t('admin')
|
|
}
|
|
return this.$i18n.t('user')
|
|
},
|
|
fetchSpace() {
|
|
this.loading = true
|
|
this.$http
|
|
.get(`/bst/space/${this.spaceId}`)
|
|
.then((res) => {
|
|
if (res.code == 200) {
|
|
this.space = res.data || {}
|
|
} else {
|
|
uni.showToast({ title: res.msg || this.$i18n.t('requestFailed'), icon: 'none' })
|
|
this.space = {}
|
|
}
|
|
})
|
|
.catch(() => {
|
|
uni.showToast({ title: this.$i18n.t('requestFailed'), icon: 'none' })
|
|
this.space = {}
|
|
})
|
|
.finally(() => {
|
|
this.loading = false
|
|
})
|
|
},
|
|
fetchMembers() {
|
|
this.membersLoading = true
|
|
this.$http
|
|
.get(`/bst/spaceUser/list?spaceId=${this.spaceId}&pageNum=1&pageSize=99`)
|
|
.then((res) => {
|
|
if (res.code == 200) {
|
|
this.members = Array.isArray(res.rows) ? res.rows : []
|
|
} else {
|
|
this.members = []
|
|
}
|
|
})
|
|
.catch(() => {
|
|
this.members = []
|
|
})
|
|
.finally(() => {
|
|
this.membersLoading = false
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.page {
|
|
min-height: 100vh;
|
|
background-color: #f3f5f6;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.tabback {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
height: 160rpx;
|
|
padding: 0 20rpx;
|
|
padding-top: 80rpx;
|
|
box-sizing: border-box;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 999;
|
|
background-color: #fff;
|
|
|
|
.rtjt {
|
|
font-size: 36rpx;
|
|
color: #333;
|
|
min-width: 48rpx;
|
|
}
|
|
|
|
.name {
|
|
font-size: 32rpx;
|
|
font-weight: 600;
|
|
color: #333;
|
|
}
|
|
|
|
.tabback-placeholder {
|
|
width: 48rpx;
|
|
height: 1rpx;
|
|
}
|
|
}
|
|
|
|
.body-scroll {
|
|
height: calc(100vh - 160rpx);
|
|
padding: 24rpx;
|
|
padding-top: 16rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.state {
|
|
text-align: center;
|
|
padding: 48rpx 24rpx;
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
.state--muted {
|
|
color: #8b9199;
|
|
}
|
|
|
|
.state.sm {
|
|
padding: 24rpx;
|
|
}
|
|
|
|
.card {
|
|
background: #fff;
|
|
border-radius: 16rpx;
|
|
padding: 24rpx;
|
|
margin-bottom: 24rpx;
|
|
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06);
|
|
}
|
|
|
|
.cover-wrap {
|
|
margin-bottom: 20rpx;
|
|
border-radius: 12rpx;
|
|
overflow: hidden;
|
|
height: 280rpx;
|
|
background: #e8eaed;
|
|
}
|
|
|
|
.cover {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: block;
|
|
}
|
|
|
|
.title {
|
|
display: block;
|
|
font-size: 34rpx;
|
|
font-weight: 600;
|
|
color: #1a1a1a;
|
|
line-height: 1.35;
|
|
}
|
|
|
|
.line {
|
|
display: block;
|
|
margin-top: 12rpx;
|
|
font-size: 26rpx;
|
|
color: #4b5563;
|
|
line-height: 1.45;
|
|
word-break: break-all;
|
|
}
|
|
|
|
.line.muted {
|
|
color: #6b7280;
|
|
}
|
|
|
|
.section-head {
|
|
font-size: 28rpx;
|
|
font-weight: 600;
|
|
color: #374151;
|
|
margin-bottom: 16rpx;
|
|
padding-left: 4rpx;
|
|
}
|
|
|
|
.member-cell {
|
|
display: flex;
|
|
align-items: center;
|
|
background: #fff;
|
|
border-radius: 16rpx;
|
|
padding: 20rpx 24rpx;
|
|
margin-bottom: 16rpx;
|
|
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06);
|
|
}
|
|
|
|
.member-avatar-wrap {
|
|
flex-shrink: 0;
|
|
margin-right: 20rpx;
|
|
}
|
|
|
|
.member-avatar {
|
|
width: 88rpx;
|
|
height: 88rpx;
|
|
border-radius: 12rpx;
|
|
display: block;
|
|
background: #e8eaed;
|
|
}
|
|
|
|
.member-avatar--ph {
|
|
border: 1rpx dashed #cfd4dc;
|
|
}
|
|
|
|
.member-info {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.member-name {
|
|
display: block;
|
|
font-size: 30rpx;
|
|
font-weight: 600;
|
|
color: #1a1a1a;
|
|
}
|
|
|
|
.member-email {
|
|
display: block;
|
|
margin-top: 6rpx;
|
|
font-size: 24rpx;
|
|
color: #6b7280;
|
|
word-break: break-all;
|
|
}
|
|
|
|
.member-role {
|
|
display: block;
|
|
margin-top: 8rpx;
|
|
font-size: 22rpx;
|
|
color: #9ca3af;
|
|
}
|
|
</style>
|