wangluohuoyun-app/pages/riders/addFleet.vue

<template>
	<view class="center">
		
		<view class="flex row form_css">
			<view class="left-text">车队名称</view>
			<view class="right-text">
				<u--input placeholder="输入车队名称,4-15个字" inputAlign='left' border="none"  v-model="formData.fleetName">
				</u--input>
			</view>
		</view>
		<view class="flex row form_css">
			<view class="left-text">常驻城市</view>
			<view class="right-text">
				<!-- <regionPicker :multiIndex_="selections1" @region_="regionChange1" custom_="请选择"
					@selecteRegion_="selecteRegion1" title_="全国" /> -->
				<!-- <view @click="show = true">{{title1 ? title1 : "请选择地址"}}</view>
				<Linkage @conceal="conceal1" class="flex" v-if="show" ref="uDropdown"></Linkage> -->
				<view @click="selectAddress">{{title1 ? title1 : "请选择地址"}}</view>
				<itmister-address-picker ref="addressElone" @confirmChange="confirmChangeOne"></itmister-address-picker>
			</view>
		</view>
		<view class="flex row form_css">
			<view class="left-text">邀请权限</view>
			<view class="right-text">
				<u-radio-group v-model="formData.invitationPermission">
					<u-radio key="1" label="所有队员" name="1"></u-radio>
					<u-radio key="2" label="仅队长" name="2"></u-radio>
				</u-radio-group>
			</view>
		</view>
		<view class="row">
			<view class="left-text">车队简介</view>
			<u--textarea v-model="formData.fleetProfile" placeholder="请输入内容" autoHeight maxlength="500" height="100"></u--textarea>
		</view>
		<view class="row">
			<view class="left-text">封面照片</view>
			<u-upload class="uview-upload" :fileList="fileList1" @afterRead="afterRead($event)" @delete="deletePic"
				name="1" multiple :maxCount="1">
				<!-- <image src="fileList1[0]" 
					mode="widthFix" style="width: 250px;height: 150px;"></image> -->
				</u-upload>
		</view>
		<view class=" row ">
			<view class="left-text">车队照片</view>
			<u-upload class="uview-upload" :fileList="fileList2" @afterRead="afterRead1($event)" @delete="deletePic"
				name="2" multiple :maxCount="9" style="z-index: 9999;"></u-upload>
		</view>
			<u-toast ref="uToast"></u-toast>
		<u-button type="primary" @click="submit">提交</u-button>
		
	</view>
</template>

<script>
	// import Linkage from '@/components/gaojianghua-linkage/linkage.vue'
	import uploadImage from '@/components/ossutil/uploadFile.js';
	import itmisterAddressPicker from '@/components/itmister-address-picker/itmister-address-picker.nvue'
	export default{
		components: {
			// Linkage
			itmisterAddressPicker
		},
		data(){
			return{
				formData:{
					fleetMemberInfo:{},
					invitationPermission:1,
				},
				show:false,
				title1:"",
				fileList1: [],
				fileList2:[]
			}
		},
		onShow(){
			
		},
		onLoad(options){
			this.id = options.id
			if(this.id){//修改
				uni.setNavigationBarTitle({
					title:'设置'
				})
				this.getList()
			}
		},
		methods:{
			selectAddress() {
					this.$refs.addressElone.show();
			},
			// 确认选中
			confirmChangeOne(address) {
				// if(address.province == '全国'){
				// 	uni.$u.toast("发货地不可以是全国")
				// 	// this.$refs.addressElone.show();
				// 	return
				// }
				this.formData.province = address.province ? address.province : ''
				this.formData.city = address.city ? address.city : ''
				this.formData.Area = address.area ? address.area : ''
				if(address.city == '全省'){
					this.title1 = address.province
					this.formData.sendCity = ""
					this.formData.sendArea = ""
				}else if(address.area == '全市'){
					this.title1 = address.province  + address.city
					this.formData.sendArea = ""
				}else{
					this.title1 = address.province  + address.city + address.area;
				}
			},
			getList(){
				this.$request.baseRequest('get', '/fleetInfo/getFleetInfo', {
						id: this.id
					}).then(res => {
						this.formData = res.data
						this.title1 = this.formData.province + this.formData.city + this.formData.area
						let coverUrlList = this.formData.coverUrl.split(",")
						for(let i = 0 ; i < coverUrlList.length ; i++){
							this.fileList1.push({
								url:coverUrlList[i]
							})
						}
						let fleetUrlList = this.formData.fleetUrl.split(",")
						// this.fileList2 = this.formData.fleetUrl.split(",")
						for(let i = 0 ; i < fleetUrlList.length ; i++){
							this.fileList2.push({
								url:fleetUrlList[i]
							})
						}
					})
					.catch(res => {
						uni.$u.toast(res.message);
					});
			},
			conceal1(param) {
				const {
					chooseprovince,
					choosecity,
					choosearea
				} = param
				// 获取到传过来的 省 市 区 县数据
				this.formData.province = chooseprovince
				this.formData.city = choosecity == '全部' ? "" : choosecity
				this.formData.area = choosearea == '全部' ? "" : choosearea
				this.title1 = chooseprovince + choosecity + choosearea
				if (chooseprovince == '全国') {
					this.succeed()
				}
				if (choosecity == '全部') {
					this.succeed()
				} else if (choosearea != '') {
					this.succeed()
				}
			},
			succeed() {
				// this.$refs.uDropdown.close();
				this.show = false
			},
			// 删除图片
			deletePic(event) {
				console.log(this[`fileList${event.name}`])
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				console.log(this[`fileList${event.name}`])
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				uploadImage('image',url, 'appData/',
					result => {
						// 上传成功回调函数
						if(this.formData.coverUrl){
							this.formData.coverUrl = this.formData.coverUrl+','+ result
						}else{
							this.formData.coverUrl = result
						}
						
					}
				)
			},
			// 新增图片
			async afterRead1(event) {
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise1(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise1(url) {
				uploadImage('image',url, 'appData/',
					result => {
						// 上传成功回调函数
						if(this.formData.fleetUrl){
							this.formData.fleetUrl = this.formData.fleetUrl+','+ result
						}else{
							this.formData.fleetUrl = result
						}
					}
				)
			},
			submit(){
				if(this.id){//编辑
					this.$request.baseRequest('post', '/fleetInfo/api/editFleetInfo', this.formData).then(res => {
							if (res.code == 200) {
								this.$refs.uToast.show({
									type: 'success',
									message: "车队修改成功！",
									complete() {
										// uni.$u.route("pages/riders/fleetSee")
										uni.navigateBack({
											delta: 1
										});
									}
								})
							}
						})
						.catch(res => {
							uni.$u.toast(res.message);
						});
				}else{
					this.formData.commonId = uni.getStorageSync("firstAuthentication").commonId
					this.formData.fleetMemberInfo.commonId = uni.getStorageSync("firstAuthentication").commonId
					this.formData.fleetMemberInfo.driverNickname = uni.getStorageSync("firstAuthentication").driverCall
					this.formData.fleetMemberInfo.driverPortrait = uni.getStorageSync("userInfo").avatarUrl
					this.$request.baseRequest('post', '/fleetInfo/api/addFleetInfo', this.formData).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">
	.form_data{
		// padding: 30rpx;
	}
	.form_css {
		width: 100%;
		display: flex;
		margin: 20rpx 0;
		height: 60rpx;
		border-bottom: 1px solid #eeeeee;
	
		.left-text {
			width: 50%;
			text-align: left;
		}
	
		.right-text {
			width: 50%;
			justify-content: flex-end;
			display: flex;
			text-align: right;
		}
	}
</style>