yusheng-h5/pages/union/index.vue

<template>
	<view class="view-page" :style="{backgroundImage: `url('${ThemeData?.app_bg || baseBgUrl}')`}">
		<navBar :style="{marginTop: `${statusBarHeight}${uni.getSystemInfoSync().platform === 'ios' ? 'px': 'dp'}`}"
			:navTitle="'我的公会'" :emitBack="true" @backEvent="back">
			<template #rightView>
				<view class="icon-right flex-line" @click="exit" v-if="isHasUnicon && !isLeader">
					<img :src="logout" alt="" />
				</view>
			</template>
		</navBar>
		<view class="content">
			<!-- 有公会 -->
			<view class="" v-if="isHasUnicon">
				<view class="w-fill unionBgView" :style="{backgroundImage: `url('${unionBgUrl}')`}">
					<view class="avatar">
						<img :src="isMerber.user_avatar" alt="" />
					</view>
					<view class="basic_info_view">
						<view class="unionName color-0 font-32">
							{{isMerber.user_nickname}}
						</view>
						<view class="unionId mt-6">
							ID:{{isMerber.guild_code}}
						</view>
						<view class="unicon mt-12">
							已加入{{isMerber.guild_name}}
						</view>
					</view>
					<view class="card-view">
						<view class="card-box" v-for="(item,index) in cardList" :key="index">
							<view class="card-title">
								<img :src="item.icon" class="icon-box" alt="" />{{item.title}}
							</view>
							<view class="card-value">
								{{isMerber[item.prop]}}
								<span v-if="index">%</span>
							</view>
						</view>
					</view>
				</view>
				<!-- 操作 -->
				<view class="lineWrap">
					<view class="line-box">
						<view class="">
							{{isMerber.guild_name}}的公会协议
						</view>
						<view class="right-text" @click="viewAgreement">
							查看协议
						</view>
					</view>
					<view class="line-box">
						<view class="">
							{{isMerber.guild_name}}的公会群聊
						</view>
						<view class="right-text" @click="groupChat">
							进入群聊
						</view>
					</view>
					<view class="line-box">
						<view class="">
							举报公会
						</view>
						<view class="right-text" style="color: #999;" @click="reportUnion">
							举报
						</view>
					</view>
				</view>
				<!-- 解散公会按钮 -->
				<view v-if="isLeader" class="button-view">
					<view class="button-box" @click="dissolveUnion">
						解散公会
					</view>
				</view>
			</view>
			<view class="no-status" v-else>
				<view class="noView">
					<img :src="noUnionImage" alt="" />
				</view>
				<view class="mt-24">
					<view class="">
						{{statusData.status_str}}
					</view>
					<view class="font-24 color-9 mt-24">
						{{statusData.msg}}
					</view>
				</view>
				<view class="button-view" v-if="uni.getStorageSync('token') && statusData.status !== 2">
					<view class="button-box" @click="applyUnion">
						申请加入公会
					</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 navBar from '@/component/nav.vue';
	import http from '@/until/http.js';
	import logo from '@/static/image/logo.png';
	import config from '@/until/config.js';
	import logout from '@/static/image/union/logout.png';
	export default {
		components: {
			navBar
		},
		data() {
			return {
				noUnionImage: config.not_unionUrl,
				baseBgUrl: config.new_unionUrl,
				unionBgUrl: config.unicon_url,
				logo,
				logout,
				loading: false,
				noMore: false,
				isMerber: null,
				listData: [],
				UnionByUser: null,
				statusBarHeight: 0,
				ThemeData: null,
				swiperList: [],
				// 是否为公会长,
				isLeader: false,
				// 是否有公会
				isHasUnicon: false,
				cardList: [{
						icon: config.coin_url,
						title: '本周金额',
						prop: 'week_income'
					},
					{
						icon: config.hongbao_url,
						title: '厅主收益',
						prop: 'room_author_ratio'
					},
					{
						icon: config.gift_url,
						title: '礼物分成',
						prop: 'settlement_ratio'
					}
				],
				messageContent: '',
				popupStstus: 0,
				messageText: "",
				msgType: "success",
				statusData: null

			}
		},
		onLoad(options) {
			const {
				id,
				h
			} = options
			uni.setStorageSync('token', id || '')
			if (uni.getStorageSync('token')) {
				this.getInfo()
				this.getStatus()
			}
			this.statusBarHeight = h
			uni.setStorageSync('BarHeight', h)
			if (uni.getStorageSync('Theme_Data')) {
				this.ThemeData = JSON.parse(uni.getStorageSync('Theme_Data'))
			}
			// 监听事件，事件名如 'refreshList'
			uni.$on('refreshList', (data) => {
				this.refreshList(); // 执行刷新方法
			});
		},
		onUnload() {
			// 页面卸载时移除事件监听，避免内存泄漏和重复监听
			uni.$off('refreshList');
		},
		methods: {
			// 关闭当前公会中心页面
			back() {
				this.closeWeb()
			},
			search() {
				this.pageConfig.currentPage = 1
				this.listData = []
				this.getList()
			},
			refreshList() {
				this.getInfo()
				this.getStatus()
			},
			closeWeb() {
				const platform = uni.getSystemInfoSync().platform;
				// console.log(platform, '打印设备参数')
				if (platform === 'ios') {
					console.log('调用iOS原生方法')
					// 通过 messageHandlers 调用 iOS 原生方法
					window.webkit.messageHandlers.nativeHandler.postMessage({
						'action': 'closeWeb'
					});
				} else if (platform === 'android') {
					console.log('调用Android原生方法')
					// 调用 Android 原生方法
					window.Android.closeWeb();
				}
			},
			async getStatus() {
				http.get('/api/Guild/is_guild_member', {
					token: uni.getStorageSync('token') || ''
				}).then(response => {
					const {
						data,
						code,
						msg
					} = response
					this.statusData = {
						...data.guild,
						msg,
						code
					}

				}).catch(error => {});
			},
			async getInfo() {
				http.get('/api/Guild/my_guild', {
					token: uni.getStorageSync('token') || ''
				}).then(response => {
					const {
						data,
						code
					} = response
					this.isLeader = code ? data.is_leader == 1 ? true : false : false
					this.isHasUnicon = code ? data.guild_id ? true : false : false
					this.isMerber = code ? data : false
				}).catch(error => {
					this.isMerber = null
					this.isHasUnicon = false
					this.isLeader = false
				});
			},
			// 退出公会
			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.isMerber.quit_guild_gold || 0}金币，即可及时退出公会！是否需要付费退出？`
				this.$refs.popup.open('center')
			},
			// 解散公会
			dissolveUnion() {
				this.popupStstus = 4
				this.messageContent = `亲爱的会长，您当前操作将解散公会，是否解散？`
				this.$refs.popup.open('center')
			},
			closePopup() {
				this.$refs.popup.close()
			},
			confirmPopup() {
				if (this.popupStstus !== null) {
					if (this.popupStstus === 0) {
						this.exitUnionize(1)
					} else if (this.popupStstus === 2) {
						// 付费退出
						this.exitUnionize(2)
					} else if (this.popupStstus === 4) {
						// 解散公会
						if (this.isMerber.is_leader) {
							this.unionDissolve()
						}
					}
				}
			},
			// 申请退出公会接口
			async exitUnionize(type) {
				http.post('/api/Guild/quit_guild', {
					guild_id: this.isMerber.guild_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.refreshList(); 
					} else {
						this.messageText = msg
						this.msgType = 'error'
						this.$refs.message.open()
					}
					this.closePopup()
				})
			},
			// 会长解散公会
			async unionDissolve() {
				http.post('/api/Guild/diss_guild', {
					guild_id: this.isMerber.guild_id,
					token: uni.getStorageSync('token') || ''
				}).then(response => {
					const {
						data,
						code,
						msg
					} = response
					if (code === 1) {
						this.msgType = 'success'
						this.messageText = `操作成功`
						this.$refs.message.open()
						this.refreshList(); 
					} else {
						this.messageText = msg
						this.msgType = 'error'
						this.$refs.message.open()
					}
					this.closePopup()
				})
			},
			// 申请加入公会，跳转至列表页
			applyUnion() {
				uni.navigateTo({
					url: `/pages/union/list`
				})
			},
			reportUnion() {
				uni.navigateTo({
					url: `/pages/feedback/report?id=${uni.getStorageSync('token')}&fromType=4&fromId=${this.isMerber.guild_id}&fromView=${1}&h=${this.statusBarHeight}`
				})
			},
			viewAgreement() {
				uni.navigateTo({
					url: `/pages/union/agreement?h=${this.statusBarHeight}`
				})
			},
			groupChat() {
				// 群聊抛出
				const platform = uni.getSystemInfoSync().platform;
				const ParmData = {
					group_id: this.isMerber.guild_id,
					cover: this.isMerber.user_avatar,
					guild_name: this.isMerber.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.isMerber.guild_id, this.isMerber.user_avatar, this.isMerber
						.guild_name);
				}
			}

		}
	}
</script>

<style lang="scss" scoped>
	.view-page {
		// padding: 32rpx;
		// min-height: 100vh;
		min-height: 100vh;
		font-family: Source Han Sans CN, Source Han Sans CN;
		// background-image: url('@/static/image/help/bg.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;

		.no-status {
			display: inline-flex;
			justify-content: center;
			flex-wrap: wrap;
			text-align: center;
			width: 100%;

			.noView {
				display: inline-flex;
				justify-content: center;
				width: 100%;
				font-family: Source Han Sans CN, Source Han Sans CN;
				font-weight: 500;
				font-size: 32rpx;
				color: #333333;

				img {
					width: 300rpx;
					height: 300rpx;
				}
			}
		}

		.unionBgView {
			height: 485rpx;
			background-position: center;
			background-repeat: no-repeat;
			background-size: 100% 100%;
			position: relative;
			width: 100vw;

			.avatar {
				width: 104rpx;
				height: 104rpx;
				border-radius: 50%;
				position: relative;
				top: 50rpx;
				left: calc(47% - 32rpx);

				img {
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}
			}

			.basic_info_view {
				position: absolute;
				width: 100%;
				top: 160rpx;
				// left: calc(40%);
				// text-align: center;
				font-family: Source Sans 3, Source Sans 3;
				font-weight: 400;
				font-size: 24rpx;
				color: rgba(0, 0, 0, 0.45);
				text-align: center;

				.unionName {
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
				}
			}

			.card-view {
				position: absolute;
				bottom: 40rpx;
				width: 100%;
				display: inline-flex;
				justify-content: space-around;

				.card-box {
					text-align: center;
					background-color: #fff;
					border-radius: 16rpx;
					width: 220rpx;
					height: 152rpx;
					display: inline-flex;
					flex-wrap: wrap;
					align-items: center;
					align-content: center;

					.card-title {
						width: 100%;
						font-family: Source Sans 3, Source Sans 3;
						font-weight: 400;
						font-size: 24rpx;
						color: rgba(0, 0, 0, 0.65);
						display: inline-flex;
						flex-wrap: wrap;
						align-items: center;
						align-content: center;
						justify-content: center;

						.icon-box {
							width: 40rpx;
							height: 40rpx;
						}
					}

					.card-value {
						width: 100%;
						font-family: Source Han Sans CN, Source Han Sans CN;
						font-weight: 500;
						font-size: 36rpx;
						color: var(--primary-color);
						margin-top: 12rpx;
					}

				}
			}
		}

		.lineWrap {
			padding: 32rpx;

			.line-box {
				width: calc(100% - 48rpx);
				background-color: #fff;
				height: 68rpx;
				border-radius: 14rpx;
				padding: 14rpx 24rpx;
				display: inline-flex;
				align-items: center;
				font-family: Source Sans 3, Source Sans 3;
				font-weight: 400;
				font-size: 28rpx;
				color: #333333;
				margin-bottom: 24rpx;
				display: inline-flex;
				justify-content: space-between;

				.right-text {
					font-family: Source Sans 3, Source Sans 3;
					font-weight: 400;
					font-size: 24rpx;
					color: var(--primary-color);
				}
			}
		}

		.button-view {
			width: 100%;
			display: inline-flex;
			align-content: center;
			justify-content: center;
			// text-align: center;
			position: fixed;
			bottom: 120rpx;

			.button-box {
				width: 600rpx;
				height: 84rpx;
				background: #3ABC6D;
				border-radius: 106rpx;
				display: inline-flex;
				align-content: center;
				align-items: center;
				justify-content: center;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #FFFFFF;
				text-align: center;
				font-style: normal;
				text-transform: none;
			}
		}

		.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: var(--primary-color);
					color: var(--font-button-color);
				}
			}

		}

		.icon-right {
			width: 56rpx;
			height: 56rpx;

			img {
				width: 100%;
				height: 100%;
			}
		}

		// /* 搜索框 */
		// .flex-input {
		// 	width: 100%;
		// 	display: inline-flex;
		// 	align-items: center;
		// 	flex-wrap: nowrap;
		// 	flex-direction: row;

		// 	.search-button {
		// 		padding: 0 0 0 20rpx;
		// 	}
		// }

		// /* 轮播图 */
		// .swipe-view {
		// 	width: 100%;
		// 	height: 200rpx;
		// 	// background-color: antiquewhite;
		// 	border-radius: 14rpx;
		// 	margin-top: 36rpx;
		// 	// background-image: url('/static/image/swiper.jpg');
		// 	// background-repeat: no-repeat;
		// 	// background-size: 100% 100%;
		// }

		// .title {
		// 	padding: 24rpx 0;
		// 	font-family: Source Han Sans CN, Source Han Sans CN;
		// 	font-weight: 500;
		// 	font-size: 32rpx;
		// 	color: #333333;
		// }

		// /* 热门公会 */
		// .hotspot-view {
		// 	.hotspot-box {
		// 		width: calc(100% - 48rpx);
		// 		padding: 24rpx;
		// 		// min-height: calc(268rpx - 48rpx);
		// 		background: #FFFFFF;
		// 		border-radius: 20rpx;
		// 		margin-bottom: 24rpx;
		// 		/* */
		// 		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%;

		// 			img {
		// 				width: 100%;
		// 				height: 100%;
		// 				border-radius: 50%;
		// 			}
		// 		}

		// 		/* 中间信息 */
		// 		.info-box {
		// 			padding: 0 24rpx;

		// 			// width: 55%;
		// 			.icon-box {
		// 				width: 20rpx;
		// 				height: 20rpx;
		// 				margin-left: 5rpx;
		// 			}

		// 			/* 会长样式 */
		// 			.chairman {
		// 				min-width: 106rpx;
		// 				height: 36rpx;
		// 				padding: 0 12rpx;
		// 				color: #fff;
		// 				font-size: 24rpx;
		// 				text-align: right;
		// 				background: var(--subss-color);
		// 				border-radius: 116rpx 116rpx 116rpx 116rpx;
		// 				border: 2rpx solid var(--subss-color);
		// 				position: relative;
		// 				left: 10rpx;
		// 				margin: 32rpx 0;
		// 				display: inline-flex;

		// 				.truncate-three {
		// 					text-align: left;
		// 				}

		// 				.chairman-portrait {
		// 					width: 50rpx;
		// 					height: 50rpx;
		// 					border-radius: 50%;
		// 					border: 2rpx solid #FFFFFF;
		// 					position: absolute;
		// 					top: -10rpx;
		// 					left: -20rpx;

		// 					img {
		// 						width: 100%;
		// 						height: 100%;
		// 						border-radius: 50%;
		// 					}
		// 				}

		// 				.chairman-name {
		// 					margin-left: 0.9rem;
		// 				}
		// 			}

		// 			.id-title {
		// 				font-size: 24rpx;
		// 				color: #666666;
		// 				margin-left: 24rpx;
		// 			}

		// 			.subhead-title {
		// 				display: block;
		// 				font-weight: 400;
		// 				font-size: 24rpx;
		// 				color: #666666;
		// 				margin: 8rpx 0;
		// 			}

		// 			.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;
		// 			}
		// 		}

		// 		/* 右边按钮 */
		// 		.right-button {
		// 			text-align: center;

		// 			.apply-button {
		// 				display: inline-block;
		// 				background: var(--primary-color);
		// 				font-size: var(--font-button-size);
		// 				color: var(--font-button-color);
		// 				border-radius: 68rpx;
		// 				text-align: center;

		// 				padding: 4rpx 30rpx;
		// 			}

		// 			.online-view {
		// 				// display: inline-block; 
		// 				margin-top: 24rpx;
		// 				padding: 12rpx 8rpx;
		// 				text-align: right;
		// 				width: 160rpx;
		// 				height: 44rpx;
		// 				line-height: 44rpx;
		// 				// background: #333333;
		// 				border-radius: 92rpx 92rpx 92rpx 92rpx;
		// 				position: relative;

		// 				.avatars-container {
		// 					position: absolute;
		// 					top: 10rpx;
		// 					left: 40%;
		// 				}

		// 				.online-people {
		// 					color: rgba(0, 0, 0, 0.5);
		// 					font-size: 24rpx;
		// 					text-align: left;
		// 					display: inline-block;
		// 					/* width: 6ch; */
		// 					overflow: hidden;
		// 					white-space: nowrap;
		// 					text-overflow: ellipsis;
		// 					word-break: keep-all;
		// 				}
		// 			}
		// 		}
		// 	}
		// }
	}
</style>