OfficeApp/components/company/company.vue

<template>
	<view>
		<view class="item">
			<u-skeleton :loading="skeleton" :class="{'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="top">
						<view class="left">
							<image src="../../static/img/contract/company.png"></image>
							<view class="text">
								<view class="name">{{company.company_name}}</view>
								<view class="right">{{company.company_type_name||company.company_type}}</view>
								<view class="code">社会代码：<text
										@click="copyPhone(company.master_email, '社会代码')">{{company.organization_code}}</text>
								</view>
							</view>
						</view>
					</view>
					<view class="bottom">
						<view class="left">
							<uni-icons type="location" color="#666666" size="14"></uni-icons>
							<view class="location">区域：</view>
						</view>
						<view style="flex: 1;">{{c_address}}</view>
					</view>
				</view>
			</block>
	 -->
			<view class="personnel_list" v-if="!skeleton">

				<view class="cards">

					<view class="cards_head">
						<u--image src="../../static/img/company/company.png" width="33.29rpx" height="33.29rpx"
							style="margin-right:20rpx"></u--image>
						<text style="font-size: 32rpx">公司基本信息</text>
					</view>
					<view class="cards_content">
						<view class="right">
							<view class="right_item">
								<view class="right_item_title">公司名称︰</view>
								<view> {{company.company_name}}</view>
							</view>
							<view class="right_item" @click="copyPhone(company.master_email, '社会代码')">
								<view class="right_item_title">社会代码︰</view>
								<view>{{company.organization_code}}</view>
							</view>
							<view class="right_item">
								<view class="right_item_title">公司类型︰</view>
								<view>{{company.company_type_name||company.company_type}}</view>
							</view>
							<view class="right_item">
								<view class="right_item_title">负责区域︰</view>
								<view> {{c_address}} </view>
							</view>
						</view>



					</view>

					<view class="cards_head">
						<u--image src="../../static/img/company/LXR.png" width="33.29rpx" height="33.29rpx"
							style="margin-right:20rpx"></u--image>
						<text style="font-size: 32rpx">公司联系人</text>
						<!-- <text style="font-size: 32rpx">公司联系人</text> -->
					</view>
					<view class="cards_content">
						<view class="right">
							<view class="right_item">
								<view class="right_item_title">法人姓名︰</view>
								<view>{{company.master_name}}</view>
							</view>
							<view class="right_item" @click="copyPhone(company.master_email, '社会代码')">
								<view class="right_item_title">担任职务︰</view>
								<view>{{company.master_position}}</view>
							</view>
							<view class="right_item" @click="copyPhone(company.master_email, '电话')">
								<view class="right_item_title">联系电话︰</view>
								<view>{{company.master_phone}}</view>
							</view>
							<view class="right_item" @click="copyPhone(company.master_email, '邮箱')">
								<view class="right_item_title">电子邮箱︰</view>
								<view>{{company.master_email}}</view>
							</view>
						</view>



					</view>



				</view>


			</view>
		</view>
		<!-- 合同 -->
		<view class="item" v-show="skeleton||contract.status">

			<u-skeleton :loading="skeleton" :class="{'loading': skeleton}" :animate="true" title rows="2" rows-width="100%"
				rowsHeight="56"></u-skeleton>

			<!-- 
			<block v-if="!skeleton">
				<view class="title">电子合同</view>
				<view class="card">
					<view class="one">
						<view class="info">
							<view class="info_item">甲方：{{contract.party_a_name}}</view>
							<view class="info_item">乙方：{{contract.party_b_name}}</view>
							<view class="info_item">合同类型：{{contract.contract_type_name}}</view>
							<view class="info_item">合同编号：{{contract.contract_no}}</view>
						</view>
					</view>

					<u-line v-if="contract.contract_no" color="#999999FF" style="margin: 31rpx 0;"></u-line>

					<view class="contract" v-if="contract.contract_no">
						<view class="left">
							<image class="contract_img" src="../../static/img/contract/pdf.png"></image>
							<view class="text">
								<view class="name">合同</view>
								<view>

									<text>{{contract.create_time}}</text>
								</view>
							</view>
						</view>
						<view class="right" @click="navTo(contract.contract_no)">

							<uni-icons type="paperclip" color="#3274F9"></uni-icons>
							<view>查看</view>
						</view>
					</view>


				</view>
			</block>
 -->


			<view class="personnel_list" v-if="!skeleton">
				<view class="cards">

					<view class="cards_head">
						<u--image src="../../static/img/company/HT.png" width="33.29rpx" height="33.29rpx"
							style="margin-right:20rpx"></u--image>
						<text style="font-size: 32rpx">电子合同</text>
						<!-- <text style="font-size: 32rpx">公司联系人</text> -->
					</view>
					<view class="cards_content">
						<view class="right">
							<view class="right_item">
								<view class="right_item_title">甲方︰</view>
								<view> {{contract.party_a_name}}</view>
							</view>
							<view class="right_item" @click="copyPhone(company.master_email, '社会代码')">
								<view class="right_item_title">乙方︰</view>
								<view>{{contract.party_b_name}}</view>
							</view>
							<view class="right_item">
								<view class="right_item_title">合同类型︰</view>
								<view>{{contract.contract_type_name}}</view>
							</view>
							<view class="right_item">
								<view class="right_item_title">合同编号︰</view>
								<view> {{contract.contract_no}} </view>
							</view>
						</view>
					</view>


					<view style="border-top:1px dashed #0022C7;margin-bottom:20rpx">
					</view>

					<view class="contract" v-if="contract.contract_no">
						<view class="left">
							<image class="contract_img" src="../../static/img/contract/pdf.png"></image>
							<view class="text">
								<view class="name">合同</view>
								<view>
									<text>{{contract.create_time}}</text>
								</view>
							</view>
						</view>
						<view class="right" @click="navTo(contract.contract_no)">
							<uni-icons type="paperclip" color="#3274F9"></uni-icons>
							<view>查看</view>
						</view>
					</view>

				</view>
			</view>


		</view>
		<!-- 
		<view class="item">
			<u-skeleton :loading="skeleton" :animate="true" title rows="2" rows-width="100%"
				rowsHeight="56"></u-skeleton>
			<block v-if="!skeleton">
				<view class="title">
					<text>联系人管理</text>

				</view>
				<view class="card">
					<view class="one">
						<view class="linkman">
							<view
								style="height: 30rpx;width: 6rpx;background-color: #0122c7;border-radius: 8rpx;margin-right: 8rpx;">
							</view>
							主要联系人
						</view>
						<view class="info">
							<view class="info_item">姓名：{{company.master_name}}</view>
							<view class="info_item">职位：{{company.master_position}}</view>
							<view class="info_item" @click="copyPhone(company.master_phone)">
								联系电话：{{company.master_phone}}</view>
							<view class="info_item" @click="copyPhone(company.master_email, '邮箱')">
								邮箱：{{company.master_email}}</view>
						</view>
					</view>
					<view class="one" v-for="(other, index) in company.other_contacts" v-if="other.name!=''"
						:key="index">
						<view class="linkman">
							<view
								style="height: 30rpx;width: 6rpx;background-color: #0122c7;border-radius: 8rpx;margin-right: 8rpx;">
							</view>
							其他联系人
						</view>
						<view class="info">
							<view class="info_item">姓名：{{other.name}}</view>
							<view class="info_item">职位：{{other.position}}</view>
							<view class="info_item" @click="copyPhone(other.phone)">联系电话：{{other.phone}}</view>
							<view class="info_item" @click="copyPhone(other.email, '邮箱')">邮箱：{{other.email}}</view>
						</view>
					</view>
				</view>
			</block>

		</view>
 -->
		<view class="item">
			<u-skeleton :loading="skeleton"  :class="{'loading': skeleton}" :animate="true" title rows="2" rows-width="100%"
				rowsHeight="56"></u-skeleton>

			<!-- 
			<block v-if="!skeleton">
				<view class="title">资质信息</view>
				<view class="image_box" style="background-color: #fff;border-radius: 7px 7px 7px 7px;">
					<u--image class="image" @click="priview(company.qualification.business_license)"
						:src="company.qualification.business_license" v-if="company.qualification.business_license"
						:lazy-load="true">
						<template v-slot:loading>
							<u-loading-icon color="#333"></u-loading-icon>
						</template>
					</u--image>
					<u--image class="image" @click="priview(company.qualification.business_licenseB)"
						:src="company.qualification.business_licenseB" v-if="company.qualification.business_licenseB"
						:lazy-load="true">
						<template v-slot:loading>
							<u-loading-icon color="#333"></u-loading-icon>
						</template>
					</u--image>
					<u--image class="image" v-for="item in company.qualification.other_qualifications" :key="item"
						@click="priview(item)" :src="item" v-if="company.qualification.other_qualifications"
						:lazy-load="true">
						<template v-slot:loading>
							<u-loading-icon color="#333"></u-loading-icon>
						</template>
					</u--image>
				</view>
			</block>
 -->
			<view class="personnel_list" v-if="!skeleton">
				<view class="cards">

					<view class="cards_head">
						<u--image src="../../static/img/company/GSZZ.png" width="33.29rpx" height="33.29rpx"
							style="margin-right:20rpx"></u--image>
						<text style="font-size: 32rpx">公司资质信息</text>
						<!-- <text style="font-size: 32rpx"></text> -->
					</view>
					<view class="cards_content">
						<view class="image_box" style="background-color: #fff;border-radius: 7px 7px 7px 7px;">
							<u--image class="image" @click="priview(company.qualification.business_license)"
								:src="company.qualification.business_license"
								v-if="company.qualification.business_license" :lazy-load="true">
								<template v-slot:loading>
									<u-loading-icon color="#333"></u-loading-icon>
								</template>
							</u--image>
							<u--image class="image" @click="priview(company.qualification.business_licenseB)"
								:src="company.qualification.business_licenseB"
								v-if="company.qualification.business_licenseB" :lazy-load="true">
								<template v-slot:loading>
									<u-loading-icon color="#333"></u-loading-icon>
								</template>
							</u--image>
							<u--image class="image" v-for="item in company.qualification.other_qualifications"
								:key="item" @click="priview(item)" :src="item"
								v-if="company.qualification.other_qualifications" :lazy-load="true">
								<template v-slot:loading>
									<u-loading-icon color="#333"></u-loading-icon>
								</template>
							</u--image>
						</view>
					</view>
				</view>
			</view>
		</view>

	</view>



	</view>
</template>

<script>
	import {
		contractView
	} from "@/api/contract.js"
	import {
		companyView
	} from "@/api/company.js"
	import {
		download_file
	} from "@/api/junziqian.js"
	import {
		Toast
	} from '@/libs/uniApi.js'

	import {
		commonBrigade
	} from "@/api/oaPbulic.js"

	export default {
		name: "company",
		data() {
			return {
				skeleton: true,
				company: {
					qualification: {
						bank_account: "",
						bank_accountB: "",
						business_license: "",
						business_licenseB: "",
					},
				},
				contract: {},
				users: [],
				current: 1,
				brigadeList: [],
				brigade: ''
			}
		},
		props: ['cid', 'type'],
		mounted() {
			this.initContract(this.$props.cid, this.$props.type || null);
		},
		computed: {
			c_address() {
				let str = '';
				if (this.company.company_type == 16) {
					this.company?.province_name ? str += this.company?.province_name : null;
					this.company?.city_name ? str += this.company?.city_name : null;
					this.company?.area_name ? str += this.company?.area_name : null;
					this.company?.street_name ? str += this.company?.street_name : null;
				} else {
					this.company?.street_name ? str += this.company?.street_name : null;
					this.company?.village_name ? str += this.company?.village_name : null;
					// this.company?.brigade_name ? str += this.company?.brigade_name : null;
					this.brigade ? str += this.brigade : null;
				}
				return str;
			}
		},
		methods: {
			navTo(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}`
					})
				})
			},
			naviBack() {
				uni.navigateBack()
			},
			async initContract(id, type = "contract") {
				let res;
				res = await commonBrigade();
				this.brigadeList = res.data;
				//判断是合同还是公司
				if (id && (type == "contract" || type == null)) {
					res = await contractView({
						id
					});
				} else {
					if (id > 0) {
						res = await companyView({
							id
						});
					} else {
						res = await companyView();
					}
				}
				this.company = res.data.company;
				if (this.company?.qualification?.other_qualifications && typeof this.company.qualification
					.other_qualifications == 'string') {
					this.company.qualification.other_qualifications = JSON.parse(this.company.qualification
						.other_qualifications);
				}
				let arr = this.company.responsible_area.split(',');
				let brigade = this.brigadeList.filter(item => {
					return arr.find(t => t == item.id);
				});
				brigade.forEach((item) => {
					this.brigade += item.brigade_name ?? ''
				})
				uni.$emit('companyInfo', this.company); //发送全局事件
				this.user = res.data.user;
				this.contract = res.data.contract;
				this.skeleton = false;
				// console.log(res.data);
			},
			//查看图片
			priview(url) {
				uni.previewImage({
					urls: [url],
					longPressActions: {
						itemList: ['保存图片'],
						success: function(data) {
							if (data.tapIndex === 0) {
								uni.saveImageToPhotosAlbum({
									filePath: url,
									success: function() {
										uni.showToast({
											title: '保存成功',
											icon: 'success'
										})
									},
									fail: function() {
										uni.showToast({
											title: '保存失败',
											icon: 'none'
										})
									}
								})
							}
						}
					}
				})
			},
			copyPhone(str = "", type = "号码") {
				if (str) uni.setClipboardData({
					data: str + "",
					success: (e) => {
						Toast(type + '已复制')
					},
					fail: (e) => {
						Toast('复制失败')
					}
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	.personnel_list {
		// padding: 28rpx 0;

		.cards {
			margin: 0 auto;
			margin-bottom: 28rpx;
			width: 694rpx;
			background: #ffffff;
			border-radius: 30rpx;
			opacity: 1;
			overflow: hidden;
			// box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);

			.cards_head {
				padding: 28rpx;
				background-color: $theme-oa-color;
				color: white;
				height: 100rpx;
				line-height: 30rpx;
				display: flex;
				justify-content: left;
        align-items: center;
			}

			.cards_content {
				padding: 28rpx;
				display: flex;
				justify-content: space-between;

				.left {
					text-align: center;
					// padding: 15rpx 25rpx;
					padding-top: 20rpx;

					width: 160rpx;
					background-color: $theme-oa-color;
					color: white;
					border-radius: 40rpx;

					.cir {
						width: 120rpx;
						height: 120rpx;
						background-color: #ffffff;
						margin-left: 25rpx;
						border-radius: 120rpx;
						position: relative;
					}
				}

				.right {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
          word-break: break-all;

          .right_item{
            display: flex;
            margin-bottom: 10rpx;
            .right_item_title{
              flex-shrink: 0;
            }
          }
				}
			}

			.u_avatar {
				position: absolute;
				top: 50%;
				left: 50%;

				transform: translate(-50%, -50%);
			}
		}



		.contract {
			display: flex;
			justify-content: space-between;
			padding: 0 30rpx 20rpx 30rpx;

			.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-around;

					.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: $theme-oa-color;
				line-height: 35rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				.icon {
					width: 35rpx;
					height: 39rpx;
					background-color: $theme-oa-color;
					opacity: 1;
					margin-right: 10rpx;
				}
			}
		}
	}
  
  .loading{
    padding: 28rpx;
  }
  
	.item {
		padding-top: 0;

		&:nth-child(1) {
			padding-top: 32rpx;
		}

		.title {
			margin-bottom: 21rpx;
			font-size: 35rpx;
			font-weight: 500;
			color: #333333;
			display: flex;
			justify-content: space-between;
		}

		.card {
			width: 694rpx;
			// height: 231rpx;
			padding: 28rpx;
			background: #ffffff;
			border-radius: 14rpx 14rpx 14rpx 14rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

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

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

					image {
						flex-shrink: 0;
						width: 142rpx;
						height: 142rpx;
						margin-right: 28rpx;
						background: #cccccc;
						border-radius: 14rpx 14rpx 14rpx 14rpx;
						opacity: 1;
					}

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

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

						.code {
							font-size: 28rpx;
							font-weight: 400;
							color: #666666;
						}
					}
				}

				.right {
					font-size: 28rpx;
					font-weight: 500;
					color: $theme-oa-color;
				}
			}

			.bottom {
				display: flex;
				align-items: center;
				color: #666666ff;
				margin-top: 32rpx;

				.left {
					display: flex;
					align-items: center;
					flex-shrink: 0;

					.location {
						margin-left: 5rpx;
						margin-right: 5rpx;
					}
				}
			}

			.one {
				margin-top: 32rpx;

				&:nth-child(1) {
					margin-top: 0;
				}

				.linkman {
					// height: 44rpx;
					font-size: 32rpx;
					font-weight: 500;
					color: #333333;
					margin-bottom: 28rpx;
					display: flex;
					align-items: center;
				}

				.info {
					font-size: 28rpx;
					font-weight: 400;
					color: #666666;
					line-height: 45rpx;
				}
			}

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

			.image_box {
				display: flex;
				justify-content: space-between;
				flex-direction: column;
				align-items: center;
				padding: 28rpx;

				.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: $theme-oa-color;
					line-height: 35rpx;
					display: flex;
					justify-content: center;
					align-items: center;

					.icon {
						width: 35rpx;
						height: 39rpx;
						background-color: $theme-oa-color;
						opacity: 1;
						margin-right: 10rpx;
					}
				}
			}
		}

		.image_box {
			width: 100%;
			display: flex;
			justify-content: space-between;
			flex-direction: column;
			align-items: center;

			.image {
				border-radius: 20rpx;
				overflow: hidden;
				margin-bottom: 28rpx;
				align-self: center;

				image {
					width: 650rpx;
					height: 455rpx;
					background-color: #7f7f7f;
				}
			}
		}
	}

	.back_btn {
		width: 694rpx;
		height: 84rpx;
		background: $theme-oa-color;
		border-radius: 42rpx 42rpx 42rpx 42rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #fff;
		margin: 30rpx auto;
	}

	.stop_btn {
		width: 694rpx;
		height: 84rpx;
		border-radius: 42rpx 42rpx 42rpx 42rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: $theme-oa-color;
		background-color: transparent;
		margin: 30rpx auto;
	}
</style>