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.
326 lines
7.7 KiB
326 lines
7.7 KiB
<template> |
|
<view class="index-box"> |
|
<view class="upload-img-box"> |
|
<view class="label-box"> |
|
<view class="label-l acea-row-nowrap row-middle"> |
|
<text class="label">工作照</text> |
|
<text class="sm-word">请上传正面免冠半身照图像大小不超过200kb</text> |
|
</view> |
|
<view class="label-r acea-row row-middle"> |
|
<view class="img-box" @tap="chooseImage"> |
|
<image :src="form.imgPath == '' ? '../../static/default-headerimg.png' : form.imgPath " mode=""></image> |
|
</view> |
|
<text class="iconfont icon-jiantou"></text> |
|
</view> |
|
</view> |
|
</view> |
|
<view class="form-box"> |
|
<view class="form-item acea-row row-middle row-between"> |
|
<view class="label">姓名</view> |
|
<view class="input-box acea-row row-middle"> |
|
<input type="text" v-model="form.realName" placeholder="请输入真实姓名" /> |
|
<text class="iconfont icon-jiantou"></text> |
|
</view> |
|
</view> |
|
<view class="form-item acea-row row-middle row-between"> |
|
<view class="label">注册口令</view> |
|
<view class="input-box acea-row row-middle"> |
|
<input type="text" v-model="form.code" placeholder="请输入注册口令" /> |
|
<text class="iconfont icon-jiantou"></text> |
|
</view> |
|
</view> |
|
<view class="form-item acea-row row-middle row-between "> |
|
<view class="label">性别</view> |
|
<view class="input-box acea-row row-middle"> |
|
<radio-group @change="radioChange"> |
|
<label class="radio"> |
|
<radio value="0" color="#F99C10" :checked="form.gender == 0" /><text>男</text> |
|
</label> |
|
<label class="radio"> |
|
<radio value="1" color="#F99C10" :checked="form.gender == 1" /><text>女</text> |
|
</label> |
|
</radio-group> |
|
</view> |
|
</view> |
|
<view class="form-item acea-row row-middle row-between"> |
|
<view class="label">手机号</view> |
|
<view class="input-box acea-row row-middle"> |
|
<input type="text" v-model="form.phone" maxlength="11" @blur="editPhone(form.phone)" placeholder="请输入手机号" /> |
|
<text class="iconfont icon-jiantou"></text> |
|
</view> |
|
</view> |
|
<view class="form-item acea-row row-middle row-between no-border"> |
|
<view class="label">验证码</view> |
|
<view class="acea-row row-middle "> |
|
<view class="input-box acea-row row-middle"> |
|
<input type="text" v-model="form.verifyCode" maxlength="6" placeholder="请输入短信验证码" /> |
|
</view> |
|
<view class="countdown" :class="disabled ? 'default' : ''" @click="sendCode"> |
|
{{disabled ? second + '秒后重新发送' : '发送验证码'}} |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
<view class="submit-btn" @click="submitClick">{{userInfo.isPromoter == 1 ? '保存修改' : '保存'}}</view> |
|
</view> |
|
</template> |
|
|
|
<script> |
|
import { chooseImage } from "@/utils"; |
|
import { editSelfData , getVerificationCode } from "@/api/serverTeacher" |
|
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex' |
|
export default{ |
|
computed: mapGetters(['userInfo']), |
|
data(){ |
|
return { |
|
disabled: false, |
|
second: 60, |
|
time:null, |
|
form: { |
|
imgPath:'', |
|
realName:'', |
|
code:'', |
|
gender: 0, |
|
phone: '', |
|
verifyCode:'' |
|
} |
|
} |
|
}, |
|
onLoad(){ |
|
if(this.userInfo.phone){ |
|
this.form.phone = this.userInfo.phone; |
|
} |
|
if(this.userInfo.isPromoter == 1){ |
|
let info = this.userInfo; |
|
this.form.imgPath = info.workPhoto; |
|
this.form.realName = info.realName; |
|
this.form.gender = info.gender; |
|
this.form.phone = info.phone; |
|
} |
|
}, |
|
methods:{ |
|
sendCode(){ |
|
var reg=/^1[3456789]\d{9}$/; |
|
if (this.form.phone === '') { |
|
uni.showModal({ |
|
title: '手机号码不能为空', |
|
type: 'none' |
|
}); |
|
return |
|
} else if(!reg.test(this.form.phone)){ |
|
uni.showModal({ |
|
title: '请输入有效的手机号码', |
|
type: 'none' |
|
}); |
|
return |
|
} else{ |
|
getVerificationCode({phone:this.form.phone}).then((res)=>{ |
|
if(res.success){ |
|
uni.showToast({ |
|
title:'短信已发送！' |
|
}) |
|
if(this.disabled == false){ |
|
clearInterval(this.timer) |
|
this.disabled = true; |
|
this.timer = setInterval(()=>{ //设置延迟执行 |
|
this.timeup() |
|
},1000); |
|
} |
|
} else{ |
|
uni.showToast({ |
|
title:res.msg, |
|
icon:'none' |
|
}) |
|
} |
|
}) |
|
} |
|
}, |
|
timeup(){ |
|
this.second = this.second - 1; |
|
if (this.second == 0) { |
|
this.second = 60; |
|
this.disabled = false |
|
clearInterval(this.timer) |
|
return; |
|
} |
|
}, |
|
chooseImage() { |
|
chooseImage((img) => { |
|
this.form.imgPath = img; |
|
}); |
|
}, |
|
radioChange(e){ |
|
// console.log(e) |
|
this.form.gender = e.detail.value |
|
}, |
|
editPhone(phone){ |
|
if (phone === '') { |
|
uni.showModal({ |
|
title: '手机号码不能为空', |
|
type: 'none' |
|
}); |
|
} |
|
else { |
|
if (phone !== '') { |
|
var reg=/^1[3456789]\d{9}$/; |
|
if(!reg.test(phone)){ |
|
uni.showModal({ |
|
title: '请输入有效的手机号码', |
|
type: 'none' |
|
}); |
|
} |
|
} |
|
} |
|
}, |
|
submitClick(){ |
|
if(this.form.imgPath == ''){ |
|
uni.showModal({ |
|
title: '请上传工作照', |
|
type: 'none' |
|
}); |
|
return |
|
} else if(this.form.realName == ''){ |
|
uni.showModal({ |
|
title: '请输入真实姓名', |
|
type: 'none' |
|
}); |
|
return |
|
} else if(this.form.code == ''){ |
|
uni.showModal({ |
|
title: '请输入注册口令', |
|
type: 'none' |
|
}); |
|
return |
|
} else if(this.form.phone == ''){ |
|
uni.showModal({ |
|
title: '请输入手机号', |
|
type: 'none' |
|
}); |
|
return |
|
} else if(!(/^1[3456789]\d{9}$/.test(this.form.phone))){ |
|
uni.showModal({ |
|
title: '请输入正确手机号', |
|
type: 'none' |
|
}); |
|
return |
|
} else if(this.form.verifyCode == ''){ |
|
uni.showModal({ |
|
title: '请输入手机短信验证码', |
|
type: 'none' |
|
}); |
|
return |
|
} |
|
editSelfData(this.form).then((res)=>{ |
|
if(res.success){ |
|
this.$store.dispatch("userInfo", true); |
|
uni.showToast({ |
|
title: res.msg, |
|
icon: "none", |
|
duration: 2000, |
|
}); |
|
setTimeout(()=>{ |
|
this.$yrouter.back(); |
|
},2000) |
|
} else{ |
|
uni.showToast({ |
|
title:res.msg, |
|
icon:'none', |
|
duration:2000 |
|
}) |
|
} |
|
}) |
|
|
|
}, |
|
} |
|
} |
|
</script> |
|
|
|
<style lang="less" scoped> |
|
.index-box{ |
|
width: 100%; |
|
height: 100vh; |
|
background-color: #fff; |
|
padding: 0 30rpx; |
|
font-size: 32rpx; |
|
color: #222; |
|
.upload-img-box{ |
|
width: 100%; |
|
padding: 40rpx 0; |
|
} |
|
.label-box{ |
|
display: flex; |
|
justify-content: space-between; |
|
.label{ |
|
width: 110rpx; |
|
} |
|
.sm-word{ |
|
width: 270rpx; |
|
font-size: 24rpx; |
|
color: #999; |
|
margin-left: 12rpx; |
|
} |
|
} |
|
.label-r{ |
|
.img-box{ |
|
border-radius: 50px; |
|
overflow: hidden; |
|
image{ |
|
width: 116rpx; |
|
height: 116rpx; |
|
border-radius: 50px; |
|
} |
|
} |
|
.iconfont{ |
|
color: #999; |
|
margin-left: 12rpx; |
|
} |
|
} |
|
.form-box{ |
|
.form-item{ |
|
padding: 30rpx 0; |
|
border-bottom: 1px solid #ececec; |
|
.input-box{ |
|
input{ |
|
text-align: right; |
|
margin-right: 12rpx; |
|
} |
|
.radio{ |
|
margin-left: 20rpx; |
|
} |
|
} |
|
} |
|
.no-border{ |
|
border: none; |
|
} |
|
.countdown{ |
|
min-width: 140rpx; |
|
height: 70rpx; |
|
padding: 0 10rpx; |
|
font-size: 24rpx; |
|
background-color: #E2B35D; |
|
color: #fff; |
|
line-height: 70rpx; |
|
text-align: center; |
|
border-radius: 10rpx; |
|
} |
|
.default{ |
|
background: #999; |
|
color: #fff; |
|
} |
|
} |
|
.submit-btn{ |
|
width: 646rpx; |
|
height: 80rpx; |
|
text-align: center; |
|
line-height: 80rpx; |
|
background: #F4C076; |
|
border-radius: 44rpx; |
|
color: #fff; |
|
position: absolute; |
|
bottom: 100rpx; |
|
left: 50%; |
|
margin-left: -320rpx; |
|
} |
|
|
|
} |
|
</style>
|
|
|