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='right' clearable border="none" maxlength="15"
					v-model="formData.fleetName">
				</u--input>
			</view>
		</view>
		<view class="flex row form_css">
			<view class="left-text">常驻城市</view>
			<view class="right-text">
				<view @click="selectAddress">{{title1 ? title1 : "选择常驻地址"}}
					<image src="../../static/images/myimg/gengduo1.png" mode=""
						style="width: 18rpx;height: 24rpx;margin:14rpx 0 0 20rpx;"></image>
				</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" style="margin-right: 30rpx;" checked="true"></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 class="textarea" v-model="formData.fleetProfile" placeholder="输入车队简介,10-500个字" count
				border="none" 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() {
			this.$forceUpdate()

		},
		onLoad(options) {
			this.id = options.id
			if (this.id) { //修改
				uni.setNavigationBarTitle({
					title: '设置'
				})
				this.getList()
			}
		},
		onNavigationBarButtonTap(e) {
			this.submit()
		},
		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
						if (this.formData.city) {
							this.title1 = this.formData.province + this.formData.city
						}
						if (this.formData.area) {
							this.title1 = this.formData.province + this.formData.city + this.formData.area
						}
						if (this.formData.coverUrl) {
							let coverUrlList = this.formData.coverUrl.split(",")
							for (let i = 0; i < coverUrlList.length; i++) {
								this.fileList1.push({
									url: coverUrlList[i]
								})
							}
						}

						if (this.formData.fleetUrl) {
							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.formData.fleetName) {
					this.$refs.uToast.show({
						type: 'error',
						message: "请输入车队名称！",
					})
					return
				}
				if (this.formData.fleetName.length < 4) {
					this.$refs.uToast.show({
						type: 'error',
						message: "车队名称需4-15字！",
					})
					return
				}

				if (!this.title1) {
					this.$refs.uToast.show({
						type: 'error',
						message: "请选择常驻地址！",
					})
					return
				}
				if (!this.formData.invitationPermission) {
					this.$refs.uToast.show({
						type: 'error',
						message: "请设置邀请权限！",
					})
					return
				}
				if (!this.formData.fleetProfile) {
					this.$refs.uToast.show({
						type: 'error',
						message: "请填写车队简介！",
					})
					return
				}
				if (this.formData.fleetProfile.length < 10) {
					this.$refs.uToast.show({
						type: 'error',
						message: "车队简介需10 - 500个字！",
					})
					return
				}
				if (this.fileList1.length == 0) {
					this.$refs.uToast.show({
						type: 'error',
						message: "请上传车队封面！",
					})
					return
				}
				if (this.id) { //编辑
					this.formData.flag = 2
					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">
	.center {
		padding: 30rpx;
	}

	.form_data {
		// padding: 30rpx;
	}

	.form_css {
		width: 100%;
		display: flex;
		margin: 30rpx 0;
		height: 80rpx;
		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;

			.jiantou {
				color: #CCCCCC;
				width: 23rpx;
				height: 23rpx;
				display: inline-block;
			}
		}

	}

	.textarea {
		background: #F9F9FB;
		margin: 21rpx 0 80rpx 0;
	}
</style>