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>
      <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"><uni-icons type="location"></uni-icons><text class="location">负责区域:</text></view>
      </view>
    </view>
    <view class="item">
      <u-skeleton :loading="skeleton" :animate="true" title rows="2" rows-width="100%" rowsHeight="56"></u-skeleton>
      <view class="title">
        <text>联系人管理</text>
        <!-- <view>新增</view> -->
      </view>
      <view class="card">
        <view class="one">
          <view class="linkman">主要联系人</view>
          <view class="info">
            <view class="info_item">姓名：{{company.master_name}}</view>
            <view class="info_item">职位：{{company.master_position}}</view>
            <view class="info_item">联系电话：{{company.master_phone}}</view>
            <view class="info_item">邮箱：{{company.master_email}}</view>
          </view>
        </view>
        <view style="height: 32rpx;"></view>
        <view class="one" v-for="(other, index) in company.other_contacts" :key="index">
          <view class="linkman">其他联系人</view>
          <view class="info">
            <view class="info_item">姓名：{{other.name}}</view>
            <view class="info_item">职位：{{company.position}}</view>
            <view class="info_item">联系电话：{{other.phone}}</view>
            <view class="info_item">邮箱：{{other.email}}</view>
          </view>
        </view>
      </view>
    </view>
    <view class="item">
      <u-skeleton :loading="skeleton" :animate="true" title rows="2" rows-width="100%" rowsHeight="56"></u-skeleton>
      <view class="title">资质信息</view>
      <view class="image_box">
        <image class="top" @click="priview(company.qualification.bank_account)" :src="company.qualification.bank_account"></image>
        <image class="bottom" @click="priview(company.qualification.business_license)" :src="company.qualification.business_license"></image>
      </view>
    </view>
    <view class="item">
      <u-skeleton :loading="skeleton" :animate="true" title rows="2" rows-width="100%" rowsHeight="56"></u-skeleton>
      <view class="title">电子合同</view>
      <view class="card">
        <view class="one">
          <view class="linkman">{{contract.party_a_name}}</view>
          <view class="info">
            <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 color="#999999FF" style="margin: 31rpx 0;"></u-line>
        <view class="contract">
          <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('/subpkg/pdfView/pdfView?url=' + contract.file)">
            <!-- <image class="icon"></image> -->
            <uni-icons type="paperclip" color="#3274F9"></uni-icons>
            <view>查看</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import { contractView } from "@/api/contract.js"
  import { companyView } from "@/api/company.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() {
      // console.log(this.$props.type, this.$props.id);
      this.initContract(this.$props.id, this.$props.type||null);
    },
    methods: {
      naviTo(url) {
        url ?
          uni.navigateTo({
            url: url
          }) : Toast('暂未开放')
      },
      naviBack(){
        uni.navigateBack()
      },
      async initContract(id, type="contract") {
        let res;
        //判断是合同还是公司
        if(id&&(type=="contract"||type==null)) res = await contractView({ 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'
                        })
                      }
                    })
                }
              }
            }
        })
      }
    },
  }
</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: #3274F9;
          }
        }
  
        .bottom {
          display: flex;
          align-items: center;
          color: #666666FF;
          margin-top: 32rpx;
  
          .location {
            margin-left: 28rpx;
          }
        }
  
        .one {
          .linkman {
            height: 44rpx;
            font-size: 32rpx;
            font-weight: 500;
            color: #333333;
            margin-bottom: 28rpx;
          }
  
          .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: #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
            }
          }
        }
      }
  
      .image_box {
        display: flex;
        justify-content: space-between;
        flex-direction: column;
        align-items: center;
  
        image{
          padding-bottom: 20rpx;
          border-radius: 20rpx;
          width: 650rpx;
          height: 455rpx;
        }
      }
    }
  
    .back_btn {
      width: 694rpx;
      height: 84rpx;
      background: #3274F9;
      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: #3274F9;
      background-color: transparent;
      margin: 30rpx auto;
    }
</style>