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.

327 lines
7.7 KiB

3 years ago
<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">
3 years ago
<radio value="0" color="#F99C10" :checked="form.gender == 0" /><text></text>
3 years ago
</label>
<label class="radio">
3 years ago
<radio value="1" color="#F99C10" :checked="form.gender == 1" /><text></text>
3 years ago
</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(){
3 years ago
if(this.userInfo.phone){
this.form.phone = this.userInfo.phone;
}
3 years ago
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>