uniapp表单提交,传值picker

uniapp表单提交,传值picker

套用就好,里边有picker,input传值方法.

先上代码!!!

<template>
 <view class="content">
		<!--用户id  -->
		<!-- <view class="row b-b">
		    <text class="tit">id号</text>
		    <input class="input" :value="UserInfo.uid" disabled  placeholder-class="placeholder" />
		</view> -->
		<!-- 管理人id-->
		<!-- <view class="row b-b">
		    <text class="tit">id</text>
		    <input class="input" :value="userInfo.uid" disabled placeholder="请输入id" placeholder-class="placeholder" />
		</view> -->
		<!-- 微信登录用户id -->
		<!-- <view class="row b-b">
		    <text class="tit">id</text>
		    <input class="input" :value="userInfo.uid" disabled placeholder="请输入id" placeholder-class="placeholder" />
		</view> -->
		<!-- 用户账号 -->
		
		<!-- 用户密码 -->
	
		<!-- 真实姓名 -->
         <view class="row b-b">
             <text class="tit">姓名</text>
             <input class="input" type="text" v-model="addressData.realName1" placeholder="请输入真实姓名" placeholder-class="placeholder" />
         </view>
		<!-- 性别 -->
		<view class="row b-b">
		<view class="title">性别</view>
		        <radio-group @change="sexchange">
		            <label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in sex" :key="item.value">
		                <radio :value="item.value" :checked="item.checked" /><span>{{item.label}}</span>
		            </label>
		        </radio-group>
				 </view>
		<!--出生日期 -->   
		
		<!-- 手机号 -->
		<view class="row b-b">
		    <text class="tit">手机号</text>
		    <input class="input" type="number" maxlength="11" v-model="addressData.mobile1" placeholder="请输入手机号码" placeholder-class="placeholder" />
		</view>
		<!-- 常驻类型 -->
		<view class="row b-b">
			<view class="title">常驻类型</view>
			        <radio-group @change="resideChange">
			            <label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in reside" :key="item.value">
			                <radio :value="item.value" :checked="item.checked" /><span>{{item.label}}</span>
			            </label>
			        </radio-group>
		</view>
		<!-- 民族 -->
		<view class="row b-b">
		<view class="title">民族</view>
		        <radio-group @change="nationChange">
		            <label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in nation" :key="item.value">
		                <radio :value="item.value" :checked="item.checked" /><span>{{item.label}}</span>
		            </label>
		        </radio-group>
				</view>
		<!-- 血型 -->
		<view class="row b-b">
		<view class="title">血型</view>
		        <radio-group @change="bloodYypeChange">
		            <label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in bloodYype" :key="item.value">
		                <radio :value="item.value" :checked="item.checked" /><span>{{item.label}}</span>
		            </label>
		        </radio-group>
				</view>
		<!-- 文化程度 -->
		<view class="row b-b">
		<view class="title">文化程度</view>
		        <radio-group @change="standardCultureChange">
		            <label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in standardCulture" :key="item.value">
		                <radio :value="item.value" :checked="item.checked" /><span>{{item.label}}</span>
		            </label>
		        </radio-group>
					</view>
		<!-- 职业 -->
		<view class="row b-b">
		<view class="title">职业</view>
		        <radio-group @change="professionChange">
		            <label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in profession" :key="item.value">
		                <radio :value="item.value" :checked="item.checked" /><span>{{item.label}}</span>
		            </label>
		        </radio-group>
					</view>
		<!-- 婚姻状况 -->
		<view class="row b-b">
		<view class="title">婚姻状况</view>
		        <radio-group @change="marriageStatusChange">
		            <label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in marriageStatus" :key="item.value">
		                <radio :value="item.value" :checked="item.checked" /><span>{{item.label}}</span>
		            </label>
		        </radio-group>
				</view>
		<!-- 体检次数/每年 -->
		<view class="row b-b">
		    <text class="tit">体检次数/每年</text>
		    <input class="input" type="number"  v-model="addressData.examinationTimes1" placeholder="请输入体检次数" placeholder-class="placeholder" />
		</view>
		<!--常用保健品 -->
		<view class="row b-b">
		<view class="title">常用保健品</view>
		        <radio-group @change="healthProductsChange">
		            <label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in healthProducts" :key="item.value">
		                <radio :value="item.value" :checked="item.checked" /><span>{{item.label}}</span>
		            </label>
		        </radio-group>
				</view>
		<!-- 常锻炼 -->
		<view class="row b-b">
		<view class="title">常锻炼</view>
		        <radio-group @change="takeExerciseChange">
		            <label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in takeExercise" :key="item.value">
		                <radio :value="item.value" :checked="item.checked" /><span>{{item.label}}</span>
		            </label>
		        </radio-group>
				</view>
		<!-- 常参加社区活动 -->
			<view class="row b-b">
		<view class="title">常参加社区活动</view>
		        <radio-group @change="communityActivityChange">
		            <label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in communityActivity" :key="item.value">
		                <radio :value="item.value" :checked="item.checked" /><span>{{item.label}}</span>
		            </label>
		        </radio-group>
				</view>
		<!-- 健康调查 -->
			<view class="row b-b">
		<view class="title">健康调查</view>
		        <radio-group @change="healthSurveyChange">
		            <label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in healthSurvey" :key="item.value">
		                <radio :value="item.value" :checked="item.checked" /><span>{{item.label}}</span>
		            </label>
		        </radio-group>
				</view>
		<!-- 亚健康描述 -->
		<view class="row b-b">
		    <text class="tit">亚健康描述</text>
		    <input class="input" type="text" v-model="addressData.subHealthRemark1" placeholder="亚健康描述" placeholder-class="placeholder" />
		</view>
		<!-- xxxxxx -->
		  <view class="row b-b">
			  <text class="tit">xxxxx</text>
			  <input class="input" type="number" v-model="addressData.xryTimes1" placeholder="xxxxxxx" placeholder-class="placeholder" />
		  </view>
		<!-- xxxxx -->
		<view class="row b-b">
		    <text class="tit">xxxx</text>
		    <input class="input" type="text" v-model="addressData.xryExperience1" placeholder="xxxx" placeholder-class="placeholder" />
		</view>
		<!-- xxx -->
		  <view class="row b-b">
		  			  <text class="tit">xxxx</text>
		  			  <input class="input" type="number" v-model="addressData.xqjTimes1" placeholder="xxxx" placeholder-class="placeholder" />
		  </view>
		<!-- xxxx -->
		<view class="row b-b">
		    <text class="tit">xxxx</text>
		    <input class="input" type="text" v-model="addressData.xqjExperience1" placeholder="xxxxx" placeholder-class="placeholder" />
		</view>
		<!-- xxxx -->
		  <view class="row b-b">
		  			  <text class="tit">xxxx</text>
		  			  <input class="input" type="number" v-model="addressData.fqsTimes1" placeholder="xxxx" placeholder-class="placeholder" />
		  </view>
		<!-- xxxx -->
		<view class="row b-b">
		    <text class="tit">xxxx</text>
		    <input class="input" type="text" v-model="addressData.fqsExperience1" placeholder="xxxx" placeholder-class="placeholder" />
		</view>
		<!-- 创建时间 -->
		
		<!-- 修改时间 -->
	
	 <view class="add-btn">
	                    <button @click="submit">Submit</button>
	                </view>
     </view>
</template>
<script>
import { mapGetters } from "vuex";
import { VUE_APP_API_URL } from "@/config";
import { postUsermessage } from "@/api/user";


export default {
	
  name: "PersonalData",
  components: {

  },
  data: function () {
	var app = getApp();
    return {
		sex: [{
		                    label: "男",
		                    value: 0,
		                    checked: true
		                }, {
		                    label: "女",
		                    value: 1
		                }],
		reside: [{
		                    label: "社区居民",
		                    value: 0,
		                    checked: true
		                }, {
		                    label: "非社区",
		                    value: 1
		                }],
		nation: [{
		                    label: "汉族",
		                    value: 0,
		                    checked: true
		                }, {
		                    label: "少数民族",
		                    value: 1
		                }],
		bloodYype: [{
		                    label: "A",
		                    value: 0,
		                    checked: true
		                }, {
		                    label: "B",
		                    value: 1
		                }, {
		                    label: "O",
		                    value: 2
		                }, {
		                    label: "AB",
		                    value: 3
		                }, {
		                    label: "不详",
		                    value: 4
		                }],
		standardCulture: [{
		                    label: "文盲及半文盲",
		                    value: 0,
		                    checked: true
		                }, {
		                    label: "小学",
		                    value: 1
		                }, {
		                    label: "初中",
		                    value: 2
		                }, {
		                    label: "高中/技校/中专",
		                    value: 3
		                }, {
		                    label: "大学专科及以上",
		                    value: 4
		                }, {
		                    label: "不详",
		                    value: 5
		                }],
		profession: [{
		                    label: "国政机关事业单位人员",
		                    value: 0,
		                    checked: true
		                }, {
		                    label: "企业主",
		                    value: 1
		                }, {
		                    label: "个体户",
		                    value: 2
		                }, {
		                    label: "务工人员",
		                    value: 3
		                }, {
		                    label: "子女随迁",
		                    value: 4
		                }],	
		marriageStatus: [{
		                    label: "未婚",
		                    value: 0,
		                    checked: true
		                }, {
		                    label: "已婚",
		                    value: 1
		                }, {
		                    label: "丧偶",
		                    value: 2
		                }, {
		                    label: "离婚",
		                    value: 3
		                }],	
		healthProducts: [{
		                    label: "否",
		                    value: 0,
		                    checked: true
		                }, {
		                    label: "是",
		                    value: 1
		                }],	
		takeExercise: [{
		                    label: "否",
		                    value: 0,
		                    checked: true
		                }, {
		                    label: "是",
		                    value: 1
		                }],	
		communityActivity: [{
		                    label: "否",
		                    value: 0,
		                    checked: true
		                }, {
		                    label: "是",
		                    value: 1
		                }],		
		healthSurvey: [{
		                    label: "高血压",
		                    value: 0,
		                    checked: true
		                }, {
		                    label: "糖尿病",
		                    value: 1
		                }, {
		                    label: "冠心病",
		                    value: 2
		                }, {
		                    label: "慢性阻塞性肺炎疾病",
		                    value: 3
		                }, {
		                    label: "恶性肿瘤",
		                    value: 4
		                }, {
		                    label: "风湿病",
		                    value: 5
		                }, {
		                    label: "痛风病",
		                    value: 6
		                }, {
		                    label: "结核病",
		                    value: 7
		                }, {
		                    label: "肝病",
		                    value: 8
		                }, {
		                    label: "其他",
		                    value: 9
		                }],																															
		userIndex: 0,
		 avatar: "",
		realName1:'',
		 mobile1:'',
		 subHealthRemark1:'',
		 marriageStatus1:'',
		 xryTimes1:'',
		 xryExperience1:'',
		 xqjTimes1:'',
		 xqjExperience1:'',
		 fqsTimes1:'',
		 fqsExperience1:'',
		 addressData:{
			 healthSurvey:0,
			 communityActivity:0,
			 takeExercise:0,
			 healthProducts:0,
			 marriageStatus:0,
			 profession:0,
			 standardCulture:0,
			 bloodYype:0,
			 nation:0,
			reside: 0,
		    sex:0,
		              } ,
    };
  },
  mounted: function () {
	
  },
  methods: {
	  //健康调查
	  healthSurveyChange(e) {
				   this.addressData.healthSurvey = this.radio = e.detail.value
			   },
	  //常参加社区活动
	  communityActivityChange(e) {
				   this.addressData.communityActivity = this.radio = e.detail.value
			   },
	  //常锻炼
	  takeExerciseChange(e) {
				   this.addressData.takeExercise = this.radio = e.detail.value
			   },
	  //常用保健品
	 healthProductsChange(e) {
				   this.addressData.healthProducts = this.radio = e.detail.value
			   },
	  //婚姻状况
	  marriageStatusChange(e) {
				   this.addressData.marriageStatus = this.radio = e.detail.value
			   },
	  //职业
	 professionChange(e) {
				   this.addressData.profession = this.radio = e.detail.value
			   },
	  //文化程度
	  standardCultureChange(e) {
				   this.addressData.standardCulture = this.radio = e.detail.value
			   },
	  //血型
	  bloodYypeChange(e) {
				   this.addressData.bloodYype = this.radio = e.detail.value
			   },
	  //民族
	  nationChange(e) {
				   this.addressData.nation = this.radio = e.detail.value
			   },
	  //常驻类型
   resideChange(e) {
				   this.addressData.reside = this.radio = e.detail.value
			   },
	  //性别
	sexchange(e) {
	                this.addressData.sex = this.radio = e.detail.value
	            },
	  //提交
   submit(e){
	  /* var data = e.detail.value */
	 let data = this.addressData
	   
   	postUsermessage({
   	   realName: this.addressData.realName1,
		sex: this.addressData.sex,
		mobile: this.addressData.mobile1,
		reside: this.addressData.reside,
		nation: this.addressData.nation,
		bloodYype: this.addressData.bloodYype,
		standardCulture: this.addressData.standardCulture,
		profession: this.addressData.profession,
		marriageStatus: this.addressData.marriageStatus,
		examinationTimes: this.addressData.marriageStatus1,
		healthProducts: this.addressData.healthProducts,
		takeExercise: this.addressData.takeExercise,
		communityActivity: this.addressData.communityActivity,
		healthSurvey: this.addressData.healthSurvey,
		subHealthRemark: this.addressData.subHealthRemark1,
		xryTimes: this.addressData.xryTimes1,
		xryExperience: this.addressData.xryExperience1,
		xqjTimes: this.addressData.xqjTimes1,
		xqjExperience: this.addressData.xqjExperience1,
		fqsTimes: this.addressData.fqsTimes1,
		fqsExperience: this.addressData.fqsExperience1,
   	  })
   	  .then((res) => {
   	    handleOrderPayResults.call(this, res.data, "create", this.active);
   	  })
   }
    },
};
</script>
<style lang="scss">
    page {
        padding-top: 16upx;
    }
 
    .row {
        display: flex;
        align-items: center;
        position: relative;
        padding: 0 30upx;
        height: 110upx;
        background: #fff;
 
        .tit {
            flex-shrink: 0;
            width: 120upx;
            font-size: 30upx;
 float: left;
        }
 
        .input {
			padding-left: 35rpx;
            flex: 1;
            font-size: 30upx;
 
        }
 
        .icon-shouhuodizhi {
            font-size: 36upx;
 
        }
    }
 
    .add-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 690upx;
        height: 80upx;
        margin: 60upx auto;
        background-color: rgb(255, 41, 91);
        color: #fff;
 
        border-radius: 10upx;
        box-shadow: 1px 2px 5px rgba(28, 42, 134, 0.4);
    }
</style>



  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值