wangluohuoyun-app/pages/riders/inTeam.vue

<template>
	<view class="center">
		<!-- <view v-for="(item,index) in applyList" class="fleet"> -->
			<u-swipe-action>
				<u-swipe-action-item :options="options1" v-for="(item,index) in applyList" class="fleet" :disabled="item.status == '已申请'" @click="delInfo(item)" :autoClose="true">
					<view class="flex"style="height: 80px;margin-top: 30rpx;">
						<view class="fleet_img">
							<u--image class="flex-end" :showLoading="true" :src="item.driverPortrait" width="60px"
								height="60px" shape='circle'>
							</u--image>
						</view>
						<view class="fleet_right flex">
							<view class="driver_info">
								<view class="driver_name">
									{{item.driverNickname}}
								</view>
								<view class="fleet_name">
									{{item.fleetName}}
								</view>
							</view>
							<view class="fleet_btn">
								<view class="fleet_invite btn1" @click="auditSubmit(item,1)" v-if="item.status =='已申请'">
									拒绝
								</view>
								<view class="fleet_invite btn2" @click="auditSubmit(item,2)" v-if="item.status =='已申请'">
									通过
								</view>
								<view class="btn3" v-else>{{item.status == '已加入' ? "已通过" : item.status}}</view>
							</view>
						</view>
					</view>
				</u-swipe-action-item>
			</u-swipe-action>
			<!-- <view class="fleet_img">
				<u--image class="flex-end" :showLoading="true" :src="item.driverPortrait" width="60px" height="60px"
					shape='circle'>
				</u--image>
			</view>

			<view class="fleet_right">
				<view class="flex">
					<view class="fleet_name">
						{{item.driverNickname}}
					</view>
					<view class="fleet_invite" @click="refuse(item)" v-if="item.status =='已申请'">拒绝</view>
					<view class="fleet_invite" @click="accept(item)" v-if="item.status =='已申请'">通过</view>
					<view class="fleet_invite" v-else>{{item.status == '已加入' ? "已通过" : item.status}}</view>
				</view>
				<view>
					{{item.fleetName}}
				</view>
			</view> -->
		<!-- </view> -->
		<u-loadmore :status="status"  :nomore-text="nomoreText" />
		<u-modal :show="auditShow" :title="alertTitle" :closeOnClickOverlay='true' :showCancelButton='true'
			confirmColor='#F5BA3C' @confirm="confirmClick" @close="cancelClick" @cancel="cancelClick"></u-modal>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				commonId: "",
				applyList: [],
				options1: [{
					text: '删除',
					style: {
						width: '145rpx',
						// height:'180rpx',
						backgroundColor: '#FE5C5C',
					}
				}],
				auditShow: false,
				alertTitle: "",
				btnSign: "",
				btnInfo: {},
				status: 'loadmore',
				 nomoreText: '暂无记录'
			}
		},
		onShow() {

		},
		onLoad() {
			this.commonId = uni.getStorageSync("firstAuthentication").commonId
			this.read() //已读接口
			this.getList()
		},
		methods: {
			delInfo(item) {
				this.$request.baseRequest('post', '/fleetMemberInfo/api/listDelete', {
						id: item.id
					}).then(res => {
						if (res.code == 200) {
							this.$refs.uToast.show({
								type: 'success',
								message: "删除成功！",
							})
							this.getList()
						}
					})
					.catch(res => {
						uni.$u.toast(res.message);
					});
			},
			read() {
				this.$request.baseRequest('post', '/fleetMemberInfo/api/read', {
						commonId: this.commonId,
						readFlag: 1
					}).then(res => {})
					.catch(res => {
						uni.$u.toast(res.message);
					});
			},
			auditSubmit(item, num) {
				if (num == 1) {
					this.auditShow = true
					this.alertTitle = "确定拒绝该申请？"

				} else {
					this.auditShow = true
					this.alertTitle = "确定通过该申请？"
				}
				this.btnInfo = item
				this.btnSign = num
			},
			cancelClick() {
				this.auditShow = false
			},
			confirmClick() {
				if (this.btnSign = 1) {
					this.refuse()
				} else {
					this.accept()
				}
				this.auditShow = false
			},
			refuse() {
				this.$request.baseRequest('post', '/fleetMemberInfo/api/editFleetMemberInfo', {
						examineFlag: 2,
						id: this.btnInfo.id
					}).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);
					});
			},
			accept(item) {
				this.$request.baseRequest('post', '/fleetMemberInfo/api/editFleetMemberInfo', {
						examineFlag: 1,
						id: this.btnInfo.id
					}).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);
					});
			},
			getList() {
				this.status = 'loading';
				this.$request.baseRequest('get', '/fleetMemberInfo/selectFleetMemberInfo', {
						commonId: this.commonId,
						flag: 1,
						pageSize: 10,
						currentPage: 1
					}).then(res => {
						if (res.code == 200) {
							this.applyList = res.data.records
							if(res.data.total == 0){
								this.status = 'nomore'
							}else{
								this.status = 'loadmore'
							}
						}
					})
					.catch(res => {
						uni.$u.toast(res.message);
					});
			}
		}
	}
</script>

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

	.fleet {
		// padding: 0 30rpx;
		// margin: 40rpx 0;
		// padding-bottom: 40rpx;
		border-bottom: 1px solid #E6E6E6;

		.fleet_img {
			width: 20%;
			margin-left: 30rpx;
		}

		.fleet_right {
			// margin-top: 20rpx;
			width: 80%;

			.driver_info {
				width: 50%;

				.driver_name {
					width: 50%;
					color: #333333;
					font-size: 34rpx;
					font-weight: 600;
					margin-top: 10rpx;
				}

				.fleet_name {
					color: #BABABA;
					font-size: 26rpx;
					margin-top: 10rpx;
				}
			}


			.fleet_btn {
				justify-content: flex-end;
				width: 50%;
				display: flex;
				line-height: 60rpx;
				margin-right: 30rpx;

				.fleet_invite {
					padding: 10rpx 30rpx;
					height: 60rpx;
					line-height: 60rpx;
					margin-left: 10rpx;
					border-radius: 35px;
					color: #fff;
					margin-top: 20rpx;
				}

				.btn1 {
					background-color: #FE5C5C;
				}

				.btn2 {
					background-color: #F5BA3C;
				}

				.btn3 {
					margin: 30rpx 70rpx 0 0;
					color: #BABABA;
					font-size: 26rpx;
				}
			}


		}
	}
	// .u-swipe-action-item__content{
	// 	height: 100px;
	// }
</style>