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">
				<view class="p-label">{{item.label}}</view>
				<!-- 输入框 -->
				<view v-if="item.type==1" class="p-input">
					<input v-model="item.value" :placeholder="'请输入'+item.label" 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.data" @click="pSelect(item,it)">
							<image v-if="item.value===it.value" src="/static/images/select_h.png"></image>
							<image v-else src="/static/images/select.png"></image>
							<view>{{it.label}}</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.indexOf(it.value)!=-1?'p-select-group-item-active':'')"  v-for="it in item.data" @click="pSelectGroup(item,it)">
							<view>{{it.label}}</view>
						</view>
					</view>
				</view>
				<!-- 文本域 -->
				<view v-if="item.type==4" class="p-input">
					<view class="ddflex">
						<textarea v-model="item.value" :placeholder="'请输入'+item.label" 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:[],
				// 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
			}
		},
		onLoad(options) {
			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: {
			pSelect(item,it){
				if(item.value === it.value){
					item.value=''
				}else if(item.value != it.value){
					item.value=it.value
				}
			},
			pSelectGroup(item,it){
				if(item.value=='') item.value=[]
				let index = item.value.indexOf(it.value)
				if(index!=-1){
					item.value.splice(index,1)
				}else {
					item.value.push(it.value)
				}
			},
			submit(){
				if(!this.name)  return req.msg('请填写报名人员姓名');
				if(!this.phone)  return req.msg('请填写报名人员手机号码');
				if(!util.isMobile(this.phone)) return req.msg('请填写正确的手机号码')
				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()
				}
			}
		},
		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>