模态窗修改个人资料

子组件

<temlate>
  //模态窗 编辑信息 如编辑 添加
  <div class="model-container animated-5 fadeIn edit-model flex-dire-center" :style="modelStyle" v-show="showModle">
     <div class="model-box posi-relative" :style="styleCpt">
        //标题+关闭
        <div class="model-title flex-jf-btw">
            //标题
            <span class="ft-size-16" v-html="title_txt"></span>
         </div>
        //主要内容
        <div class="model-content posi-relative" :style="sytleCnt"
            :class="{'btn-box-hide':(isEdit===''||!isEdit)&&isEdit!==undefined,noEdit:isEdit=='noEdit'}">
            <slot></slot>
            <p class='posi-absolute-0' v-if='!isEdit&&isEdit!=undefined'></P>
    </div>
    //按钮
    <div class="flex-jf-end btn-box posi-absolute" v-if="(isEdit||isEdit===undeined)&&isEdit!='noEdit'&&isEdit!='compare'">
    <btn-gray @click="emmit('cancleFn')" class="btn-free-g" style="margin-right:20px">取消</btn-gray>
    <btn-orange v-if="allFn===''" @click="$emit('allFn')" styleCpt="margin-right:1rem;">一键通过</btn-orange>
    
    <btn-orange v-if="isShowSave" styleCpt="cursor:no-drop;">{{btnOk_txt}}</btn-orange>
   </div>
    <div class="btn-box" v-if="isEdit=='noEdit'">
     <btn-red v-if="allFn===''" @click="$emit('allFn')" styleCpt='margin-right:1rem;'>保存</btn-red>
   <div class="btn-box  compare" v-if="isEdit=='compare'">
   <btn-orange @click="$emit('saveFn')" styleCpt="margin-right:1rem;">确认对比</btn-orange>
   <btn-gry @click="$emit('cancleFn')" class="btn-free-g" style="margin-right:20px">取消</btn-gry>
    </div>
</div>
</div>
</template>
<script>
export default{
     inheritAttrs:false,//根元素不继承特性
     props:['styleCpt','btnOk','btnCls','showModle','modelStyle','isEdit','styleCnt','isShowSave','allFn'],
mounted(){
    if(this.title){
        this.title_txt = this.title;

     }
    if(this.btnOk){
         this.btnOk_txt=this.btnOk;
     }
  },
data(){
    return {
        icon_url:'',
        title_txt:'信息编辑'，
        btnOk_txt:'确定'，
    
    }
 }，
watch:{
    title(title){
        this.title_txt=title
    },
    isShowSave(val){
        this.isShowSave=val;
    },
    btnOk(newVal){
        this.btnOk_txt=newVal;
    }

 }

}

</script>


<style scoped lang="less">
  .edit-model{
    display:block;
    .model-box{
        width:20rem;
        top:40%;
        transform:translateX(-50%)translateY(-50%);
        .model-content:{
            min-height:4rem;
            max-height:20rem;
            padding:1.15rem;
            margin-bottom:3.8rem;
            overflow:auto;
        }
        .model-content.noEdit{
            min-height:4rem;
            max-height:20rem;
            padding:1.15rem;
            margin-bottom:3.8rem;
            overflow:auto;
         }
        .model-content.noEdit{
            margin-bottom:0rem;
            padding-bottom:1rem;
            margin-right:1rem;       
        }
        .btn-box{
            bottom:0;
            left:0.5rem;
            right:0.5rem;
            padding:1rem 0.8rem;
            border-top:0.05rem solid #e8e8e8;
        }
       .conpare{
            display:flex;
            justify-content:center
        }
       .btn-box-hide{
            margin-bottom:0;
        }
    }

}
            

父组件中的写法

...................
//修改密码弹框提示
<model-comm-edit
  :showModel="isModifyPassword"
  title="修改密码"
  styleCpt="width:20rem"
  @cancleFn="isModifyPassword=false"
  @saveFn="modifyPassword"
>
   <div class="rows">
      <div class="fles-1">
        <wk-input label="手机号" labelCls="txt-left" v-model="userMail"/>
      </div>
    </div>
    <div class="rows">
      <div class="flex-1">
        <wk-input label="邮箱" labelCls="txt-left" v-model="userMail"/>
       </div>
    </div>
    <div class="rows">
      <div class="flex-1">
        <wk-input label="旧密码"
            lableCls="txt-left"
            type="password"
            v-model="oldPassword"
        />
      </div>
    </div>
    <div class="rows">
     <div class="flex-1">
        <wk-input
            label="新密码"
            labelCls="txt-left"
            type="password"
            v-model="confirmPassword"
        />
    </div>
</div>
</model-comm-edit>
//错误信息提示
<model-error/>
//公用信息弹框
<model-comm/>
//lodading
<model-loading/>
</div>
</div>
..............

<script>
  export default{
    data(){
        return {
            isModifyPassword:false,//  修改密码弹框
            userPhone:'',
            userMail:'',
            oldPassword:'';
            newPassword:'';
            confirmPassword:'';
        }，
    methods:{
        //修改密码弹框提示
        confirPasswords(){
            let that=this
            that.isModifyPassword=true
            that.oldPassword='';
            that.newPassword = '';
            that.confirmPassword = '';
            that.userPhone = that.$store.state.userInfo.phone
            that.usreMail = that.$store.state.userInfo.email
        },
        //确定修改密码
        modifyPassword(){
            let that=this,user={};
            if(that.checkVale()){
                user={
                    phone:that.userPhone,
                    email:that.userMail
                }
                if(that.confirmPassword){
                    user.newPassword = that.confirPassword;
                    user.oldPassword = that.oldPassword;
                }
                //发送请求
                that.$post('/xxxx/xxxxx/xxxx?'+that.$qs(user)).then((res)=>{
                    if(res.code==1){
                        that.isModifyPassword =false;
                        let tmp = Object.assign({},that.$store.state.userInfo);
                        tmp.phone = that.userPhone;
                        tmp.email = that.usserMaill
                        that.$store.commit('upUserInfo',tmp)
                        that.$emit('showErrorMsgMini',{type:'success',msg:'用户编辑成功'})
                    }
                })
                //修改密码
                that.$post('/xxxx/xxxx/xxx/xx?'+that.$qs(user).then((res)=>{
                    that.isModifyPassword =false;
                    if(res.code ==1){
                        that.showErrorMsgMini({type:'success',msg:'密码修改成功'})
                    }else{
                        that.showErrorMsgMini(res.message)
                    }
                }))
            }
        },
        //密码校验
        checkVale(){
            let that=this,errorMsg ='';
            if(that.userPhone == ''){
                errorMsg = '请输入手机号'；
            }else if(!(/^1[3456789]\d{9}$/.test(that.userPhone))){
                errorMsg='请输入正确的手机号'；
            }else if(that.userMail==''){
                errorMsg = '请输入邮箱'
            }else if(/^([a-zA-Z]|[0-9])(\W|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/.test(that.userMail)){
                errorMsg = '请输入正确的邮箱'
            }else if(that.oldPassword !=''||that.newPassword !=''||that.confirmPassword !=''){
                if(that.oldPassword ==''){
                    errorMsg = '请输入旧密码'
                }else if(that.newPassword==''){
                    errorMsg = '请输入新密码'
                }else if(that.newOassword.length<6){
                    errorMsg = '输入密码不能小于6位'
                }else if(that.confirmPassword !=that.newPassword){
                    errorMsg= '两次密码输入不一致'
                }
            
            }
            if(errorMsg !=''){
                that.showErrorMsgMini(errorMsg);
                return faldse;
            }else{
                return true;
            }
        }
    }

    }

}