117 lines
3.6 KiB
Vue
117 lines
3.6 KiB
Vue
<template>
|
|
<view class="apply" v-if="loaded">
|
|
<u-avatar :src="group.cover || require('@/static/user/cover.png')" size="128" shape="square" />
|
|
<view class="name"> {{ group.name }} </view>
|
|
<u-button class="apply-btn" v-if="group.can_join" @click="modalShow = true" text="申请加群" :disabled="disabled" color="#34CE98" />
|
|
<view class="" v-else>
|
|
<view class="" v-if="group.is_full">群已满员</view>
|
|
<view class="" v-if="group.deny_apply">禁止申请</view>
|
|
<u-button class="apply-btn2" v-if="group.state === 'accepted'" color="#34CE98" text="进入群聊" @click="toGroupChat" />
|
|
</view>
|
|
|
|
<u-modal negativeTop="300" :show="modalShow" title="申请原因" showCancelButton @cancel="onHideModal" @confirm="onJoinGroup">
|
|
<view class="slot-content"> <u--input placeholder="申请原因" border="surround" focus v-model="message" /> </view>
|
|
</u-modal>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
joinGroupPre,
|
|
joinGroup
|
|
} from '@/apis/interfaces/im.js'
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
targetId: '',
|
|
group: {},
|
|
modalShow: false,
|
|
message: '',
|
|
disabled: false,
|
|
loaded: false
|
|
}
|
|
},
|
|
onLoad(e) {
|
|
console.log(e, 'e。。。。。。')
|
|
this.targetId = e.targetId
|
|
// this.targetId = "TG2"
|
|
joinGroupPre(this.targetId).then(res => {
|
|
console.log(res, 'res.返回群的基本信息')
|
|
this.group = res
|
|
this.loaded = true
|
|
}).catch(err => {
|
|
uni.showToast({
|
|
title: err.message,
|
|
icon: 'none',
|
|
mask: true,
|
|
duration: 3000
|
|
})
|
|
})
|
|
},
|
|
methods: {
|
|
toGroupChat() {
|
|
uni.redirectTo({
|
|
url: '/pages/im/group/chat?targetId=' + this.targetId
|
|
})
|
|
},
|
|
onHideModal() {
|
|
this.message = ''
|
|
this.modalShow = false
|
|
},
|
|
onJoinGroup() {
|
|
joinGroup(this.targetId, this.message).then(res => {
|
|
console.log('申请结果', res);
|
|
uni.showToast({
|
|
icon: 'none',
|
|
title: '申请成功',
|
|
duration: 2000,
|
|
mast: true
|
|
})
|
|
setTimeout(() => {
|
|
this.$Router.back()
|
|
}, 2000)
|
|
}).catch(err => {
|
|
uni.showToast({
|
|
icon: 'none',
|
|
title: err.message
|
|
})
|
|
})
|
|
this.disabled = true
|
|
this.onHideModal()
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.apply {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
width: 100%;
|
|
min-height: 100vh;
|
|
background-color: $window-color;
|
|
|
|
.u-avatar {
|
|
margin-top: 60rpx;
|
|
width: 180rpx;
|
|
height: 180rpx;
|
|
}
|
|
|
|
.name {
|
|
margin: 40rpx 0;
|
|
font-size: $title-size + 2;
|
|
}
|
|
|
|
.apply-btn {
|
|
width: 80%;
|
|
font-size: $title-size;
|
|
}
|
|
|
|
.apply-btn2 {
|
|
padding: 0 100rpx;
|
|
}
|
|
}
|
|
</style>
|