OfficeApp/subpkg/companyInfo/companyInfo.vue

<template>
  <view class="">
    <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>
    <view class="company" 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">{{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>
</template>

<script>
  import { companyIndex } from "@/api/company.js"
  import { Toast } from '@/libs/uniApi.js'
  export default {
    data() {
      return {
        current: 0,
        loadConfig:{
          page: 1,
          limit: 15,
          lastpage: '',
          loadingText: '努力加载中',
          loadmoreText: '轻轻上拉',
          nomoreText: '我也是有底线的~~',
          status: 'loadmore'
        },
        companyList: []
      }
    },
    onLoad() {},
    onShow() {
      this.loadCompanyList();
    },
    onReachBottom() {
      this.loadCompanyList();
    },
    methods: {
      // 加载公司列表
      async loadCompanyList(){
        if(this.loadConfig.status=="nomore")return;
        this.loadConfig.status="loading"
        let res = await companyIndex({
          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">
.top_box{
  background-color: #fff;
  display: flex;
  
  .item{
    width: 175rpx;
    height: 53rpx;
    background: #F5F5F5FF;
    color: #999999FF;
    border-radius: 35rpx 35rpx 35rpx 35rpx;
    opacity: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 28rpx;
  }
  .active{
    background: $theme-oa-color;
    color: #fff;
  }
}
.company{
  
}
.company_list{
  padding-bottom: 32rpx;
  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;
      }
      .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>