yusheng-h5/pages/union/unionMembers.vue

<template>
	<view class="view-page" :style="{backgroundImage : `url('${ThemeData?.app_bg || $config.PRIMARY_BGURL}')`}">
		<headerHeight />
		<navBar :navTitle="`公会成员`">
			<template #rightView>
				<view class="icon-right flex-line" v-if="leaderStatus" @click="application">
					<view class="font-24" style="color:#333;white-space: nowrap">
						退出审核
					</view>
				</view>
			</template>
		</navBar>
		<view class="content_view">
			<view v-if="leaderStatus">
				<uni-datetime-picker style="background-color: #f8f8f8;" start-placeholder="开始时间" :end="currentDate"
					end-placeholder="结束时间" v-model="dateSearch" type="range" rangeSeparator="至" @change="changeDate" />
			</view>
			<view class="header-view" v-if="flowDetail && leaderStatus">
				<view class="flex-line flow-view w-fill flex-spaceB">
					<view class="flowTitle color-3">
						总支出
					</view>
				</view>
				<view class="flowNumber">
					{{ flowDetail.total_consumption }}
				</view>
			</view>
			<view class="room-list flex-line mt-24" v-if="dataList && dataList.length">
				<view class="room-line  w-fill" v-for="data in dataList" :key="data.room_id">
					<view class="w-fill flex-line flex-spaceB" @click="jumpHomePage(data)">
						<view class="flex-line w-fill">
							<view class="head-portrait-view">
								<view class="head-portrait">
									<img :src="data.avatar || logo" alt="" />

								</view>
								<view class="tip" v-if="data.is_deacon === 1">
									<img src="@/static/image/union/ghz_tip.png" alt="" />
								</view>
							</view>
							<view class="ml-20">
								<view class="color-3 font-32 font-w500">
									{{ data.nickname }}
								</view>
								<view class="color-6 font-24" style="margin-top: 12rpx;">
									ID:{{ data.user_code }}
								</view>
							</view>
						</view>
						<view class="flex-line" v-if="leaderStatus">
							<view class="flowIcon">
								<img src="@/static/image/union/flowIcon.png" alt="" />
							</view>
							<view class="ml-20">
								{{ data.total_consumption || 0 }}
							</view>
						</view>
					</view>
					<view class="w-fill operate_button" v-if="leaderStatus && data.is_deacon === 2">
						<view class="color-f font-24 button" @click="kickGuild(data)">
							踢出公会
						</view>
					</view>
				</view>
			</view>
			<view class="mt-24">
				<uni-load-more :status="loading ? 'loading' : noMore ? 'noMore' : 'more'" />
			</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 logo from '@/static/image/logo.png'
	export default {
		components: {
			headerHeight,
			navBar
		},
		data() {
			return {
				dateSearch: [new Date(), new Date()],
				currentDate: +new Date(),
				logo,
				loading: false,
				noMore: false,
				detailData: null,
				pageConfig: {
					pageSize: 10,
					currentPage: 1,
					total: 0
				},
				searchParams: {
					guild_id: 0,
					start_time: '',
					end_time: '',
					token: uni.getStorageSync('token') || '',
					page: 1,
					page_size: 20
				},
				leaderStatus: null,
				flowDetail: null,
				msgType: '',
				messageText: '',
				messageContent: '',
				dataList: [],
				currentUserData: null,
				ThemeData: null
			}
		},
		onLoad(options) {
			const {
				id,
				leader
			} = options

			this.leaderStatus = +leader
			this.searchParams.guild_id = id
			this.searchParams.start_time = this.formatDate(new Date())
			this.searchParams.end_time = this.formatDate(new Date())
			if (id) this.getList()
			if (uni.getStorageSync('Theme_Data')) {
				this.ThemeData = JSON.parse(uni.getStorageSync('Theme_Data'))
			}
		},
		onReachBottom() {
			if (!this.loading && !this.noMore) {
				this.getList()
			}
		},
		methods: {
			application() {
				uni.navigateTo({
					url: `/pages/union/exitApplication?id=${this.searchParams.guild_id}`
				});
			},
			formatDate(timestamp) {
				const date = new Date(timestamp);
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始需+1
				const day = String(date.getDate()).padStart(2, '0');
				return `${year}-${month}-${day}`;
			},
			// 获取成员列表
			async getList() {
				const {
					code,
					data
				} = await http.get('/api/Guild/get_guild_member_list', {
					...this.searchParams,
					page: this.pageConfig.currentPage,
					page_limit: this.pageConfig.pageSize,
				})
				if (code) {
					this.flowDetail = data
					this.pageConfig.total = data.count
					this.loading = false
					const newData = data.list || []
					if (newData.length === 0) {
						this.noMore = true
						return
					}
					this.dataList = [...this.dataList, ...newData]
					this.pageConfig.currentPage++
					if (this.dataList.length === this.pageConfig.total) {
						this.noMore = true
						return
					}
				}
			},
			// 日期范围
			changeDate(date) {
				this.searchParams.start_time = date.length ? date[0] : ''
				this.searchParams.end_time = date.length ? date[1] : ''
				this.getList()
			},
			// 踢出公会
			kickGuild(userData) {
				this.currentUserData = userData
				this.messageContent = `亲爱的会长，您当前操作将踢出该成员，是否继续？`
				this.$refs.popup.open('center')
			},
			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);
				}
			},
			confirmPopup() {
				this.kickUser()
			},
			closePopup() {
				this.currentUserData = null
				this.messageContent = ""
				this.$refs.popup.close()
			},
			async kickUser() {
				http.post('/api/Guild/kick_guild_member', {
					guild_id: this.currentUserData.guild_id,
					user_id: this.currentUserData.user_id,
					token: uni.getStorageSync('token') || ''
				}).then(response => {
					const {
						data,
						code,
						msg
					} = response
					if (code) {
						this.msgType = 'success'
						this.messageText = `操作成功`
						this.$refs.message.open()
						this.dataList = []
						this.pageConfig.currentPage = 1
						this.getList()
					} else {
						this.messageText = msg
						this.msgType = 'error'
						this.$refs.message.open()
					}
					this.currentUserData = null
					this.closePopup()
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.view-page {
		// padding: 24rpx 32rpx;
		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%;

		.content_view {
			padding: 0 24rpx;
		}

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

		}

		.header-view {
			padding: 24rpx;
			margin-top: 24rpx;
			background-image: url('/static/image/union/flowbg.png');
			background-repeat: no-repeat;
			background-size: 100% 100%;
			height: 152rpx;

			.flow-view {
				font-weight: 400;
				font-size: 24rpx;
			}

			.flowNumber {

				font-weight: 500;
				font-size: 40rpx;
				color: #333;
				margin-top: 24rpx;
			}
		}

		.room-list {
			flex-wrap: wrap;
			width: 100%;

			.operate_button {
				border-top: 1rpx solid #E2E2E2;
				margin-top: 24rpx;
				padding-top: 24rpx;

				.button {
					padding: 12rpx 24rpx;
					background-color: #333;
					display: inline-flex;
					border-radius: 32rpx;
				}
			}

			.room-line {
				width: 100%;
				// background-color: #004D3C;
				margin-bottom: 24rpx;
				padding: 24rpx;
				border-radius: 10rpx;
				background-color: #fff;

				.flowIcon {
					width: 48rpx;
					height: 48rpx;
				}

				.head-portrait {
					width: 100rpx;
					height: 100rpx;
					border-radius: 50%;


					img {
						border-radius: 50%;
					}
				}

				.head-portrait-view {
					position: relative;

					.tip {
						position: absolute;
						bottom: 0;
						left: 5rpx;
						right: 0;
						width: 96rpx;
						height: 26rpx;
						border-radius: 0;

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

			}
		}

	}
</style>