building-sign/pagesA/information/information.vue

<template>
	<view class="pad-x120">
		<!-- 头部 -->
		<status-nav navBarTitle="基本信息"></status-nav>
		<view class="content" :style="{'padding-top':statusHeight+50+'px'}" v-if="isLoding">
			<view class="notice-tips color-red font24" v-if="userInfo.check_info.status==-1">
				<text>温馨提示：资料修改不通过，原因是{{userInfo.check_info.refund_reason}}</text>
			</view>
			<view class="information-from font24">
				<view class="item">
					<view class="title">头像</view>
					<view class="cover" @tap="changeImg('cover')">
						<image :src="userInfo.headimgurl" mode="aspectFill"></image>
					</view>
				</view>
				<view class="item" @tap="editEv(0,'nickname')">
					<view class="title">昵称</view>
					<view class="msg font24">{{userInfo.nickname}}</view>
					<image src="/static/icon/icon-arrow-03.png" mode="aspectFit"></image>
				</view>
				<view class="item" v-if="userInfo.role==1">
					<view class="title">技术岗位</view>
					<view class="msg picker-msg font24">
						{{userInfo.position_name}}
						<text class="director-arrow" v-if="userInfo.check_info.status==0 && userInfo.position_name!==userInfo.check_info.position_name">{{userInfo.check_info.position_name}}</text>
						<picker mode="selector" :range="positionList" @change="bindPositionChange" :value="positionIndex" :range-key="'name'">
							<view class="name">
								<text class="font26">{{positionList[positionIndex].name}}</text>
								<image src="/static/icon/icon-arrow-02.png" mode="aspectFit"></image>
							</view>
						</picker>
					</view>
					<image src="/static/icon/icon-arrow-03.png" mode="aspectFit"></image>
				</view>
				<view class="item" @tap="editEv(12,'certificate')" v-if="userInfo.role==1">
					<view class="title">证书名称</view>
					<view class="msg font24">{{userInfo.certificate}}</view>
					<image src="/static/icon/icon-arrow-03.png" mode="aspectFit"></image>
				</view>
				<view class="item" @tap="editEv(2,'pay')" v-if="userInfo.role==1">
					<view class="title">工资</view>
					<view class="msg font24">{{userInfo.pay}}<text class="director-arrow" v-if="userInfo.check_info.status==0 && userInfo.pay!==userInfo.check_info.pay">{{userInfo.check_info.pay}}</text></view>
					<image src="/static/icon/icon-arrow-03.png" mode="aspectFit"></image>
				</view>
				<view class="item" @tap="editEv(3,'real_name')" v-if="userInfo.role==1">
					<view class="title">姓名</view>
					<view class="msg font24">{{userInfo.real_name}}<text class="director-arrow" v-if="userInfo.check_info.status==0 && userInfo.real_name!==userInfo.check_info.real_name">{{userInfo.check_info.real_name}}</text></view>
					<image src="/static/icon/icon-arrow-03.png" mode="aspectFit"></image>
				</view>
				<view class="item" @tap="editEv(4,'mobile')" v-if="userInfo.role==1">
					<view class="title">电话号码</view>
					<view class="msg font24">{{userInfo.mobile}}<text class="director-arrow" v-if="userInfo.check_info.status==0 && userInfo.mobile!==userInfo.check_info.mobile">{{userInfo.check_info.mobile}}</text></view>
					<image src="/static/icon/icon-arrow-03.png" mode="aspectFit"></image>
				</view>
				<view class="item" @tap="editEv(10,'card_number')" v-if="userInfo.role==1">
					<view class="title">身份证号</view>
					<view class="msg font24">{{userInfo.card_number}}<text class="director-arrow" v-if="userInfo.check_info.status==0 && userInfo.card_number!==userInfo.check_info.card_number">{{userInfo.check_info.card_number}}</text></view>
					<image src="/static/icon/icon-arrow-03.png" mode="aspectFit"></image>
				</view>
				<view class="item" v-if="userInfo.role==1">
					<view class="title">身份证正面</view>
					<view class="msg font24" @tap="changeImg('positive')">
						<image :src="userInfo.id_front" mode="widthFix"></image>
						<view class="director-arrow" v-if="userInfo.check_info.status==0 && userInfo.id_front!==userInfo.check_info.id_front">
							<image :src="userInfo.check_info.id_front" mode="widthFix"></image>
						</view>
					</view>
					<image src="/static/icon/icon-arrow-03.png" mode="aspectFit"></image>
				</view>
				<view class="item" v-if="userInfo.role==1">
					<view class="title">身份证反面</view>
					<view class="msg font24" @tap="changeImg('positive')">
						<image :src="userInfo.id_back" mode="widthFix"></image>
						<view class="director-arrow" v-if="userInfo.check_info.status==0 && userInfo.id_back!==userInfo.check_info.id_back">
							<image :src="userInfo.check_info.id_back" mode="widthFix"></image>
						</view>
					</view>
					<image src="/static/icon/icon-arrow-03.png" mode="aspectFit"></image>
				</view>
				<view class="item" @tap="editEv(5,'emergency_contact')" v-if="userInfo.role==1">
					<view class="title">紧急联系人</view>
					<view class="msg font24">{{userInfo.emergency_contact}}<text class="director-arrow" v-if="userInfo.check_info.status==0 && userInfo.emergency_contact!==userInfo.check_info.emergency_contact">{{userInfo.check_info.emergency_contact}}</text></view>
					<image src="/static/icon/icon-arrow-03.png" mode="aspectFit"></image>
				</view>
				<view class="item" @tap="editEv(6,'emergency_phone')" v-if="userInfo.role==1">
					<view class="title">联系人电话</view>
					<view class="msg font24">{{userInfo.emergency_phone}}<text class="director-arrow" v-if="userInfo.check_info.status==0 && userInfo.emergency_phone!==userInfo.check_info.emergency_phone">{{userInfo.check_info.emergency_phone}}</text></view>
					<image src="/static/icon/icon-arrow-03.png" mode="aspectFit"></image>
				</view>
				<view class="item" @tap="editEv(7,'bank_card_name')" v-if="userInfo.role==1">
					<view class="title">银行卡姓名</view>
					<view class="msg font24">{{userInfo.bank_card_name}}<text class="director-arrow" v-if="userInfo.check_info.status==0 && userInfo.bank_card_name!==userInfo.check_info.bank_card_name">{{userInfo.check_info.bank_card_name}}</text></view>
					<image src="/static/icon/icon-arrow-03.png" mode="aspectFit"></image>
				</view>
				<view class="item" @tap="editEv(8,'bank_card_number')" v-if="userInfo.role==1">
					<view class="title">银行卡账号</view>
					<view class="msg font24">{{userInfo.bank_card_number}}<text class="director-arrow" v-if="userInfo.check_info.status==0 && userInfo.bank_card_number!==userInfo.check_info.bank_card_number">{{userInfo.check_info.bank_card_number}}</text></view>
					<image src="/static/icon/icon-arrow-03.png" mode="aspectFit"></image>
				</view>
				<view class="item" @tap="editEv(9,'bank_name')" v-if="userInfo.role==1">
					<view class="title">开户行</view>
					<view class="msg font24">{{userInfo.bank_name}}<text class="director-arrow" v-if="userInfo.check_info.status==0 && userInfo.bank_name!==userInfo.check_info.bank_name">{{userInfo.check_info.bank_name}}</text></view>
					<image src="/static/icon/icon-arrow-03.png" mode="aspectFit"></image>
				</view>
				<view class="item" v-if="userInfo.role==1">
					<view class="title">银行卡照片</view>
					<view class="msg font24" @tap="changeImg('bank')">
						<image :src="userInfo.bank_card_img" mode="widthFix"></image>
						<view class="director-arrow" v-if="userInfo.check_info.status==0 && userInfo.bank_card_img!==userInfo.check_info.bank_card_img">
							<image :src="userInfo.check_info.bank_card_img" mode="widthFix"></image>
						</view>
					</view>
					<image src="/static/icon/icon-arrow-03.png" mode="aspectFit"></image>
				</view>
				<view class="item" @tap="editEv(11,'work_experience')" v-if="userInfo.role==1">
					<view class="title">工作经验</view>
					<view class="msg font24">{{userInfo.work_experience}}</view>
					<image src="/static/icon/icon-arrow-03.png" mode="aspectFit"></image>
				</view>
				<view class="item" v-if="userInfo.role==1">
					<view class="title">现住地址</view>
					<view class="msg picker-msg font24">
					{{userInfo.province}}{{userInfo.city}}{{userInfo.area}}
					<text style="opacity: 0;" v-if="userInfo.province==''&&userInfo.city==''&&userInfo.area==''">您还未填写现住地址</text>
					<picker mode="region" @change="changeAddress">
						<view class="addr-input">
							<view class="input-box">
								<input class="input-flex clips1" type="text" v-model="userInfo.province" disabled="true">
								<image src="/static/icon/icon-arrow-01.png" mode="widthFix"></image>
							</view>
							<view class="input-box">
								<input class="input-flex clips1" type="text" v-model="userInfo.city" disabled="true">
								<image src="/static/icon/icon-arrow-01.png" mode="widthFix"></image>
							</view>
							<view class="input-box">
								<input class="input-flex clips1" type="text" v-model="userInfo.area" disabled="true">
								<image src="/static/icon/icon-arrow-01.png" mode="widthFix"></image>
							</view>
						</view>
					</picker>
					</view>
					<image src="/static/icon/icon-arrow-03.png" mode="aspectFit"></image>
				</view>
				<view class="item" @tap="editEv(1,'address_now')" v-if="userInfo.role==1">
					<view class="title">详细地址</view>
					<view class="msg font24">{{userInfo.address_now}}</view>
					<image src="/static/icon/icon-arrow-03.png" mode="aspectFit"></image>
				</view>
			</view>
		</view>
		<!-- 修改弹窗 -->
		<view class="pop-up-bg" v-if="ifShow">
			<view class="edit-box bg-white">
				<image class="close-btn" src="/static/icon/icon-close-btn.png" mode="aspectFit" @tap="closeEdit"></image>
				<view class="title font36">{{editTitle}}</view>
				<!-- 其他显示 -->
				<input class="input font26" type="text" v-model="editMsg" :placeholder="`请输入${editTitle}`" placeholder-style="color:rgba(51,51,51,.4)">
				<view class="submit-btn font30 color-white" @tap="submitEv">提交</view>
			</view>
		</view>
		<!-- 尾部 -->
		<tabbar :userType="userType" current="2"></tabbar>
	</view>
</template>
<script>
	import tabbar from '@/components/tabbar/tabbar';
	export default {
		components:{
			tabbar
		},
		data() {
			return {
				statusHeight:uni.getSystemInfoSync().statusBarHeight, //状态栏高度
				userType:'worker', //账户类型 工人：worker 负责人：director
				userInfo:{}, //用户信息
				editTitle:'', //修改标题
				editMsg:'', //修改内容
				field:'', //修改栏目
				positionList:[], //技术岗位
				positionIndex:0, //当前选择
				ifShow:false, //是否展示弹窗
				isLoding:false, //是否记载完成
			}
		},
		onLoad() {
			// 获取用户信息
			this.getUserInfo();
			// 获取技术岗位
			this.getPositionList();
		},
		methods: {
			// 获取用户信息
			getUserInfo(){
				this.$requst.post('/api/v1/user/info').then(res=>{
					if(res.code==0){
						console.log(res,'用户信息');
						if(res.data.role!==uni.getStorageSync('worker_role')){
							this.$toolAll.tools.showToast('身份已变更，正在切换');
							setTimeout(()=>{
								uni.reLaunch({
									url:'/pages/pagehome/pagehome'
								})
							},2000)
						}
						this.userInfo = res.data;
						this.isLoding = true;
						this.positionIndex =  this.positionList.findIndex(item=> item.id === res.data.position);
					}
				})
			},
			
			// 获取技术岗位
			getPositionList(){
				this.$requst.get('/api/v1/common/position-list').then(res=>{
					if(res.code == 0){
						console.log(res,'技术岗位');
						this.positionList = res.data.list;
					}
				})
			},
			
			// 选择技术岗位
			bindPositionChange(e){
				this.positionIndex = e.detail.value;
				this.field = 'position';
				this.editMsg = this.positionList[this.positionIndex].id;
				setTimeout(()=>{
					// 提交修改
					this.submitEv();
				},200)
			},
			
			// 打开修改弹窗
			editEv(num,type){
				this.ifShow = true;
				this.field = type;
				switch (num){
					case 0:
						this.editTitle = '昵称';
						this.editMsg = this.userInfo.nickname;
						break;
					case 1:
						this.editTitle = '详细地址';
						this.editMsg = this.userInfo.address_now;
						break;
					case 2:
						this.editTitle = '工资';
						this.editMsg = this.userInfo.pay;
						break;
					case 3:
						this.editTitle = '姓名';
						this.editMsg = this.userInfo.real_name;
						break;
					case 4:
						this.editTitle = '电话号码';
						this.editMsg = this.userInfo.mobile;
						break;
					case 5:
						this.editTitle = '紧急联系人';
						this.editMsg = this.userInfo.emergency_contact;
						break;
					case 6:
						this.editTitle = '联系人电话';
						this.editMsg = this.userInfo.emergency_phone;
						break;
					case 7:
						this.editTitle = '银行卡姓名';
						this.editMsg = this.userInfo.bank_card_name;
						break;
					case 8:
						this.editTitle = '银行卡账号';
						this.editMsg = this.userInfo.bank_card_number;
						break;
					case 9:
						this.editTitle = '开户行';
						this.editMsg = this.userInfo.bank_name;
						break;
					case 10:
						this.editTitle = '身份证号';
						this.editMsg = this.userInfo.card_number;
						break;
					case 11:
						this.editTitle = '工作经验';
						this.editMsg = this.userInfo.work_experience;
						break;
					case 12:
						this.editTitle = '证书名称';
						this.editMsg = this.userInfo.certificate;
						break;
				}
			},
			
			// 关闭修改弹窗
			closeEdit(){
				this.ifShow = false;
				this.editTitle = '';
				this.field = '';
				this.editMsg= '';
			},
			
			// 选择图片
			changeImg(type){
				uni.chooseImage({
					count: 1, //默认9
					sourceType: ['album','camera'], //从相册选择
					success: (res)=> {
						this.stagingImg = res.tempFilePaths[0];
						// 上传图片
						this.uploadImg(type);
					}
				})
			},
			
			// 上传图片
			uploadImg(type){
				uni.showLoading({
					title: '上传中'
				});
				this.$requst.upload('/api/v1/file/upload/image',{path:this.stagingImg}).then(res=>{
					if(res.code==0) {
						if(type=='cover'){
							this.userInfo.headimgurl = `${getApp().globalData.hostapi}`+res.data.src;
							this.field = 'headimgurl';
							this.editMsg = this.userInfo.headimgurl;
						}
						if(type=='positive'){
							this.userInfo.id_front = `${getApp().globalData.hostapi}`+res.data.src;
							this.field = 'id_front';
							this.editMsg = this.userInfo.id_front;
						}
						if(type=='back'){
							this.userInfo.id_back = `${getApp().globalData.hostapi}`+res.data.src;
							this.field = 'id_back';
							this.editMsg = this.userInfo.id_back;
						}
						if(type=='bank'){
							this.userInfo.bank_card_img = `${getApp().globalData.hostapi}`+res.data.src;
							this.field = 'bank_card_img';
							this.editMsg = this.userInfo.bank_card_img;
						}
						setTimeout(()=>{
							// 提交修改
							this.submitEv();
						},200)
					}
					uni.hideLoading();
				})
			},
			
			// 选择省市区
			changeAddress(e){
				this.userInfo.province = e.detail.value[0];
				this.userInfo.city = e.detail.value[1];
				this.userInfo.area = e.detail.value[2];
				this.field = 'address';
				this.editMsg = e.detail.value[0]+e.detail.value[1]+e.detail.value[2];
				setTimeout(()=>{
					// 提交修改
					this.submitEv();
				},200)
			},
			
			// 提交修改
			submitEv(){
				let params = {
					field:this.field,
					value:this.editMsg!==""?this.editMsg:this.positionList[this.positionIndex].id
				}
				this.$requst.post('/api/v1/worker/update-info',params).then(res=>{
					if(res.code==0){
						this.$toolAll.tools.showToast('提交成功');
						setTimeout(()=>{
							this.ifShow = false;
							// 获取用户信息
							this.getUserInfo();
						},200)
					}else{
						this.$toolAll.tools.showToast(res.msg);
					}
				})
			},
			
			// 图片预览
			previewImageEv(url) {
				//uniapp预览轮播图
				uni.previewImage({
					current: 0, //预览图片的下标
					urls: [url] //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
				})
			}
		}
	}
</script>
<style scoped>
	
</style>