components/pc/wcarrier/join.vue

<!-- eslint-disable vue/valid-v-model -->

<template>
  <div class="p-spac p-fz">
    <div class="defbb p-spac">企业认证 [ <span class="gray-color" :class="{ 'green-color': isAuth }">{{ authText }}</span> ]</div>
    <div v-if="isAuth" class="s-fz flex">
      <div class="flex1 defbb p-spac p-t-0">
        <div class="chunk1">
          <div><span>公司名称：</span>{{ carrierAuthInfo.orgName }}</div>
          <div class=" "><span>统一社会信用代码：</span>{{ carrierAuthInfo.taxpayer }}</div>
        </div>
        <div class="gray-color defbb p-spac">公司营业执照</div>
        <div class="p-spac">
          <el-image
            class="big-img"
            fit="cover"
            :src="$tools.getFullFileUrl(carrierAuthInfo.businessLicense)"
            :preview-src-list="[$tools.getFullFileUrl(carrierAuthInfo.businessLicense)]"
          >
          </el-image>
        </div>
      </div>
      <div class="flex1 defbb p-spac p-t-0">
        <div class="chunk1">
          <div class="abs-rt"><span>证件类型：</span>身份证</div>
          <div><span>法人姓名：</span>{{ carrierAuthInfo.legalperson }}</div>
          <div><span>证件号：</span>{{ carrierAuthInfo.idCardNo }}</div>
        </div>
        <div class="flex">
          <div class="mr-spac">
            <div class="gray-color defbb p-spac">法人身份证人像面</div>
            <div class="p-spac">
          <el-image
            class="small-img"
            fit="cover"
            :src="$tools.getFullFileUrl(carrierAuthInfo.idCardFront)"
            :preview-src-list="[$tools.getFullFileUrl(carrierAuthInfo.idCardFront)]"
          >
          </el-image>
            </div>
          </div>
          <div>
            <div class="gray-color defbb p-spac">法人身份证人像面</div>
            <div class="p-spac">
          <el-image
            class="small-img"
            fit="cover"
            :src="$tools.getFullFileUrl(carrierAuthInfo.idCardBack)"
            :preview-src-list="[$tools.getFullFileUrl(carrierAuthInfo.idCardBack)]"
          >
          </el-image>
            </div>
          </div>
        </div>
      </div>
    </div>
    <auth v-else v-model="carrierAuthInfo"/>
    <div class="defbb p-spac">
      资质审核 [
      <span class="gray-color" :class="{ 'green-color': isreView }">{{
        operateState
      }}</span>
      ]
          <el-button type="text"  v-if="reViewing" @click="getCarrierInfo()" :loading="$reqState($interfaces.user.get_carrier_info).ing">刷新</el-button>

      <span class="ml-spac p-wcolor" v-if="!isAuth">
        [ 提醒：请先完成“企业认证”！]</span
      >
    </div>
    <div class="p-spac p-b-0 flex defbb">
      <div>
        <div
          class="gray-color"
          :class="
            carrierRoadInfoView ? 'defbb pb-spac' : 'required ml-spac mb-spac'
          "
        >
          道路运输经营许可证
        </div>
        <div class="p-spac" v-if="carrierRoadInfoView">
          <el-image
            class="big-img"
            fit="cover"
            :src="$tools.getFullFileUrl(carrierRoadInfo.roadTransport)"
            :preview-src-list="[$tools.getFullFileUrl(carrierRoadInfo.roadTransport)]"
          >
          </el-image>
        </div>
        <el-form
          v-else
          ref="carrierRoadInfo"
          :model="carrierRoadInfo"
          :rules="rules"
          size="mini"
        >
          <el-form-item prop="roadTransport">
            <upload-img
              :fileList="carrierRoadInfoImg"
              :big="true"
              :disabled="!isAuth"
              @uploadOrgPic="uploadOrgPic"
            ></upload-img>
          </el-form-item>
        </el-form>
      </div>
      <div
        class="flex-column justify-between flex-items-start ml-spac pb-spac"
        v-if="!carrierRoadInfoView"
      >
        <div v-if="isAuth&&isReject">
          驳回理由：
          <div>{{carrierRoadInfo.reason}}</div>
        </div>
        <div v-else></div>
        <el-button
          v-if="isAuth&&(unStart||isReject)"
          type="primary"
          size="medium"
          class="auth-btn"
          @click="submitForm()"
          >{{ reviewBtnText }}</el-button
        >
      </div>
    </div>
    <div class="defbb p-spac">
      开票补充信息<span class="ml-spac p-wcolor" v-if="!isreView"
        >[ 提醒：请先完成“资质审核”！]</span
      >
    </div>
    <invoice :disabled="!isreView" :readOnly="false" v-model="carrierFpInfo" class="p-spacd2 p-b-0" />
    <authorize v-model="bindPhone" :carrierBalanceInfo="carrierBalanceInfo" :carrierWithdrawInfo="carrierWithdrawInfo" :tradeType="tradeType" v-if="isreView" />
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import UploadImg from '@/components/uploadImg'
import auth from './comp/auth.vue'
import invoice from './comp/invoice.vue'
import authorize from './comp/authorize.vue'

export default {
  name: 'join',
  data() {
    return {
      /** 交易模式(1经销模式;2直销模式，默认经销模式1) */
      tradeType: 1,
      /** 绑定手机号信息 */
      bindPhone: '',
      /** 企业认证信息 */
      carrierAuthInfo: {
        /** 营业执照路径 */
        businessLicense: '',
        /** 认证状态：1=未完成 2=已认证 */
        channelAuthStatus: 1,
        /** 法人身份证反面照片路径 */
        idCardBack: '',
        /** 法人身份证正面照片路径 */
        idCardFront: '',
        /** 法人证件号（身份证号） */
        idCardNo: '',
        /** 法人姓名 */
        legalperson: '',
        /** 公司名称 */
        orgName: '',
        /** 统一社会信用代码（纳税人识别号） */
        taxpayer: ''
      },
      /** 资质审核：道路运输许可证信息 */
      carrierRoadInfo: {
        /** 审核驳回理由 */
        reason: '',
        /** 审核记录 */
        records: '',
        /** 道路运输许可证路径 */
        roadTransport: '',
        /** 道路运输经营许可证认证状态： 0=未发起（默认）1=待认证 2=已认证 3=已驳回 */
        roadTransportStatus: 0
      },
      /** 开票补充信息 */
      carrierFpInfo: {
        /** 开票信息：购方地址 */
        fpAddress: '',
        /** 开票信息：购方开户银行 */
        fpBank: '',
        /** 开票信息：购方银行账号 */
        fpBankAccount: '',
        /** 开票信息：购方电话 */
        fpPhone: '',
        /** 1未保存过，2已保存过 */
        fpStatus: 1
      },
      /** 提现公户信息 */
      carrierBankInfo: {
        /** 提现公户账号 */
        account: '',
        /** 开户银行 */
        bank: '',
        /** 开户行支行 */
        bankName: '',
        /** 1未上报，2已上报 */
        bankStatus: 1,
        /** 支行行号 */
        unionBank: ''
      },
      /** 合同签约信息 */
      carrierContractInfo: {
        /** 签约完成时间 */
        contractDate: '',
        /** 签约状态 1=未签约 2=已签约 */
        contractStatus: 1
      },
      /** 转账授权 */
      carrierBalanceInfo: {
        /** undefined */
        balanceDate: '',
        /** 转账授权：1未授权 2已授权 */
        balanceStatus: 1
      },
      /** 提现授权 */
      carrierWithdrawInfo: {
        /** 转账授权签约时间 */
        withdrawDate: '',
        /** 提现授权：1未授权 2已授权 */
        withdrawStatus: 1
      },
      carrierRoadInfoImg: [
        {
          path: '',
          defaultPath: require('@/assets/images/main/license@2x.png'),
          text: '上传道路运输经营许可证'
        }
      ],
      rules: {
        roadTransport: {
          required: true,
          message: '请上传道路运输经营许可证',
          trigger: 'blur'
        }
      }
    }
  },
  components: { UploadImg, auth, invoice, authorize },
  computed: {
    ...mapGetters({
      orgId: 'woporg',
      user: 'wopuser'
    }),

    // 已认证
    isAuth() {
      return this.carrierAuthInfo.channelAuthStatus === 2
    },
    authText() {
      return this.isAuth ? '已认证' : '未完成'
    },
    // 未发起
    unStart() {
      return this.carrierRoadInfo.roadTransportStatus === 0
    },
    // 待审核
    reViewing() {
      return this.carrierRoadInfo.roadTransportStatus === 1
    },
    // 被驳回
    isReject() {
      return this.carrierRoadInfo.roadTransportStatus === 3
    },
    // 已审核
    isreView() {
      return this.carrierRoadInfo.roadTransportStatus === 2
    },
    operateState() {
      return ['未发起', '待审核', '已认证', '已驳回'][this.carrierRoadInfo.roadTransportStatus]
    },
    // 营运许可证为查看状态
    carrierRoadInfoView() {
      return this.reViewing || this.isreView
    },
    reviewBtnText() {
      return this.isReject ? '重新发起审核' : '发起审核'
    }
  },
  created() {
    this.getCarrierInfo()
    // this.userOrgFind()
  },
  methods: {
    getCarrierInfo() {
      if (this.orgId) {
        this.$http(this.$interfaces.user.get_carrier_info, { orgId: this.orgId }).then(res => {
          this.tradeType = res.org.tradeType
          this.carrierAuthInfo = res.carrierAuthInfo
          this.carrierBalanceInfo = res.carrierBalanceInfo
          this.carrierBankInfo = res.carrierBankInfo
          this.carrierContractInfo = res.carrierContractInfo
          this.carrierFpInfo = res.carrierFpInfo
          this.carrierRoadInfo = res.carrierRoadInfo
          this.carrierWithdrawInfo = res.carrierWithdrawInfo
        })
      }
    },

    uploadOrgPic(path) {
      this.carrierRoadInfo.roadTransport = path
      // this.carrierRoadInfo.roadTransport = process.env.VUE_APP_FILE_URL + path
    },
    submitForm() {
      this.$refs.carrierRoadInfo.validate((valid) => {
        if (valid) {
          this.$http(this.$interfaces.user.road_transport_up, {
            picPath: this.carrierRoadInfo.roadTransport
          }).then(res => {
            this.carrierRoadInfo.roadTransportStatus = 1
          })
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
@import "submodule/utils/style/variables.scss";
.abs-rt {
  position: absolute;
  right: $p-spac;
  top: $p-spac;
}
.small-img {
  width: 216px;
  height: 140px;
}
.big-img {
  width: 340px;
  height: 220px;
}
</style>