wangluohuoyun-app/pages/riders/index.vue

<template>
	<view class="center">
		<view class="flex row1">
			<view class="flex center_top">
				<view class="center_top_btn" :class="indexbtn == 1? '':'center_top_btn1'" @click="changebtn(1)">司机
				</view>
				<view class="center_top_btn" :class="indexbtn == 2? '':'center_top_btn1'" @click="changebtn(2)">车队
				</view>
			</view>
			<view class="top_img">
				<u--image :showLoading="true" class="flex-end" src="../../static/images/riders/geren.png" width="35px"
					height="35px" @click="myPage"></u--image>
			</view>
		</view>
		<view class="driver" v-show="indexbtn == 1">
			<view class="flex screen">
				<view @click="selectAddress(1)" class="screen_item">
					<view class="screen_sign sign1">装</view>
					{{title1 ? title1 : "请选择地址"}}
				</view>
				<itmister-address-picker ref="addressElone" @confirmChange="confirmChangeOne"></itmister-address-picker>
				<u--image :showLoading="true" class="exchange" src="../../static/images/riders/exchange.png"
					width="43px" height="43px" @click="replace"></u--image>
				<view @click="selectAddress(2)" class="screen_item">
					<view class="screen_sign sign2">卸</view>
					{{title2 ? title2 : "请选择地址"}}
				</view>
				<itmister-address-picker-other ref="addressEltwo" :wholeCountry="true"
					@confirmChange="confirmChangeTwo"></itmister-address-picker-other>
			</view>
			<view class="route" >
				<view v-for="(item,index) in routeData">
					<view class="flex route_item">
						<view style="width: 20%;">
							<u-avatar :src="item.driverPortrait" size="60"></u-avatar>
						</view>
						<view style="width: 80%;">
							<view class="flex">
								<view class="driver_name">
									{{item.driverNickname}}
								</view>
								<view class="driver_invite">
									<view class="route_invite" style="margin-left: 30px;" @click="invitation(item)">
										<image src="../../static/images/riders/yaoqing.png" mode=""
											style="width: 26rpx;height: 26rpx;margin-rigth:10rpx;"></image>邀请
									</view>
								</view>
								<u-picker :show="fleetShow" :columns="columns" @cancel="fleetClose"
									@confirm="invitationCheng">
								</u-picker>
							</view>
							<view class="address" v-for="(items,index) in item.startAdress">
								<span class="spots spot1"></span>
								{{item.startAdress[index]}}
								<!-- {{item.sendCity ? item.sendCity: item.sendProvince }}{{item.sendArea}} -->
								<image class="jt-icon" src="@/static/images/goodSource/jt.png" mode='widthFix'></image>
								<span class="spots spot2"></span>
								{{item.endAdress[index]}}
								<!-- {{item.unloadCity ? item.unloadCity: item.unloadProvince }}{{item.unloadArea}} -->
							</view>
						</view>
					</view>
				</view>
				<u-loadmore :status="status"  :nomore-text="nomoreText" />
			</view>
			
			<!-- <view v-if="routeData.length == 0" style="background: #FFFFFF;text-align: center;padding-top: 20rpx;">
				暂无数据
			</view> -->
		</view>
		<view class="riders" v-show="indexbtn == 2">
			<view class="flex riders_top">
				<view @click="selectChange" class="riders_city">{{city ? city : province}}</view>
				<itmister-address-picker ref="addressElthree" :showCheck="false" @confirmChange="confirmChangethree">
				</itmister-address-picker>
				<u-search placeholder="输入车队信息关键字" bgColor="#ffffff" v-model="searchKeyWord" @search="getList"
					maxlength="15"></u-search>
			</view>
			<view class="fleet">
				<view v-for="(item,index) in formData" class="flex">
					<view class="fleet_item">
						<view class="flex">
							<u-avatar :src="item.coverUrl" size="45"></u-avatar>
							<view class="fleet_name">
								{{item.fleetName}}
								<view class="fleet_member flex">
									<u-avatar-group :urls="item.fleetMemberUrl.split(',')" size="24" gap="0.4">
									</u-avatar-group>
									<text class="fleet_number">{{item.fleetMemberNum}}人</text>
									<!-- <image src="../../static/images/myimg/gengduo1@3x.png" class="arrow"></image> -->
									<image src="../../static/images/myimg/gengduo1.png" mode=""
										style="width: 18rpx;height: 20rpx;margin-top:14rpx;"></image>
								</view>
							</view>
							<view class="fleet_invite" v-if="!item.fleetMemberStatus" @click="joinFleet(item)">加入</view>
							<view class="fleet_invite" v-else>{{item.fleetMemberStatus}}</view>
						</view>

						<view class="fleet_introduce">
							<u-read-more ref="uReadMore" :toggle="true" :shadowStyle="shadowStyle" closeText="查看全部"
								:showHeight="20">
								<rich-text :nodes="item.fleetProfile"></rich-text>
							</u-read-more>

							<!-- <view class="fleet_text" v-if="item.textShow">{{item.fleetProfile}}</view>
							<view class="" v-else>{{item.fleetProfile}}</view>
								<span class="btn_change" @click="textChange(index)">{{switchtext}}</span> -->

						</view>
						<view class="" v-if="item.img">
							<u-upload class="uview-upload" :fileList="item.img" :deletable="false" name="1" multiple
								:maxCount="1">
							</u-upload>
						</view>
					</view>
				</view>
				<u-loadmore :status="status"  :nomore-text="nomoreText"  />
			</view>

			<!-- <view v-if="formData.length == 0" style="background: #FFFFFF;text-align: center;">
				暂无数据
			</view> -->
		</view>
		<u-toast ref="uToast"></u-toast>
		<u-modal :show="isShowAlert" :title="alertTitle" :closeOnClickOverlay='true' :showCancelButton='true'
			confirmColor='#2772FB' @confirm="confirmClick" @close="cancelClick" @cancel="cancelClick"></u-modal>
		<u-modal :show="tipsShow" :content='tipsText' :confirmText="btnTips" @confirm="authentication"></u-modal>
	</view>
</template>

<script>
	import itmisterAddressPicker from '@/components/itmister-address-picker/itmister-address-picker.nvue'
	import itmisterAddressPickerOther from '@/components/itmister-address-picker/itmister-address-picker-other.nvue'
	export default {
		components: {
			itmisterAddressPicker,
			itmisterAddressPickerOther
		},
		data() {
			return {
				indexbtn: 1,
				routeData: [], //列表
				// show1: false,
				// show2: false,
				title1: "",
				title2: "",
				sendInfo: {
					sendProvince: "",
					sendCity: "",
					sendArea: ""
				},
				unloadInfo: {
					unloadProvince: "",
					unloadCity: "",
					unloadArea: ""
				},
				fleetLocation: {},
				formData: [],
				searchKeyWord: "",
				province: "", //省
				city: "", //市
				alertTitle: "",
				isShowAlert: false,
				commonId: "",
				addMember: {},
				tipsShow: false,
				tipsText: "",
				btnTips: '去认证',
				fleetShow: false,
				columns: [],
				fleetInviteList: [],
				//文本折叠
				shadowStyle: {
					backgroundImage: "none",
					paddingTop: "0",
				},
				status: 'loadmore',
				 nomoreText: '实在没有了'
			}
		},
		created() {},
		onShow() {
			if (uni.getStorageSync("sendInfo")) { //从缓存中获取  上一次的装车地 卸车地
				this.sendInfo = uni.getStorageSync("sendInfo")
				this.title1 = this.sendInfo.sendProvince + this.sendInfo.sendCity + this.sendInfo.sendArea
			} else {
				this.sendInfo.sendProvince = "北京"
				this.title1 = "北京"
			}
			if (uni.getStorageSync("unloadInfo")) {
				this.unloadInfo = uni.getStorageSync("unloadInfo")
				this.title2 = this.unloadInfo.unloadProvince + this.unloadInfo.unloadCity + this.unloadInfo.unloadArea
			} else {
				this.title2 = '全国'
				this.unloadInfo.unloadProvince = '全国'
			}
			if (uni.getStorageSync("fleetLocation")) {
				this.province = uni.getStorageSync("fleetLocation").province
				this.city = uni.getStorageSync("fleetLocation").city
			} else {
				this.province = ''
				this.city = '北京'
			}
			this.commonId = uni.getStorageSync("firstAuthentication").commonId
			this.checking()
			this.getList()
		},
		onLoad() {},
		methods: {
			checking() {
				this.statusVal = uni.getStorageSync("firstAuthentication").authenticationStatus
				if (uni.getStorageSync("firstAuthentication")) {
					if (this.statusVal != "已认证" && this.statusVal != "已过期") {
						uni.setTabBarItem({
							index: 1,
							text: '车友',
							pagePath: "/pages/riders/checkPage",
							iconPath: 'static/images/common/zhaoche.png',
							selectedIconPath: 'static/images/common/zhaoche_check.png'
						})
						uni.switchTab({
							url: '/pages/riders/checkPage'
						});
					} else {
						uni.setTabBarItem({
							index: 1,
							text: '车友',
							pagePath: "/pages/riders/index",
							iconPath: 'static/images/common/zhaoche.png',
							selectedIconPath: 'static/images/common/zhaoche_check.png'
						})
						uni.switchTab({
							url: '/pages/riders/index'
						});
					}
				} else if (!uni.getStorageSync("firstAuthentication") && !uni.getStorageSync("userInfo")) { //判断有没有登录
					this.tipsShow = true
					this.tipsText = "您尚未登录，请前去登录！"
					this.btnTips = "去登录"
				} else if (!uni.getStorageSync("firstAuthentication")) { //注册登录后并没有认证司机
					uni.setTabBarItem({
						index: 1,
						text: '车友',
						pagePath: "/pages/riders/checkPage",
						iconPath: 'static/images/common/zhaoche.png',
						selectedIconPath: 'static/images/common/zhaoche_check.png'
					})
					uni.switchTab({
						url: '/pages/riders/checkPage'
					});
				}
			},
			fleetClose() {
				this.fleetShow = false
			},
			invitation(item) {
				this.addMember = {}
				this.columns = []
				this.addMember.commonId = item.commonId
				this.addMember.driverNickname = item.driverNickname
				this.addMember.driverPortrait = item.driverPortrait

				this.$request.baseRequest('get', '/fleetInfo/fleetInfos', {
						commonId: this.commonId,
					}).then(res => {
						if (res.code == 200) {
							this.fleetInviteList = res.data
							let flrrtArray = []
							for (let i = 0; i < res.data.length; i++) {
								flrrtArray.push(res.data[i].fleetName)
							}
							this.columns.push(flrrtArray)
							if (this.columns.length == 0) {
								uni.$u.toast("无可邀请的车队");
							} else {
								this.fleetShow = true
							}
						} else {
							uni.$u.toast(res.message);
						}

					})
					.catch(res => {
						uni.$u.toast(res.message);
					});
			},
			invitationCheng(e) { //邀请
				this.addMember.fleetId = this.fleetInviteList[e.indexs[0]].id
				this.fleetShow = false
				this.addMember.joinFlag = 2
				this.$request.baseRequest('post', '/fleetMemberInfo/api/addFleetMemberInfo', this.addMember).then(res => {
						if (res.code == 200) {
							this.$refs.uToast.show({
								type: 'success',
								message: "邀请已发出",
							})
						} else {
							uni.$u.toast(res.message);
						}
					})
					.catch(res => {
						uni.$u.toast(res.message);
					});
			},
			authentication() {
				this.tipsShow = false
				if (this.statusVal == '未认证') {
					this.$u.route("/pages/mine/driverCertification")
				} else if (this.statusVal == '未通过') {
					this.$u.route("/pages/mine/editDriverCertification")
				} else if (this.statusVal == '审核中') {
					// this.$u.route("")
					uni.switchTab({
						url: '/pages/mine/index'
					});
				} else {
					uni.$u.route('/pages/public/login');
				}
			},
			selectAddress(num) {
				if (num == 1) {
					this.$refs.addressElone.show();
				} else if (num == 2) {
					this.$refs.addressEltwo.show();
				}
			},
			selectChange() {
				this.$refs.addressElthree.show();
			},
			// 确认选中
			confirmChangeOne(address) {
				if (address.province == '全国') {
					uni.$u.toast("发货地不可以是全国")
					// this.$refs.addressElone.show();
					return
				}
				this.sendInfo.sendProvince = address.province ? address.province : ''
				this.sendInfo.sendCity = address.city ? address.city : ''
				this.sendInfo.sendArea = address.area ? address.area : ''
				if (address.city == '全省') {
					this.title1 = address.province
					this.sendInfo.sendCity = ""
					this.sendInfo.sendArea = ""
				} else if (address.area == '全市') {
					this.title1 = address.province + address.city
					this.sendInfo.sendArea = ""
				} else {
					this.title1 = address.province + address.city + address.area;
				}
				uni.setStorageSync("sendInfo", this.sendInfo)
				this.getList()
			},
			confirmChangeTwo(address) {
				this.unloadInfo.unloadProvince = address.province ? address.province : ''
				this.unloadInfo.unloadCity = address.city ? address.city : ''
				this.unloadInfo.unloadArea = address.area ? address.area : ''
			
				if (address.city == '全省') {
					this.title2 = address.province
					this.unloadInfo.unloadCity = ""
					this.unloadInfo.unloadArea = ""
				} else if (address.area == '全市') {
					this.title2 = address.province + address.city
					this.unloadInfo.unloadArea = ""
				} else {
					if(address.province == '全国'){
						this.title2 = address.province
					}else{
						this.title2 = address.province + address.city + address.area;
						}
				}
				uni.setStorageSync("unloadInfo", this.unloadInfo)
				this.getList()
			},
			confirmChangethree(address) {
				this.province = address.province
				this.city = address.city
				if (address.city == "全省") {
					this.city = ""
				}
				this.fleetLocation.province = address.province
				this.fleetLocation.city = address.city == "全省" ? "" : address.city
				uni.setStorageSync("fleetLocation", this.fleetLocation)
				this.getList()
			},
			joinFleet(item) {
				this.addMember.commonId = this.commonId
				this.addMember.driverNickname = uni.getStorageSync("firstAuthentication").driverCall
				this.addMember.driverPortrait = uni.getStorageSync("userInfo").avatarUrl
				this.addMember.fleetId = item.id
				this.alertTitle = "确定申请加入该车队？"
				this.isShowAlert = true
			},
			// addressChange(num) {
			// 	if (num == 1) {
			// 		this.show1 = true
			// 		this.show2 = false
			// 	} else {
			// 		this.show1 = false
			// 		this.show2 = true
			// 	}
			// },
			cancelClick() {
				this.isShowAlert = false
			},
			confirmClick() {
				this.isShowAlert = false
				this.addMember.joinFlag = 1
				this.$request.baseRequest('post', '/fleetMemberInfo/api/addFleetMemberInfo', this.addMember).then(res => {
						if (res.code == '200') {
							this.$refs.uToast.show({
								type: 'success',
								message: "申请成功，等待队长审核",
							})
							this.getList()
						} else {
							this.$refs.uToast.show({
								type: 'success',
								message: "申请失败，请稍后重试",
							})
						}
					})
					.catch(res => {
						uni.$u.toast(res.message);
					});
			},
			getList() {
				this.status = 'loading';
				if (this.indexbtn == 1) {
					this.$request.baseRequest('get', '/commonRoute/driverList', {
							pageSize: 10,
							currentPage: 1,
							sendProvince: this.sendInfo.sendProvince,
							sendCity: this.sendInfo.sendCity,
							sendArea: this.sendInfo.sendArea,
							unloadProvince: this.unloadInfo.unloadProvince,
							unloadCity: this.unloadInfo.unloadCity,
							unloadArea: this.unloadInfo.unloadArea
						}).then(res => {
							if (res.code == 200) {
								this.routeData = res.data.records
								for (let i = 0; i < this.routeData.length; i++) {
									if (this.routeData[i].startAdress) {
										this.routeData[i].startAdress = this.routeData[i].startAdress.split(",")
									}
									if (this.routeData[i].endAdress) {
										this.routeData[i].endAdress = this.routeData[i].endAdress.split(",")
									}
								}
								if(res.data.total == 0){
									this.status = 'nomore'
								}else{
									this.status = 'loadmore'
								}
								
							}
						})
						.catch(res => {
							uni.$u.toast(res.message);
						});
				} else {
					let that = this
					this.$request.baseRequest('get', '/fleetInfo/selectFleetInfo', {
							commonId: this.commonId,
							province: this.province, //省
							city: this.city, //市
							searchKeyWord: this.searchKeyWord,
							pageSize: 10,
							currentPage: 1
						}).then(res => {
							that.formData = res.data.records
							for (let i = 0; i < that.formData.length; i++) {
								that.formData[i].textShow = false
								if (that.formData[i].fleetUrl) {
									that.formData[i].img = []
									let imgList = that.formData[i].fleetUrl.split(",")
									for (let j = 0; j < imgList.length; j++) {
										that.formData[i].img.push({
											url: imgList[j]
										})
									}
								}
							}
							if(res.data.total == 0){
								this.status = 'nomore'
							}else{
								this.status = 'loadmore'
							}
						})
						.catch(res => {
							uni.$u.toast(res.message);
						});
				}
			},
			changebtn(num) {
				this.indexbtn = num
				this.getList()
			},
			// 回调参数为包含columnIndex、value、values
			confirm(e) {
				console.log('confirm', e)
				this.show = false
			},
			replace() {
				if (this.unloadInfo.unloadProvince == "全国") {
					uni.$u.toast("发货地不可以是全国")
					return
				}
				let _obj = {}
				_obj = JSON.parse(JSON.stringify(this.sendInfo))
				this.sendInfo.sendProvince = this.unloadInfo.unloadProvince
				this.sendInfo.sendCity = this.unloadInfo.unloadCity
				this.sendInfo.sendArea = this.unloadInfo.unloadArea
				this.unloadInfo.unloadProvince = _obj.sendProvince
				this.unloadInfo.unloadCity = _obj.sendCity
				this.unloadInfo.unloadArea = _obj.sendArea
				let text = ""
				text = this.title1
				this.title1 = this.title2
				this.title2 = text
				this.getList()
			},
			myPage() {
				uni.$u.route("/pages/riders/myTeam")
			}
		}
	}
</script>

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

		.row1 {
			display: flex;
			justify-content: flex-end;

			.flex-end {
				margin-top: 50rpx;
				margin-right: 30rpx;
			}

			.center_top {
				width: 40%;
				margin: 60rpx auto 0;

				.center_top_btn {
					width: 50%;
					text-align: center;
					color: #000000;
					font-size: 42rpx;
					font-weight: 600;
				}

				.center_top_btn1 {
					color: #BBBBBB;
				}
			}
		}

		.top_img {
			width: 70rpx;
			height: 70rpx;
		}
	}


	.route {
		padding: 40rpx;
		margin-top: 40rpx;
		background: #FFFFFF;

		.route_item {
			margin-bottom: 40rpx;
			width: 100%;

			.route_invite {
				width: 146rpx;
				height: 54rpx;
				border-radius: 35px;
				text-align: center;
				color: #FFFFFF;
				line-height: 54rpx;
				background: #2772FB;
			}

			.driver_name {
				width: 50%;
				margin: 20rpx 0 0 30rpx;
				color: #333333;
				font-size: 30rpx;
			}

			.driver_invite {
				display: flex;
				width: 50%;
				justify-content: flex-end;
			}
		}

		.address {
			margin-left: 30rpx;

			// line-height: 34rpx;
			.spots {
				width: 20rpx;
				height: 20rpx;
				display: inline-block;
				border-radius: 10rpx;
				margin-right: 10rpx;
				margin-bottom: 4rpx
			}

			.spot1 {
				background: #2772FB;
			}

			.spot2 {
				background: #FE6300;
			}
		}
	}

	.driver {
		.screen {
			background-color: #FFFFFF;
			width: 92%;
			border-radius: 20rpx;
			height: 200rpx;
			margin: 40rpx auto 30rpx;
			// margin-top: 60rpx;

			.screen_item {
				padding: 60rpx 30rpx;
				width: 40%;
				text-align: center;

				.screen_sign {
					width: 40rpx;
					height: 40rpx;
					text-align: center;
					margin: 0 auto;
					border-radius: 6px;
					color: #FFFFFF;
					font-size: 22rpx;
					line-height: 40rpx;
				}

				.sign1 {
					background: #2772FB;
				}

				.sign2 {
					background: #FE6300;
				}
			}

			.exchange {
				line-height: 200rpx;
				margin-top: 60rpx;
			}
		}
	}

	.riders {
		.riders_top {
			margin-top: 40rpx;

			.riders_city {
				margin-top: 10rpx;
				margin: 10rpx 30rpx;
			}
		}

		.fleet {
			padding: 30rpx;
			margin-top: 40rpx;
			background: #FFFFFF;
			border-top-right-radius: 40rpx;
			border-top-left-radius: 40rpx;

			.fleet_item {

				// margin-top: 10rpx;
				width: 100%;
				margin-bottom: 20rpx;

				.fleet_name {
					margin-left: 20rpx;
					width: 70%;
				}

				.fleet_invite {
					text-align: center;
					background-color: #2772FB;
					width: 128rpx;
					height: 66rpx;
					line-height: 66rpx;
					border-radius: 35rpx;
					color: #fff;
				}

				.fleet_introduce {
					margin: 40rpx 0;
					position: relative;

					// .fleet_text{
					// 	overflow: hidden;
					// 	word-break: break-all;  /* break-all(允许在单词内换行。) */
					// 	text-overflow: ellipsis;  /* 超出部分省略号 */
					// 	display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
					// 	-webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
					// 	-webkit-line-clamp: 3; /** 显示的行数 **/
					// }
					.btn_change {
						position: absolute;
						right: 0rpx;
						bottom: 0rpx;
						color: #2772fb;
					}
				}

				.fleet_member {
					margin-top: 20rpx;
				}

				.fleet_number {
					margin: 6rpx 10rpx;
					color: #ABABAB;
					font-size: 24rpx;
				}
			}
		}


	}

	.jt-icon {
		position: relative;
		top: 16rpx;
		width: 60rpx;
		margin: 0 20rpx;
		// margin-top: 10rpx;

	}
</style>