WenWuGuanJia/shouhu_fenbao/shouHu/tuanDui.vue

<template>
	<view class="box">
		<u-navbar :autoBack="true" title="我的团队" bgColor="rgba(255,255,255,0)" :placeholder="true" titleStyle="font-weight:bold;color:#000000"></u-navbar>

		<view class="map_tit">
			<image style="width: 186rpx; height: 40rpx" src="/static/img/right_img.png"></image>
			<view class="">{{ list.title }}</view>
			<image style="width: 186rpx; height: 40rpx" src="/static/img/left_img.png"></image>
		</view>

		<view class="ban_box" v-if="mamber_list.length > 0">
			<view class="ban_item" v-for="item in mamber_list" :key="item.id">
				<view class="">
					<image style="width: 100rpx; height: 100rpx; border-radius: 50%" src="https://huli-app.wenlvti.net/app_static/WenWuGuanJia/image/bm_top.png"></image>
				</view>
				<view class="" :style="{ marginRight: item.role == 'captain' ? '165rpx' : '' }">{{ item.nickname }}</view>
				<view v-if="item.role == 'member'" @click="removeMemberm(item.id)" class="sc">删除</view>
			</view>
		</view>
		<view v-else class="zwrw"><u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" text="暂无团队成员"></u-empty></view>
		<view style="position: relative; top: 480rpx">
			<button open-type="share" class="star"><view class="tit">邀请成员</view></button>
		</view>
	</view>
</template>

<script>
let that;
export default {
	data() {
		return {
			volunteer_id: '' /* 志愿者id */,
			mamber_list: [],
			list: {} /* 团队成员列表 */
		};
	},
	onLoad(o) {
		that = this;
		this.volunteer_id = o.id;
		this.getTeamMember();
	},

	methods: {
		onShareAppMessage(e) {
			if (e.from === 'button') {
				return {
					title: '团队分享', //弹出框提示标题
					path: '/shouhu_fenbao/shouHu/yaoQing?team_id=' + that.list.id + '&title=' + that.list.title,
					imageUrl: 'https://huli-app.wenlvti.net/app_static/WenWuGuanJia/image/search.png' //设置弹出框显示页面图片（可自定义）
				};
			} else {
				return {
					title: '我是右上角转发的',
					path: '/shouhu_fenbao/shouHu/yaoQing?team_id=' + that.list.id + '&title=' + that.list.title
				};
			}
		},

		// 获取团队成员列表
		getTeamMember() {
			this.$api.getTeamMember({ main_body_id: 1, volunteer_id: this.volunteer_id }, function (res) {
				// console.log(res, '成员列表');
				that.mamber_list = res.data.mamber_list;
				that.list = res.data;
			});
		},
		// 删除成员
		removeMemberm(id) {
			this.$api.removeMemberm({ main_body_id: 1, team_member_id: id }, function (res) {
				if (res.code == 1) {
					that.$common.successToShow(res.msg);
					setTimeout(() => {
						that.getTeamMember();
					}, 2000);
				} else {
					that.$common.successToShow(res.msg);
				}
			});
		}
	}
};
</script>

<style>
.box {
	height: 100%;
	width: 100%;
	padding-bottom: 50rpx;
	background-image: url('https://huli-app.wenlvti.net/app_static/WenWuGuanJia/image/xy_bgt.png');
	background-repeat: repeat-y;
	background-attachment: fixed;
	background-size: 100% 100%;
}
.map_tit {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 50rpx;
	font-size: 32rpx;
	font-family: Songti SC, Songti SC;
	font-weight: 900;
	line-height: 52rpx;
	color: #444444;
}
.ban_box {
	width: 90%;

	margin: auto;
	overflow: scroll;
}
.ban_item {
	font-size: 30rpx;
	margin-top: 40rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.sc {
	width: 100rpx;
	height: 50rpx;
	text-align: center;
	line-height: 50rpx;
	border: 2rpx solid #f9dcc1;
}
.tit {
	width: 90%;
	height: 100%;
	margin: auto;

	font-size: 32rpx;
	letter-spacing: 6rpx;
	text-align: center;
	font-weight: 700;
	background: linear-gradient(180deg, #af7e44 0%, #934b36 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.star {
	width: 300rpx;
	height: 76rpx;
	margin: auto;
	margin-top: 80rpx;
	text-align: center;
	line-height: 76rpx;
	background: url('/static/img/dt_bg2.png') no-repeat;
	background-size: 100% 100%;
}
</style>