Skip to content

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

修改表单

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