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">社会代码{{company.organization_code}}</view>
              </view>
            </view>
          </view>
          <view class="bottom">
            <view class="left">
              <uni-icons type="location"></uni-icons>
              <view class="location">区域:</view>
            </view>
            <view style="flex: 1;">{{company.province_name+company.city_name+company.area_name+company.street_name+company.address}}</view>
          </view>
        </view>
      </block>
    </view>
    <view class="item" v-show="skeleton||contract.contract_no">
      <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 class="nickname">张郭郭</text> -->
                  <text>{{contract.create_time}}</text>
                </view>
              </view>
            </view>
            <view class="right" @click="naviTo(contract.contract_no)">
              <!-- <image class="icon"></image> -->
              <uni-icons type="paperclip" color="#3274F9"></uni-icons>
              <view>查看</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">
          <text>联系人管理</text>
          <!-- <view>新增</view> -->
        </view>
        <view class="card">
          <view class="one">
            <view class="linkman">
              <view style="height: 30rpx;width: 6rpx;background-color: #3175f9;border-radius: 3rpx;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 style="height: 32rpx;"></view>
          <view class="one" v-for="(other, index) in company.other_contacts" :key="index">
            <block v-if="other.name!=''">
              <view class="linkman">
                <view style="height: 30rpx;width: 6rpx;background-color: #3175f9;border-radius: 3rpx;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>
            </block>
          </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" @click="priview(company.qualification.bank_account)"
            :src="company.qualification.bank_account" v-if="company.qualification.bank_account" :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.bank_accountB)"
            :src="company.qualification.bank_accountB" v-if="company.qualification.bank_accountB" :lazy-load="true">
            <template v-slot:loading>
              <u-loading-icon color="#333"></u-loading-icon>
            </template>
          </u--image>
        </view>
      </block>
    </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);
    },
    methods: {
      naviTo(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;
        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>
  .item {
    padding: 31.5rpx 28rpx;

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

          image {
            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: flex-start;
        color: #666666FF;
        margin-top: 32rpx;

        .left{
          display: flex;
          align-items: center;
          .location {
            margin-left: 8rpx;
          }
        }
        
      }

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

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