<template>
<view>
<status-nav navBarTitle="个人信息" returnColor="#c2c2c2"></status-nav>
<container-subgroup-two>
<view slot="content" style="margin: 0 -30rpx;">
<view class="fon28">
<view class="bacf pad-sx30 pad-zy40 disac bbot">
<view class="bold width30 flexs">我的昵称</view>
<view class="width100" style="color: #8b8b8b;">
<input type="text" v-model="nickname" placeholder="请输入昵称" placeholder-style="font-size:28rpx;color:#8b8b8b;" />
</view>
</view>
<view class="bacf pad-sx30 pad-zy40 disac bbot">
<view class="bold width30 flexs">姓名</view>
<view class="width100" style="color: #8b8b8b;">
<input type="text" v-model="full_name" placeholder="请输入姓名" placeholder-style="font-size:28rpx;color:#8b8b8b;" />
</view>
</view>
<view class="bacf pad-sx30 pad-zy40 disac bbot">
<view class="bold width30 flexs">性别</view>
<view class="disac">
<view @tap="chooseGender(1)" class="disac gender-box" :class="genderNum==1 ? 'gender-active' : ''">
<view></view>
<text>男</text>
</view>
<view @tap="chooseGender(2)" class="disac gender-box" :class="genderNum==2 ? 'gender-active' : ''">
<view></view>
<text>女</text>
</view>
</view>
</view>
<view class="bacf pad-sx30 pad-zy40 disac bbot">
<view class="bold width30 flexs">联系电话</view>
<view class="width100" style="color: #8b8b8b;">
<input type="number" v-model="contact_number" maxlength="11" placeholder="请输入联系电话" placeholder-style="font-size:28rpx;color:#8b8b8b;" />
</view>
</view>
<view class="bacf pad-sx30 pad-zy40 disac bbot">
<view class="bold width30 flexs">电子邮箱</view>
<view class="width100" style="color: #8b8b8b;">
<input type="text" v-model="e_mail" placeholder="请输入电子邮箱" placeholder-style="font-size:28rpx;color:#8b8b8b;" />
</view>
</view>
<view class="bacf pad-sx30 pad-zy40 disac bbot mar-s10">
<view class="bold width30 flexs">身份证号码</view>
<view class="width100" style="color: #8b8b8b;">
<input type="text" v-model="id_card_no" placeholder="请输入身份证号码" placeholder-style="font-size:28rpx;color:#8b8b8b;" />
</view>
</view>
<view class="bacf pad-sx30 pad-zy40 disac bbot">
<view class="bold width30 flexs">身份证正面</view>
<view style="color: #f26803;" class="width100 disjbac">
<text @tap="previewImageEv(0)">查看</text>
<image @tap="uploadImgEv(0)" src="/static/public/icon-personInfo-upload.png" mode="widthFix" lazy-load style="width: 128rpx;height: 50rpx;"></image>
</view>
</view>
<view class="bacf pad-sx30 pad-zy40 disac bbot">
<view class="bold width30 flexs">身份证反面</view>
<view style="color: #f26803;" class="width100 disjbac">
<text @tap="previewImageEv(1)">查看</text>
<image @tap="uploadImgEv(1)" src="/static/public/icon-personInfo-upload.png" mode="widthFix" lazy-load style="width: 128rpx;height: 50rpx;"></image>
</view>
</view>
<view class="bacf pad-sx30 pad-zy40 disac bbot">
<view class="bold width30 flexs">意外险材料</view>
<view style="color: #f26803;" class="width100 disjbac">
<text @tap="previewImageEv(2)">查看</text>
<image @tap="uploadImgEv(2)" src="/static/public/icon-personInfo-upload.png" mode="widthFix" lazy-load style="width: 128rpx;height: 50rpx;"></image>
</view>
</view>
<view class="bacf pad-sx30 pad-zy40 disac bbot">
<view class="bold flexs mar-y40">签署工程师合作协议</view>
<view style="color: #f26803;" class="width100 disjbac">
<text @tap="previewImageEv(3)">查看</text>
<image @tap="uploadImgEv(3)" src="/static/public/icon-personInfo-upload.png" mode="widthFix" lazy-load style="width: 128rpx;height: 50rpx;"></image>
</view>
</view>
<view class="bacf pad-sx30 pad-zy40 disac bbot">
<view class="bold width30 flexs">技能证书</view>
<view style="color: #f26803;" class="width100 disjbac">
<text @tap="previewImageEv(4)">查看</text>
<image @tap="uploadImgEv(4)" src="/static/public/icon-personInfo-upload.png" mode="widthFix" lazy-load style="width: 128rpx;height: 50rpx;"></image>
</view>
</view>
</view>
<view class="person-btn" @tap="sumbmitData">提交保存</view>
</view>
</container-subgroup-two>
</view>
</template>
<script>
import containerSubgroupTwo from '@/components/containers/container-subgroup-two.vue';
import { uploadImg } from '@/jsFile/public-api.js';
export default {
components:{
containerSubgroupTwo
},
data() {
return {
nickname:'', // 我的昵称
full_name:'', // 姓名
genderNum:1 ,// 1：男 2：女
contact_number:'', // 联系电话
e_mail:'', // 电子邮箱
id_card_no:'', // 身份证号码
imgList:[],
flag:true,
temporaryImg:[],
}
},
onLoad() {
// 调用获取个人信息事件
this.getData()
},
methods: {
// 获取个人信息
getData(){
this.$requst.get('/universal/api.user/user_info').then(res => {
if (res.code == 1 && res.data.length != 1) {
// 我的昵称
this.nickname=res.data.nickname;
// 姓名
this.full_name=res.data.name;
// res.data.sex ==> 2：男 1：女 0：未知
res.data.sex != 2 ? this.genderNum = 1 : this.genderNum = 2;
// 联系电话
this.contact_number=res.data.phone;
// 电子邮箱
this.e_mail = res.data.email;
// 身份证号码
this.id_card_no = res.data.idcard;
// 身份证正面
this.imgList[0] = res.data.idcard_front;
// 身份证反面
this.imgList[1] = res.data.idcard_reverse;
// 意外险材料
this.imgList[2] = res.data.accident_insurance;
// 签署工程师合作协议
this.imgList[3] = res.data.agreement_document;
// 技能证书
this.imgList[4] = res.data.skills_certificate;
this.temporaryImg = [
res.data.idcard_front_value,
res.data.idcard_reverse_value,
res.data.accident_insurance_value,
res.data.agreement_document_value,
res.data.skills_certificate_value
];
}
})
},
// 提交保存事件
sumbmitData(){
if(this.checkEmpty()){
if(this.flag) {
// this.flag = false;
let params = {
nickname:this.nickname,
name:this.full_name,
sex:this.genderNum,
phone:this.contact_number,
email:this.e_mail,
idcard:this.id_card_no,
idcard_front:this.temporaryImg[0] || '',
idcard_reverse:this.temporaryImg[1] || '',
accident_insurance:this.temporaryImg[2] || '',
agreement_document:this.temporaryImg[3] || '',
skills_certificate:this.temporaryImg[4] || ''
}
this.$requst.post('/universal/api.user/user_info',params).then(res=>{
if(res.code){
this.$toolAll.tools.showToast('保存成功');
setTimeout(()=>{
uni.navigateBack({delta:1})
},1000)
} else {
this.$toolAll.tools.showToast(res.msg);
}
})
} else {
this.$toolAll.tools.showToast('请勿重复提交');
}
}
},
// 判断是否为空
checkEmpty(){
let result = false;
if(uni.getStorageSync('type_id')==4) {
// 如果是工程师
if(!this.nickname) {
this.$toolAll.tools.showToast('请输入我的昵称');
} else if(!this.full_name) {
this.$toolAll.tools.showToast('请输入姓名');
} else if(this.$toolAll.tools.isPhone(this.contact_number)) {
this.$toolAll.tools.showToast('请正确输入联系电话');
} else if(this.$toolAll.tools.isEmail(this.e_mail)) {
this.$toolAll.tools.showToast('请正确输入电子邮箱');
} else if(this.$toolAll.tools.isIdentity(this.id_card_no)) {
this.$toolAll.tools.showToast('请正确输入身份证号码');
} else if(!this.imgList[0]) {
this.$toolAll.tools.showToast('请上传身份证正面照');
} else if(!this.imgList[1]) {
this.$toolAll.tools.showToast('请上传身份证反面照');
} else if(!this.imgList[2]) {
this.$toolAll.tools.showToast('请上传意外险材料');
} else if(!this.imgList[3]) {
this.$toolAll.tools.showToast('请上传合作协议');
} else if(!this.imgList[4]) {
this.$toolAll.tools.showToast('请上传技能证书');
} else {
result = true;
}
} else {
// 如果不是工程师
if(this.contact_number || this.e_mail || this.id_card_no) {
if(this.$toolAll.tools.isPhone(this.contact_number) && this.contact_number) {
this.$toolAll.tools.showToast('请正确输入联系电话');
} else if(this.$toolAll.tools.isEmail(this.e_mail) && this.e_mail) {
this.$toolAll.tools.showToast('请正确输入电子邮箱');
} else if(this.$toolAll.tools.isIdentity(this.id_card_no) && this.id_card_no) {
this.$toolAll.tools.showToast('请正确输入身份证号码');
} else {
result = true;
}
} else {
result = true;
}
}
return result;
},
// 性别切换
chooseGender(index){
this.genderNum = index;
},
// 图片上传
uploadImgEv(index){
uni.chooseImage({
count:1,
sourceType:['album'],
success: (res) => {
let tempImg = res.tempFilePaths[0];
uploadImg({path:tempImg}).then(res=>{
if(res.code) {
this.$toolAll.tools.showToast('上传成功');
this.imgList[index] = tempImg;
this.temporaryImg[index] = res.data.id;
}
})
},fail:(err)=> {
this.$toolAll.tools.checkQx(err.code);
}
})
},
// 预览图片
previewImageEv(current){
let arr = [];
// 不能滑动看其他的图片
this.imgList.forEach((item,index)=>{
if(current==index) arr.push(item);
})
if(arr.length) {
if(arr[0]) {
uni.previewImage({
current:current,
urls: arr,
success() {}
})
} else {
this.$toolAll.tools.showToast('请上传，再查看')
}
} else {
this.$toolAll.tools.showToast('请上传，再查看')
}
}
}
}
</script>
<style>
</style>