renshou/match/signPerson/signPerson.vue

<template>
	<view>
		<view class="p-form">
			<view class="p-label">姓名</view>
			<view class="p-input">
				<input v-model="name" placeholder="请输入姓名" placeholder-class="p-placeholder"/>
			</view>
			<view class="p-label">手机号</view>
			<view class="p-input">
				<input v-model="phone" placeholder="请输入手机号" placeholder-class="p-placeholder"/>
			</view>
			<view v-for='item,index in parmas' class="p-form-item" :key="index">
				<view class="p-label">{{item.chineseName}}</view>
				<!-- 输入框 -->
				<view v-if="item.type==1" class="p-input">
					<input v-model="item.value" :placeholder="'请输入'+item.chineseName" placeholder-class="p-placeholder"/>
				</view>
				<!-- 单选 -->
				<view v-if="item.type==2" class="p-select">
					<view class="ddflex">
						<view class="ddflex p-select-item"  v-for="it in item.selectValues" @click="pSelect(item,it)">
							<image v-if="item.value===it.name" src="/static/images/select_h.png"></image>
							<image v-else src="/static/images/select.png"></image>
							<view>{{it.name}}</view>
						</view>
					</view>
				</view>
				<!-- 多选 -->
				<view v-if="item.type==3" class="p-select-group">
					<view class="ddflex">
						<view :class="'ddflex p-select-group-item '+(item.value&&item.value.split(',').indexOf(it.name)!=-1?'p-select-group-item-active':'')"  v-for="it in item.selectValues" @click="pSelectGroup(item,it)">
							<view>{{it.name}}</view>
						</view>
					</view>
				</view>
				<!-- 图片 -->
				<view v-if="item.type==4">
					<view class="ddflex" style="margin-top: 30rpx;">
						<view class="upload-photo-image" v-if="item.value" @click="uploadImage(item)">
							<image :src="item.value" mode="aspectFill"></image>
							<image class="upload-photo-close" src="/static/pages/images/close3.png"
								@click.stop="deleteImage(item)"></image>
						</view>
						<view class="upload-photo ddflex" @click="uploadImage(item)" v-else>
							<image src="../static/images/photo.png"></image>
						</view>
					</view>
				</view>
				<!-- 多图片 -->
				<view v-if="item.type==5">
					<view class="ddflex" style="margin-top: 30rpx;">
						<view class="upload-photo-image" v-for="it,idx in item.value?item.value.split(','):[]" @click="uploadImage(item)">
							<image :src="it" mode="aspectFill"></image>
							<image class="upload-photo-close" src="/static/pages/images/close3.png"
								@click.stop="deleteImage(item,idx)"></image>
						</view>
						<view class="upload-photo ddflex" @click="uploadImage(item)">
							<image src="../static/images/photo.png"></image>
						</view>
					</view>
				</view>
				<!-- 文本域 -->
				<!-- <view v-if="item.type==4" class="p-input">
					<view class="ddflex">
						<textarea v-model="item.value" :placeholder="'请输入'+item.chineseName" placeholder-class="p-placeholder"></textarea>
					</view>
				</view> -->
			</view>
		</view>
		
		<view style="height: 150rpx;"></view>
		<view class="share-btn">
			<view class="btn" @click="submit">保存</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 {
				systems: {},
				isTop:0,
				name:'',
				phone:'',
				parmas:[],
				// type 1 输入框 2单择框 3多选框 4单图片 5多图片
				// parmas:[{
				// 	label:'姓名',
				// 	name:'name',
				// 	value:'',
				// 	type:1,//输入框
				// },{
				// 	label:'性别',
				// 	name:'sex',
				// 	value:'',
				// 	data:[{label:'男',value:1},{label:'女',value:2}],
				// 	type:2,//单选
				// },{
				// 	label:'手机号码',
				// 	name:'phone',
				// 	value:'',
				// 	type:1,//输入框
				// },{
				// 	label:'身份证号码',
				// 	name:'userName',
				// 	value:'',
				// 	type:1,//输入框
				// },{
				// 	label:'兴趣爱好',
				// 	name:'like',
				// 	value:'',
				// 	data:[{label:'户外运动',value:1},{label:'旅游',value:2}],
				// 	type:3,//多选
				// },{
				// 	label:'建议',
				// 	name:'suggest',
				// 	value:'',
				// 	type:4,//文本域
				// }],
				index:null,
				id:null
			}
		},
		async onLoad(options) {
			this.id = options.id
			await this.getExtForm()
			if(options.index){
				this.index = options.index
				if(req.getStorage('personList')){
					let parmas = req.getStorage('personList')[options.index-1]
					 this.name = parmas.name
					 this.phone = parmas.phone
					 this.parmas.map(item=>{
						 parmas.extend.map(it=>{
							if(item.type == it.type&&item.name == it.name){
								item.value = it.value
							}
						 })
					 })
				}
			}
		},
		onShow() {
			
		},
		methods: {
			getExtForm(){
				return new Promise((r,j)=>{
					req.getRequest('/api/match/detail',{id:this.id},res=>{
						this.parmas = res.extForm?JSON.parse(res.extForm):[]
						if(this.parmas.length>0){
							this.parmas.map(item=>{
								item.value = ''
							})
						}
						r()
					})
				})
			},
			pSelect(item,it){
				console.log('cc')
				if(item.value === it.name){
					item.value=''
				}else if(item.value != it.name){
					item.value=it.name
				}
				this.parmas = JSON.parse(JSON.stringify(this.parmas))
			},
			pSelectGroup(item,it){
				if(item.value=='') item.value=[]
				else item.value = item.value.split(',')
				let index = item.value.indexOf(it.name)
				if(index!=-1){
					item.value.splice(index,1)
				}else {
					item.value.push(it.name)
				}
				item.value = item.value.join(',')
				this.parmas = JSON.parse(JSON.stringify(this.parmas))
			},
			submit(){
				if(!this.name)  return req.msg('请填写报名人员姓名');
				if(!this.phone)  return req.msg('请填写报名人员手机号码');
				if(!util.isMobile(this.phone)) return req.msg('请填写正确的手机号码')
				
				// 数据校验
				for(let i=0;i<this.parmas.length;i++){
					let item = this.parmas[i]
					if(item.required==1){
						if(!item.value) return req.msg("请完善"+item.chineseName)
					}
				}
				if(this.index){
					console.log('parmas',JSON.stringify(this.parmas))
					let personList = []
					let parmas = {
						name: this.name?this.name:'',
						phone: this.phone?this.phone:'',
						extend:this.parmas
					}
					if(req.getStorage('personList')){
						personList = req.getStorage('personList')
						personList[this.index-1] = parmas
						req.setStorage('personList',personList)
					}else{
						personList = personList.concat(parmas);
					}
					uni.navigateBack()
				}else{
					console.log('parmas',JSON.stringify(this.parmas))
					let personList = []
					if(req.getStorage('personList')){
						personList = req.getStorage('personList')
					}
					let parmas = {
						name: this.name?this.name:'',
						phone: this.phone?this.phone:'',
						extend:this.parmas
					}
					personList = personList.concat(parmas);
					req.setStorage('personList',personList)
					uni.navigateBack()
				}
			},
			uploadImage(item) {
				let that = this;
				let count = 1
				if(item.type==5) {
					count = 9
					item.value = item.value?item.value.split(','):[]
				}
				uni.chooseImage({
					count: count,
					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 => {
										if(item.type==5) {
											console.log('item.type')
											item.value = item.value.concat(res.src)
										}
										else item.value = res.src
										resolve()
									});
								});
							})
						);
						promise
							.then(function(results) {
								uni.hideLoading()
								item.value = item.value.join(',')
								that.parmas = JSON.parse(JSON.stringify(that.parmas))
								console.log(results);
							})
							.catch(function(err) {
								uni.hideLoading()
								console.log(err);
							});
					}
				});
			},
			deleteImage(item,index) {
				if(item.type==5) {
					item.value.splice(index, 1)
				}
				else item.value = ''
			},
		},
		mounted() {
			const systemInfo = uni.getSystemInfoSync();
			// px转换到rpx的比例
			let pxToRpxScale = 750 / systemInfo.windowWidth;
			let systems = {
				ktxStatusHeight: systemInfo.statusBarHeight * pxToRpxScale, // 状态栏的高度
				navigationHeight: 44 * pxToRpxScale // 导航栏的高度
			};
			systems.barHeight = systems.ktxStatusHeight + systems.navigationHeight;
			this.systems = systems;
		},
		onPageScroll: function(e) {
			if (e.scrollTop > this.systems.barHeight) {
				this.isTop = 1;
			} else {
				this.isTop = 0;
			}
		}
	}
</script>

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