子组件
<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;
}
}
}
}
}