675 lines
15 KiB
Vue
675 lines
15 KiB
Vue
<template>
|
||
<view class="view-page"
|
||
:style="{ backgroundImage: `url('${ThemeData?.app_bg ?? 'https://vespa.qxmier.com/image/bg.png'}')` }">
|
||
<headerHeight />
|
||
<navBar :navTitle="'公会详情'">
|
||
<template #rightView>
|
||
<view class="icon-right flex-line" @click="exit"
|
||
v-if="detailData && detailData.is_join && detailData.is_leader === 0">
|
||
<img :src="logout" alt="" />
|
||
</view>
|
||
</template>
|
||
</navBar>
|
||
<view class="content" v-if="detailData">
|
||
<view class="union-info">
|
||
<view class="left-view">
|
||
<view class="head-portrait">
|
||
<img :src="detailData.cover || logo" alt="" />
|
||
</view>
|
||
<view class="info-detail">
|
||
<view class="union-title">
|
||
{{ detailData.guild_name }}
|
||
</view>
|
||
<view class="union-id">
|
||
ID:{{ detailData.guild_special_id }}
|
||
</view>
|
||
<view class="union-date">
|
||
{{ detailData.createtime }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="like-box">
|
||
<uni-icons type="heart" size="20"></uni-icons>
|
||
<span class="ml-6">
|
||
{{ detailData.total_transaction }}
|
||
</span>
|
||
</view>
|
||
</view>
|
||
<!-- 公会按钮 是会长可以看公会成员 不是不能看 -->
|
||
<view class="icon-wrap">
|
||
<img class="icon-box" @click.stop="viewDetails(0)" src="@/static/image/union/ghfj.png" alt="" />
|
||
<img class="icon-box" @click.stop="viewDetails(1)" src="@/static/image/union/ghcy.png" alt="" />
|
||
<img class="icon-box" v-if="detailData.is_leader" @click.stop="viewDetails(2)"
|
||
src="@/static/image/union/ghbt.png" alt="" />
|
||
<img class="icon-box" v-if="detailData.is_join" @click.stop="viewDetails(3)"
|
||
src="@/static/image/union/qlsz.png" alt="" />
|
||
</view>
|
||
<!-- 公会会长信息 -->
|
||
<view class="union-user">
|
||
<view class="user-title">
|
||
公会会长
|
||
</view>
|
||
<view class="user-info" @click="jumpHomePage(detailData)">
|
||
<view class="flex-line">
|
||
<view class="head-portrait">
|
||
<img :src="detailData.user_data.avatar" alt="" />
|
||
</view>
|
||
<view class="info-view">
|
||
<view class="">
|
||
{{ detailData.user_data.nickname }}
|
||
</view>
|
||
<view class="iconTag-view"
|
||
v-if="detailData.user_data.icon || detailData.user_data.icon.length">
|
||
<view class="icon-tag" v-for="icon in detailData.user_data.icon" :key="icon">
|
||
<img :src="icon" alt="" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="">
|
||
<uni-icons type="right" size="20"></uni-icons>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 公会介绍 -->
|
||
<view class="union-dec">
|
||
<view class="user-title">
|
||
公会介绍
|
||
</view>
|
||
<view class="user-dec">
|
||
{{ detailData.intro || '暂无数据' }}
|
||
</view>
|
||
</view>
|
||
<view class="footer" v-if="!detailData.is_join">
|
||
<view class="confirm-button" @click="applyToJoin">
|
||
<view class="button">
|
||
{{ buttonText }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="footer" v-if="detailData.is_leader">
|
||
<view class="confirm-button" @click="dissolveUnion">
|
||
<view class="button">
|
||
{{ buttonText }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<uni-popup ref="message" type="message">
|
||
<uni-popup-message :type="msgType" :message="messageText" :duration="2000"></uni-popup-message>
|
||
</uni-popup>
|
||
<uni-popup ref="popup" type="center">
|
||
<view class="popup_view">
|
||
<view class="color-3 font-32 popup_title">
|
||
温馨提示
|
||
</view>
|
||
<view class="color-3 font-24 messageContent">
|
||
{{ messageContent }}
|
||
</view>
|
||
<view class="popup_button flex-line">
|
||
<view class="close_button flex-line" @click="closePopup">
|
||
取消
|
||
</view>
|
||
<view class="confirm-button flex-line" @click="confirmPopup">
|
||
确认
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
</uni-popup>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import headerHeight from '@/component/headerHeight.vue';
|
||
import navBar from '@/component/nav.vue';
|
||
import http from '@/until/http.js';
|
||
import logout from '@/static/image/union/logout.png'
|
||
import logo from '@/static/image/logo.png';
|
||
export default {
|
||
components: {
|
||
headerHeight,
|
||
navBar
|
||
},
|
||
data() {
|
||
return {
|
||
detailData: null,
|
||
logo,
|
||
logout,
|
||
buttonStatus: null,
|
||
buttonText: '申请加入公会',
|
||
// 弹出窗状态 null 不展示 0 申请退出 1申请加入公会 2 付费退出 3实名认证
|
||
popupStstus: null,
|
||
messageText: "",
|
||
messageContent: '',
|
||
msgType: "success",
|
||
ThemeData: null
|
||
}
|
||
},
|
||
onLoad(options) {
|
||
const {
|
||
id
|
||
} = options
|
||
if (id) {
|
||
this.getDetail(id)
|
||
this.getUserInfo()
|
||
}
|
||
if (uni.getStorageSync('Theme_Data')) {
|
||
this.ThemeData = JSON.parse(uni.getStorageSync('Theme_Data'))
|
||
}
|
||
},
|
||
methods: {
|
||
// 获取用户信息 拿实名信息
|
||
async getUserInfo() {
|
||
http.get('/api/User/get_user_info', {
|
||
token: uni.getStorageSync('token') ?? ''
|
||
}).then(response => {
|
||
const {
|
||
data,
|
||
code
|
||
} = response
|
||
this.isAuth = code ? data.auth : 0
|
||
})
|
||
},
|
||
// 获取公会信息
|
||
async getDetail(Id) {
|
||
uni.showLoading({
|
||
mask: true,
|
||
title: '加载中'
|
||
})
|
||
http.get('/api/Guild/guild_detail', {
|
||
id: Id,
|
||
token: uni.getStorageSync('token') ?? ''
|
||
}).then(response => {
|
||
uni.hideLoading()
|
||
const {
|
||
data,
|
||
code
|
||
} = response
|
||
this.detailData = code ? data : null
|
||
if (data) {
|
||
this.buttonText = !data.is_leader ? data.is_join ? '退出公会' : '申请加入公会' : '解散公会'
|
||
this.buttonStatus = !data.is_leader ? data.is_join ? 0 : 1 : 2
|
||
}
|
||
})
|
||
},
|
||
// 点击房间
|
||
viewDetails(index) {
|
||
// 0 公会房间 1 公会成员 2公会补贴 3 群聊设置
|
||
if (index) {
|
||
if (index === 1) {
|
||
// 公会成员
|
||
uni.navigateTo({
|
||
url: `/pages/union/unionMembers?id=${this.detailData.id ?? null}&leader=${this.detailData.is_leader || 0}`
|
||
});
|
||
} else if (index === 2) {
|
||
// 公会补贴
|
||
uni.navigateTo({
|
||
url: `/pages/union/subsidy?id=${this.detailData.id ?? null}&leader=${this.detailData.is_leader || 0}`
|
||
});
|
||
} else {
|
||
// 群聊抛出
|
||
const platform = uni.getSystemInfoSync().platform;
|
||
const ParmData = {
|
||
group_id: this.detailData.group_id,
|
||
cover: this.detailData.cover,
|
||
guild_name: this.detailData.guild_name
|
||
}
|
||
if (platform === 'ios') {
|
||
// 通过 messageHandlers 调用 iOS 原生方法
|
||
window.webkit.messageHandlers.nativeHandler.postMessage({
|
||
'action': 'enterGroupChat',
|
||
'data': ParmData
|
||
});
|
||
} else if (platform === 'android') {
|
||
// 调用 Android 原生方法
|
||
window.Android.enterGroupChat(this.detailData.group_id, this.detailData.cover, this.detailData.guild_name);
|
||
}
|
||
}
|
||
} else {
|
||
// 房间
|
||
uni.navigateTo({
|
||
url: `/pages/union/roomAndflow?id=${this.detailData.id ?? null}&leader=${this.detailData.is_leader || 0}`
|
||
});
|
||
}
|
||
},
|
||
//申请加入公会
|
||
applyToJoin() {
|
||
if (this.buttonStatus === 1) {
|
||
if (this.isAuth) {
|
||
this.popupStstus = 1
|
||
this.messageContent = "是否选择加入当前公会"
|
||
this.$refs.popup.open('center')
|
||
} else {
|
||
this.popupStstus = 3
|
||
this.messageContent = "当前尚未实名认证，是否跳转到实名认证页面？"
|
||
this.$refs.popup.open('center')
|
||
}
|
||
}
|
||
},
|
||
// 申请加入公会
|
||
async joinUnionize() {
|
||
http.post('/api/Guild/join_guild', {
|
||
guild_id: this.detailData.id,
|
||
token: uni.getStorageSync('token') ?? ''
|
||
}).then(response => {
|
||
const {
|
||
data,
|
||
code,
|
||
msg
|
||
} = response
|
||
if (code) {
|
||
this.messageText = `加入成功`
|
||
this.$refs.message.open()
|
||
this.msgType = 'success'
|
||
this.getDetail(this.detailData.id)
|
||
} else {
|
||
this.messageText = msg
|
||
this.msgType = 'error'
|
||
this.$refs.message.open()
|
||
}
|
||
this.closePopup()
|
||
})
|
||
},
|
||
// 退出公会
|
||
exit() {
|
||
uni.showActionSheet({
|
||
itemList: ["申请退出", "付费退出"],
|
||
success: (res) => {
|
||
if (res.tapIndex === 0) {
|
||
this.applyToWithdraw();
|
||
} else if (res.tapIndex === 1) {
|
||
this.paidWithdrawal();
|
||
}
|
||
},
|
||
fail: (err) => {
|
||
console.error("用户取消选择：", err);
|
||
},
|
||
});
|
||
},
|
||
// 申请退出
|
||
applyToWithdraw() {
|
||
this.popupStstus = 0
|
||
this.messageContent = "亲爱的会员，会长将在3天内审核，若超时未通过，您将自动退出并可加入其他公会；若通过，则30天内无法加入其他公会，是否还需要申请退出？"
|
||
this.$refs.popup.open('center')
|
||
},
|
||
// 付费退出
|
||
paidWithdrawal() {
|
||
this.popupStstus = 2
|
||
this.messageContent = `亲爱的会员，支付${this.detailData.quit_guild_gold || 0}金币，即可及时退出公会！是否需要付费退出？`
|
||
this.$refs.popup.open('center')
|
||
},
|
||
// 解散公会
|
||
dissolveUnion() {
|
||
this.popupStstus = 4
|
||
this.messageContent = `亲爱的会长，您当前操作将解散公会，是否解散？`
|
||
this.$refs.popup.open('center')
|
||
},
|
||
closePopup() {
|
||
this.popupStstus = null
|
||
this.messageContent = ""
|
||
this.$refs.popup.close()
|
||
},
|
||
confirmPopup() {
|
||
if (this.popupStstus !== null) {
|
||
if (this.popupStstus === 0) {
|
||
this.exitUnionize(1)
|
||
} else if (this.popupStstus === 1) {
|
||
this.joinUnionize()
|
||
} else if (this.popupStstus === 2) {
|
||
// 付费退出
|
||
this.exitUnionize(2)
|
||
} else if (this.popupStstus === 3) {
|
||
// 实名认证页面
|
||
this.authConfirm()
|
||
} else if (this.popupStstus === 4) {
|
||
// 解散公会
|
||
if (this.detailData.is_leader) {
|
||
this.unionDissolve()
|
||
}
|
||
}
|
||
}
|
||
},
|
||
authConfirm() {
|
||
// 去实名认证页面
|
||
const platform = uni.getSystemInfoSync().platform;
|
||
if (platform === 'ios') {
|
||
window.webkit.messageHandlers.nativeHandler.postMessage({
|
||
'action': 'enterAuthent'
|
||
});
|
||
} else if (platform === 'android') {
|
||
window.Android.enterAuthent();
|
||
}
|
||
},
|
||
// 跳转公会长个人页面
|
||
jumpHomePage(data) {
|
||
const platform = uni.getSystemInfoSync().platform;
|
||
if (platform === 'ios') {
|
||
window.webkit.messageHandlers.nativeHandler.postMessage({
|
||
'action': 'jumpWebPage',
|
||
'data': {
|
||
userId: data.user_id
|
||
}
|
||
});
|
||
} else if (platform === 'android') {
|
||
window.Android.jumpWebPage(data.user_id);
|
||
}
|
||
},
|
||
// 会长解散公会
|
||
async unionDissolve() {
|
||
http.post('/api/Guild/diss_guild', {
|
||
guild_id: this.detailData.id,
|
||
token: uni.getStorageSync('token') ?? ''
|
||
}).then(response => {
|
||
const {
|
||
data,
|
||
code,
|
||
msg
|
||
} = response
|
||
if (code === 1) {
|
||
this.msgType = 'success'
|
||
this.messageText = `操作成功，将返回上一页！`
|
||
this.$refs.message.open()
|
||
uni.navigateBack()
|
||
} else {
|
||
this.messageText = msg
|
||
this.msgType = 'error'
|
||
this.$refs.message.open()
|
||
}
|
||
this.closePopup()
|
||
})
|
||
},
|
||
// 申请退出公会接口
|
||
async exitUnionize(type) {
|
||
http.post('/api/Guild/quit_guild', {
|
||
guild_id: this.detailData.id,
|
||
type: type,
|
||
token: uni.getStorageSync('token') ?? ''
|
||
}).then(response => {
|
||
const {
|
||
data,
|
||
code,
|
||
msg
|
||
} = response
|
||
if (code === 1) {
|
||
this.msgType = 'success'
|
||
this.messageText = `${type === 1 ? '退出申请已提交，请等待审核' : '付费退出成功'}`
|
||
this.$refs.message.open()
|
||
this.getDetail(this.detailData.id)
|
||
} else {
|
||
this.messageText = msg
|
||
this.msgType = 'error'
|
||
this.$refs.message.open()
|
||
}
|
||
this.closePopup()
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.view-page {
|
||
// padding: 32rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
background-image: url('@/static/image/help/bg.png');
|
||
background-repeat: no-repeat;
|
||
background-size: 100% 100%;
|
||
min-height: 100vh;
|
||
|
||
.content {
|
||
padding: 0 32rpx;
|
||
flex: 1;
|
||
/* 关键：撑满剩余空间 */
|
||
overflow: auto;
|
||
/* 允许内容滚动 */
|
||
}
|
||
|
||
.icon-right {
|
||
width: 56rpx;
|
||
height: 56rpx;
|
||
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.popup_view {
|
||
width: 550rpx;
|
||
// height: 40vh;
|
||
background-color: #fff;
|
||
border-radius: 32rpx;
|
||
padding: 32rpx;
|
||
|
||
.popup_title {
|
||
text-align: center;
|
||
}
|
||
|
||
.messageContent {
|
||
margin: 24rpx 0;
|
||
}
|
||
|
||
.popup_button {
|
||
margin-top: 24rpx;
|
||
width: 100%;
|
||
justify-content: space-around;
|
||
|
||
.close_button,
|
||
.confirm-button {
|
||
width: 200rpx;
|
||
height: 84rpx;
|
||
background: #F3F3F3;
|
||
border-radius: 106rpx;
|
||
color: #999999;
|
||
justify-content: center;
|
||
}
|
||
|
||
.confirm-button {
|
||
background: #0DFFB9;
|
||
color: #333;
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
.footer {
|
||
// background: #f0f0f0;
|
||
padding: 20rpx;
|
||
text-align: center;
|
||
/* 适配iPhoneX等刘海屏 */
|
||
padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
|
||
}
|
||
|
||
/* 确保容器占满屏幕 */
|
||
.union-info {
|
||
width: 100%;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
flex-wrap: nowrap;
|
||
justify-content: space-between;
|
||
flex-direction: row;
|
||
|
||
/* 头像 */
|
||
.head-portrait {
|
||
width: 120rpx;
|
||
height: 120rpx;
|
||
border-radius: 50%;
|
||
background-color: aquamarine;
|
||
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: 50%;
|
||
}
|
||
}
|
||
|
||
.left-view {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
flex-wrap: nowrap;
|
||
justify-content: space-between;
|
||
flex-direction: row;
|
||
|
||
.info-detail {
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: 400;
|
||
margin-left: 24rpx;
|
||
|
||
.union-title {
|
||
font-weight: 500;
|
||
font-size: 32rpx;
|
||
color: #333333;
|
||
}
|
||
|
||
.union-id {
|
||
font-size: 28rpx;
|
||
color: #666666;
|
||
}
|
||
|
||
.union-date {
|
||
|
||
font-size: 24rpx;
|
||
color: #999999;
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
.like-box {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
flex-wrap: nowrap;
|
||
flex-direction: row;
|
||
padding: 6rpx 24rpx;
|
||
background: #2AFEC0;
|
||
border-radius: 35rpx;
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
margin: 8rpx 0;
|
||
}
|
||
}
|
||
|
||
.icon-wrap {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 25px;
|
||
margin: 24rpx 0;
|
||
|
||
.icon-box {
|
||
width: 48%;
|
||
height: 30%;
|
||
flex: 1;
|
||
max-width: calc(50% - 12.5px);
|
||
border-radius: 15px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
cursor: pointer;
|
||
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
}
|
||
|
||
.union-user,
|
||
.union-dec {
|
||
padding: 24rpx;
|
||
height: 220rpx;
|
||
background: #fff;
|
||
border-radius: 22rpx;
|
||
margin-bottom: 24rpx;
|
||
|
||
.user-title {
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: 500;
|
||
font-size: 32rpx;
|
||
color: #333333;
|
||
margin-bottom: 24rpx;
|
||
}
|
||
|
||
.user-info {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
flex-wrap: nowrap;
|
||
justify-content: space-between;
|
||
flex-direction: row;
|
||
width: 100%;
|
||
|
||
/* 头像 */
|
||
.head-portrait {
|
||
width: 120rpx;
|
||
height: 120rpx;
|
||
border-radius: 50%;
|
||
background-color: aquamarine;
|
||
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: 50%;
|
||
}
|
||
}
|
||
|
||
.info-view {
|
||
margin-left: 24rpx;
|
||
|
||
.iconTag-view {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
flex-wrap: nowrap;
|
||
justify-content: space-between;
|
||
flex-direction: row;
|
||
padding: 12rpx 0;
|
||
|
||
.icon-tag {
|
||
width: 75rpx;
|
||
height: 30rpx;
|
||
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
}
|
||
}
|
||
|
||
}
|
||
}
|
||
}
|
||
|
||
.union-dec {
|
||
min-height: 220rpx;
|
||
|
||
.user-dec {
|
||
text-indent: 2em;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
}
|
||
}
|
||
|
||
.confirm-button {
|
||
padding: 0 50rpx;
|
||
|
||
.button {
|
||
display: block;
|
||
width: 100%;
|
||
height: 84rpx;
|
||
border-radius: 106rpx;
|
||
line-height: 84rpx;
|
||
background-color: #0DFFB9;
|
||
color: #333;
|
||
text-align: center;
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: 400;
|
||
}
|
||
}
|
||
}
|
||
</style> |