ChuangHengWx/pagesMy/team.vue

<template>
	<view class="default_page adffc" :style="{'min-height':h+'px', 'padding-top':mt+'px'}">
		<cus-header title='我的团队'></cus-header>
		<div class="list" v-if="list.length">
			<div class="list-item" v-for="(item,index) in list" :key="item.id">
				<image class="list-item-icon" :src="imgBase+'team_icon.png'"></image>
				<image class="list-item-edit" :src="imgBase+'team_edit.png'" @click="handleEdit(item)"></image>
				<div class="list-item-top">
					<div class="list-item-top-title">{{item.teamName}}</div>
					<div class="list-item-top-pre adf" style="margin-top: 36rpx;">
						<div class="list-item-top-pre-left">所属地区：</div>
						<div class="list-item-top-pre-right">{{item.provinceName+item.cityName}}</div>
					</div>
					<div class="list-item-top-pre adf">
						<div class="list-item-top-pre-left">所属行业：</div>
						<div class="list-item-top-pre-right">{{item.industryName||''}}</div>
					</div>
					<div class="list-item-top-pre adf">
						<div class="list-item-top-pre-left">团队职能类型：</div>
						<div class="list-item-top-pre-right">{{item.functionNames||''}}</div>
					</div>
					<div class="list-item-top-pre adf">
						<div class="list-item-top-pre-left">团队结构类型：</div>
						<div class="list-item-top-pre-right">{{item.orgNames||''}}</div>
					</div>
					<div class="list-item-top-pre adf">
						<div class="list-item-top-pre-left">团队规模：</div>
						<div class="list-item-top-pre-right">{{item.scaleName||''}}</div>
					</div>
					<div class="list-item-top-pre adf">
						<div class="list-item-top-pre-left">团队层级：</div>
						<div class="list-item-top-pre-right">{{item.hierarchyName||''}}</div>
					</div>
				</div>
				<!-- <div class="list-item-bottom adfacjb" @click="handleReivew">
					<div class="list-item-bottom-left">关联问卷：</div>
					<div class="list-item-bottom-right adfacjb">
						<div class="list-item-bottom-right-num">{{item.queNum||0}}条</div>
						<div class="list-item-bottom-right-review adfac">
							<text>查看</text>
							<image :src="imgBase+'my_arrow_right.png'"></image>
						</div>
					</div>
				</div> -->
			</div>
		</div>
		<view class="empty adffcacjc" v-else>
			<page-empty text="暂无团队"></page-empty>
		</view>
	</view>
</template>

<script>
	import PageEmpty from '@/components/pageEmpty/index.vue'
	export default {
		components:{ PageEmpty },
		data(){
			return {
				list:[],
				query:{
					page:1,
					limit:10,
					coachId:''
				},
				isOver:false,
				scaleMap:new Map(),
				hierarchyMap:new Map()
			}
		},
		async onLoad() {
			this.query.coachId = uni.getStorageSync('userInfo')&&JSON.parse(uni.getStorageSync('userInfo')).id||'';
			await this.getTeamScaleData();
			await this.getTeamHierarchyData();
			this.getList()
		},
		onReachBottom() {
			if(this.isOver) return
			this.getList()
		},
		methods:{
			getTeamScaleData(){
				return new Promise((resolve,reject)=>{
					this.$api.get('/getListByType/team_scale').then(({data:res})=>{
						if(res.code!==0) return this.$showToast(res.msg)
						res.data.forEach(d=>{
							this.scaleMap.set(d.dictValue,d)
						})
						resolve()
					})
				})
			},
			getTeamHierarchyData(){
				return new Promise((resolve,reject)=>{
					this.$api.get('/getListByType/team_hierarchy').then(({data:res})=>{
						if(res.code!==0) return this.$showToast(res.msg)
						res.data.forEach(d=>{
							this.hierarchyMap.set(d.dictValue,d)
						})
						resolve()
					})
				})
			},
			getList(){
				this.$api.get('/core/user/team/page',this.query).then(({data:res})=>{
					if(res.code!==0) return this.$showToast(res.msg)
					this.list = [...this.list,...res.data.list]
					this.list.forEach(l=>{
						l.functionNames = l.functions.map(f=>f.functionName).join('、');
						l.orgNames = l.organizations.map(f=>f.orgName).join('、');
						l.scaleName = this.scaleMap.get(l.scale).dictLabel;
						l.hierarchyName = this.hierarchyMap.get(l.hierarchy).dictLabel;
					})
					this.query.page++;
					if(this.list.length>=res.data.total) this.isOver = true;
				})
			},
			handleEdit(item){
				uni.navigateTo({
					url:`/pagesMy/teamEdit?id=${item.id}&scaleName=${item.scaleName}&hierarchyName=${item.hierarchyName}`
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.default_page{
		background: #F7F7F7;
		padding: 0 24rpx 40rpx;
		box-sizing: border-box;
		.list{
			overflow: hidden;
			&-item{
				margin-top: 20rpx;
				background: #FFFFFF;
				border-radius: 24rpx;
				position: relative;
				padding-bottom: 20rpx;
				&-icon{
					width: 40rpx;
					height: 40rpx;
					position: absolute;
					top: 36rpx;
					left: 24rpx;
				}
				&-edit{
					width: 80rpx;
					height: 56rpx;
					position: absolute;
					top: 36rpx;
					right: 24rpx;
				}
				&-top{
					padding: 40rpx 80rpx 24rpx;
					&-title{
						padding-right: 100rpx;
						font-family: PingFang-SC, PingFang-SC;
						font-weight: bold;
						font-size: 32rpx;
						color: #002846;
						line-height: 32rpx;
					}
					&-pre{
						margin-top: 24rpx;
						&-left{
							width: 202rpx;
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #6B7280;
							line-height: 32rpx;
						}
						&-right{
							width: calc(100% - 202rpx);
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #6B7280;
							line-height: 32rpx;
						}
					}
				}
				&-bottom{
					padding: 24rpx 24rpx 24rpx 80rpx;
					border-top: 1rpx solid #E5E7EB;
					&-left{
						width: 202rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #393939;
						line-height: 32rpx;
					}
					&-right{
						width: calc(100% - 202rpx);
						&-num{
							font-family: PingFang-SC, PingFang-SC;
							font-weight: bold;
							font-size: 26rpx;
							color: #199C9C;
							line-height: 32rpx;
						}
						&-review{
							text{
								font-family: PingFangSC, PingFang SC;
								font-weight: 400;
								font-size: 24rpx;
								color: #A6A6A6;
								line-height: 32rpx;
							}
							image{
								width: 32rpx;
								height: 32rpx;
								margin-left: 8rpx;
							}
						}
					}
				}
			}
		}
		
		.empty{
			flex: 1;
		}
	}
</style>