my-h5/pages/union/memberList.vue

<template>
<view class="view-page" :style="{backgroundImage : `url('${ThemeData?.app_bg || $config.PRIMARY_BGURL}')`}">
		<!-- <headerHeight /> -->
		<navBar :navTitle="'查看成员'" :style="{marginTop: `${statusBarHeight}${uni.getSystemInfoSync().platform === 'ios' ? 'px': 'dp'}`}">
		</navBar>
		<view class="content">
			<view class="">
				<view class="flex-line w-fill mt-24 flex-spaceB" v-for="item in dataList" :key="item">
					<view class="flex-line" @click="jumpHomePage(item)">
						<view class="image-view">
							<img :src="item.avatar || logo" alt="" />
						</view>
						<view style="width: 84rpx;" v-if="item.role === 'Owner' || item.role === 'Admin'">
							<img v-if=" item.role === 'Owner'" src="@/static/image/union/ghz.png" alt="" />
							<img v-if="item.role === 'Admin'" :src="$config.PRIMARY_BLYURL" alt="" />
						</view>
						<view class="ml-20 flex-line">
							<span>{{item.nickname}}</span>
						</view>
					</view>
					<view class="icon-button" v-if="!item.is_self">
						<img v-if="item.in_room_id" @click="jumpRoomPage(item)" src="@/static/image/union/follow.png" alt="" />
						<img v-else @click="weChatUser(item)" src="@/static/image/union/sixin.png" alt="" />
					</view>
				</view>
			</view>
		</view>
	</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 {
				logo,
				guildId:null,
				statusBarHeight:0,
				pageConfig: {
					pageSize: 20,
					currentPage: 1,
					total: 0
				},
				loading:false,
				noMore:true,
				dataList: [],
				ThemeData:null
			}
		},
		onLoad(options) {
			const {
				guildId,h
			} = options
			// console.log(guildId)
			this.guildId = guildId
			this.statusBarHeight = h || uni.getStorageSync('BarHeight')
			if(this.guildId) this.getList()
					if (uni.getStorageSync('Theme_Data')) {
			this.ThemeData = JSON.parse(uni.getStorageSync('Theme_Data'))
		}
		},
		methods: {
			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);
				}
			},
			jumpRoomPage(data){
				const platform = uni.getSystemInfoSync().platform;
				if (platform === 'ios') {
					window.webkit.messageHandlers.nativeHandler.postMessage({
						'action': 'jumpRoomPage',
						'data': {
							room_id: data.in_room_id
						}
					});
				} else if (platform === 'android') {
					window.Android.jumpRoomPage(data.in_room_id);
				}
			},
			weChatUser(data){
			const platform = uni.getSystemInfoSync().platform;
			if (platform === 'ios') {
				window.webkit.messageHandlers.nativeHandler.postMessage({
					'action': 'chatWithUser',
					'data': {
						userId: data.user_id,
						userName:data.nickname
					}
				});
			} else if (platform === 'android') {
				window.Android.chatWithUser(data.user_id,data.nickname);
			}	
			},
			// 获取成员列表
			async getList() {
				const {
					code,
					data
				} = await http.get('/api/Guild/member_list', {
					guild_id: this.guildId,
					token: uni.getStorageSync('token') || '',
					page: this.pageConfig.currentPage,
					page_limit: this.pageConfig.pageSize
				})
				if (code) {
					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
					}
				}
			},
		}
	}
</script>

<style lang="scss">
	.view-page {
		display: flex;
		flex-direction: column;
		background-repeat: no-repeat;
		background-size: 100% 100%;
		min-height: 100vh;
		font-family: Source Han Sans CN, Source Han Sans CN;

		.image-view {
			width: 100rpx;
			height: 100rpx;
			margin: 0 24rpx;

			img {
				border-radius: 50%;
			}
		}

		.icon-button {
			width: 140rpx;
			height: 48rpx;
		}

		.content {
			padding: 0 32rpx;
		}
	}
</style>