wangluohuoyun-app/pages/riders/fleetSee.vue

<template>
	<view class="center">

		<view class="fleet_info">
			<view class="fleet_top_css">
				<view class="">
					<u-avatar :src="fleetInfo.coverUrl" size="75" class="fleetInfo_img" mode="circle"></u-avatar>
				</view>
				<view class="fleetInfo_top_right">
					<view class="fleetInfo_name">{{fleetInfo.fleetName}}
						<!-- type 1管理 2队员 -->
						<image v-if="type == 1" src="../../static/images/riders/shezhi.png" mode=""
							style="width: 26rpx;height: 26rpx;margin:10rpx 0 0 20rpx;"
							@click="setUp('/pages/riders/addFleet')"></image>
					</view>
					<view class="fleetInfo_address">{{fleetInfo.province}}{{fleetInfo.city}}{{fleetInfo.area}}</view>
				</view>
				<view class="notice_title">公告</view>
				<view class="flex notice_center">
					<view class="notice_text">{{fleetInfo.notice?fleetInfo.notice:"暂无公告"}}</view>
					<image src="../../static/images/myimg/gengduo1.png" mode="" @click="noticeSee"
						style="width: 18rpx;height: 24rpx;margin:10rpx 0 0 20rpx;"></image>
				</view>
				<view class="notice_title">车队简介</view>
				<view class="introduce_info" @click="seeInfo">
					{{fleetInfo.fleetProfile}}
				</view>
				<u-popup :show="seeInfoShow" @close="seeInfoClose" @open="seeInfo" round="20">
					<view class="popUp">
						<view class="fleet_introduce_css">车队简介</view>
						<text>{{fleetInfo.fleetProfile}}</text>
					</view>
				</u-popup>
			</view>
			<view class="member">
				<view class="flex member_top">
					<view class="notice_title member_title">车队成员</view>
					<view class="member_right" @click="setUp('/pages/riders/fleetMember')">
						<span >查看{{fleetInfo.fleetMemberNum}}名群成员</span>
						<image src="../../static/images/myimg/gengduo1.png" mode=""
							style="width: 18rpx;height: 24rpx;margin:10rpx 0 0 20rpx;"></image>
					</view>
				</view>
				<view class="flex member_avatar">
					<view v-for="(item,index) in 4" class="member_item" :key="index"
						v-if="fleetInfo.fleetMemberInfoList[index]">
						<u-avatar
							:src="fleetInfo.fleetMemberInfoList[index].driverPortrait"
							size="48" style="margin: 0 auto;"></u-avatar>
						<view class="member_name">
							{{fleetInfo.fleetMemberInfoList[index].driverNickname}}
						</view>
					</view>
					<view class="del" @click="setUp('/pages/riders/setMember',1)" v-if="type == 1">
						<view class="del_img">—</view>
						<view class="member_name">删除</view>
					</view>
				</view>
			</view>
			<view class="setUp" v-if="type == 1">
				<view class="flex set_item" @click="setUp('/pages/riders/notice')">
					<view class="set_name">
						发布公告
					</view>
					<view class="set_img">
						<image src="../../static/images/myimg/gengduo1.png" mode=""
							style="width: 18rpx;height: 24rpx;margin:10rpx 0 0 20rpx;"></image>
					</view>
				</view>
				<view class="flex set_item" @click="setUp('/pages/riders/setMember',2)">
					<view class="set_name">
						车队管理权转让
					</view>
					<view class="set_img">
						<image src="../../static/images/myimg/gengduo1.png" mode=""
							style="width: 18rpx;height: 24rpx;margin:10rpx 0 0 20rpx;"></image>
					</view>
				</view>
			</view>
			<view class="setUp">
				<view class="flex set_item" @click="setUp('/pages/riders/report')">
					<view class="set_name">
						举报
					</view>
					<view class="set_img">
						<image src="../../static/images/myimg/gengduo1.png" mode=""
							style="width: 18rpx;height: 24rpx;margin:10rpx 0 0 20rpx;"></image>
					</view>
				</view>
			</view>
			<view class="setUp">
				<view class="set_item quit" @click="quitFleet" v-if="!tips">退出车队</view>
			</view>

		</view>
		<!-- chunLei-popups v-model="value" :popData="dataList" @tapPopup="tapPopup" :x="344" :y="20" placement="top-end">
		</chunLei-popups> -->
		<u-toast ref="uToast"></u-toast>
		<u-modal :show="quitShow" :title="alertTitle" :closeOnClickOverlay='true' :showCancelButton='true'
			confirmColor='#2772FB' @confirm="$u.throttle(confirmClick, 1000)" @close="cancelClick" @cancel="cancelClick"></u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: false,
				type: "",
				id: "",
				fleetId: "",
				fleetInfo: {
					fleetMemberInfoList:[],
				},
				quitShow: false,
				alertTitle: "",
				seeInfoShow: false,
				four: 4,
				tips:""
			}
		},
		onShow() {
			this.getList()
		},
		onLoad(options) {
			this.fleetId = options.fleetId
			this.id = options.id
			this.type = options.type
			if(options.tips){
				this.tips = options.tips //判断是从哪页面进入的，判断是否显示退出车队按钮
			}
			
			this.read() //已读接口
			// this.getList()
		},
		methods: {
			seeInfo() {
				this.seeInfoShow = true
			},
			seeInfoClose() {
				this.seeInfoShow = false
			},
			cancelClick() {
				this.quitShow = false
			},
			confirmClick() {
				this.$request.baseRequest('post', '/fleetMemberInfo/api/delete', {
						commonId: uni.getStorageSync("firstAuthentication").commonId,
						fleetId: this.fleetId,
						outFlag: 1,
					}).then(res => {
						if (res.code == 200) {
							this.$refs.uToast.show({
								type: 'success',
								message: "退出成功！",
								complete() {
									uni.$u.route("pages/riders/myTeam")
								}
							})
						} else {
							this.$refs.uToast.show({
								type: 'error',
								message: res.message,
							})
						}
					})
					.catch(res => {
						uni.$u.toast(res.message);
					});
			},
			setUp(url, num) {
				if (num == 1) { //删除成员
					this.$u.route(url, {
						id: this.fleetId,
						type: 1
					})
				} else if (num == 2) { //转移管理
					this.$u.route(url, {
						id: this.fleetId,
						type: 2
					})
				} else {
					this.$u.route(url, {
						id: this.fleetId
					})
				}
			},
			quitFleet() {
				if (this.fleetInfo.fleetMemberInfoList.length == 1) {
					this.alertTitle = "退出后车队将解散，确定退出？"
				} else {
					this.alertTitle = "确定退出车队？"
				}
				this.quitShow = true
			},
			noticeSee() {
				if (!this.fleetInfo.notice) {
					this.$refs.uToast.show({
						type: 'error',
						message: "暂无公告！",
					})
					return
				}
				this.$u.route("pages/riders/noticeSee", {
					_obj: JSON.stringify(this.fleetInfo)
				})
			},
			read() {
				this.$request.baseRequest('post', '/fleetMemberInfo/api/read', {
						id: this.id,
						readFlag: 3
					}).then(res => {})
					.catch(res => {
						uni.$u.toast(res.message);
					});
			},
			clickRightIcon() {
				this.value = true
			},
			returnPage() {
				this.$u.route("/pages/riders/myTeam")
			},
			getList() {
				this.$request.baseRequest('get', '/fleetInfo/getFleetInfo', {
						id: this.fleetId
					}).then(res => {
						this.fleetInfo = res.data
						// if(this.fleetInfo.fleetUrl){
						// 	this.imgList = this.fleetInfo.fleetUrl.split(",")
						// }else{
						// 	this.imgList = this.fleetInfo.coverUrl.split(",")
						// }
					})
					.catch(res => {
						uni.$u.toast(res.message);
					});
			}
		}
	}
</script>

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

		.top {
			margin-top: 20rpx;
			width: 100%;

			.top_left {
				width: 50%;
			}

			.top_right {
				width: 50%;
				text-align: right;
				margin-right: 20rpx;
			}
		}
	}

	.fleet_info {

		// padding-top: 20rpx;
		.fleet_top_css {
			padding: 10rpx 30rpx;
			background: #FFFFFF;
			margin-top: 90rpx;
			border-radius: 30rpx 30rpx 0px 0px;
			position: relative;

			.fleetInfo_img {
				position: absolute;
				top: -40rpx;
				left: 40rpx;
			}

			.fleetInfo_top_right {
				// margin-top: 10rpx;
				margin-left: 200rpx;

				.fleetInfo_name {
					color: #333333;
					font-size: 36rpx;
					font-weight: 600;
					margin: 10rpx 0;
					// margin-top: 30rpx;
				}

				.fleetInfo_address {
					color: #BABABA;
					font-size: 26rpx;
				}
			}


			.notice_center {
				border-bottom: 1px solid #E6E6E6;
			}

			.notice_text {
				font-size: 30rpx;
				width: 95%;
				margin-bottom: 36rpx;
				overflow: hidden;
				word-break: break-all;
				/* break-all(允许在单词内换行。) */
				text-overflow: ellipsis;
				/* 超出部分省略号 */
				display: -webkit-box;
				/** 对象作为伸缩盒子模型显示 **/
				-webkit-box-orient: vertical;
				/** 设置或检索伸缩盒对象的子元素的排列方式 **/
				-webkit-line-clamp: 1;
				/** 显示的行数 **/
			}

			.introduce_info {
				font-size: 30rpx;
				// width: 95%;
				margin-bottom: 48rpx;
				overflow: hidden;
				word-break: break-all;
				/* break-all(允许在单词内换行。) */
				text-overflow: ellipsis;
				/* 超出部分省略号 */
				display: -webkit-box;
				/** 对象作为伸缩盒子模型显示 **/
				-webkit-box-orient: vertical;
				/** 设置或检索伸缩盒对象的子元素的排列方式 **/
				-webkit-line-clamp: 3;
				/** 显示的行数 **/
			}

			.popUp {
				padding: 60rpx 30rpx;

				.fleet_introduce_css {
					text-align: center;
					margin-bottom: 40rpx;
					font-size: 36rpx;
					font-weight: 600;
				}
			}
		}

		.notice_title {
			margin: 60rpx 0 26rpx 0;
			color: #333333;
			font-size: 34rpx;
			font-weight: 600;
		}

		.member {
			padding: 1rpx 30rpx;
			background: #FFFFFF;
			margin-top: 30rpx;
			padding-bottom: 45rpx;

			.member_top {
				width: 100%;

				.member_title,
				.member_right {
					width: 50%;
				}

				.member_right {
					text-align: right;
					margin-top: 60rpx;
					color: #BABABA;
				}
			}

			.member_avatar {
				width: 100%;

				.member_item {
					width: 20%;
					text-align: center;
					margin-right: 44rpx;
				}

				.del {
					text-align: center;

					.del_img {
						width: 96rpx;
						height: 96rpx;
						background: #F2F4F7;
						border-radius: 48rpx;
						text-align: center;
						line-height: 86rpx;
						color: #AFB3BF;
						font-weight: 700;
					}
				}

				.member_name {
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					margin-top: 10rpx;
					font-size: 24rpx;
				}
			}

		}

		.setUp {
			padding: 0 30rpx;
			background-color: #FFFFFF;
			margin-top: 20rpx;

			.set_item {
				width: 100%;
				height: 120rpx;
				line-height: 120rpx;

				.set_name,
				.set_img {
					width: 50%;
				}

				.set_img {
					text-align: right;
				}
			}

			.quit {
				margin: 0 auto;
				text-align: center;
				color: #FE5C5C;
				font-size: 34rpx;
				font-weight: 600;

			}
		}
	}
</style>