FE_preschoolEdu_miniProgram/team/infoEdit/infoEdit.vue

<template>
	<view class="page">
		<view class="block">
			<view class="form-list edit-form">
				<view class="line with-arrow">
					<view class="name">LOGO</view>
					<image class="avatar" :src="form.logoUrl" @click="uploadLogo"></image>
				</view>
				<view class="line with-arrow">
					<view class="name">{{ platformName }}名称</view>
					<input type="text" :placeholder="'请输入' + platformName + '幼儿园名称'" v-model="form.classificationName" :disabled="info.authenticationStatus !== 0" />
				</view>
				<view class="line textarea-line">
					<view class="name">{{ platformName }}slogan</view>
					<textarea :placeholder="'请输入' + platformName + 'slogan'" v-model="form.slogan"></textarea>
				</view>
				<view class="line with-arrow">
					<view class="name">省份</view>
					<view class="inline">
						<uni-data-picker class="picker-input" :clear-icon="false" placeholder="请选择省份" popup-title="请选择省份" preload :localdata="provinces" :map="{text: 'provinceName', value: 'provinceName'}" v-model="form.province" @change="getCity"></uni-data-picker>
					</view>
				</view>
				<view class="line with-arrow">
					<view class="name">城市</view>
					<view class="inline">
						<uni-data-picker class="picker-input" :clear-icon="false" :readonly="!form.province" placeholder="请选择城市" popup-title="请选择城市" preload :localdata="cities" :map="{text: 'cityName', value: 'cityName'}" v-model="form.city"></uni-data-picker>
					</view>
				</view>
				<view class="line textarea-line">
					<view class="name">地址</view>
					<textarea placeholder="请输入详细地址" v-model="form.address"></textarea>
				</view>
				<view class="line with-arrow">
					<view class="name">联系电话</view>
					<input type="text" placeholder="请输入联系电话" v-model="form.phone" />
				</view>
				<view class="line textarea-line no-bd">
					<view class="name">{{ platformName }}简介</view>
					<textarea :placeholder="'请输入' + platformName + '简介'" v-model="form.briefIntroduction"></textarea>
				</view>
				<view class="py">
					<uni-file-picker v-model="desPics" limit="3" title="最多选择3张图片" :auto-upload="false" @select="uploadDes"></uni-file-picker>
				</view>
			</view>
		</view>
		
		
		<view class="block">
			<view class="form-list edit-form">
				<view class="line with-arrow no-bd">
					<view class="name">二维码描述一</view>
					<input type="text" placeholder="输入二维码描述一" v-model="form.qrCodeOneName" />
					<uni-icons type="right" size="18" color="#ababab"></uni-icons>
				</view>
				<view class="py">
					<uni-file-picker v-model="qrCodeOne" limit="1" title="上传二维码一" :auto-upload="false" @select="e => uploadQrcode(e, 'qrCodeOne')" ></uni-file-picker>
				</view>
			</view>
		</view>
		
		<view class="block">
			<view class="form-list edit-form">
				<view class="line with-arrow no-bd">
					<view class="name">二维码描述二</view>
					<input type="text" placeholder="输入二维码描述二" v-model="form.qrCodeTwoName" />
					<uni-icons type="right" size="18" color="#ababab"></uni-icons>
				</view>
				<view class="py">
					<uni-file-picker v-model="qrCodeTwo" limit="1" title="上传二维码二" :auto-upload="false" @select="e => uploadQrcode(e, 'qrCodeTwo')" ></uni-file-picker>
				</view>
			</view>
		</view>
		
		<view class="block">
			<view class="form-list edit-form">
				<view class="line with-arrow no-bd">
					<view class="name">二维码描述三</view>
					<input type="text" placeholder="输入二维码描述三" v-model="form.qrCodeThreeName" />
					<uni-icons type="right" size="18" color="#ababab"></uni-icons>
				</view>
				<view class="py">
					<uni-file-picker v-model="qrCodeThree" limit="1" title="上传二维码三" :auto-upload="false" @select="e => uploadQrcode(e, 'qrCodeThree')" ></uni-file-picker>
				</view>
			</view>
		</view>
		
		<view class="btn-wrap">
			<view class="btn" @click="submit">保存</view>
		</view>
	</view>
</template>

<script>
	import { queryProvince, queryCity, queryTeamInfo, updateTeamInfo, enterpriseCertificationStatus } from '@/apis/modules/user.js'
	import OSS from '@/libs/Oss/upload'
	import Common from '@/config/common'
	export default {
		data() {
			return {
				openId: uni.getStorageSync('openId'),
				info: {},
				form: {
					address: '',
					briefIntroduction: '',
					city: '',
					classificationName: '',
					id: uni.getStorageSync('teamId'),
					logoUrl: '',
					pictureUrl: '',
					province: '',
					qrCodeOneName: '',
					qrCodeOneUrl: '',
					qrCodeThreeName: '',
					qrCodeThreeUrl: '',
					qrCodeTwoName: '',
					qrCodeTwoUrl: '',
					slogan: '',
				},
				qrCodeOne: [],
				qrCodeTwo: [],
				qrCodeThree: [],
				qrcodeLen: 1,
				provinces: [],
				cities: [],
				desPics: [],
				submiting: false,
				uploading: false,
			}
		},
		computed: {
			// 平台名字
			platformName() {
				return this.info.platformSource === '6' ? '供应商' : this.info.platformSource === '5' ? '幼儿园' : ''
			},
		},
		onLoad() {
			this.getEnterInfo()
			this.getProvince()
		},
		methods: {
			// 企业认证信息
			async getEnterInfo() {
				const { data } = await enterpriseCertificationStatus(this.openId)
				if (data) {
					this.info = data
				}
			},
			// 获取个人信息
			getInfo() {
				queryTeamInfo({
					teamId: this.form.id
				}).then(res => {
					const data = res.teamInfo
					if (!data.logoUrl) data.logoUrl = Common.avatar
					
					if (data.pictureUrl) {
						const pics = data.pictureUrl.split(',')
						const result = []
						pics.forEach(url => {
							result.push({
								url
							})
						})
						this.desPics = result
					}
					
					// 二维码回显
					if (data.qrCodeOneUrl) {
						this.qrCodeOne = [{
							url: data.qrCodeOneUrl
						}]
					}
					if (data.qrCodeTwoUrl) {
						this.qrCodeTwo = [{
							url: data.qrCodeTwoUrl
						}]
					}
					if (data.qrCodeThreeUrl) {
						this.qrCodeThree = [{
							url: data.qrCodeThreeUrl
						}]
					}
					
					this.form = data
					this.$nextTick(() => {
						data.province && this.getCity()
					})
				}).catch(e => {})
			},
			// 获取省份
			async getProvince() {
				const { list } = await queryProvince()
				this.provinces = list
				this.getInfo()
			},
			// 获取城市
			async getCity() {
				const { list } = await queryCity({
					provinceId: this.provinces.find(e => e.provinceName == this.form.province).provinceId
				})
				this.cities = list
				this.cityId = ''
			},
			// 上传logo
			uploadLogo() {
				const that = this
				uni.chooseImage({
					success: (res) => {
						const file = res.tempFilePaths[0];
						OSS(file, ({ url }) => {
							that.form.logoUrl = url
						})
					}
				});
			},
			// 上传描述图片
			uploadDes(e){
				OSS(e.tempFilePaths[0], (res) => {
					this.desPics.push({
						name: res.name,
						extname: res.ext,
						url: res.url,
					})
				})
			},
			// 上传二维码
			uploadQrcode(e, field){
				OSS(e.tempFilePaths[0], (res) => {
					this[field].push({
						name: res.name,
						extname: res.ext,
						url: res.url,
					})
				})
			},
			// 提交
			async submit() {
				if (this.submiting) return false
				const { form } = this
				if (!form.classificationName) return this.$util.errMsg(`请输入幼儿园名称！`)
				this.submiting = true
				form.pictureUrl = this.desPics.map(e => e.url).join()
				form.qrCodeOneUrl = this.qrCodeOne.length ? this.qrCodeOne[0].url : ''
				form.qrCodeTwoUrl = this.qrCodeTwo.length ? this.qrCodeTwo[0].url : ''
				form.qrCodeThreeUrl = this.qrCodeThree.length ? this.qrCodeThree[0].url : ''
				try {
					await updateTeamInfo(form)
					
					this.$util.sucMsg('保存成功！')
					setTimeout(() => {
						uni.navigateBack()
					}, 1500)
				} catch(e) {
					this.submiting = false
				}
			}
		}
	}
</script>

<style scoped lang="scss">
.page {
	padding-bottom: 170rpx;
	-webkit-overflow-scrolling: touch;
}
.avatar {
	width: 80rpx;
	height: 80rpx;
	border: 0;
	border-radius: 50%;
}
/deep/.picker-input {
	.arrow-area {
		display: none;
	}
	.input-value, .selected-list {
		padding: 0;
	}
}
</style>