OfficeApp/subpkg/personnelDetails/personnelDetails.vue

<template>
	<view class="page">
		<view class="basic">
			<u-skeleton :loading="skeleton" :animate="true" title rows="1" rows-width="100%" rowsHeight="56">
			</u-skeleton>
			<block v-if="!skeleton">
				<view class="title">人员基本信息</view>
				<view class="card">
					<view class="basic_top">
						<image class="avatar" :src="userInfo.avatar"></image>
						<view class="text">
							<view class="basic_name">
								<view class="name">{{userInfo.name}}</view>
								<image class="icon"
									:src="userInfo.sex==1?'../../static/icons/man.png':'../../static/icons/woman.png'">
								</image>
								<!-- <view class="role" v-if="userInfo.roles">{{userInfo.roles[0]}}</view> -->
							</view>
							<view class="id_card">
								身份证号:{{userInfo.id_card}}
							</view>
							<view class="phone">
								联系电话:{{userInfo.phone}}
							</view>
						</view>
					</view>
					<view class="bottom" style="margin-bottom: 10rpx;display: flex;align-items: center;">
						是否为小队长:
						<u-radio-group v-model="userInfo.is_captain" style="margin-left: 16rpx;" disabled>
							<u-radio :customStyle="{marginRight: '16px'}"
								v-for="(item, index) in [{value:1,label:'是'},{value:0,label:'否'}]" :key="index"
								:label="item.label" :name="item.value">
							</u-radio>
						</u-radio-group>
						<view class="update" @click="updateShow(userInfo.is_captain)">
							<uni-icons type="compose" color="#F9AA32"></uni-icons>
						</view>
					</view>
					<view class="bottom">
						负责区域:<text>{{(userInfo.street_name||'')+(userInfo.village_name||'')}}</text>
            <text v-for="(item, index) in userInfo.brigade_name">{{item.brigade_name}}</text>
					</view>
					<u-popup :show="show" :round="10" mode="center">
						<view class="popup">
							<view class="p_title">修改信息</view>
							<view class="p_body">
								是否为小队长:
								<u-radio-group v-model="updateForm.is_captain" style="margin: 16rpx;">
									<u-radio :customStyle="{marginRight: '16px'}"
										v-for="(item, index) in [{value:1,label:'是'},{value:0,label:'否'}]" :key="index"
										:label="item.label" :name="item.value">
									</u-radio>
								</u-radio-group>
							</view>
							<view class="p_button">
								<view @click="show=false">取消</view>
								<view @click="updateInfo">确认</view>
							</view>
						</view>
					</u-popup>
				</view>
			</block>
		</view>
		<view class="certification">
			<u-skeleton :loading="skeleton" :animate="true" title rows="3" rows-width="100%" rowsHeight="56">
			</u-skeleton>
			<block v-if="!skeleton">
				<view class="title">资质信息</view>
				<view class="c_item">
					<uni-section style="background-color: transparent;" title="身份证" titleFontSize="32rpx" type="line">
					</uni-section>
					<view class="card_box">
						<image :src="userInfo.qualification&&userInfo.qualification.id_card"
							@click="previewImg([userInfo.qualification&&userInfo.qualification.id_card,userInfo.qualification&&userInfo.qualification.id_card_b], 0)">
						</image>
						<image :src="userInfo.qualification&&userInfo.qualification.id_card_b"
							@click="previewImg([userInfo.qualification&&userInfo.qualification.id_card,userInfo.qualification&&userInfo.qualification.id_card_b], 1)">
						</image>
					</view>
				</view>
        <view class="c_item">
        	<uni-section style="background-color: transparent;" title="银行卡照片" titleFontSize="32rpx" type="line">
        	</uni-section>
        	<view class="card_box">
        		<image :src="userInfo.qualification&&userInfo.qualification.bank_account"
        			@click="previewImg([userInfo.qualification&&userInfo.qualification.bank_account,userInfo.qualification&&userInfo.qualification.bank_account_b], 0)">
        		</image>
        		<image :src="userInfo.qualification&&userInfo.qualification.bank_account_b"
        			@click="previewImg([userInfo.qualification&&userInfo.qualification.bank_account,userInfo.qualification&&userInfo.qualification.bank_account_b], 1)">
        		</image>
        	</view>
        </view>
				<view class="c_item">
					<uni-section style="background-color: transparent;" title="驾驶证" titleFontSize="32rpx" type="line">
					</uni-section>
					<view class="card_box">
						<image :src="userInfo.qualification&&userInfo.qualification.car_card"
							@click="previewImg([userInfo.qualification&&userInfo.qualification.car_card,userInfo.qualification&&userInfo.qualification.car_card_b], 0)">
						</image>
						<image :src="userInfo.qualification&&userInfo.qualification.car_card_b"
							@click="previewImg([userInfo.qualification&&userInfo.qualification.car_card,userInfo.qualification&&userInfo.qualification.car_card_b], 1)">
						</image>
					</view>
				</view>
				
			</block>
		</view>
		<view class="contract">
			<u-skeleton :loading="skeleton" :animate="true" title rows="2" rows-width="100%" rowsHeight="56">
			</u-skeleton>
			<block v-if="!skeleton">
				<view class="title">电子合同</view>
				<view v-if="userInfo.contract&&userInfo.is_contract&&userInfo.contract.status" class="card">
					<uni-section style="background-color: transparent;" :title="userInfo.name" titleFontSize="32rpx"
						type="line"></uni-section>
					<view class="c_text">性别：{{userInfo.sex==1?'男':'女'}}</view>
					<view class="c_text">身份证号码：{{userInfo.id_card}}</view>
					<view class="c_text">联系电话：{{userInfo.phone}}</view>
					<view class="c_text">合同类型：{{userInfo.contract&&userInfo.contract.contract_type_name}}</view>
					<view class="c_text">合同编号：{{userInfo.contract&&userInfo.contract.contract_no}}</view>
					<u-line v-if="userInfo.contract&&userInfo.contract.file" color="#999999FF" style="margin: 31rpx 0;">
					</u-line>
					<view v-if="userInfo.contract&&userInfo.contract.file" class="contract_box">
						<view class="left">
							<image class="contract_img" src="../../static/img/contract/pdf.png"></image>
							<view class="text">
								<view class="name">{{userInfo.contract.contract_type_name||'合同'}}</view>
								<view>
									<text>{{userInfo.contract&&userInfo.contract.create_time}}</text>
								</view>
							</view>
						</view>
						<view class="right" @click="naviToContract(userInfo.contract.contract_no)">
							<!-- <image class="icon"></image> -->
							<uni-icons type="paperclip" color="#3274F9"></uni-icons>
							<view>查看</view>
						</view>
					</view>
				</view>
				<picker v-if="!userInfo.is_contract&&!userInfo.contract||(userInfo.contract&&userInfo.contract.check_status==0)" :range="contractTypeList" range-key="name"
					@change="changeType">
					<button class="btn">生成合同</button>
				</picker>
				<view v-if="userInfo.contract&&userInfo.contract.check_status==1">
					<button class="btn tips_center">合同已生成,请等待审核</button>
				</view>
				<view v-if="!userInfo.is_contract&&userInfo.contract&&userInfo.contract.check_status==2" class="card">
					<view class="contract_box send">
						<view class="left">
							<image class="contract_img" src="../../static/img/contract/pdf.png"></image>
							<view class="text">
								<view class="name">{{userInfo.contract.contract_type_name}}</view>
								<view>
									<text>{{userInfo.contract&&userInfo.contract.create_time}}</text>
								</view>
							</view>
						</view>
					</view>
					<u-line color="#999999FF" style="margin: 31rpx 0;"></u-line>
					<view class="bottom">
						<button class="send_btn" @click="addContract" v-if="timerCount==0">发送合同</button>
						<button class="send_btn tips_center" v-else>{{cTimerCount+'秒后可继续发送合同'}}</button>
					</view>
				</view>
				<view v-if="!userInfo.is_contract&&userInfo.contract&&userInfo.contract.check_status==3" class="card">
					<view class="contract_box send">
						<view class="left">
							<image class="contract_img" src="../../static/img/contract/pdf.png"></image>
							<view class="text">
								<view class="name">{{userInfo.contract.contract_type_name}}</view>
								<view>
									<text>{{userInfo.contract&&userInfo.contract.create_time}}</text>
								</view>
							</view>
						</view>
					</view>
					<u-line color="#999999FF" style="margin: 31rpx 0;"></u-line>
					<view class="bottom">
						<button class="send_btn" @click="getPostsms" v-if="timerCount==0">再次发送短信</button>
						<button class="send_btn tips_center" v-else>{{cTimerCount+'秒后可继续再次发送短信'}}</button>
					</view>
				</view>
			</block>

		</view>
	</view>
</template>

<script>
	import {
		Toast
	} from '@/libs/uniApi.js'
	import {
		companyUserDetail
	} from "@/api/company.js"
	import {
		loginSetInfo,
		userDraftingcontracts,
		userInitiateContract,
		userPostsms
	} from "@/api/oaUser.js"
	import {
		dictDataLists
	} from "@/api/oaPbulic.js"
	import {
		download_file
	} from "@/api/junziqian.js"
	export default {
		onReady() {
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: '#3175f9'
			})
		},
		data() {
			return {
				id: '',
				skeleton: true,
				show: false,
				typeShow: false,
				timer: null, // 计时器
				timerCount: 0, //倒计时
				updateForm: {
					is_captain: 0,
				},
				userInfo: {
					qualification: {},
					contract: {},
					roles: {}
				},
				contractTypeList: []
			}
		},
		onLoad(options) {
			if (options.id) this.id = options.id;
			this.initContractTypeList();
			this.loadUserDetail();
		},
		onShow() {},
		computed: {
			cTimerCount() {
				return this.timerCount;
			}
		},
		methods: {
			naviToContract(contract_no) {
				download_file({
					applyNo: contract_no
				}).then(res => {
					if (res.code != 1) {
						Toast(res.msg)
					}
					uni.navigateTo({
						url: `/subpkg/pdfView/pdfView?url=${res.data.url}`
					})
				})
			},
			navTo(url) {
				url ?
					uni.navigateTo({
						url: url,
					}) : Toast('暂未开放')
			},
			updateShow(value) {
				this.updateForm.is_captain = value;
				this.show = true;
			},
			// 更新信息
			async updateInfo() {
				let res = await loginSetInfo({
					user_id: this.userInfo.id,
					is_captain: this.updateForm.is_captain
				});
				this.userInfo.is_captain = this.updateForm.is_captain;
				Toast('更新成功');
				this.show = false;
			},
			changeType(e) {
				// console.log(this.contractTypeList[e.detail.value]);
				this.createContract({
					party_b: this.userInfo.id,
					contract_type: this.contractTypeList[e.detail.value].id,
					type: 2 //1-公司,2-个人
				})
			},
			// 初始化合同类型
			async initContractTypeList() {
				let res = await dictDataLists({
					type_id: 7
				})
				this.contractTypeList = res.data;
			},
			// 生成合同
			async createContract(data) {
        uni.showLoading({
          title:'合同生成中',
          mask: true
        })
				let res = await userInitiateContract({
					party_b: data.party_b,
					contract_type: data.contract_type,
					type: data.type
				})
				this.loadUserDetail();
        uni.hideLoading();
				Toast('合同已生成');
			},
			// 发送合同
			async addContract(data) {
        try{
          uni.showLoading({
            title:'合同发送中',
            mask: true
          })
          let res = await userDraftingcontracts({
          	id: this.userInfo.id
          });
          this.loadUserDetail();
          if (this.userInfo.contract.check_status == 3) {
          	this.timerCount = 60;
          	this.timer = setInterval(() => {
          		this.timerCount--;
          		if (this.timerCount == 0) {
          			clearInterval(this.timer);
          			this.loadUserDetail();
          		}
          	}, 1000);
          }
          uni.hideLoading();
          Toast('合同已发送');
          this.navTo('/subpkg/submit/submit');
        }catch(e){
          uni.hideLoading();
          Toast('合同发送失败');
        }
			},
			// 发送短信
			async getPostsms() {
				if (this.timerCount == 0) {
					this.timerCount = 60;
					this.timer = setInterval(() => {
						this.timerCount--;
						if (this.timerCount == 0) {
							clearInterval(this.timer);
							this.loadUserDetail();
						}
					}, 1000);
					let res = await userPostsms({
						id: this.userInfo.id
					})
					Toast('短信已发送');
					this.navTo('/subpkg/submit/submit');
				}
			},
			loadUserDetail() {
				if (!this.id) return;
				companyUserDetail({
					id: this.id
				}).then(res => {
					this.userInfo = res.data;
					this.skeleton = false;
				})
			},
			previewImg(urls, index = 0) {
				uni.previewImage({
					urls: urls,
					current: index
				})
			}
		},
		onPullDownRefresh() {
			uni.stopPullDownRefresh()
		}
	}
</script>

<style lang="scss">
	.page {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.title {
		font-size: 35rpx;
		font-weight: 500;
		color: #333333;
		margin-bottom: 21rpx;
	}

	.card {
		width: 694rpx;
		background: #FFFFFF;
		border-radius: 14rpx 14rpx 14rpx 14rpx;
		padding: 28rpx;
	}

	.basic {
		margin: 28rpx 0;

		.card {
			font-size: 28rpx;
			color: #666666;

			.basic_top {
				display: flex;
				margin-bottom: 28rpx;

				.avatar {
					width: 154rpx;
					height: 154rpx;
					background: #CCCCCC;
					border-radius: 7rpx 7rpx 7rpx 7rpx;
					margin-right: 28rpx;
				}

				.text {
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.basic_name {
						display: flex;
						align-items: center;

						.icon {
							width: 21rpx;
							height: 21rpx;
							margin-left: 18rpx;
							margin-right: 36rpx;
						}

						.name {
							font-size: 32rpx;
							font-weight: 500;
							color: #000000CC;
						}

						.role {
							width: 284rpx;
							font-size: 28rpx;
							font-weight: 500;
							color: $theme-oa-color;
							// white-space: nowrap; /* 不换行 */
							// overflow: hidden; /* 将超出文本隐藏 */
							// text-overflow: ellipsis; /* 使用省略号表示被隐藏的文本 */
						}
					}

				}
			}

			.bottom {
				.update {
					display: flex;
					align-items: center;
					color: #F9AA32;
				}
			}

			.popup {
				width: 500rpx;
				height: 300rpx;
				// padding: 28rpx;
				overflow: hidden;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.p_title {
					margin-top: 20rpx;
					text-align: center;
					font-weight: bold;
					font-size: 33rpx;
				}

				.p_body {
					margin: 28rpx;
				}

				.p_button {
					display: flex;
					border-top: 1rpx solid #ccc;

					view {
						flex: 1;
						height: 80rpx;
						line-height: 80rpx;
						text-align: center;
						border-left: 1rpx solid #ccc;
						color: $theme-oa-color;

						&:nth-child(1) {
							border-left: none;
							color: #333;
						}
					}
				}
			}
		}
	}

	.certification {
		margin-bottom: 28rpx;

		.title {
			margin-bottom: 0;
		}

		.c_item {
			width: 694rpx;

			.card_box {
				display: flex;
				justify-content: space-between;

				image {
					width: 336rpx;
					height: 238rpx;
					background: #FFFFFF;
					border-radius: 14rpx 14rpx 14rpx 14rpx;
					border: 2rpx solid #CCCCCC;
				}
			}
		}
	}

	.contract {
		margin-bottom: 28rpx;

		.title {
			width: 694rpx;
		}


		.card {
			padding-top: 0;

			.contract_box {
				display: flex;
				justify-content: space-between;

				.left {
					display: flex;

					.contract_img {
						width: 102rpx;
						height: 102rpx;
						background: #F5F5F5;
						border-radius: 14rpx 14rpx 14rpx 14rpx;
						margin-right: 21rpx;
					}

					.text {
						display: flex;
						flex-direction: column;
						justify-content: space-between;

						.name {
							font-size: 32rpx;
							;
							font-weight: 500;
							color: rgba(0, 0, 0, 0.8);
							line-height: 35rpx;
						}

						.nickname {
							margin-right: 35rpx;
						}

						text {
							height: 39rpx;
							font-size: 28rpx;
							font-weight: 400;
							color: #666666;
							line-height: 35rpx;
						}
					}
				}

				.right {
					font-size: 28rpx;
					font-weight: 500;
					color: #3274F9;
					line-height: 35rpx;
					display: flex;
					justify-content: center;
					align-items: center;

					.icon {
						width: 35rpx;
						height: 39rpx;
						background-color: #3274F9;
						opacity: 1;
						margin-right: 10rpx
					}
				}

			}

			.send {
				padding-top: 28rpx;
			}

			.send_btn {
				width: 100%;
				height: 84rpx;
				background: $theme-oa-color;
				border-radius: 42rpx 42rpx 42rpx 42rpx;
				color: #fff;
				line-height: 80rpx;
				text-align: center;
			}

			.tips_center {
				background-color: #666;
				color: #eee;
			}
		}

		.btn {
			margin-top: 32rpx;
			// margin-bottom: 40rpx;
			width: 694rpx;
			height: 84rpx;
			background: $theme-oa-color;
			border-radius: 42rpx 42rpx 42rpx 42rpx;
			color: #fff;
			line-height: 80rpx;
			text-align: center;
		}

		.tips_center {
			background-color: #666;
			color: #eee;
		}
	}
</style>