123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281 |
- <template>
- <view class="OutermostLayer">
- <view class="Personalinformationedit">
- <!-- 注意,如果需要兼容微信小程序,最好通过setRules方法设置rules规则 -->
- <u--form
- labelPosition="left"
- :model="model1"
- :rules="rules"
- ref="form1">
- <u-form-item
- labelWidth="120"
- label="用户名:"
- prop="userInfo.realName"
- borderBottom
- ref="item1" >
- <u--input
- v-model="model1.userInfo.realName"
- clearable
- border="none"
- ></u--input>
- </u-form-item>
- <u-form-item
- labelWidth="120"
- label="手机:"
- prop="userInfo.mobile"
- borderBottom
- ref="item1"
- >
- <u--input
- v-model="model1.userInfo.mobile"
- clearable
- border="none"
- ></u--input>
- </u-form-item>
- <u-form-item
- labelWidth="120"
- label="邮箱:"
- prop="userInfo.email"
- borderBottom
- ref="item1"
- >
- <u--input
- v-model="model1.userInfo.email"
- clearable
- border="none"
- ></u--input>
- </u-form-item>
- <u-form-item
- label="性别:"
- labelWidth="120"
- prop="userInfo.gender"
- borderBottom
- @click="showSex = true"
- ref="item1"
- >
- <u--input
- v-model="model1.userInfo.gender"
- disabled
- disabledColor="#ffffff"
- placeholder="请选择性别"
- border="none"
- ></u--input>
- <u-icon
- slot="right"
- name="arrow-right"
- ></u-icon>
- </u-form-item>
- <!--<u-form-item-->
- <!--labelWidth="120"-->
- <!--label="地址:"-->
- <!--prop="userInfo.address"-->
- <!--borderBottom-->
- <!--ref="item1" >-->
- <!--<u--input-->
- <!--v-model="model1.userInfo.address"-->
- <!--clearable-->
- <!--border="none"-->
- <!--></u--input>-->
- <!--</u-form-item>-->
- <u-form-item
- labelWidth="120"
- label="部门:"
- prop="userInfo.deptName"
- borderBottom
- ref="item1" >
- <u--input
- v-model="model1.userInfo.deptName"
- clearable
- border="none"
- ></u--input>
- </u-form-item>
- <!--<u-form-item-->
- <!--labelWidth="120"-->
- <!--label="职位:"-->
- <!--prop="userInfo.position"-->
- <!--borderBottom-->
- <!--ref="item1" >-->
- <!--<u--input-->
- <!--v-model="model1.userInfo.position"-->
- <!--clearable-->
- <!--border="none"-->
- <!--></u--input>-->
- <!--</u-form-item>-->
- </u--form>
- <!--<u-action-sheet-->
- <!--:show="showSex"-->
- <!--:actions="actions"-->
- <!--title="请选择性别"-->
- <!--@close="showSex = false"-->
- <!--@select="sexSelect"-->
- <!-->-->
- <!--</u-action-sheet>-->
- <view class="submitdata">
- <u-button type="primary" @click="submit">提交</u-button>
- </view>
- </view>
- <u-notify ref="uNotify" message="" ></u-notify>
- <u-picker :show="showSex" @cancel="showSex = false" @confirm="sexSelect" :columns="actions" keyName="name"></u-picker>
- </view>
- </template>
- <script>
- export default {
- data() {
- return {
- getuserInfo:{},
- showSex: false,
- model1: {
- userInfo: {
- realName: '',
- gender: '',
- mobile:'',
- email:'',
- // address:'安徽省合肥市',
- deptName:'',
- // position:'前端工程师'
- },
- },
- actions: [
- [
- {
- id:0,
- name: '男',
- },
- {
- id:1,
- name: '女',
- },
- {id:2,
- name: '保密',
- },
- ]
- ],
- rules: {
- 'userInfo.name': {
- type: 'string',
- required: true,
- message: '请填写姓名',
- trigger: ['blur', 'change']
- },
- 'userInfo.email': [
- {
- required: true,
- message: '请输入邮箱号',
- trigger: ['change','blur'],
- },
- {
- // 自定义验证函数,见上说明
- validator: (rule, value, callback) => {
- // 上面有说,返回true表示校验通过,返回false表示不通过
- // uni.$u.test.mobile()就是返回true或者false的
- return uni.$u.test.email(value);
- },
- message: '邮箱不正确',
- // 触发器可以同时用blur和change
- trigger: ['change','blur'],
- }
- ],
- 'userInfo.mobile': [
- {
- required: true,
- message: '请输入邮箱',
- trigger: ['change','blur'],
- },
- {
- // 自定义验证函数,见上说明
- validator: (rule, value, callback) => {
- // 上面有说,返回true表示校验通过,返回false表示不通过
- // uni.$u.test.mobile()就是返回true或者false的
- return uni.$u.test.mobile(value);
- },
- message: '手机号码不正确',
- // 触发器可以同时用blur和change
- trigger: ['change','blur'],
- }
- ],
- 'userInfo.gender': {
- type: 'string',
- max: 2,
- required: true,
- message: '请选择',
- trigger: ['blur', 'change']
- },
- },
- };
- },
- onLoad(options){
- let userInfo= uni.getStorageSync('getuserInfo');
- if(userInfo.gender==0){
- userInfo.gender='男'
- }else if(userInfo.gender==1){
- userInfo.gender='女'
- }else if(userInfo.gender==2){
- userInfo.gender='保密'
- }
- // console.log('111111111111111111',userInfo)
- this.model1.userInfo=userInfo;
- //this.getuserInfo
- },
- methods: {
- sexSelect(e) {
- //console.log('111111111111111111',e)
- this.model1.userInfo.gender = e.value[0].name;
- this.$refs.form1.validateField('userInfo.gender')
- this.showSex=false;
- },
- submit() {
- this.$refs.form1.validate().then(res => {
- if(this.model1.userInfo.gender=='男'){
- this.model1.userInfo.gender=0
- }else if(this.model1.userInfo.gender=='女'){
- this.model1.userInfo.gender=1
- }else if(this.model1.userInfo.gender=='保密'){
- this.model1.userInfo.gender=2
- }
- this.$api.put('/user/',this.model1.userInfo)
- .then(res=>{
- console.log('111111111111111111',res)
- if(res.data.code==0){
- uni.navigateBack({
- delta: 1
- });
- }else{
- this.$refs.uNotify.error(res.data.msg)
- }
- })
- }).catch(errors => {
- uni.$u.toast('校验失败')
- })
- },
- },
- onReady() {
- //如果需要兼容微信小程序,并且校验规则中含有方法等,只能通过setRules方法设置规则。
- this.$refs.form1.setRules(this.rules)
- },
- };
- </script>
- <style lang="scss">
- .Personalinformationedit{
- padding: 30rpx;
- }
- .submitdata{
- margin-top: 40rpx;
- }
- </style>
|