renshou/match/activityEdit/activityEdit.vue

<template>
	<view>
		<view v-if="stepOne">
			<view class="form">
				<view class="form-title">基本信息</view>
				<view class="form-item-title">封面图</view>
				<view class="upload-pic ddflex" v-if="!pic" @click="uploadImage(1)">
					<image src="../static/images/pic.png"></image>
					<view style="margin-top: 30rpx;">上传封面图</view>
				</view>
				<image v-else class="upload-image" :src="pic" @click="uploadImage(1)"></image>
				<view class="form-limit">* 图片尺寸限制：680*350</view>
				<view class="form-item-title">活动详情轮播图</view>
				<view class="ddflex" style="margin-top: 30rpx;">
					<view class="upload-photo-image" v-for="item ,index in fileList" @click="uploadImage(2,index+1)">
						<image :src="item" mode="aspectFill"></image>
						<image class="upload-photo-close" src="/static/pages/images/close3.png" @click.stop="deleteImage(2,index+1)"></image>
					</view>
					<view class="upload-photo ddflex" @click="uploadImage(2)" v-if="fileList.length<9">
						<image src="../static/images/photo.png"></image>
					</view>
				</view>
				<view class="form-limit">* 图片尺寸限制：670*350</view>
			</view>
			<view class="form-border"></view>
			<view class="form">
				<view class="form-item-title">活动标题</view>
				<view class="form-input-box">
					<input v-model="title" placeholder-class="form-input-placeholder" placeholder="请输入活动标题"/>
				</view>
				<view class="form-item-title">活动说明</view>
				<view class="form-input-box">
					<input v-model="brief" placeholder-class="form-input-placeholder" placeholder="请填写活动简介说明"/>
				</view>
				<view class="form-item-title">
					活动详情
					<view class="more ddflex" @click="jumpUrl('/match/editorContent/editorContent')">
						<text v-if="!text">编辑</text>
						<text v-else style="color: var(--main);">已完善</text>
						<image  src="../../static/pages/images/more.png"></image>
					</view>
				</view>
				<view class="next-btn" @click="next">下一步</view>
			</view>
		</view>
		
		<!-- 第二步 -->
		<view v-if="stepTwo">
			<view class="form">
				<view class="form-title">报名设置</view>
				<view class="form-item-title">最大报名人数</view>
				<view class="form-number-select ddflex">
					<view>-</view>
					<input v-model="personLimit" type="number" placeholder="最大报名人数" placeholder-class="form-input-placeholder"/>
					<view>+</view>
				</view>
				<view class="form-item-title">报名时间</view>
				<view  class="ddflex" style="margin-top: 20rpx;">
					<picker v-model="enlistStartTime" mode="date" class="flex" @change="enlistStartTimeChange">
						<view class="form-date-select" :style="enlistStartTime?'color:#333':''">
							{{enlistStartTime?enlistStartTime:'开始日期'}}
						</view>
					</picker>
					<text style="margin: 0 20rpx;">至</text>
					<picker v-model="enlistEndTime" mode="date" class="flex" @change="enlistEndTimeChange">
						<view class="form-date-select" :style="enlistEndTime?'color:#333':''">
							{{enlistEndTime?enlistEndTime:'结束日期'}}
						</view>
					</picker>
				</view>
				<view class="form-item-title">活动时间</view>
				<view  class="ddflex" style="margin-top: 20rpx;">
					<picker v-model="startTime" mode="date" class="flex" @change="startTimeChange">
						<view class="form-date-select" :style="startTime?'color:#333':''">
							{{startTime?startTime:"开始日期"}}
						</view>
					</picker>
					<text style="margin: 0 20rpx;">至</text>
					<picker v-model="endTime" mode="date" class="flex" @change="endTimeChange">
						<view class="form-date-select" :style="endTime?'color:#333':''">
							{{endTime?endTime:"结束日期"}}
						</view>
					</picker>
				</view>
			</view>
			<view class="form-border"></view>
			<view class="form">
				<view class="form-title">活动地址</view>
				<view class="form-item-title">地址名称</view>
				<view class="form-input-box">
					<input v-model="house" placeholder-class="form-input-placeholder" placeholder="请输入活动地址简称"/>
				</view>
				<view class="form-item-title">选择城市</view>
				<view class="form-input-box">
					<picker class="form-input-placeholder" mode="region" @change="bindRegionChange" :value="region">
						<view class="picker" :style="region.length>0?'color: #333;':''">
							{{region.length > 0 ? region[0]+region[1]+region[2] : '请选择所在城市'}}
						</view>
					</picker>
					<!-- <image src="/card/static/images/area.png" class="loca" @click="chooseLocation()"></image> -->
				</view>
				<view class="form-item-title">
					详细地址
				</view>
				<view class="form-input-box">
					<input v-model="address" placeholder-class="form-input-placeholder" placeholder="请输入详细地址"/>
				</view>
				<view class="next-btn" @click="submit()">提交</view>
			</view>
		</view>
	</view>
</template>

<script>
	import util from "../../utils/util.js";
	const app = getApp();
	const req = require("../../utils/request.js");

	export default {
		components: {},
		props: {},
		data() {
			return {
				stepOne:true,
				stepTwo:false,
				
				pic:'',//封面图
				fileList:[],//banner
				title:'',
				brief:'',
				text:'',
				personLimit:-1,
				enlistStartTime:'',
				enlistEndTime:'',
				startTime:'',
				endTime:'',
				house:'',
				region:[],
				address:'',
				regionCode:[],
				id:''
				
			}
		},
		onLoad(options) {
			this.id = options.id
			if(this.id){
				this.getActivityInfo()
			}
		},
		onShow() {
			
		},
		methods: {
			jumpUrl(url){
				uni.navigateTo({
					url:url
				})
			},
			getActivityInfo(){
				req.getRequest('/api/match/detail',{id:this.id},res=>{
					this.pic = res.pic
					this.fileList = res.imageList.map(item=>{return item.url})
					this.title = res.title
					this.brief = res.brief
					this.text = res.text
					this.personLimit = res.personLimit
					this.enlistStartTime = this.formatTime(res.enlistStartTime)
					this.enlistEndTime = this.formatTime(res.enlistEndTime)
					this.startTime = this.formatTime(res.startTime)
					this.endTime = this.formatTime(res.endTime)
					this.house = res.house
					this.regionCode = [res.province,res.city,res.country]
					this.region = res.areaAdd.split(',')
					this.address = res.address
				})
			},
			next(){
				if(!this.pic){
					return req.msg('请上传封面图')
				}
				if(this.fileList.length==0){
					return req.msg('请上传活动轮播图')
				}
				if(!this.title){
					return req.msg('请填写活动名称')
				}
				if(!this.brief){
					return req.msg('请填写活动简介')
				}
				if(!this.text){
					return req.msg('请填写活动详情')
				}
				this.stepOne = false
				this.stepTwo = true
			},
			uploadImage(type,index){
				let that = this;
				let count = 1
				if(type==1){
					count = 1
				}else if(type==2){
					if(index){
						count = 1
					}else{
						count = 9-that.fileList.length
					}
				}
				uni.chooseImage({
					count: count,
					sizeType: ['original', 'compressed'],
					sourceType: ['album', 'camera'],
					success: function({ tempFilePaths }) {
						var promise = Promise.all(
							tempFilePaths.map(tempFilePath => {
								return new Promise(function(resolve, reject) {
									req.uploadFile('/api/nocheck/upload', tempFilePath, res => {
										// type 1 封面图
										if(type==1){
											that.pic = res.src
										}else if(type==2){
											if(index){
												that.fileList[index] = res.src
												that.fileList = JSON.parse(JSON.stringify(that.fileList))
											}else{
												that.fileList = that.fileList.concat(res.src)
											}
										}
									});
								});
							})
						);
						promise
							.then(function(results) {
								console.log(results);
							})
							.catch(function(err) {
								console.log(err);
							});
					}
				});
			},
			deleteImage(type,index){
				if(type==2)
					this.fileList.splice(index,1)
			},
			enlistStartTimeChange(e){
				if(this.enlistEndTime){
					if(this.enlistEndTime<e.detail.value)
					return req.msg('报名开始时间不能大于结束时间')
				}
				this.enlistStartTime = e.detail.value
			},
			enlistEndTimeChange(e){
				if(this.enlistStartTime){
					if(this.enlistStartTime>e.detail.value)
					return req.msg('报名结束时间不能小于开始时间')
				}
				this.enlistEndTime = e.detail.value
			},
			startTimeChange(e){
				if(this.endTime){
					if(this.endTime<e.detail.value)
					return req.msg('活动开始时间不能大于结束时间')
				}
				this.startTime = e.detail.value
			},
			endTimeChange(e){
				if(this.startTime){
					if(this.startTime>e.detail.value)
					return req.msg('活动结束时间不能小于开始时间')
				}
				this.endTime = e.detail.value
			},
			chooseLocation() {
			  	var tha = this;
			  	uni.chooseLocation({
			  		success: function(res) {
			  			if (res.name) {
			  				tha.form.detailInfo = res.name;
			  				tha.reverseGeocoder(res);
			  				console.log('地址数据》》》：', res);
			  			}
			  		}
			  	});
			  },
			  reverseGeocoder(location) {
			  	QQMapWX.initMap();
			  	QQMapWX.reverseGeocoder(location, data => {
			  		this.region = [data.ad_info.province, data.ad_info.city, data.ad_info.district]
			  		console.log('解析后的地址地址数据：', data);
			  	});
			  },
			bindRegionChange(event) {
				console.log(event)
				this.region = event.detail.value
				this.regionCode = event.detail.code
			},
			submit(){
				if(!this.pic){
					return req.msg('请上传封面图')
				}
				if(this.fileList.length==0){
					return req.msg('请上传活动轮播图')
				}
				if(!this.title){
					return req.msg('请填写活动名称')
				}
				if(!this.brief){
					return req.msg('请填写活动简介')
				}
				if(!this.text){
					return req.msg('请填写活动详情')
				}
				if(!this.enlistStartTime){
					return req.msg('请选择报名开始时间')
				}
				if(!this.enlistEndTime){
					return req.msg('请选择报名结束时间')
				}
				if(!this.startTime){
					return req.msg('请选择活动开始时间')
				}
				if(!this.endTime){
					return req.msg('请选择活动结束时间')
				}
				if(!this.house){
					return req.msg('请填写活动地址')
				}
				if(this.regionCode.length==0){
					return req.msg('请选择活动所在城市')
				}
				if(!this.address){
					return req.msg('请填写详细地址')
				}
				
				let dataP = {
					pic:this.pic,
					fileList:JSON.stringify(this.fileList.map(item=>{return {url:item}})),
					title:this.title,
					brief:this.brief,
					text:this.text,
					personLimit:this.personLimit,
					enlistStartTime:this.enlistStartTime,
					enlistEndTime:this.enlistEndTime,
					startTime:this.startTime,
					endTime:this.endTime,
					house:this.house,
					province:this.regionCode[0],
					city:this.regionCode[1],
					country:this.regionCode[2],
					areaAdd:this.region.join(','),
					address:this.address
				}
				
				let url = '/api/match/save'
				if(this.id) {
					dataP.id = this.id
					url = '/api/match/update'
					uni.showModal({
						title:'提示',
						content:'修改活动将重新审核，确定修改？',
						success: (res) => {
							if(res.confirm){
								req.postRequest(url,dataP,res=>{
									req.msg('创建成功')
									let pages = getCurrentPages();
									var prevPage = pages[pages.length - 2];
									if (prevPage) {
										prevPage.$vm.isLoad = true
										prevPage.$vm.form.page = 1
										prevPage.$vm.getPageList()
									}
									setTimeout(()=>{
										uni.navigateBack()
									},1000)
								})
							}
						}
					})
				}else{
					req.postRequest(url,dataP,res=>{
						req.msg('创建成功')
						let pages = getCurrentPages();
						var prevPage = pages[pages.length - 2];
						if (prevPage) {
							prevPage.$vm.isLoad = true
							prevPage.$vm.form.page = 1
							prevPage.$vm.getPageList()
						}
						setTimeout(()=>{
							uni.navigateBack()
						},1000)
					})
				}
			},
			formatTime(date){
				date = new Date(date.replace(/-/g, '/'))
				return util.formatTime(date).t3
			},
		},
		mounted() {
			
		}
	}
</script>

<style>
	@import "./activityEdit.css";
</style>