flying-monkey/pagesB/personal-information/personal-information.vue

285 lines
10 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<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>