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="tit">人员基本信息</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">
								<view>身份证号：{{ userInfo.id_card }}</view>
								<!-- <view class="update" @click="updateShow(userInfo.id_card, 'id_card')">
                  <uni-icons type="compose" color="#F9AA32"></uni-icons>
                </view> -->
							</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, 'is_captain')">
							<uni-icons type="compose" color="#F9AA32"></uni-icons>
						</view>
					</view>
					<view class="bottom">
						负责区域：<text>{{
              (userInfo.street_name || "") +
              (userInfo.village_name || "") +
              (userInfo.brigade_name || "")
            }}</text>
					</view>
					<u-popup :show="show.is_captain" :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.is_captain = false">取消</view>
								<view @click="updateInfo('is_captain')">确认</view>
							</view>
						</view>
					</u-popup>
					<u-popup :show="show.id_card" :round="10" mode="center">
						<view class="popup">
							<view class="p_title">修改信息</view>
							<u--form style="padding: 0 28rpx">
								<u-form-item label="身份证号:" labelWidth="auto" labelPosition="top">
									<u--input style="border: 1px solid #0122c7" v-model="updateForm.id_card"></u--input>
								</u-form-item>
							</u--form>
							<view class="p_button">
								<view @click="show.id_card = false">取消</view>
								<view @click="updateInfo('id_card')">确认</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="tit">资质信息</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" v-if="
            (userInfo.qualification && userInfo.qualification.car_card) ||
            (userInfo.qualification && userInfo.qualification.car_card_b)
          ">
					<uni-section style="background-color: transparent" title="驾驶证" titleFontSize="32rpx" type="line">
					</uni-section>
					<view class="card_box">
						<image v-if="userInfo.qualification && userInfo.qualification.car_card"
							: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 v-if="userInfo.qualification && userInfo.qualification.car_card"
							: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="tit" v-if=" userInfo.contract &&
            userInfo.is_contract &&
            userInfo.contract.status">电子合同</view>
				<view v-if="
           userInfo.contract &&
           userInfo.is_contract &&
           userInfo.contract.status
          " class="card" style="font-size: 17px;">
					<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 class="right" @click="naviToContract(userInfo.contract.contract_no)">
							<!-- <image class="icon"></image> -->
							<uni-icons type="paperclip" color="#3274F9"></uni-icons>
							<view>查看</view>
						</view>
					</view>
					<u-line color="#999999FF" style="margin: 31rpx 0"></u-line>
					<view class="bottom">
						<button class="send_btn" @click="clickContract(2)" 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 class="right" @click="naviToContract(userInfo.contract.contract_no)">
							<!-- <image class="icon"></image> -->
							<uni-icons type="paperclip" color="#3274F9"></uni-icons>
							<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>
    <u-modal :show="modelShow" title="提醒" :content="modelType==1?'请检查信息无误后再生成合同':'请检查合同无误后再发送'" closeOnClickOverlay showCancelButton cancel-text="我再看看" confirm-text="确认无误" close="modelShow=false" @cancel="modelShow=false" @confirm="modelType==1?createContract():addContract();modelShow=false"></u-modal>
	</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"
	import {
		personnerContractType
	} from "@/static/server/contract.js";
	export default {
		data() {
			return {
				id: '',
				skeleton: true,
				show: {
					is_captain: false,
					id_card: false,
				},
				typeShow: false,
				timer: null, // 计时器
				timerCount: 0, //倒计时
				updateForm: {
					is_captain: 0,
					id_card: '',
				},
				userInfo: {
					qualification: {},
					contract: {},
					roles: {}
				},
				contractTypeList: [],
        modelShow: false,
        modelType: 1,
        nowContractType: -1
			}
		},
		onLoad(options) {
			if (options.id) this.id = options.id;
			this.initContractTypeList();
			this.loadUserDetail();
			let time = uni.getStorageSync('time' + this.id);
			if (time > 0 && (time - Date.now()) / 1000 > 0) {
				this.startTimer((time - Date.now()) / 1000);
			}
		},
		onUnload() {
			if (this.timerCount > 0) uni.setStorageSync('time' + this.id, this.timerCount * 1000 + Date.now());
		},
		computed: {
			cTimerCount() {
				return this.timerCount;
			}
		},
    onPullDownRefresh(){
      this.loadUserDetail().then(()=>{
        uni.stopPullDownRefresh()
      });
    },
		methods: {
			// 查看合同
			naviToContract(contract_no) {
				if (this.userInfo.is_contract) {
					download_file({
						applyNo: contract_no
					}).then(res => {
						if (res.code != 1) {
							Toast(res.msg)
						}
						uni.navigateTo({
							url: `/subpkg/pdfView/pdfView?url=${res.data.url}`
						})
					})
				} else uni.navigateTo({
					url: `/subpkg/pdfView/pdfView?url=${this.userInfo?.contract?.file}`
				})
			},
			navTo(url) {
				if(url){
          uni.showLoading({
            title: '加载中',
            mask: true
          });
          uni.navigateTo({
          	url: url,
            success() {
              uni.hideLoading()
            }
          })
        }else Toast('暂未开放')
			},
			updateShow(value, type) {
				this.updateForm[type] = value;
				this.show[type] = true;
			},
			// 更新信息
			async updateInfo(type) {
				try {
					let form = {
						user_id: this.userInfo.id,
					};
					form[type] = this.updateForm[type];
					let res = await loginSetInfo(form);
					this.userInfo[type] = this.updateForm[type];
					Toast('更新成功');
					this.show = false;
				} catch (e) {
					Toast(e.msg || '更新失败')
				}
			},
			changeType(e) {
				// console.log(this.contractTypeList[]);
        this.nowContractType = e.detail.value;
        this.clickContract(1);
				// 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
				})
				res.data = res.data.filter(item => {
					return personnerContractType.find(t => item.id == t);
				})
				this.contractTypeList = res.data;
			},
      clickContract(e){
        this.modelType = e;
        this.modelShow = true;
      },
			// 生成合同
			async createContract() {
        uni.showLoading({
        	title: '合同生成中',
        	mask: true
        })
        let res = await userInitiateContract({
        	party_b: this.userInfo.id,
        	contract_type: this.contractTypeList[this.nowContractType].id,
        	type: 2
        })
        this.loadUserDetail();
        uni.hideLoading();
        Toast('合同已生成');
        this.navTo('/subpkg/submit/submit?type=' + 1);
				// uni.showModal({
				// 	content: '请检查信息无误后再生成合同',
				// 	confirmText: '确认无误',
				// 	cancelText: '我再看看',
				// 	confirmColor: '#0122c7',
				// 	success: async (e) => {
				// 		if (e.confirm) {
							
				// 		}
				// 	}
				// })
			},
			// 发送合同
			async addContract() {
        try {
        	uni.showLoading({
        		title: '合同发送中',
        		mask: true
        	})
        	let res = await userDraftingcontracts({
        		id: this.userInfo.id
        	});
        	this.loadUserDetail();
        	this.startTimer();
        	uni.hideLoading();
        	Toast('合同已发送');
        	// this.navTo('/subpkg/submit/submit?type='+2);
        } catch (e) {
        	uni.hideLoading();
        	Toast(e.msg || '合同发送失败');
        }
				// uni.showModal({
				// 	content: '请检查合同无误后再发送',
				// 	confirmText: '确认无误',
				// 	cancelText: '我再看看',
				// 	confirmColor: '#0122c7',
				// 	success: async (e) => {
				// 		if (e.confirm) {
							
				// 		}
				// 	}
				// })
			},
			// 发送短信
			async getPostsms() {
				try {
					uni.showLoading({
						title: '发送中',
						mask: true
					})
					if (this.timerCount == 0) {
						this.startTimer();
						let res = await userPostsms({
							id: this.userInfo.id
						})
						uni.hideLoading();
						Toast('短信已发送');
						// this.navTo('/subpkg/submit/submit?type='+3);
					}
				} catch (e) {
					uni.hideLoading();
					Toast(e.msg || '合同发送失败');
				}
			},
			// 定时器
			startTimer(time = 60) {
				this.timerCount = time.toFixed(0);
				this.timer = setInterval(() => {
					this.timerCount--;
					if (this.timerCount <= 0) {
						clearInterval(this.timer);
						this.loadUserDetail();
					}
				}, 1000);
			},
			async loadUserDetail() {
				if (!this.id) return;
				let res = await companyUserDetail({
					id: this.id
				})
        this.userInfo = res.data;
        this.skeleton = false;
			},
			previewImg(urls, index = 0) {
				uni.previewImage({
					urls: urls,
					current: index
				})
			}
		}
	}
</script>

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

	.tit {
		font-size: 35rpx;
		font-weight: 500;
		color: white;
		// margin-bottom: 21rpx;
		padding: 28rpx;
		background-color: $theme-oa-color;
		border-radius: 14rpx 14rpx 0 0;

		.c_text {
			// margin: 200rpx 0;
		}
	}

	.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 {
					flex: 1;
					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; /* 使用省略号表示被隐藏的文本 */
						}
					}

					.id_card {
						display: flex;
						justify-content: space-between;
					}
				}
			}

			.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;
    overflow: hidden;

		.title {
			margin-bottom: 0;
		}

		.c_item {
			width: 694rpx;
      padding: 0 28rpx;
      background-color: #fff;
      &:last-child{
        padding-bottom: 28rpx;
        border-radius: 0 0 14rpx 14rpx;
      }

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

				image {
					width: 306rpx;
					height: 208rpx;
					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>