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

<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 style="color: #f26803;" class="width100 disjbac">
							<text @tap="previewFileEv(2)">查看</text>
							<image @tap="uploadFileEv(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>
		<!-- 文件上传 -->
		<l-file ref="lFile" @up-success="upSuccess"></l-file>
	</view>
</template>

<script>
	import containerSubgroupTwo from '@/components/containers/container-subgroup-two.vue';
	import lFile from '@/components/l-file/l-file.vue';
	import { uploadImg } from '@/jsFile/public-api.js';
	export default {
		components:{
			containerSubgroupTwo,
			lFile
		},
		data() {
			return {
				nickname:'', // 我的昵称
				full_name:'', // 姓名
				genderNum:1 ,// 1：男		2：女
				contact_number:'', // 联系电话
				e_mail:'', // 电子邮箱
				id_card_no:'', // 身份证号码
				imgList:[],
				flag:true,
				temporaryImg:[],
				imgUploadList:[],
				fileUploadList:[],
				uploadIndex:0,
			}
		},
        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){
				if(index==0 || index==1){
					var countNum = 1;
				}else{
					var countNum = 9;
				}
				uni.chooseImage({
					count:countNum,
					sourceType:['album'],
					success: (res) => {
						for(let i=0;i<res.tempFilePaths.length;i++){
							let tempImg = res.tempFilePaths[i];
							uploadImg({path:tempImg}).then(res=>{
								if(res.code) {
									this.$toolAll.tools.showToast('上传成功');
									if(this.imgList[index]==''){
										this.imgList[index] = tempImg;
									}else{
										this.imgList[index] =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 = item.split(',');
					};
				})
				if(arr.length) {
					uni.previewImage({
						current:current,
						urls: arr,
						success() {}
					})
				} else {
					this.$toolAll.tools.showToast('请上传，再查看')
				}
			},
			
			// 文件上传
			uploadFileEv(index) {
				const that = this;
				if(that.imgList[index].length >= 9){
					this.$toolAll.tools.showToast('最多上传9张')
					return;
				}
				that.$refs.lFile.upload({
					// #ifdef APP-PLUS
					currentWebview: that.$mp.page.$getAppWebview(),
					// #endif
					url: `${getApp().globalData.hostapi}/universal/api.upload/upload`, //你的上传附件接口地址
					name: 'file',
					dir:'files',
					header: {
						token:uni.getStorageSync('token') || ''
					},
				});
			},
			
			//上传成功
			upSuccess(res) {
				console.log(res,'上传附件')
				let url = res.root.url;
				let name = res.root.originalName;
				let fileType = this.isFileType(res.root.type);
				let size = res.root.size;
				if(fileType == 'image'){
					this.imgUploadList.push({url,name,fileType,size});
				}else{
					this.fileUploadList.push({url,name,fileType,size})
				}
			},
			
			//根据文件后缀名来判断，展示对应的图标
			isImage(type){
				return ['png','jpg','jpeg','gif','svg'].includes(type.toLowerCase());
			},
			isDocx(type){
				return ['doc','docx'].includes(type.toLowerCase());
			},
			isXsls(type){
				return ['xsls','xsl'].includes(type.toLowerCase());
			},
			isText(type){
				return ['text','txt'].includes(type.toLowerCase());
			},
			isFileType(type){
				if(this.isImage(type)) return 'image';
				if(this.isXsls(type)) return 'excel';
				if(type == 'pdf') return 'pdf';
				if(this.isDocx(type)) return 'word';
				if(this.isText(type)) return "text";
				// return "#icon-file-b--6";
			},
			
		   //文件预览
			previewFileEv(item){
				uni.downloadFile({
					url: item.url,
					success: (res) => {
						let filePath = res.tempFilePath;
						uni.openDocument({
							filePath: filePath,
							success: (res) => {
								console.log('打开文档成功');
							}
						})
					}
				})
			},
		}
	}
</script>

<style>

</style>