wangluohuoyun-app/pages/riders/index.vue

<template>
	<view class="center">
		<view class="row1">
			<u--image class="flex-end" :showLoading="true" src="../../static/images/reders/geren.png" width="30px"
				height="30px" @click="myPage"></u--image>
		</view>
		<view class="flex center_top">
			<u-button :type="indexbtn == 1? 'primary':''" @click="changebtn(1)">司机</u-button>
			<u-button :type="indexbtn == 2? 'primary':''" @click="changebtn(2)">车队</u-button>
			<view class="">司机</view>
			<view class="">车队</view>
		</view>
		<view class="driver" v-show="indexbtn == 1">
			<view class="flex screen">
				<view @click="selectAddress(1)" class="screen_item">{{title1 ? title1 : "请选择地址"}}</view>
				<itmister-address-picker ref="addressElone" @confirmChange="confirmChangeOne"></itmister-address-picker>
				<view @click="replace">--></view>
				<view @click="selectAddress(2)" class="screen_item">{{title2 ? title2 : "请选择地址"}}</view>
				<!-- <itmister-address-picker ref="addressEltwo" :wholeCountry="true" @confirmChange="confirmChangeTwo"></itmister-address-picker> -->
			</view>
			<view class="route" v-for="(item,index) in routeData">
				<view class="flex">{{item.driverNickname}}
					<view class="" style="margin-left: 30px;" @click="invitation(item)">邀请</view>
					<u-picker :show="fleetShow" :columns="columns" @cancel="fleetClose" @confirm="invitationCheng"></u-picker>
				</view>
				<view>{{item.sendCity ? item.sendCity: item.sendProvince }}{{item.sendArea}} ----->
					{{item.unloadCity ? item.unloadCity: item.unloadProvince }}{{item.unloadArea}}
				</view>
			</view>
			<view v-if="routeData.length == 0">
				<u-empty mode="search" icon="http://cdn.uviewui.com/uview/empty/car.png"></u-empty>
			</view>

		</view>
		<view class="" v-show="indexbtn == 2">
			<view class="flex">
				<view @click="selectChange" class="screen_item">{{city ? city : province}}</view>
				<!-- <itmister-address-picker ref="addressElthree" :showCheck="false" @confirmChange="confirmChangethree"></itmister-address-picker> -->
				<u-search placeholder="输入车队信息关键字" v-model="searchKeyWord" @change="getList" maxlength="15"></u-search>
			</view>
			<view v-for="(item,index) in formData" class="flex fleet">
				<view class="fleet_right">
					<view class="flex">
						<view class="fleet_name">
							{{item.fleetName}}({{item.fleetMemberNum}})
						</view>
						<view class="fleet_invite" v-if="!item.fleetMemberStatus" @click="joinFleet(item)">加入</view>
						<view class="fleet_invite" v-else @click="joinFleet(item)">{{item.fleetMemberStatus}}</view>
					</view>
					<view class="">
						<u-upload class="uview-upload" :fileList="item.img" :deletable="false" name="1" multiple
							:maxCount="1">
						</u-upload>
					</view>
					<view>
						{{item.fleetProfile}}
					</view>
				</view>
			</view>
			<view v-if="formData.length == 0">
				<u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/car.png"></u-empty>
			</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'
	export default {
		components: {
			itmisterAddressPicker
		},
		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:[]
			}
		},
		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
			if(uni.getStorageSync("firstAuthentication")){
				this.statusVal = uni.getStorageSync("firstAuthentication").authenticationStatus
				if(this.statusVal == '未认证'){
					this.tipsShow = true
					this.tipsText = "认证司机身份后，可查看车友信息"
				}
				if(this.statusVal == '审核中'){
					this.tipsShow = true
					this.tipsText = "司机身份审核中"
					this.btnTips = "我知道了"
				}else if(this.statusVal == '未通过'){
					this.tipsShow = true
					this.tipsText = "司机身份未通过审核"
					this.btnTips = "重新认证"
				}
			}else{
				this.tipsShow = true
				this.tipsText = "您尚未登录，请前去登录！"
				this.btnTips = "去登录"
			}
			this.getList()
		},
		onLoad() {},
		methods: {
			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 => {
						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
						}
					})
					.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{
					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
				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() {
				if (this.indexbtn == 1) {
					this.$request.baseRequest('get', '/commonRoute/select', {
							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
							}
						})
						.catch(res => {
							uni.$u.toast(res.message);
						});
				} else {
					this.$request.baseRequest('get', '/fleetInfo/selectFleetInfo', {
							commonId: this.commonId,
							province: this.province, //省
							city: this.city, //市
							searchKeyWord: this.searchKeyWord,
							pageSize: 10,
							currentPage: 1
						}).then(res => {
							this.formData = res.data.records
							let that = this
							for (let i = 0; i < this.formData.length; i++) {
								if (this.formData[i].fleetUrl) {
									this.formData[i].img = []
									let imgList = this.formData[i].fleetUrl.split(",")
									for (let j = 0; j < imgList.length; j++) {
										that.formData[i].img.push({
											url: imgList[j]
										})
									}
								}
							}
						})
						.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;
			margin-top: 46rpx;
			margin: 30rpx 30rpx 0 0;
		}

		.center_top {
			margin-top: 20rpx;
			padding: 0 30rpx;
		}
	}

	.fleet {
		padding: 0 30rpx;
		margin: 30rpx 0;

		// .fleet_img {
		// 	width: 20%;
		// }

		.fleet_right {
			margin-top: 10rpx;
			width: 100%;

			.fleet_name {
				width: 80%;
			}

			.fleet_invite {
				text-align: right;
				background-color: #5878e8;
				color: #fff;
			}
		}
	}

	.route {
		padding: 30rpx;
	}

	.driver {
		.screen {
			margin-top: 10rpx;
			.screen_item{
				width: 46%;
				text-align: center;
			}
		}
	}
</style>