ChuangHengWx/pagesMy/team.vue

<template>
	<view class="default_page adffc" :style="{'min-height':h+'px', 'padding-top':mt+'px'}">
		<cus-header title='我的团队'></cus-header>
		<view class="alert">团队编辑功能仅对团队评估发起者开放，请购买并发起团队版 PERILL评估以解锁此权限。</view>
		<view class="list" v-if="list.length">
			<view 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>
				<view class="list-item-top">
					<view class="list-item-top-title">{{item.teamName}}</view>
					<view class="list-item-top-pre adf" style="margin-top: 36rpx;">
						<view class="list-item-top-pre-left">所在公司：</view>
						<view class="list-item-top-pre-right">{{item.enterpriseName||''}}</view>
					</view>
					<view class="list-item-top-pre adf">
						<view class="list-item-top-pre-left">企业官网：</view>
						<view class="list-item-top-pre-right">{{item.enterpriseWebsite||'无'}}</view>
					</view>
					<view class="list-item-top-pre adf">
						<view class="list-item-top-pre-left">所属地区：</view>
						<view class="list-item-top-pre-right">{{item.provinceName+item.cityName}}</view>
					</view>
					<view class="list-item-top-pre adf">
						<view class="list-item-top-pre-left">所属行业：</view>
						<view class="list-item-top-pre-right">{{item.industryName||''}}</view>
					</view>
					<view class="list-item-top-pre adf">
						<view class="list-item-top-pre-left">团队职能类型：</view>
						<view class="list-item-top-pre-right">{{item.functionNames||''}}</view>
					</view>
					<view class="list-item-top-pre adf">
						<view class="list-item-top-pre-left">团队模式类型：</view>
						<view class="list-item-top-pre-right">{{item.orgNames||''}}</view>
					</view>
					<view class="list-item-top-pre adf">
						<view class="list-item-top-pre-left">团队规模：</view>
						<view class="list-item-top-pre-right">{{item.scaleName||''}}</view>
					</view>
					<view class="list-item-top-pre adf">
						<view class="list-item-top-pre-left">团队背景资料：</view>
						<view class="list-item-top-pre-right background-link" @click.stop="handleEdit(item)">{{item.backgroundFileCount||0}}个背景资料文档</view>
					</view>
					<!-- <view class="list-item-top-pre adf">
						<view class="list-item-top-pre-left">团队层级：</view>
						<view class="list-item-top-pre-right">{{item.hierarchyName||''}}</view>
					</view> -->
				</view>
				<!-- <view class="list-item-bottom adfacjb" @click="handleReivew">
					<view class="list-item-bottom-left">关联问卷：</view>
					<view class="list-item-bottom-right adfacjb">
						<view class="list-item-bottom-right-num">{{item.queNum||0}}条</view>
						<view class="list-item-bottom-right-review adfac">
							<text>查看</text>
							<image :src="imgBase+'my_arrow_right.png'"></image>
						</view>
					</view>
				</view> -->
			</view>
		</view>
		<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
				},
				isPerson:true,
				isOver:false,
				scaleMap:new Map(),
				hierarchyMap:new Map()
			}
		},
		async onLoad() {
			await this.getTeamScaleData();
			await this.getTeamHierarchyData();
			this.getList()
		},
		onReachBottom() {
			if(this.isOver) return
			this.getList()
		},
		onReady() {
			this.$api.get(`/wx/myCount/${JSON.parse(uni.getStorageSync('userInfo')).id}`).then(({data:res})=>{
				if(res.code!==0) return this.$showToast(res.msg)
				if(res.data.type==2) this.isPerson = false;
			})
		},
		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)&&this.scaleMap.get(l.scale).dictLabel||'';
						l.hierarchyName = this.hierarchyMap.get(l.hierarchy)&&this.hierarchyMap.get(l.hierarchy).dictLabel||'';
					})
					this.query.page++;
					if(res.data.list.length===0) 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;
		
		.alert{
			padding-top: 30rpx;
			padding-bottom: 20rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #6B7280;
			line-height: 40rpx;
			position: fixed;
			background: #F7F7F7;
			z-index: 1001;
		}
		
		.list{
			overflow: hidden;
			padding-top: 100rpx;
			&-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;
							&.background-link{
								color: #199C9C;
								text-decoration: underline;
							}
						}
					}
				}
				&-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>