wangluohuoyun-app/pages/riders/setMember.vue

<template>
	<view class="center">
		<u-search placeholder="搜索" v-model="searchKeyWord" :clearabled="true" :show-action="false" @change="getList">
		</u-search>
		<view class="avatars">
			<view class="" v-for="(item,index) in formData" class="avatars_item flex" @click="radioClick(item)">
				<view class="flex avatars_left">
					<label class="radio" v-if="type == 1">
						<radio :value="item.id" :checked="item.checked" />
					</label>
					<!-- <label class="radio" @click="radioClick(item)">
						<radio :value="item.uid" :checked="item.checked" />
					</label> -->
					<!-- <u-checkbox-group v-model="checked" iconPlacement="right" placement="row">
						<u-checkbox activeColor="red" ></u-checkbox>
					</u-checkbox-group> -->
					<!-- <u-radio-group v-model="radiovalue1" >
						<u-radio :customStyle="{marginBottom: '8px'}" :key="index"
							:label="item.name" :name="item.name" @change="radioChange">
						</u-radio>
					</u-radio-group> -->
					<u-avatar :src="item.driverPortrait" size="38" class="img_css"></u-avatar>
					{{item.driverNickname}}
				</view>
				<view class="avatars_right" v-if="type == 2">
					<image src="../../static/images/riders/duihao.png" mode="" class="duihao_img" v-if="item.checkmark">
					</image>
				</view>
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
		<u-modal :show="setShow" :title="alertTitle" :closeOnClickOverlay='true' :showCancelButton='true'
			confirmColor='#F5BA3C' @confirm="confirmClick" @close="cancelClick" @cancel="cancelClick"></u-modal>
	</view>
</template>

<script>
	import uniPopup from '../../components/uni-popup/uni-popup.vue';
	export default {
		data() {
			return {
				fleetId: "",
				formData: [],
				searchKeyWord: "",
				type: "",
				idList: [],
				setShow: false,
				alertTitle: ""
			}
		},
		onShow() {

		},
		onLoad(options) {
			this.type = options.type
			if (this.type == 1) {
				uni.setNavigationBarTitle({
					title: "删除成员"
				})
			} else {
				uni.setNavigationBarTitle({
					title: '车队管理权转让'
				});
			}
			this.fleetId = options.id
			this.getList()
		},
		onNavigationBarButtonTap(e) {
			if (this.type == 1) {
				if (this.idList.length == 0) {
					this.$refs.uToast.show({
						type: 'error',
						message: "请选择要删除的队员！",
					})
					return 
				}
				this.alertTitle = "确定删除指定的队员？"
				this.setShow = true
			} else {
				if (!this.transferId) {
					this.$refs.uToast.show({
						type: 'error',
						message: "请选择一名新管理！",
					})
					return
				}
				this.alertTitle = "转移后您将不再是该车队的管理，确认转移？"
				this.setShow = true
			}
		},
		methods: {
			confirmClick() {
				if (this.type == 1) {

					this.delSunmit()
					this.cancelClick()
				} else {

					this.submit()
					this.cancelClick()
				}
			},
			cancelClick() {
				this.setShow = false
			},
			delSunmit() {
				this.alertTitle = "确定删除指定的队员？"
				this.setShow = true
				this.$request.baseRequest('post', '/fleetMemberInfo/api/delete', {
						// outFlag: 1,
						idList: this.idList
					}).then(res => {
						if (res.code == 200) {
							this.$refs.uToast.show({
								type: 'success',
								message: "队员删除成功！",
								// complete() {
								// 	uni.$u.route("pages/riders/myTeam")
								// }
							})
							this.getList()
						}
					})
					.catch(res => {
						uni.$u.toast(res.message);
					});
			},
			radioClick(item) {
				if (this.type == 1) {
					if (item.checked) {
						// this.idList.remove(item.id)
						for (let i = 0; i < this.idList.length; i++) {
							if (this.idList[i] == item.id) {
								this.idList.splice(i, 1)
								break
							}
						}
						item.checked = false;
					} else {
						this.idList.push(item.id)
						item.checked = true;
					}
				}
				if (this.type == 2) {
					for (let i = 0; i < this.formData.length; i++) {
						this.formData[i].checkmark = false
					}
					if (item.checkmark) {
						item.checkmark = false;
					} else {
						item.checkmark = true;
						this.transferId = item.id
					}
				}
				this.$forceUpdate()
			},
			getList() {
				this.$request.baseRequest('get', '/fleetMemberInfo/selectFleetMember', {
						searchKeyWord: this.searchKeyWord,
						fleetId: this.fleetId,
						pageSize: 10,
						currentPage: 1,
					}).then(res => {
						this.formData = res.data.records
						for (let i = 0; i < this.formData.length; i++) {
							this.formData[i].checkmark = false
							this.formData[i].checked = false
						}
					})
					.catch(res => {
						uni.$u.toast(res.message);
					});
			},
			submit() {

				this.$request.baseRequest('post', '/fleetMemberInfo/api/transferLeader', {
						fleetId: this.fleetId,
						transferId: this.transferId,
					}).then(res => {
						if (res.code == 200) {
							this.$refs.uToast.show({
								type: 'success',
								message: "管理转移成功！",
								complete() {
									uni.$u.route("pages/riders/myTeam")
								}
							})

						}

					})
					.catch(res => {
						uni.$u.toast(res.message);
					});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.center {
		padding: 40rpx;
	}

	.avatars {
		.avatars_item {
			width: 100%;
			height: 120rpx;
			border-bottom: 1px solid #E6E6E6;
			line-height: 120rpx;

			.avatars_left {
				width: 80%;
			}

			.avatars_right {
				width: 20%;
				display: flex;
				justify-content: flex-end;

				.duihao_img {
					width: 28rpx;
					height: 28rpx;
					margin-top: 40rpx;
					margin: 50rpx 60rpx 0 0;
				}
			}
		}

		.img_css {
			margin-top: 30rpx;
			margin: 22rpx;

		}
	}
</style>