Skip to content

C
cust-app
Commit fd99e83e authored by 罗林杰's avatar 罗林杰
Browse files
Options

修改表单

parent 3c3b8675
Hide whitespace changes
Inline Side-by-side
Showing with 233 additions and 194 deletions
pagesme/me/updateBasicInformation.vue
View file @ fd99e83e
......@@ -8,52 +8,41 @@
<u--form
labelPosition="left"
:model="userInfo"
ref="form1"
labelWidth="90"
>
<u-form-item
label="昵称"
prop="userInfo.memNickName"
label="手机号"
prop="userInfo.memPhone"
borderBottom
ref="item1"
>
<u--input
v-model="userInfo.memNickName"
v-model="userInfo.memPhone"
border="none"
placeholder="请输入昵称"
placeholder="请输入手机号"
></u--input>
</u-form-item>
<u-form-item
label="性别"
prop="userInfo.memSex"
label="微信号"
prop="userInfo.memWxCode"
borderBottom
@click="showSex = true; hideKeyboard()"
ref="item1"
>
<u--input
v-model="userInfo.memSex"
disabled
disabledColor="#ffffff"
placeholder="请选择性别"
v-model="userInfo.memWxCode"
border="none"
placeholder="请输入微信号"
></u--input>
<u-icon
slot="right"
name="arrow-right"
></u-icon>
</u-form-item>
<u-form-item
label="身高"
prop="userInfo.memHeight"
label="民族"
prop="userInfo.memNationText"
borderBottom
@click="showHeight = true; hideKeyboard()"
ref="itemAge"
@click="showNation = true; hideKeyboard()"
>
<u--input
v-model="userInfo.memHeight"
v-model="form.memNationText"
disabled
disabledColor="#ffffff"
placeholder="请选择身高"
placeholder="请选择民族"
border="none"
></u--input>
<u-icon
......@@ -62,17 +51,27 @@
></u-icon>
</u-form-item>
<u-form-item
label="体重"
prop="userInfo.memWeight"
label="昵称"
prop="userInfo.memNickName"
borderBottom
@click="showAge = true; hideKeyboard()"
ref="itemAge"
>
<u--input
v-model="userInfo.memWeight"
v-model="userInfo.memNickName"
border="none"
placeholder="请输入昵称"
></u--input>
</u-form-item>
<u-form-item
label="性别"
prop="userInfo.memSex"
borderBottom
@click="showSex = true; hideKeyboard()"
>
<u--input
v-model="form.memSexText"
disabled
disabledColor="#ffffff"
placeholder="请选择体重"
placeholder="请选择性别"
border="none"
></u--input>
<u-icon
......@@ -85,7 +84,6 @@
prop="userInfo.memBirthday"
borderBottom
@click="showBirthday = true; hideKeyboard()"
ref="item1"
>
<u--input
v-model="userInfo.memBirthday"
......@@ -100,45 +98,52 @@
></u-icon>
</u-form-item>
<u-form-item
label="手机号"
prop="userInfo.memPhone"
label="星座"
prop="userInfo.memConstellation"
borderBottom
ref="item1"
>
<u--input
v-model="userInfo.memPhone"
v-model="form.memConstellationText"
disabled
disabledColor="#ffffff"
placeholder="星座"
border="none"
placeholder="请输入手机号"
></u--input>
</u-form-item>
<u-form-item
label="星座"
prop="userInfo.memConstellation"
label="身高"
prop="userInfo.memHeight"
borderBottom
@click="showBirthday = true; hideKeyboard()"
ref="item1"
>
<u--input
v-model="userInfo.memConstellation"
disabled
v-model="userInfo.memHeight"
disabledColor="#ffffff"
placeholder="请选择星座"
placeholder="请输入身高"
border="none"
></u--input>
<u-icon
slot="right"
name="arrow-right"
></u-icon>
<span slot="right">cm</span>
</u-form-item>
<u-form-item
label="体重"
prop="userInfo.memWeight"
borderBottom
>
<u--input
v-model="userInfo.memWeight"
disabledColor="#ffffff"
placeholder="请输入体重"
border="none"
></u--input>
<span slot="right">kg</span>
</u-form-item>
<u-form-item
label="教育"
label="教育经历"
prop="userInfo.memMaxEducation"
borderBottom
@click="showEducation = true; hideKeyboard()"
ref="item1"
>
<u--input
v-model="userInfo.memMaxEducation"
v-model="form.memMaxEducationText"
disabled
disabledColor="#ffffff"
placeholder="请选择教育经历"
......@@ -153,7 +158,6 @@
label="毕业院校"
prop="userInfo.memCollege"
borderBottom
ref="item1"
>
<u--input
v-model="userInfo.memCollege"
......@@ -165,57 +169,29 @@
label="职业"
prop="userInfo.memCareer"
borderBottom
@click="showCareer = true; hideKeyboard()"
ref="item1"
>
<u--input
v-model="userInfo.memCareer"
disabled
disabledColor="#ffffff"
placeholder="请选择职业"
border="none"
></u--input>
<u-icon
slot="right"
name="arrow-right"
></u-icon>
</u-form-item>
<u-form-item
label="婚姻状况"
prop="userInfo.memMarriage"
borderBottom
@click="showMarriage = true; hideKeyboard()"
ref="item1"
>
<u--input
v-model="userInfo.memMarriage"
disabled
disabledColor="#ffffff"
placeholder="请选择婚姻状况"
border="none"
placeholder="请输入职业"
></u--input>
<u-icon
slot="right"
name="arrow-right"
></u-icon>
</u-form-item>
<u-form-item
label="年收入"
prop="userInfo.memYearIncome"
borderBottom
ref="item1"
>
<u--input
v-model="userInfo.memYearIncome"
border="none"
placeholder="请输入年收入"
></u--input>
<span slot="right">万元</span>
</u-form-item>
<u-form-item
label="工作单位"
prop="userInfo.memWorkPlace"
borderBottom
ref="item1"
>
<u--input
v-model="userInfo.memWorkPlace"
......@@ -224,17 +200,16 @@
></u--input>
</u-form-item>
<u-form-item
label="居住地省份"
label="居住地"
prop="userInfo.memResidenceProvince"
borderBottom
@click="showBirthday = true; hideKeyboard()"
ref="item1"
@click="showResidence = true; hideKeyboard()"
>
<u--input
v-model="userInfo.memResidenceProvince"
v-model="form.memResidence"
disabled
disabledColor="#ffffff"
placeholder="请选择居住地省份"
placeholder="请选择居住地"
border="none"
></u--input>
<u-icon
......@@ -243,17 +218,16 @@
></u-icon>
</u-form-item>
<u-form-item
label="居住城市"
label="籍贯"
prop="userInfo.memResidenceCity"
borderBottom
@click="showBirthday = true; hideKeyboard()"
ref="item1"
@click="showNative = true; hideKeyboard()"
>
<u--input
v-model="userInfo.memResidenceCity"
v-model="form.memNative"
disabled
disabledColor="#ffffff"
placeholder="请选择居住城市"
placeholder="请选择籍贯"
border="none"
></u--input>
<u-icon
......@@ -265,33 +239,69 @@
label="自我介绍"
prop="userInfo.memIntroduce"
borderBottom
ref="item1"
>
<u--textarea v-model="value1" placeholder="请输入内容"></u--textarea>
<u--textarea v-model="userInfo.memIntroduce" placeholder="请输入自我介绍"></u--textarea>
</u-form-item>
<u-form-item
label="兴趣爱好"
prop="userInfo.memHobby"
borderBottom
ref="item1"
>
<u--textarea v-model="value1" placeholder="请输入内容" ></u--textarea>
<u--textarea v-model="userInfo.memHobby" placeholder="请输入兴趣爱好" ></u--textarea>
</u-form-item>
<u-form-item
label="未来规划"
prop="userInfo.memFuturePlan"
borderBottom
ref="item1"
>
<u--textarea v-model="value1" placeholder="请输入内容" ></u--textarea>
<u--textarea v-model="userInfo.memFuturePlan" placeholder="请输入未来规划" ></u--textarea>
</u-form-item>
<u-form-item
label="期待"
prop="userInfo.memHalfDesire"
borderBottom
ref="item1"
>
<u--textarea v-model="value1" placeholder="请输入内容" ></u--textarea>
<u--textarea v-model="userInfo.memHalfDesire" placeholder="请输入期待" ></u--textarea>
</u-form-item>
<u-form-item
label="婚姻状况"
prop="userInfo.memMarriage"
borderBottom
@click="showMarriage = true; hideKeyboard()"
>
<u--input
v-model="userInfo.memMarriage"
disabled
disabledColor="#ffffff"
placeholder="请选择婚姻状况"
border="none"
></u--input>
<u-icon
slot="right"
name="arrow-right"
></u-icon>
</u-form-item>
<u-form-item
label="婚姻状况备注"
prop="userInfo.memMarriageRemarks"
borderBottom
>
<u--input
v-model="userInfo.memMarriageRemarks"
border="none"
placeholder="请输入婚姻状况备注"
></u--input>
</u-form-item>
<u-form-item
label="16型人格"
prop="userInfo.memMbti"
borderBottom
>
<u--input
v-model="userInfo.memMbti"
border="none"
placeholder="请输入16型人格"
></u--input>
</u-form-item>
</u--form>
<u-button
......@@ -320,55 +330,57 @@
mode="date"
closeOnClickOverlay
@confirm="confirmBirthday"
@cancel="cancelPicker"
@close="cancelPicker"
@cancel="showBirthday=false"
@close="showBirthday=false"
></u-datetime-picker>
<!-- 性别-->
<u-picker
:show="showSex"
:columns="sexActions"
@change="change"
@cancel="cancelPicker"
keyName="label"
@cancel="showSex=false"
@confirm="confirmSex"
></u-picker>
<!-- 年龄-->
<!-- 民族-->
<u-picker
:show="showAge"
:columns="ageActions"
@change="change"
@cancel="cancelPicker"
@confirm="confirmAge"
></u-picker>
<!-- 身高-->
<u-picker
:show="showHeight"
:columns="heightActions"
@change="change"
@cancel="cancelPicker"
@confirm="confirmHeight"
:show="showNation"
:columns="nationActions"
keyName="label"
@cancel="showNation=false"
@confirm="confirmNation"
></u-picker>
<!-- 教育经历-->
<u-picker
:show="showEducation"
:columns="educationActions"
@change="change"
@cancel="cancelPicker"
keyName="label"
@cancel="showEducation=false"
@confirm="confirmEducation"
></u-picker>
<!-- 职业-->
<!-- 居住地-->
<u-picker
:show="showResidence"
:columns="residenceActions"
keyName="label"
@cancel="showResidence=false"
@change="changeResidence"
@confirm="confirmResidence"
></u-picker>
<!-- 籍贯-->
<u-picker
:show="showCareer"
:columns="careerActions"
@change="change"
@cancel="cancelPicker"
@confirm="confirmCareer"
:show="showNative"
:columns="nativeActions"
keyName="label"
@cancel="showNative=false"
@change="changeNative"
@confirm="confirmNative"
></u-picker>
<!-- 婚姻状况-->
<u-picker
:show="showMarriage"
:columns="marriageActions"
@change="change"
@cancel="cancelPicker"
keyName="label"
@cancel="showMarriage=false"
@confirm="confirmMarriage"
></u-picker>
</view>
......@@ -377,25 +389,38 @@
<script>
import UFormItem from "../../uni_modules/uview-ui/components/u-form-item/u-form-item";
import {getOptions} from "../../common/options";
export default {
components: {UFormItem},
data() {
return {
index:0,
//数据选项
ageActions:[],
heightActions:[],
sexActions:[
['男','女']
getOptions('sex')
],
educationActions:[
['大专以下','大专','本科','硕士','博士','博士后','其他']
],
careerActions:[
['学生', 'IT互联网', '教育/科研', '建筑/房地产', '金融/保险']
getOptions('education')
],
marriageActions:[
['未婚', '已婚', '离异', '其他']
getOptions('marriage')
],
nationActions:[
getOptions('nation')
],
residenceActions: [
getOptions('residence'),
[{
label: '北京',
value: '0101'
}]
],
nativeActions: [
getOptions('residence'),
[{
label: '北京',
value: '0101'
}]
],
//选择器
showAge: false,
......@@ -406,18 +431,19 @@ export default {
showEducation: false,
showCareer: false,
showMarriage:false,
//身高选择
heightArr: [],
fileList1: [],
showNation:false,
showResidence: false,
showNative: false,
disabled1: false,
tips: '',
value: '',
userInfo: {
name: '',//真实姓名
nickname:'',//昵称
memPhone:'',//手机号
memWxCode:'',//微信号
memNickName:'',//昵称
memSex: '',//性别
memBirthday: '',//生日
memCode: '',//会员号
memConstellation:'',//星座
memHeight:'',//身高
memWeight:'',//体重
......@@ -438,6 +464,7 @@ export default {
memMarriageRemarks:'',//婚姻状态备注
memMbti:'',//人格
},
form:{},
birthday: Number(new Date()),
rules: {
'userInfo.name': [{
......@@ -534,7 +561,7 @@ export default {
},
onReady() {
// 如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则
this.$refs.form1.setRules(this.rules)
// this.$refs.form1.setRules(this.rules)
},
onLoad() {
this.getHeight()
......@@ -544,75 +571,87 @@ export default {
this.showMarriage = false
this.userInfo.memMarriage = e.value
},
confirmCareer(e){
this.showCareer = false
this.userInfo.memCareer = e.value
},
confirmEducation(e){
this.showEducation = false
this.userInfo.memMaxEducation = e.value
this.form.memMaxEducationText = e.data
},
confirmBirthday(e) {
this.showBirthday = false
this.userInfo.memBirthday = uni.$u.timeFormat(e.value, 'yyyy-mm-dd')
// this.$refs.form1.validateField('userInfo.birthday')
},
confirmSex(e){
this.showSex = false
this.userInfo.memSex = e.value
},
confirmAge(e){
this.showAge = false
this.userInfo.memAge = e.value
},
confirmHeight(e){
this.showHeight = false
this.userInfo.memHeight = e.value
this.getConstellation(value)
},
change(e) {
getConstellation (value) {
const month = value.getMonth() + 1 // 月份是从0开始的，+1修正
const day = value.getDate()
},
cancelPicker() {
this.showAge = false
this.showSex = false
this.showHeight = false
this.showBirthday = false
this.showCareer = false
this.showMarriage = false
},
getAge() {
const ageArray = []
for (let index = 1; index < 100; index++) {
ageArray.push(index)
if ((month === 1 && day >= 20) || (month === 2 && day <= 18)) {
this.form.memConstellation = 1
this.form.memConstellationText = '水瓶座'
} else if ((month === 2 && day >= 19) || (month === 3 && day <= 20)) {
this.form.memConstellation = 2
this.form.memConstellationText = '双鱼座'
} else if ((month === 3 && day >= 21) || (month === 4 && day <= 19)) {
this.form.memConstellation = 3
this.form.memConstellationText = '白羊座'
} else if ((month === 4 && day >= 20) || (month === 5 && day <= 20)) {
this.form.memConstellation = 4
this.form.memConstellationText = '金牛座'
} else if ((month === 5 && day >= 21) || (month === 6 && day <= 20)) {
this.form.memConstellation = 5
this.form.memConstellationText = '双子座'
} else if ((month === 6 && day >= 21) || (month === 7 && day <= 22)) {
this.form.memConstellation = 6
this.form.memConstellationText = '巨蟹座'
} else if ((month === 7 && day >= 23) || (month === 8 && day <= 22)) {
this.form.memConstellation = 7
this.form.memConstellationText = '狮子座'
} else if ((month === 8 && day >= 23) || (month === 9 && day <= 22)) {
this.form.memConstellation = 8
this.form.memConstellationText = '处女座'
} else if ((month === 9 && day >= 23) || (month === 10 && day <= 22)) {
this.form.memConstellation = 9
this.form.memConstellationText = '天秤座'
} else if ((month === 10 && day >= 23) || (month === 11 && day <= 21)) {
this.form.memConstellation = 10
this.form.memConstellationText = '天蝎座'
} else if ((month === 11 && day >= 22) || (month === 12 && day <= 21)) {
this.form.memConstellation = 11
this.form.memConstellationText = '射手座'
} else if ((month === 12 && day >= 22) || (month === 1 && day <= 19)) {
this.form.memConstellation = 12
this.form.memConstellationText = '摩羯座'
}
this.ageActions.push(ageArray)
},
getHeight() {
const heightArray = []
for (let index = 120; index < 200; index++) {
heightArray.push(index)
}
this.heightActions.push(heightArray)
confirmSex(e){
this.showSex = false
this.userInfo.memSex = e.value[0].value
this.form.memSexText = e.value[0].label
},
afterRead(event) {
this.fileList1.push({
url: event.file,
status: 'uploading',
message: '上传中'
})
confirmNation(e){
this.showNation = false
this.userInfo.memNation = e.value[0].value
this.form.memNationText = e.value[0].label
},
groupChange(n) {
// console.log('groupChange', n);
confirmResidence(e){
this.showResidence = false
this.form.memResidence = e.value[0].label + '/' + e.value[1].label
this.userInfo.memResidenceProvince = e.value[0].value
this.userInfo.memResidenceCity = e.value[1].value
},
radioChange(n) {
// console.log('radioChange', n);
changeResidence(e) {
// 更新城市列表为当前选中省份的城市列表
this.$set(this.residenceActions, 1, e.value[0].children);
},
navigateBack() {
uni.navigateBack()
confirmNative(e){
this.showNative = false
this.form.memNative = e.value[0].label + '/' + e.value[1].label
this.userInfo.memNativeProvince = e.value[0].value
this.userInfo.memNativeCity = e.value[1].value
},
sexSelect(e) {
this.model1.userInfo.sex = e.name
this.$refs.form1.validateField('userInfo.sex')
changeNative(e) {
// 更新城市列表为当前选中省份的城市列表
this.$set(this.nativeActions, 1, e.value[0].children);
},
formatter(day) {
const d = new Date()
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment