OfficeApp/subpkg/companySign/companySign.vue

<template>
  <view class="">
    <company :id="id" type="company"></company>
    <view class="need_contract" v-if="!company.contract||!company.contract.status">
      <picker v-if="!company.contract" :range="contractTypeList" range-key="name" @change="changeType">
        <button class="btn">发起合同</button>
        <!-- <mybtn text="发起合同" position="false"></mybtn> -->
      </picker>
      <view v-if="company.contract&&company.contract.check_status==1">
        <button class="btn tips_center">合同已发起,请等待审核</button>
        <!-- <mybtn text="发起合同" position="false" disabled></mybtn> -->
      </view>
      <view v-if="company.contract&&company.contract.check_status==2" class="card">
        <view class="contract_box send">
          <view class="left">
            <image class="contract_img" src="../../static/img/contract/pdf.png"></image>
            <view class="text">
              <view class="name">{{company.contract.contract_type_name}}</view>
              <view>
                <text>{{company.contract&&company.contract.create_time}}</text>
              </view>
            </view>
          </view>
        </view>
        <u-line color="#999999FF" style="margin: 31rpx 0;"></u-line>
        <view class="bottom">
          <button class="send_btn" @click="addContract">发送合同</button>
        </view>
      </view>
      <view v-if="company.contract&&company.contract.check_status==3" class="card">
        <view class="contract_box send">
          <view class="left">
            <image class="contract_img" src="../../static/img/contract/pdf.png"></image>
            <view class="text">
              <view class="name">{{company.contract.contract_type_name}}</view>
              <view>
                <text>{{company.contract&&company.contract.create_time}}</text>
              </view>
            </view>
          </view>
        </view>
        <u-line color="#999999FF" style="margin: 31rpx 0;"></u-line>
        <view class="bottom">
          <button class="send_btn" @click="getPostsms" v-if="timerCount==0">再次发送短信</button>
          <button class="send_btn tips_center" v-else>{{cTimerCount+'秒后可继续再次发送短信'}}</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import { companyView, initiateContract, Draftingcontracts, postsms } from "@/api/company.js"
  import { dictDataLists } from "@/api/oaPbulic.js"
  import { Toast } from "../../libs/uniApi";
  export default {
    data() {
      return {
        id: '',
        company: {},
        skeleton: true,
        show: false,
        typeShow: false,
        timer: null, // 计时器
        timerCount: 0, //倒计时
        contractTypeList: []
      }
    },
    onLoad(options) {
      this.id = options.id;
      this.initCompany();
      this.initContractTypeList();
    },
    onShow() {},
    computed: {
      cTimerCount() {
        return this.timerCount;
      }
    },
    methods: {
      async initCompany() {
        let res = await companyView({
          id: this.id,
        })
        this.company = res.data;
        if (this.company.contract == [] || this.company.contract == {} || this.company.contract.length == 0) this
          .company.contract = null;
      },
      changeType(e) {
        // console.log(this.contractTypeList[e.detail.value]);
        this.createContract({
          party_b: this.id,
          contract_type: this.contractTypeList[e.detail.value].id,
          type: 1 //1-公司,2-个人
        })
      },
      // 初始化合同类型
      async initContractTypeList() {
        let res = await dictDataLists({
          type_id: 7
        })
        this.contractTypeList = res.data;
      },
      // 发起合同
      async createContract(data) {
        let res = await initiateContract({
          party_b: data.party_b,
          contract_type: data.contract_type,
          type: data.type
        })
        Toast(res.msg || '合同已发起')
        this.initCompany();
      },
      // 生成合同
      async addContract(data) {
        let res = await Draftingcontracts({
          id: this.id
        });
        Toast('合同已生成');
        this.initCompany();
        if (this.userInfo.contract.check_status == 3) {
          this.timerCount = 60;
          this.timer = setInterval(() => {
            this.timerCount--;
            if (this.timerCount == 0) {
              clearInterval(this.timer);
              this.initCompany();
            }
          }, 1000);
        }
        this.naviTo('/subpkg/submit/submit');
      },
      // 发送短信
      async getPostsms() {
        if (this.timerCount == 0) {
          this.timerCount = 60;
          this.timer = setInterval(() => {
            this.timerCount--;
            if (this.timerCount == 0) {
              clearInterval(this.timer);
              this.initCompany();
            }
          }, 1000);
          let res = await postsms({
            id: this.id
          })
          Toast('短信已发送');
          this.naviTo('/subpkg/submit/submit');
        }
      },
      naviTo(url) {
        url ?
          uni.navigateTo({
            url: url
          }) : Toast('暂未开放')
      },
    },
    onPullDownRefresh() {
      uni.stopPullDownRefresh()
    }
  }
</script>

<style lang="scss">
  .need_contract {
    padding-bottom: 30rpx;

    .card {
      padding-top: 0;
      margin: 28rpx;
      padding: 28rpx;
      background-color: #fff;
      border-radius: 14rpx;

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

      }

      .send {
        padding-top: 28rpx;
      }

      .send_btn {
        width: 100%;
        height: 84rpx;
        background: $theme-oa-color;
        border-radius: 42rpx 42rpx 42rpx 42rpx;
        color: #fff;
        line-height: 80rpx;
        text-align: center;
      }

      .tips_center {
        background-color: #666;
        color: #eee;
      }
    }

    .btn {
      margin: 0 auto;
      margin-top: 32rpx;
      // margin-bottom: 40rpx;
      width: 694rpx;
      height: 84rpx;
      background: $theme-oa-color;
      border-radius: 42rpx 42rpx 42rpx 42rpx;
      color: #fff;
      line-height: 80rpx;
      text-align: center;
    }

    .tips_center {
      background-color: #666;
      color: #eee;
    }
  }
</style>