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 v-if="isMerber" @click="jumpMineUnion" class="font-24 minUnicon" style="white-space: nowrap">
					我的公会
				</view>
			</template>
		</navBar>
		<view class="content">
			<view class="flex-input">
				<uni-easyinput type="number" prefixIcon="search" clearSize="18" v-model="searchValue"
					placeholder="请输入公会ID">
				</uni-easyinput>
				<view class="search-button" @click="search">
					搜索
				</view>
			</view>
			<swiper class="swipe-view" circular  :autoplay="true" :interval="2000" :duration="500">
				<swiper-item v-for="item in swiperList" :key="item">
					<view class="swiper-item uni-bg-red">
						<img :src="item.image" alt="" />
					</view>
				</swiper-item>
			</swiper>
			<view class="title">
				热门公会
			</view>
			<view class="hotspot-view">
				<view class="hotspot-box" v-for="data in listData" :key="data.id" @click="viewDetails(data)">
					<view class="flex-line">
						<view class="head-portrait">
							<img :src="data.cover || logo" alt="" />
						</view>
						<view class="info-box ml-20">
							<view class="flex-line">
								<span class="truncate">{{data.guild_name}}</span><span
									class="id-title">ID:{{data.guild_special_id}}</span>
								<img @click.stop="copyData(data.guild_special_id)" class="icon-box"
									src="@/static/image/union/copy.png" alt="" />
							</view>
							<view class="subhead-title truncate">
								{{data.intro}}
							</view>
							<view class="chairman">
								<view class="chairman-portrait">
									<img :src="data.user_avatar" alt="暂无头像" />
								</view>
								<view class="chairman-name">
									{{data.user_name}}
								</view>
							</view>
						</view>
					</view>
					<view class="right-button">
						<!-- 				<view class="apply-button">
							申请
						</view> -->
						<view class="online-view">
							<view v-show="data.guild_user_list.length">
								<view class="avatars-container">
									<view class="avatar" v-for="ele in data.guild_user_list.slice(0,3)" :key="ele.id">
										<img :src="ele.avatar" alt="" />
									</view>

								</view>

							</view>
							<view class="online-people">
								{{data.num}}人
							</view>
						</view>
					</view>
				</view>
				<uni-load-more :status="loading ? 'loading' : noMore ? 'noMore' : 'more'" />
			</view>
		</view>
	</view>
</template>

<script>
	import navBar from '@/component/nav.vue';
	import http from '@/until/http.js';
	import logo from '@/static/image/logo.png';
	import baseBgUrl from '@/static/image/general/fy_bg.jpg';
	export default {
		components: {
			navBar
		},
		data() {
			return {
				searchValue: '',
				baseBgUrl,
				logo,
				loading: false,
				noMore: false,
				pageConfig: {
					pageSize: 5,
					currentPage: 1,
					total: 2
				},
				isMerber: null,
				listData: [],
				UnionByUser: null,
				statusBarHeight: 0,
				ThemeData: null,
				swiperList: []
			}
		},
		onLoad(options) {
			const {
				id,
				h
			} = options
			uni.setStorageSync('token', id || '')
			if (uni.getStorageSync('token')) {
				this.getList()
				this.getInfo()
				this.getSwiper()
			}
			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(); // 执行刷新方法
				// 如果传递了数据，可以从 data 中获取
			});
		},
		onUnload() {
			// 页面卸载时移除事件监听，避免内存泄漏和重复监听
			uni.$off('refreshList');
		},
		onReachBottom() {
			if (!this.loading && !this.noMore) {
				this.getList()
			}
		},
		methods: {
			// 关闭当前公会中心页面
			back() {
				this.closeWeb()
			},
			search() {
				this.pageConfig.currentPage = 1
				this.listData = []
				this.getList()
			},
			refreshList() {
				this.searchValue = ''
				this.search()
				this.getInfo()
			},
			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 getSwiper() {
				http.get('/api/banner/get_banner_list', {
					token: uni.getStorageSync('token') || '',
					show_type: 5
				}).then(response => {
					const {
						data,
						code
					} = response
					this.swiperList = code ? data : []
				})
			},
			async getInfo() {
				http.get('/api/Guild/is_guild_member', {
					token: uni.getStorageSync('token') || ''
				}).then(response => {
					const {
						data,
						code
					} = response
					this.isMerber = code ? data : false
					this.UnionByUser = code ? data.guild_id : 0
				}).catch(error => {
					this.isMerber = false
					this.UnionByUser = null
				});
			},
			async getList() {
				this.loading = true
				http.get('/api/Guild/guild_list', {
					page: this.pageConfig.currentPage,
					limit: this.pageConfig.pageSize,
					search_id: this.searchValue,
					token: uni.getStorageSync('token') || ''
				}).then(response => {
					const {
						data,
						code
					} = response
					if (code) {
						this.pageConfig.total = data.count
						this.loading = false
						const newData = data.list || []
						if (newData.length === 0) {
							this.noMore = true
							return
						}
						this.listData = [...this.listData, ...newData]
						this.pageConfig.currentPage++
						if (this.listData.length === this.pageConfig.total) {
							this.noMore = true
							return
						}
					}
				}).catch(error => {
					this.loading = false
				});
			},
			// 点击公会详情
			viewDetails(data) {
				uni.navigateTo({
					url: `/pages/union/detail?id=${data.id}`
				});
			},
			// 跳转到我的公会
			jumpMineUnion() {
				uni.navigateTo({
					url: `/pages/union/detail?id=${this.UnionByUser}`
				});
			},
			copyData(text) {
				if (text) {

					if (uni.getSystemInfoSync().platform === 'h5') {
						const textarea = document.createElement('textarea');
						textarea.value = text;
						document.body.appendChild(textarea);
						textarea.select();
						document.execCommand('copy');
						document.body.removeChild(textarea);

						uni.showToast({
							title: '复制成功',
							icon: 'none',
						});
						return;
					} else {
						uni.setClipboardData({
							data: text,
							success: () => {
								uni.showToast({
									title: '已复制到剪贴板',
									icon: 'none',
									duration: 1500
								});
							},
							fail: () => {
								uni.showToast({
									title: '复制失败，请重试',
									icon: 'none'
								});
							}
						});
					}
				} else {
					uni.showToast({
						title: '暂无可复制文本',
						icon: 'none'
					});
				}


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

		.minUnicon {
			color: var(--primary-color);
		}

		.content {
			padding: 0 32rpx;
		}

		.avatar {
			width: 44rpx;
			height: 44rpx;
			border-radius: 50%;
			position: absolute;
			border: 2px solid white;
			/* 白色边框 */
			background-size: cover;
			box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
			transition: all 0.4s ease;

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

		/* 头像位置 */
		.avatar:nth-child(1) {
			left: calc(50% - 60rpx);
			z-index: 3;
		}

		.avatar:nth-child(2) {
			left: calc(50% - 35rpx);
			z-index: 2;
		}

		.avatar:nth-child(3) {
			left: calc(50% - 10rpx);
			z-index: 1;
		}

		/* 悬停效果 */
		.avatar:hover {
			transform: translateY(-10px);
			box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
			z-index: 10;
		}

		/* 搜索框 */
		.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>