You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
488 lines
13 KiB
488 lines
13 KiB
<template> |
|
<view class="body-background"></view> |
|
<u-navbar |
|
:title="title" |
|
:auto-back="true" |
|
left-icon-size="40rpx" |
|
:safe-area-inset-top="true" |
|
:placeholder="true" |
|
bgColor="#ffffff" |
|
></u-navbar> |
|
<view class="app-wallpaper"> |
|
<u-row :custom-style="{ |
|
backgroundColor:'#fff', |
|
borderRadius:'10rpx', |
|
alignItems:'flex-start' |
|
}"> |
|
<u-col :custom-style="{padding:'30rpx 40rpx',height:size.height+'px'}"> |
|
<u-form |
|
errorType="toast" |
|
labelPosition="left" |
|
:model="model" |
|
:rules="rules" |
|
ref="userInfo" |
|
labelWidth="200rpx" |
|
> |
|
<u-form-item |
|
:custom-style="{ |
|
padding:'34rpx 0' |
|
}" |
|
label="姓名" |
|
prop="userInfo.name" |
|
borderBottom |
|
|
|
> |
|
<u-input |
|
type="nickname" |
|
fontSize="28" |
|
placeholder="请填写您的真实姓名" |
|
v-model="model.userInfo.name" |
|
border="none" |
|
></u-input> |
|
</u-form-item> |
|
<u-form-item |
|
:custom-style="{ |
|
padding:'34rpx 0' |
|
}" |
|
label="手机号码" |
|
prop="userInfo.phone" |
|
borderBottom |
|
|
|
> |
|
<u-input |
|
fontSize="28" |
|
placeholder="请输入" |
|
v-model="model.userInfo.phone" |
|
border="none" |
|
></u-input> |
|
</u-form-item> |
|
<u-form-item |
|
:custom-style="{ |
|
padding:'34rpx 0' |
|
}" |
|
label="所属街道" |
|
prop="userInfo.street" |
|
borderBottom |
|
|
|
> |
|
<u-text |
|
@click="openStreetPicker" |
|
:text="model.userInfo.street||'请选择'" |
|
size="28" |
|
:color="model.userInfo.street?'#020B18':'#AFB5BE'" |
|
suffixIcon="arrow-right" |
|
:icon-style="{color:(model.userInfo.street?'#020B18':'#AFB5BE')}" |
|
></u-text> |
|
</u-form-item> |
|
<u-form-item |
|
:custom-style="{ |
|
padding:'34rpx 0' |
|
}" |
|
label="所属社区" |
|
prop="userInfo.community" |
|
borderBottom |
|
|
|
> |
|
<u-text |
|
@click="openCommunityPicker" |
|
:text="model.userInfo.community||'请选择'" |
|
size="28" |
|
:color="model.userInfo.community?'#020B18':'#AFB5BE'" |
|
suffixIcon="arrow-right" |
|
:icon-style="{color:(model.userInfo.community?'#020B18':'#AFB5BE')}" |
|
></u-text> |
|
</u-form-item> |
|
|
|
<u-form-item |
|
:custom-style="{ |
|
padding:'34rpx 0', |
|
position:'relative' |
|
}" |
|
label="公司全称" |
|
prop="userInfo.company" |
|
borderBottom |
|
|
|
> |
|
<view class="" v-if="tipShow && tips.length > 0" style=" |
|
background-color:#fff; |
|
border:2rpx solid #dedede; |
|
border-radius: 20rpx; |
|
position: absolute; |
|
top:110%; |
|
z-index: 10; |
|
padding:0 20rpx; |
|
"> |
|
<view |
|
v-for="(item,index) in tips" |
|
class="" |
|
style=" |
|
border-bottom:2rpx solid #dedede; |
|
padding:20rpx 0; |
|
min-width:150rpx; |
|
" |
|
@click="selectTip(item)" |
|
@mousedown.prevent> |
|
<u-text :text="item" size="28"></u-text> |
|
</view> |
|
<!-- <view style="padding:20rpx 0;display:flex;justify-content: flex-end;text-align: right;" @click="tipShow = false;">--> |
|
<!-- <u-button text="关闭提示" size="mini" custom-style="background-color:#FF9545;"></u-button>--> |
|
<!-- </view>--> |
|
</view> |
|
<u-input |
|
fontSize="28" |
|
placeholder="请输入" |
|
v-model="model.userInfo.company" |
|
border="none" |
|
@change="filterTip" |
|
@focus="filterTip" |
|
@blur="blurCompany" |
|
> |
|
</u-input> |
|
|
|
</u-form-item> |
|
<u-form-item |
|
:custom-style="{ |
|
padding:'34rpx 0' |
|
}" |
|
label="职业分类" |
|
prop="userInfo.position" |
|
borderBottom |
|
> |
|
<u-text |
|
@click="openPositionPicker" |
|
:text="model.userInfo.position||'请选择'" |
|
size="28" |
|
:color="model.userInfo.position?'#020B18':'#AFB5BE'" |
|
suffixIcon="arrow-right" |
|
:icon-style="{color:(model.userInfo.position?'#020B18':'#AFB5BE')}" |
|
></u-text> |
|
<u-input |
|
fontSize="28" |
|
placeholder="请输入" |
|
v-model="model.userInfo.position_text" |
|
border="none" |
|
custom-style="margin-top:20rpx;" |
|
v-if="(model.userInfo.position === '其他')" |
|
></u-input> |
|
</u-form-item> |
|
<u-form-item |
|
:custom-style="{ |
|
padding:'34rpx 0' |
|
}" |
|
label="身份证号码" |
|
prop="userInfo.id_card" |
|
|
|
> |
|
<u-input |
|
fontSize="28" |
|
placeholder="请输入" |
|
v-model="model.userInfo.id_card" |
|
border="none" |
|
></u-input> |
|
</u-form-item> |
|
</u-form> |
|
</u-col> |
|
</u-row> |
|
</view> |
|
<view class="foot-button border-box"> |
|
<u-button |
|
type="primary" |
|
text="保存" |
|
shape="circle" |
|
:custom-style="{ |
|
color:'#020B18', |
|
backgroundColor:'#FF9545', |
|
border:'none', |
|
fontSize:'36', |
|
fontWeight:'400', |
|
height:'80rpx' |
|
}" |
|
@click="submit" |
|
></u-button> |
|
</view> |
|
<uv-picker |
|
ref="street" |
|
:columns="[streetList]" |
|
keyName="name" |
|
@confirm="selectStreet"></uv-picker> |
|
<uv-picker |
|
ref="community" |
|
:columns="[communityList]" |
|
keyName="name" |
|
@confirm="selectCommunity"></uv-picker> |
|
<uv-picker |
|
ref="position" |
|
:columns="[positionList]" |
|
keyName="name" |
|
@confirm="selectPosition"></uv-picker> |
|
</template> |
|
|
|
<script> |
|
import { |
|
imghost |
|
} from '@/config/host.js' |
|
import MzSubsection from '@/components/MzSubsection/Index.vue'; |
|
import api from '@/utils/functions.js'; |
|
import {userDetail, userEdit, userExtends} from "@/api/user"; |
|
import {getCommonStreet, systemConfig} from "@/api/other"; |
|
|
|
export default { |
|
components: { |
|
MzSubsection |
|
}, |
|
data() { |
|
return { |
|
companyTip:[], |
|
tipShow:false, |
|
tips:[], |
|
model: { |
|
userInfo: { |
|
name:'', |
|
phone:'', |
|
street:'', |
|
community:'', |
|
company:'', |
|
position:'', |
|
id_card:'', |
|
position_text:'', |
|
}, |
|
}, |
|
rules: { |
|
'userInfo.name': { |
|
type: 'string', |
|
required: true, |
|
message: '请填写姓名', |
|
trigger: ['blur', 'change'] |
|
}, |
|
'userInfo.phone': { |
|
type: 'string', |
|
required: true, |
|
message: '请填写手机号码', |
|
trigger: ['blur', 'change'] |
|
}, |
|
'userInfo.street': { |
|
type: 'string', |
|
required: true, |
|
message: '请选择所属街道', |
|
trigger: ['blur', 'change'] |
|
}, |
|
'userInfo.community': { |
|
type: 'string', |
|
required: true, |
|
message: '请选择所属社区', |
|
trigger: ['blur', 'change'] |
|
}, |
|
'userInfo.company': { |
|
type: 'string', |
|
required: true, |
|
message: '请填写公司全称', |
|
trigger: ['blur', 'change'] |
|
}, |
|
'userInfo.id_card': { |
|
type: 'string', |
|
required: true, |
|
message: '请填写身份证号码', |
|
trigger: ['blur', 'change'] |
|
}, |
|
'userInfo.position': { |
|
type: 'string', |
|
required: true, |
|
message: '请填写职业分类', |
|
trigger: ['blur', 'change'] |
|
}, |
|
}, |
|
sexList:[ |
|
{ |
|
id:1, |
|
name: '男', |
|
disabled: false, |
|
}, |
|
{ |
|
i:2, |
|
name: '女', |
|
disabled: false, |
|
}, |
|
], |
|
current: 1, |
|
title: '编辑资料', |
|
loading: true, |
|
staticImage: { |
|
bg: imghost + '/BG.png', |
|
newIcon: imghost + '/new-icon.png', |
|
}, |
|
size: { |
|
height: 500, |
|
}, |
|
streetList:[], |
|
communityList:[], |
|
positionList:[], |
|
} |
|
}, |
|
onLoad() { |
|
|
|
}, |
|
onReady() { |
|
let that = this; |
|
let height = api.wxSystemInfo().system.windowHeight |
|
let headerHeight = uni.$u.getPx(44) + uni.$u.sys().statusBarHeight |
|
|
|
let info = uni.createSelectorQuery().in(this).select('.foot-button'); |
|
info.boundingClientRect(function (data) { |
|
that.size.height = that.size.height = height - headerHeight - data.height - uni.$u.getPx('32rpx'); |
|
}).exec(function (res) { |
|
|
|
}); |
|
}, |
|
computed: { |
|
api() { |
|
return api |
|
}, |
|
sectionStyle() { |
|
const style = {}; |
|
style.padding = '0 26rpx'; |
|
style.position = 'sticky'; |
|
style.zIndex = '9999'; |
|
style.top = api.navHeight().systemBarHeight + 'px' |
|
return style; |
|
}, |
|
listHeight() { |
|
let that = this; |
|
let height; |
|
let info = uni.createSelectorQuery().in(this).select('.subsection'); |
|
info.boundingClientRect(function (data) { |
|
that.size.height = data.height; |
|
}).exec(function (res) { |
|
|
|
}); |
|
// that.size.height = (api.navHeight().windowHeight - height); |
|
} |
|
}, |
|
mounted() { |
|
this.initForm(); |
|
this.getPickerData(); |
|
this.getTips(); |
|
}, |
|
methods: { |
|
blurCompany(){ |
|
uni.$u.sleep(50).then(() => { |
|
this.tipShow = false; |
|
}); |
|
}, |
|
selectTip(item){ |
|
this.model.userInfo.company = item; |
|
this.tipShow = false; |
|
}, |
|
getTips(){ |
|
systemConfig({ |
|
type:'company' |
|
}).then(res => { |
|
this.companyTip = res.data; |
|
}); |
|
}, |
|
filterTip(){ |
|
let i = 0; |
|
this.tips = this.companyTip.filter(res => { |
|
i++; |
|
return (res.indexOf(this.model.userInfo.company)!==-1 && i<=5); |
|
}) |
|
this.tipShow = true; |
|
}, |
|
initForm(){ |
|
if(uni.getStorageSync('user')){ |
|
this.model.userInfo = uni.getStorageSync('user'); |
|
}else{ |
|
userDetail().then((res)=>{ |
|
this.model.userInfo = res.data; |
|
}) |
|
} |
|
console.log(this.model.userInfo) |
|
}, |
|
openStreetPicker(){ |
|
this.$refs.street.open(); |
|
}, |
|
openCommunityPicker(){ |
|
this.$refs.community.open(); |
|
}, |
|
openPositionPicker(){ |
|
this.$refs.position.open(); |
|
}, |
|
selectStreet(e){ |
|
this.model.userInfo.street = e.value[0].name; |
|
this.communityList = e.value[0].children; |
|
}, |
|
selectCommunity(e){ |
|
this.model.userInfo.community = e.value[0].name; |
|
}, |
|
selectPosition(e){ |
|
this.model.userInfo.position = e.value[0].name; |
|
}, |
|
getPickerData(){ |
|
systemConfig({ |
|
type:'job_type' |
|
}).then(res => { |
|
this.positionList = res.data; |
|
console.log(this.positionList) |
|
}) |
|
getCommonStreet({}).then(res => { |
|
this.streetList = res.data |
|
}); |
|
}, |
|
chatDetail(item) { |
|
wx.navigateTo({ |
|
url: '/pages/ChatDetail/index?id=' + item.id |
|
}); |
|
}, |
|
checkSection(index) { |
|
this.current = edit; |
|
}, |
|
scrollToLower() { |
|
|
|
}, |
|
submit(){ |
|
if(this.model.userInfo.position_text)this.model.userInfo.position = this.model.userInfo.position_text |
|
this.$refs.userInfo.validate().then(res => { |
|
userEdit(this.model.userInfo).then((res) => { |
|
if(res.code === 200){ |
|
uni.$u.toast('修改成功') |
|
userDetail().then((res) => { |
|
uni.setStorageSync('user',res.data); |
|
this.$store.commit('userInfo',res.data); |
|
uni.navigateBack({delta:1}) |
|
}); |
|
}else{ |
|
uni.$u.toast(res.msg) |
|
} |
|
}) |
|
}).catch(errors => { |
|
uni.$u.toast(errors[0].message) |
|
}) |
|
}, |
|
getUserExtend() { |
|
userExtends().then((res) => { |
|
if(res.code === 200) { |
|
this.userInfo = res.data; |
|
uni.setStorageSync('user', res.data); |
|
this.$store.commit('userInfo', res.data); |
|
} |
|
}); |
|
} |
|
}, |
|
onPageScroll(res) { |
|
if (res.scrollTop <= 20) { |
|
uni.$emit('isTop', true); |
|
} else { |
|
uni.$emit('isTop', false); |
|
} |
|
}, |
|
created() { |
|
|
|
// this.pagePadding = (api.navHeight().navPaddingTop + |
|
// api.navHeight().navHeight + (api.navHeight().headerPadding * 2)) |
|
}, |
|
|
|
} |
|
</script> |
|
|
|
<style lang="scss"> |
|
@import './components/index.scss'; |
|
</style> |