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.
325 lines
7.7 KiB
325 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">
|
||
|
|
<radio value="0" color="#E5270F" style="transform:scale(0.7)" :checked="form.gender == 0" /><text>男</text>
|
||
|
|
</label>
|
||
|
|
<label class="radio">
|
||
|
|
<radio value="1" color="#E5270F" style="transform:scale(0.7)" :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.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>
|