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">
						<image :src="userInfo.headimgurl" mode="aspectFit"></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" @tap="editEv(1,'position')">
					<view class="title">技术岗位</view>
					<view class="msg font24">{{userInfo.position_name}}<text class="director-arrow" v-if="userInfo.check_info.status!==1 && userInfo.position_name!==userInfo.check_info.position_name">{{userInfo.check_info.position_name}}</text></view>
					<image src="/static/icon/icon-arrow-03.png" mode="aspectFit"></image>
				</view>
				<view class="item" @tap="editEv(2,'pay')">
					<view class="title">工资</view>
					<view class="msg font24">{{userInfo.pay}}<text class="director-arrow" v-if="userInfo.check_info.status!==1 && 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')">
					<view class="title">姓名</view>
					<view class="msg font24">{{userInfo.real_name}}<text class="director-arrow" v-if="userInfo.check_info.status!==1 && 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')">
					<view class="title">电话号码</view>
					<view class="msg font24">{{userInfo.mobile}}<text class="director-arrow" v-if="userInfo.check_info.status!==1 && 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(5,'emergency_contact')">
					<view class="title">紧急联系人</view>
					<view class="msg font24">{{userInfo.emergency_contact}}<text class="director-arrow" v-if="userInfo.check_info.status!==1 && 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')">
					<view class="title">联系人电话</view>
					<view class="msg font24">{{userInfo.emergency_phone}}<text class="director-arrow" v-if="userInfo.check_info.status!==1 && 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')">
					<view class="title">银行卡姓名</view>
					<view class="msg font24">{{userInfo.bank_card_name}}<text class="director-arrow" v-if="userInfo.check_info.status!==1 && 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')">
					<view class="title">银行卡账号</view>
					<view class="msg font24">{{userInfo.bank_card_number}}<text class="director-arrow" v-if="userInfo.check_info.status!==1 && 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')">
					<view class="title">开户行</view>
					<view class="msg font24">{{userInfo.bank_name}}<text class="director-arrow" v-if="userInfo.check_info.status!==1 && 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>
		</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>
				<!-- 技术岗位显示 -->
				<picker class="input picker-input" v-if="field=='position'" 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>
				<!-- 其他显示 -->
				<input class="input font26" v-else 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();
		},
		onShareAppMessage(res) {
			let shareObj = {
				title:'工地打卡',
				path: '/pages/pagehome/pagehome',
				imageUrl:'/static/share-logo.jpg',
			}
			// 返回shareObj
			return shareObj;
		},
		methods: {
			// 获取用户信息
			getUserInfo(){
				this.$requst.post('/api/v1/user/info').then(res=>{
					if(res.code==0){
						console.log(res,'用户信息');
						this.userInfo = res.data;
						this.isLoding = true;
					}
				})
			},
			
			// 获取技术岗位
			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;
			},
			
			// 打开修改弹窗
			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.positionIndex =  this.positionList.findIndex(item=> item.id === this.userInfo.position);
						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;
				}
			},
			
			// 关闭修改弹窗
			closeEdit(){
				this.ifShow = false;
				this.editTitle = '';
				this.field = '';
				this.editMsg= '';
			},
			
			// 提交修改
			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);
					}
				})
			}
		}
	}
</script>
<style scoped>
	
</style>