H5_module/match/form/index.vue

<template>
	<view class="form">
		<view class="li" v-for="(item,index) in paramsForm" :key="index">
			<view class="label">{{item.title}}<text v-if="item.required == 1">(必填)</text></view>
			<input type="number" maxlength="11" v-model="item.value" :placeholder="'请输入'+item.title" placeholder-class="placeholder" class="ipt" v-if="item.code == 'phone'" />
			<input type="idcard" maxlength="18" v-model="item.value" :placeholder="'请输入'+item.title" placeholder-class="placeholder" class="ipt" v-else-if="item.code == 'cardNo'" />
			<view class="radio ddflex" v-else-if="item.code == 'sex'">
				<view class="lis ddflex" v-for="(it,idx) in sex" :key="idx" @tap="checkSex(index,idx)"><image :src="'../static/images/'+(item.value == it.value ? 'gou_h.png':'gou.png')"></image>{{it.label}}</view>
			</view>
			<input v-model="item.value" :placeholder="'请输入'+item.title" placeholder-class="placeholder" class="ipt" v-else />
		</view>
		<!-- <view class="li">
			<view class="label">姓名</view>
			<input placeholder="请输入真实姓名" placeholder-class="placeholder" class="ipt" />
		</view>
		<view class="li">
			<view class="label">性别</view>
			<view class="radio ddflex">
				<view class="lis ddflex"><image src="../static/images/gou_h.png"></image>男</view>
				<view class="lis ddflex"><image src="../static/images/gou.png"></image>女</view>
			</view>
		</view>
		<view class="li">
			<view class="label">手机号码</view>
			<input placeholder="请输入手机号码" placeholder-class="placeholder" class="ipt" />
		</view>
		<view class="li">
			<view class="label">身份证号码</view>
			<input placeholder="请输入身份证号码" placeholder-class="placeholder" class="ipt" />
		</view>
		<view class="li">
			<view class="label ddflex">联系地址<view class="edit ddflex" @click="jumpUrl('/mine/editAddress/editAddress?id=' + address.id+'&isOpen='+true)">修改<image src="../../static/pages/images/crico1.png"></image></view></view>
			<view class="addr ddflex" v-if="address">
				<image :src="picUrlss+'lvluo/open_dz.png'"></image>
				<view class="fflex">
					<view class="addr-dz">{{address.address}}<block v-if="address.house">{{address.house}}</block></view>
					<view class="addr-info">{{address.name}}<text>{{address.phone}}</text></view>
				</view>
			</view>
			<view class="add-box ddflex" v-else>
				<view class="add" @click="chooseAddress">授权微信地址</view>
			</view>
		</view>
		<view class="li ddflex" style="margin-top: 40rpx;">
			<view class="label fflex" style="margin-top: 0;">是否允许服务顾问上门拜访</view>
			<view class="switch ddflex"><view>不允许</view><switch :value="true" style="zoom: .7;"></switch></view>
		</view>
		<view class="li">
			<view class="label">兴趣爱好</view>
			<view class="select ddflex">
				<view class="lis">户外运动</view>
				<view class="lis">旅游</view>
				<view class="lis">摄影</view>
				<view class="lis">看书</view>
				<view class="lis">绘画</view>
			</view>
		</view>
		<view class="li">
			<view class="label">建议</view>
			<view class="textarea-box">
				<textarea placeholder="请输入" placeholder-class="placeholder" class="textarea"></textarea>
				<view class="text-num">0/200</view>
			</view>
		</view> -->
		<view style="height: 168rpx;"></view>
		<view class="bot">
			<view class="btn" @click="formSubmit()">保存</view>
		</view>
	</view>
</template>

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

	export default {
		components: {},
		props: {},
		data() {
			return {
				paramsForm: [],
				personList: [],
				personPramas: [],
				sex: [
					{label: '男',value: 1},{label: '女',value: 2}
				]
			}
		},
		onLoad(options) {
			let pages = getCurrentPages(); //获取所有页面栈实例列表
			let prevPage = pages[pages.length - 2]; //上一页页面实例
			if(prevPage.$vm.detail.params){
				this.paramsForm = JSON.parse(prevPage.$vm.detail.params).columnList;
			}
			this.personList = prevPage.$vm.personList;
			this.personPramas = prevPage.$vm.personPramas;
		},
		onShow() {

		},
		methods: {
			checkSex(index,idx){
				console.log('选择性别')
				this.paramsForm[index].value = this.sex[idx].value;
				this.$forceUpdate()
			},
			checkRequire(formItemList){
				let sfz = /^[1-9]\d{5}(18|19|20|(3\d))\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
				for(var i = 0; i < formItemList.length; i++){
					if(formItemList[i].required){
						if(!formItemList[i].value){
							req.msg('请填写' + formItemList[i].title);
							return false;
						}else{
							if(formItemList[i].code == 'phone' && !util.isMobile(formItemList[i].value)) return req.msg('请填写正确的手机号码');
							if(formItemList[i].code == 'cardNo' && !sfz.test(formItemList[i].value)) return req.msg('请填写正确的身份证号码');
						}
					}
				}
				return true;
			},
			formSubmit(){
				let valueList = []
				if(!this.checkRequire(this.paramsForm)) return false
				let pages = getCurrentPages(); //获取所有页面栈实例列表
				let prevPage = pages[pages.length - 2]; //上一页页面实例
				// let obj = {};
				// this.paramsForm.map(it=>{
				// 	obj[it.code] = it.value;
				// })
				// this.personList.push(obj);
				// console.log('obj==',obj)
				console.log('this.paramsForm==',this.paramsForm)
				let paramsForm = []
				this.paramsForm.map(it=>{
					let obj = {
						title: it.title,
						code: it.code,
						value: it.value
					}
					paramsForm.push(obj);
				})
				let personList = this.personList;
				personList.push(paramsForm);
				prevPage.$vm.personList = personList;
				
				// let paramsForm = this.personPramas;
				// paramsForm.push(this.paramsForm);
				// prevPage.$vm.personPramas = paramsForm;
				
				uni.navigateBack()
			},
		},
		mounted() {},
	}
</script>
<style>page{background: #fff;}</style>
<style>
	@import "./index.css";
</style>