renshou/office/createTeam/index.vue

<template>
	<view>
		<view class="result fail" v-if="auditStatus == 2">
			<view class="ddflex"><image src="../static/images/cancel.png"></image>审核不通过</view>
			<text v-if="auditContent">不通过原因：{{auditContent}}</text>
		</view>
		<view class="con">
			<view class="title">{{opt.id?'修改团队信息':'创建团队'}}</view>
			<view class="tits">团队名称</view>
			<input v-model="title" placeholder="请输入团队名称 (10字内)" placeholder-class="placeholder" class="ipt" />
			<view class="tits">团队简介</view>
			<textarea v-model="description" placeholder="请输入团队简介" placeholder-class="placeholder" class="text"></textarea>
			<view class="tits">团队头像</view>
			<view class="imgbox ddflex">
				<view class="imgs" v-for="(item, index) in zhiPicUrls" :key="index">
					<image :src="item" class="img" @tap="previewImg(zhiPicUrls, index)" mode="aspectFill"></image>
					<image src="../static/images/close.png" class="del" @tap="cleanimages(index)"></image>
				</view>
				<view class="upload ddflex" @click="uploadImgs" v-if="zhiPicUrls.length < 1"><image src="../static/images/upload.png"></image></view>
			</view>
			<view class="tits">群二维码</view>
			<view class="imgbox ddflex">
				<view class="imgs" v-if="qunCode" :key="index">
					<image :src="qunCode" class="img" mode="aspectFill"></image>
					<image src="../static/images/close.png" class="del" @tap="cleanCode(index)"></image>
				</view>
				<view class="upload ddflex" @click="uploadImgsCode" v-if="!qunCode"><image src="../static/images/upload.png"></image></view>
			</view>
			<view class="other">
				<view class="li ddflex" @click="chooseLocation">
					<image src="../static/images/tj_wzico.png" class="o-ico"></image>
					<view class="fflex">位置</view>
					<view class="sel-ht" v-if="location">{{location.poiName}}</view>
					<image src="../static/images/rico.png" class="rico"></image>
				</view>
			</view>
		</view>
		<view class="loca">
			<scroll-view scroll-x="true" class="locas">
				<view :class="'lis'+(poiIndex == index ? ' active':'')" @click="checkLocation(item,index)" v-for="(item,index) in poiList" :key="index">{{item.title}}</view>
			</scroll-view>
		</view>
		<view style="height: 160rpx"></view>
		<view class="btn" @click="submit()">{{opt.id?'保存修改':'创建队伍'}}</view>
	</view>
</template>

<script>
const app = getApp();
const api = require('../../utils/api.js');
const req = require('../../utils/request.js');
const QQMapWX = require("../../utils/qqmap.js");
export default {
	data() {
		return {
			opt: {},
			zhiPicUrls: [],
			qunCode:'',
			title: '',
			description: '',
			location: {},
			poiIndex: -1,
			poiList: [],
			auditStatus: '',//审核状态
			auditContent: '',//失败原因
		};
	},
	onLoad(options) {
		this.opt = options;
		if(options.id){
			this.getTeamInfo();
			uni.setNavigationBarTitle({
				title: '修改团队信息'
			})
		}
		QQMapWX.initMap();
		let location = {
			latitude: req.getStorage('loctionAddressMap').location.lat,
			longitude: req.getStorage('loctionAddressMap').location.lng
		}
		QQMapWX.reverseGeocoder(location, data => {
			this.poiList = data.pois;
		});
	},
	methods: {
		getTeamInfo(){
			req.getRequest(api.user_team_info+this.opt.id,{},data=>{
				this.title = data.title;
				this.description = data.description;
				this.zhiPicUrls[0] = data.url;
				this.auditStatus = data.auditStatus;
				this.auditContent = data.auditContent;
				this.location = {
					poiName: data.poiName,
					poiAddress: data.poiAddress,
					poiLongitude: data.poiLongitude,
					poiLatitude: data.poiLatitude,
					poiRegionalism: data.poiRegionalism
				}
			})
		},
		uploadImgs() {
			let that = this;
			uni.chooseImage({
				count: that.picCount - that.zhiPicUrls.length,
				sizeType: ['original', 'compressed'],
				sourceType: ['album', 'camera'],
				success: function({ tempFilePaths }) {
					uni.showLoading({
						title: '上传中'
					});
					var promise = Promise.all(
						tempFilePaths.map(tempFilePath => {
							return new Promise(function(resolve, reject) {
								req.uploadFile('/api/nocheck/upload', tempFilePath, res => {
									let picUrls = that.zhiPicUrls;
									that.zhiPicUrls = picUrls.concat(res.src);
									uni.hideLoading()
								});
							});
						})
					);
					promise
						.then(function(results) {
							console.log(results);
						})
						.catch(function(err) {
							console.log(err);
						});
				}
			});
		},
		uploadImgsCode() {
			let that = this;
			uni.chooseImage({
				count: 1,
				sizeType: ['original', 'compressed'],
				sourceType: ['album', 'camera'],
				success: function({ tempFilePaths }) {
					uni.showLoading({
						title: '上传中'
					});
					var promise = Promise.all(
						tempFilePaths.map(tempFilePath => {
							return new Promise(function(resolve, reject) {
								req.uploadFile('/api/nocheck/upload', tempFilePath, res => {
									that.qunCode = res.src;
									uni.hideLoading()
								});
							});
						})
					);
					promise
						.then(function(results) {
							console.log(results);
						})
						.catch(function(err) {
							console.log(err);
						});
				}
			});
		},
		//预览图片
		previewImg(picUrls, index) {
			//预览合同图片
			var src = picUrls[index];
			let imgs = picUrls;
			uni.previewImage({
				current: src, // 当前显示图片的http链接
				urls: imgs
			});
		},
		
		cleanimages(index) {
			// 删除图片
			let arr = this.zhiPicUrls;
			arr.splice(index, 1);
			this.zhiPicUrls = arr;
		},
		cleanCode() {
			// 删除图片
			this.qunCode = '';
		},
		chooseLocation(){
			let that = this;
			uni.chooseLocation({//choosePoi不返回经纬度
				success: function (res) {
					console.log('位置名称：' , res);
					that.location = {
						poiName: res.name,
						poiAddress: res.address,
						poiLongitude: res.longitude,
						poiLatitude: res.latitude
					}
					that.reverseGeocoder(res);
				}
			});
		},
		reverseGeocoder(location) {
			QQMapWX.initMap();
			QQMapWX.reverseGeocoder(location, data => {
				this.location.poiRegionalism = data.ad_info.adcode.substring(0, 2) + "0000," + data.ad_info.adcode.substring(0, 4) +"00," + data.ad_info.adcode
				console.log('解析后的地址地址数据：', data,this.location.poiRegionalism);
			});
		},
		checkLocation(item,index){
			if(this.poiIndex == index) return false;
			this.poiIndex = index;
			this.location = {
				poiName: item.title,
				poiAddress: item.address,
				poiLongitude: item.location.lng,
				poiLatitude: item.location.lat,
				poiRegionalism: item.ad_info.adcode.substring(0, 2) + "0000," + item.ad_info.adcode.substring(0, 4) +"00," + item.ad_info.adcode
			}
		},
		submit() {
			var dataPream = {};
			if (!this.title) return req.msg('请输入团队名称');
			if (!this.description) return req.msg('请输入团队简介');
			if (this.zhiPicUrls.length == 0) return req.msg('请上传团队头像');
			dataPream.title = this.title;
			dataPream.description = this.description;
			//图片
			if (this.zhiPicUrls.length > 0) {
				dataPream.url = this.zhiPicUrls.join(',');
			}
			// 群二维码
			if(this.qunCode){
				dataPream.qunCode = this.qunCode
			}
			// 位置
			if(this.location&&this.location.poiName){
				dataPream.poiName = this.location.poiName;
				dataPream.poiAddress = this.location.poiAddress;
				dataPream.poiLongitude = this.location.poiLongitude;
				dataPream.poiLatitude = this.location.poiLatitude;
				dataPream.poiRegionalism = this.location.poiRegionalism
			}
			if(this.opt.id){
				dataPream.id = this.opt.id;
				if(this.auditStatus == 2){
					this.editTeam(dataPream)
				}else{
					req.msgConfirm('修改后团队需要重新审核，确认保存修改吗？',suc=>{
						this.editTeam(dataPream)
					})
				}
			}else{
				this.createTeam(dataPream)
			}
		},
		createTeam(dataPream){
			uni.showLoading({
				mask: true
			})
			req.postRequest(api.create_user_team, dataPream, data => {
				uni.hideLoading();
				req.alertMsg('团队创建成功,请耐心等待审核',suc=>{
					let pages = getCurrentPages(); //获取所有页面栈实例列表
					let prevPage = pages[pages.length - 2]; //上一页页面实例
					prevPage.$vm.isRefresh = true;
					uni.navigateBack();
				})
			});
		},
		editTeam(dataPream){
			uni.showLoading({
				mask: true
			})
			req.putRequest(api.create_user_team, dataPream, data => {
				uni.hideLoading();
				req.msg('团队修改成功');
				setTimeout(() => {
					uni.navigateBack();
				}, 1500);
			});
		}
	}
};
</script>

<style>
@import './index.css';
</style>