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>