OfficeApp/components/company/company.vue

<template>
  <view>
    <view class="item">
      <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="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">
						<text style="font-size: 32rpx">公司基本信息</text>
					</view>
					<view class="cards_content">
						<view class="right">
							<view class="">
								<text>公司名称 :</text>
								<text> {{company.company_name}}</text>
							</view>
							<view class="" @click="copyPhone(company.master_email, '社会代码')">
								<text>社会代码 :</text>
								<text>{{company.organization_code}}</text>
							</view>
							<view class="">
								<text>公司类型 :</text>
								<text>{{company.company_type_name||company.company_type}}</text>
							</view>
							<view class="">
								<text>负责区域 :</text>
								<text> {{c_address}} </text>
							</view>
						</view>



					</view>

					<view class="cards_head">
						<text style="font-size: 32rpx">公司联系人</text>
					</view>
					<view class="cards_content">
						<view class="right">
							<view class="">
								<text>法人姓名 :</text>
								<text> {{company.master_name}}</text>
							</view>
							<view class="" @click="copyPhone(company.master_email, '社会代码')">
								<text>担任职务 :</text>
								<text>{{company.organization_code}}</text>
							</view>
							<view class="" @click="copyPhone(company.master_email, '电话')">
								<text>联系电话 :</text>
								<text>{{company.master_phone}}</text>
							</view>
							<view class="" @click="copyPhone(company.master_email, '邮箱')">
								<text>电子邮箱 :</text>
								<text> {{company.master_email}}</text>
							</view>
						</view>



					</view>



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

			<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 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">
						<text style="font-size: 32rpx">电子合同</text>
					</view>
					<view class="cards_content">
						<view class="right">
							<view class="">
								<text>甲方 :</text>
								<text> {{contract.party_a_name}}</text>
							</view>
							<view class="" @click="copyPhone(company.master_email, '社会代码')">
								<text>乙方 :</text>
								<text>{{contract.party_b_name}}</text>
							</view>
							<view class="">
								<text>合同类型 :</text>
								<text>{{contract.contract_type_name}}</text>
							</view>
							<view class="">
								<text>合同编号 :</text>
								<text> {{contract.contract_no}} </text>
							</view>
						</view>
					</view>


					<view style="border-top:1px dashed #0022C7;margin:20rpx 0">
					</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: #3175f9;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: #3175f9;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" :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">
						<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'

export default {
  name: "company",
  data () {
    return {
      skeleton: true,
      company: {
        qualification: {
          bank_account: "",
          bank_accountB: "",
          business_license: "",
          business_licenseB: "",
        },
      },
      contract: {},
      users: [],
      current: 1
    }
  },
  props: ['id', 'type'],
  mounted () {
    this.initContract(this.$props.id, 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;

      }
      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;
      //判断是合同还是公司
      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;
      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;
      display: flex;
      justify-content: space-between;
    }

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

					view {
						margin-bottom: 10rpx;

						text:nth-child(2) {
							margin-left: 20rpx;

						}
					}
				}
			}

    .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-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
				}
			}
		}



	}

	.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 {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    align-items: center;
    padding: 28rpx;

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

      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>