OfficeApp/subpkg/companyInfo/companyInfo.vue

<template>
  <view class="">
    <view class="fixed_box">
      <view class="top_box">
        <view class="item" :class="current==0?'active':''" @click="current=0">我的公司</view>
        <view class="item" :class="current==1?'active':''"  @click="current=1">签约公司</view>
        <view class="item" :class="current==2?'active':''"  @click="current=2">公司财务</view>
        <!-- <view class="item" :class="current==3?'active':''"  @click="current=3">公司财务</view> -->
      </view>
      <view class="top_box top_box2" v-if="current==1">
        <view class="item" :class="currentChild==0?'active':''"  @click="currentChild=0;initLoad()">已签约</view>
        <view class="item" :class="currentChild==1?'active':''"  @click="currentChild=1;initLoad()">未签约</view>
      </view>
    </view>
    <view>
      <view class="company_info" v-show="current==0">
        <company></company>
      </view>
      <view class="company_list" v-show="current==1">
        <view class="info_card" v-for="item in companyList" :key="item.id">
          <view class="top" @click="naviTo('/subpkg/companySign/companySign?id='+item.id)">
            <view>
              <view class="info_name" :class="item.is_contract?'have':'no'">{{item.company_name}}</view>
              <view class="info_type">{{item.company_type_name}}</view>
            </view>
            <view class="btn">详情<uni-icons type="forward" color="#666666"></uni-icons></view>
          </view>
          <u-line ></u-line>
          <view class="bottom">
            <image src="../../static/img/contract/company.png"></image>
            <view class="text">
              <view>主要联系人：{{item.master_name}}</view>
              <view @click="copyPhone(item.master_phone)">联系方式：{{item.master_phone}}</view>
              <view style="display: flex;">
                <view class="">区县乡镇：</view>
                <view>{{item.city_name+'/'+item.area_name+'/'+item.street_name}}</view>
              </view>
              <!-- <view>片区经理：</view> -->
            </view>
          </view>
        </view>
        <u-loadmore :status="loadConfig.status" :loading-text="loadConfig.loadingText" :loadmore-text="loadConfig.loadmoreText" :nomore-text="loadConfig.nomoreText" />
      </view>
      <view class="company_info" v-show="current==2">
        <companyFinance></companyFinance>
      </view>
    </view>
  </view>
</template>

<script>
  import { companyIndex, companyUnsigned } from "@/api/company.js"
  import { Toast } from '@/libs/uniApi.js'
  import companyFinance from "@/components/companyFinance/companyFinance.vue"
  export default {
    components:{companyFinance},
    data() {
      return {
        current: 0,
        currentChild: 0,
        loadConfig:{
          page: 1,
          limit: 15,
          lastpage: '',
          loadingText: '努力加载中',
          loadmoreText: '轻轻上拉',
          nomoreText: '我也是有底线的~~',
          status: 'loadmore'
        },
        companyList: []
      }
    },
    onLoad() {},
    onShow() {
      this.loadCompanyList();
    },
    onReachBottom() {
      this.loadCompanyList();
    },
    methods: {
      initLoad(){
        this.loadConfig.page = 1;
        this.loadConfig.status = "loadmore";
        this.companyList = [];
        this.loadCompanyList();
      },
      // 加载公司列表
      async loadCompanyList(){
        if(this.loadConfig.status=="nomore")return;
        this.loadConfig.status="loading";
        let res;
        if(this.currentChild==0) res = await companyIndex({
          page: this.loadConfig.page,
          limit: this.loadConfig.limit
        })
        else res = await companyUnsigned({
          page: this.loadConfig.page,
          limit: this.loadConfig.limit
        })
        this.loadConfig.status="loadmore"
        if(res.data.data.length<this.loadConfig.limit){
          this.loadConfig.status="nomore"
        }else {
          this.loadConfig.page++;
        }
        this.companyList = [...this.companyList, ...res.data?.data]
      },
      naviTo(url) {
        url ?
          uni.navigateTo({
            url: url
          }) : Toast('暂未开放')
      },
      naviBack(){
        uni.navigateBack()
      },
      copyPhone(str="", type="号码"){
        if(str) uni.setClipboardData({
          data:str+"",
          success: (e) => {
            Toast(type+'已复制')
          },
          fail: (e) => {
            Toast('复制失败')
          }
        })
      }
    },
    onPullDownRefresh() {
      uni.stopPullDownRefresh()
    }
  }
</script>

<style lang="scss">
.fixed_box{
  width: 100%;
  position: fixed;
  /* #ifdef APP-PLUS */
  top:0;
  /* #endif */
  /* #ifdef H5 */
  top:44px;
  /* #endif */
  left: 0;
  z-index: 999;
}
.top_box{
  background-color: #fff;
  display: flex;
  
  .item{
    width: 155rpx;
    height: 53rpx;
    background: #F5F5F5FF;
    color: #999999FF;
    border-radius: 35rpx 35rpx 35rpx 35rpx;
    opacity: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 28rpx 0;
    margin-left: 28rpx;
  }
  .active{
    background: $theme-oa-color;
    color: #fff;
  }
}
.top_box2{
  .item{
    margin-top: 0;
    width: 120rpx;
  }
}
.company_info{
  margin-top: 110rpx;
}
.company_list{
  padding-bottom: 32rpx;
  margin-top: 190rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  .info_card{
    width: 694rpx;
    // height: 300rpx;
    background: #FFFFFF;
    border-radius: 21rpx 21rpx 21rpx 21rpx;
    margin-top: 28rpx;
    padding: 24rpx;
    .top{
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 28rpx;
      .info_name{
        font-size: 32rpx;
        font-weight: 500;
        color: #333333;
      }
      .have{
        &::before{
          content: "已签约";
          border-radius: 14rpx;
          border: 5rpx solid #5ac725;
          color: #5ac725;
          padding: 3rpx 6rpx;
          font-size: 28rpx;
          margin-right: 10rpx;
        }
      }
      .no{
        &::before{
          content: "未签约";
          border-radius: 14rpx;
          border: 5rpx solid #f56c6c;
          color: #f56c6c;
          padding: 3rpx 6rpx;
          font-size: 28rpx;
          margin-right: 10rpx;
        }
      }
      .info_type{
        font-size: 25rpx;
        font-weight: 500;
        color: $theme-oa-color;
        margin-top: 10rpx;
      }
      .btn{
        font-size: 25rpx;
        font-weight: 400;
        color: #666666;
        display: flex;
        align-items: center;
      }
    }
    .bottom{
      display: flex;
      margin-top: 28rpx;
      image{
        height: 140rpx;
        width: 140rpx;
        margin-right: 28rpx;
      }
      .text{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }
    }
  }
}
</style>