wangluohuoyun-app/pages/riders/myTeam.vue

<template>
	<view class="center">
		<view class="center_top">
			<u-search placeholder="输入车队名称" v-model="searchKeyWord" @change="getList" maxlength="15"></u-search>
			<view class="flex top_inTeam" @click="inTeam">
				<view class="img_sign">
					<image src="../../static/images/riders/inTeam.png" mode="" class="topImg_css"></image>
					<span class="info_sign" v-if="inTeamShow"></span>
				</view>
				<view class="text_css">
					入队申请
				</view>
			</view>
			<view class="flex top_fleetInvite" @click="fleetInvitation">
				<view class="img_sign">
					<image src="../../static/images/riders/fleetInvite.png" mode="" class="topImg_css"></image>
						<span class="info_sign" v-if="fleetInviteShow"></span>
				</view>
				<view class="text_css">
					车队邀请
				</view>
			</view>
		</view>
		
		<view class="fleet">
			<view v-for="(item,index) in formData" class="flex fleet_item" @click="fleetInfo(item)">
				<view class="fleet_img">
					<u--image class="flex-end" :showLoading="true" :src="item.coverUrl" width="45px" height="45px"
						shape='circle'>
					</u--image>
					<span class="info_sign" v-if="item.announcement == 0"></span>
					<image src="../../static/images/riders/captain.png" mode="" v-if="item.captainFlag == 1" class="captain_sign"></image>
				</view>
				<view class="fleet_right">
					<view class="flex">
						<view class="fleet_name">
							{{item.fleetName}}({{item.fleetMemberNum}})
						</view>
						<!-- “审核中”和“已驳回”只有队长本人可见 -->
						<view class="fleet_invite audit" v-if="item.captainFlag == 1 && item.fleetStatus =='审核中'">{{item.fleetStatus}}</view>
						<view class="fleet_invite rebut" v-if="item.captainFlag == 1 && item.fleetStatus =='已驳回'">{{item.fleetStatus}}</view>
						<!-- 审核通过的不显示状态 -->
						<!-- <view class="fleet_invite adopt">已通过</view> -->
						<!-- <view class="fleet_invite"
							v-if="item.captainFlag == 1 && (item.fleetStatus =='审核中' || item.fleetStatus =='已驳回') ">
							{{item.fleetStatus}}</view>
						<view class="fleet_invite" v-else-if="item.fleetStatus != '已通过'">{{item.fleetStatus}}</view> -->
						<!-- <view class="fleet_invite" v-if="item.captainFlag == 1">{{item.fleetStatus}}</view> -->
					</view>
					<view class="fleet_address">
						{{item.province}}  {{item.city}}  {{item.area}}
					</view>
				</view>
			</view>
		</view>

		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				formData: [],
				searchKeyWord: "",
				fleetInviteShow:false, 
				inTeamShow:false
			}
		},
		onShow() {
			this.commonId = uni.getStorageSync("firstAuthentication").commonId
			this.checkInfo()//检查是否有未读信息
			this.getList()
		},
		onLoad() {
		},
		onNavigationBarButtonTap(e) {
			this.$u.route("/pages/riders/addFleet")
		},
		methods: {
			checkInfo(){
				this.$request.baseRequest('get', '/fleetMemberInfo/redDot', {
						commonId: this.commonId
					}).then(res => {
						if(res.data.teamApplication == 0){
							this.inTeamShow = true
						}
						if(res.data.fleetInvitation == 0){
							this.fleetInviteShow = true
						}
					})
					.catch(res => {
						uni.$u.toast(res.message);
					});
			},
			getList() {
				this.$request.baseRequest('get', '/fleetMemberInfo/selectMyFleetInfo', {
						commonId: this.commonId,
						searchKeyWord: this.searchKeyWord,
						pageSize: 10,
						currentPage: 1
					}).then(res => {
						this.formData = res.data.records
					})
					.catch(res => {
						uni.$u.toast(res.message);
					});
			},
			fleetInfo(item) {
				this.$u.route("/pages/riders/fleetSee", {
					fleetId: item.fleetId,
					id: item.id,
					type: item.captainFlag
				})
			},
			inTeam() {
				this.$u.route("/pages/riders/inTeam")
			},
			fleetInvitation() {
				this.$u.route("/pages/riders/fleetInvitation")
			},

		}
	}
</script>

<style lang="scss" scoped>
	.center {
		// padding: 30rpx;
		background: #F2F4F7;

		.row1 {
			display: flex;
			justify-content: flex-end;
			margin-top: 46rpx;
			margin: 40rpx 30rpx 0 0;
		}
		.center_top{
			padding: 30rpx;
			background: #FFFFFF;
			margin-bottom: 30rpx;
		}
		.topImg_css{
			width: 64rpx;
			height: 64rpx;
			margin-top: 38rpx;
		}
		.top_fleetInvite,.top_inTeam{
			height: 120rpx;
			line-height: 140rpx;
		}
		.text_css{
			margin-left: 30rpx;
			
		}
		.img_sign{
			position: relative;
			.info_sign{
				position: absolute;
				display: inline-block;
				width: 20rpx;
				height: 20rpx;
				border-radius: 10rpx;
				background: #FE5C5C;
				top: 30rpx;
				right: -3px;
			}
		}
	}

	.fleet {
		margin-top: 30rpx;
	    background: #FFFFFF;
		padding: 30rpx;
		.fleet_item{
			margin-bottom: 50rpx;
		}

		.fleet_img {
			width: 20%;
			position: relative;
			.captain_sign{
				position: absolute;
				width: 28rpx;
				height: 28rpx;
				bottom: 0rpx;
				left: 64rpx;
			}
			.info_sign{
				position: absolute;
				display: inline-block;
				width: 20rpx;
				height: 20rpx;
				border-radius: 10rpx;
				background: #FE5C5C;
				top: 0rpx;
				left: 70rpx;
				// right: -3px;
			}
		}

		.fleet_right {
			width: 80%;

			.fleet_name {
				width: 80%;
				color: #333333;
				font-weight: 600;
				font-size: 34rpx;
			}

			// .fleet_invite {
			// 	background-color: #5878e8;
			// 	color: #fff;
			// }
			.audit{
				color: #FE6300;
			} 
			.rebut{
				color: #FB1E1E;
			}
			.fleet_address{
				color: #BABABA ;
				font-size: 26rpx;
			}
		}
	}
</style>