components/pc/wcarrier/join.vue

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

<template>
  <div class="p-fz" v-show="inited">
    <div class="defbb pt-spac pb-spac">企业认证 [ <span class="label-color" :class="{ 'green-color': isAuth }">{{ authText }}</span>
      ]
    </div>
    <div v-if="module.carrierAuthInfo.readOnly||isAuth" class="flex defbb">
      <div :class="{ 'flex1': module.carrierAuthInfo.readOnly }">
        <div class="chunk1 p-fz">
          <div><span>公司名称：</span>{{ carrierAuthInfo.orgName }}</div>
          <div class="flex-end"><span>统一社会信用代码：</span>{{ carrierAuthInfo.taxpayer }}</div>
        </div>
        <div class="label-color p-spac defbb">公司营业执照</div>
        <div class="p-spac center">
          <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="ml-spacm4" :class="{ 'flex1': module.carrierAuthInfo.readOnly }">
        <div class="chunk1 p-fz">
          <div class="abs-rt"><span>证件类型：</span>身份证</div>
          <div><span>法人姓名：</span>{{ carrierAuthInfo.legalperson }}</div>
          <div class="flex-end"><span>证件号：</span>{{ carrierAuthInfo.idCardNo }}</div>
        </div>
        <div class="flex">
          <div class="mr-spac">
            <div class="label-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="label-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" @authSuccess="getCarrierInfo()"/>
    <template v-if="module.carrierRoadInfo.show">
      <div class="defbb pt-spac pb-spac mt-spac">
        资质审核 [
        <span class="gray-color" :class="{ 'green-color': isreView, 'p-wcolor': reViewing }">{{
          operateState
        }}</span>
        ]
        <el-button type="text" v-if="!module.carrierRoadInfo.readOnly && 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 :class="{ flex1: module.carrierRoadInfo.readOnly }">
          <div class="label-color" :class="carrierRoadInfoView ? 'defbb pb-spac' : 'required ml-spac mb-spac'
            ">
            道路运输经营许可证
          </div>
          <div class="p-spac center" 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 v-if="module.carrierRoadInfo.readOnly" class="flex1 ml-spacm4">
          <div class="defbb label-color pb-spac">审核记录</div>
          <div class="p-spacd2" v-for="(crir, i) in carrierRoadInfo.records" :key="i">
            {{ $tools.formatDate(crir.createDate) }} {{ crir.createrName }} {{ crir.action }}
          </div>
        </div>
        <div class="flex-column justify-between flex-items-start ml-spac pb-spac" v-else>
          <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="transportUp()" :loading="$reqState($interfaces.user.road_transport_up).ing">{{ reviewBtnText
            }}</el-button>
        </div>
      </div>
    </template>
    <template v-if="$props.module.carrierFpInfo.show">
      <div class="defbb pt-spac pb-spac mt-spac">
        开票补充信息<span class="ml-spac p-wcolor" v-if="!isreView">[ 提醒：请先完成“资质审核”！]</span>
      </div>
      <invoice :disabled="!isreView" :readOnly="module.carrierFpInfo.readOnly" v-model="carrierFpInfo"
        class="p-spacd2 p-b-0" />
    </template>
    <template v-if="$props.module.fundManagement">
      <div class="defbb pt-spac pb-spac mt-spac">
        资金管理设置
      </div>
      <div class="p-spac defbb">
        <div class="flex">

          <div class="flex1"><span class="label-color">物流充值交易模式：</span>{{ $convert.getTypeStr('tradeType', tradeType) }}</div>
          <div class="flex1 mb-spacd2"><span class="label-color">其他付款启用状态：</span>[ <span class="gray-color" :class="{ 'green-color': otherPay === 1 }">{{
            $convert.getTypeStr('otherPay',otherPay) }}</span> ]</div>
        </div>
        <div>
          <span class="label-color">物流充值工具：</span>{{ $convert.getTypeStr('p2pEnable', p2pEnable) }}
        </div>
      </div>
    </template>
    <authorize v-model="bindPhone" :carrierBalanceInfo="carrierBalanceInfo" :carrierWithdrawInfo="carrierWithdrawInfo"
      :tradeType="tradeType" :readOnly="module.authorize.readOnly" v-if="$props.module.authorize.show && isreView" />
    <bankInfo v-model="carrierBankInfo" :readOnly="module.carrierBankInfo.readOnly" v-if="showBankInfo" />
    <review class="w50" :orgId="safeOrgId" v-if="$props.module.review" @feedback="reviewFeedback" />
    <div class="pt-spac pb-spac mt-spac" v-if="module.carrierContractInfo">
      合同签约 [ <span class="gray-color"
        :class="{ 'green-color': contracted }">{{ $convert.getTypeStr('contractStatus', carrierContractInfo.contractStatus) }}</span>
      ]
    </div>
    <div class="defbt pt-spac pb-spac" v-if="module.status">
      <div class="mt-spac mb-spac">
        启用状态:
        <el-radio class="ml-spac" v-model="status" :label="0">启用</el-radio>
        <el-radio v-model="status" :label="1">停用</el-radio>
      </div>
      <div class="mb-spac">
        <el-button type="primary" size="small" @click="submitStatus"
          :loading="$reqState($interfaces.user.edit_status).ing">确定</el-button>
        <el-button size="small" @click="$emit('statusFeedback', 0)">取消</el-button>
      </div>

    </div>

  </div>
</template>
<script>
import UploadImg from 'submodule/components/pc/upload/uploadImg.vue'
import auth from './comp/auth.vue'
import invoice from './comp/invoice.vue'
import authorize from './comp/authorize.vue'
import bankInfo from './comp/bankInfo.vue'
import review from './comp/review.vue'

export default {
  name: 'join',
  data() {
    const _this = this
    return {
      inited: false,
      args: {},
      /** 启用状态 0-启用，1-停用 */
      status: 0,
      /** 交易模式(1经销模式;2直销模式，默认经销模式1) */
      tradeType: -1,
      /** 其他付款状态(挂靠车):默认0关闭，1开启 */
      otherPay: 0,
      /** 物流是否允许公对公充值:0-不允许 1-允许 */
      p2pEnable: 0,
      /** 绑定手机号信息 */
      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: [
        {
          get path() { return _this.$tools.getFullFileUrl(_this.carrierRoadInfo.roadTransport) },
          defaultPath: require('@/assets/images/main/license@2x.png'),
          text: '上传道路运输经营许可证'
        }
      ],
      rules: {
        roadTransport: {
          required: true,
          message: '请上传道路运输经营许可证',
          trigger: 'blur'
        }
      }
    }
  },
  components: { UploadImg, auth, invoice, authorize, review, bankInfo },
  props: {
    orgId: {
      type: String,
      default: ''
    },
    /** 模块信息 */
    module: {
      type: Object,
      default: () => ({
        carrierAuthInfo: {
          readOnly: false
        },
        carrierRoadInfo: {
          show: false,
          readOnly: false
        },
        carrierFpInfo: {
          show: false,
          readOnly: false
        },
        /** 资金管理设置 */
        fundManagement: false,
        /** 平台账号授权 */
        authorize: {
          show: false,
          readOnly: false
        },
        review: false
      })
    }
  },
  computed: {
    showBankInfo() {
      return this.module.carrierBankInfo.show && this.tradeType === 1
    },
    /** 合同已签约 */
    contracted() {
      return this.carrierContractInfo.contractStatus === 2
    },
    safeOrgId() {
      return this.$props.orgId ||
        this.args.orgId
    },
    // 已认证
    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.$convert.getTypeStr('roadTransportStatus', this.carrierRoadInfo.roadTransportStatus)
    },
    // 营运许可证为查看状态
    carrierRoadInfoView() {
      return this.module.carrierRoadInfo.readOnly || this.reViewing || this.isreView
    },
    reviewBtnText() {
      return this.isReject ? '重新发起审核' : '发起审核'
    }
  },
  created() {
    this.getCarrierInfo()
  },
  methods: {
    submitStatus() {
      this.$http(this.$interfaces.user.edit_status, { orgId: this.safeOrgId, status: this.status }).then(() => {
        this.$message.success('操作成功')
        this.$emit('statusFeedback', 1)
      })
    },
    async init(args) {
      this.inited = false
      this.args = args
      this.getCarrierInfo()
    },
    /**
     * qualificationReviewFeedback
     * @description: 资质审核反馈
     * @param {type} 2通过 3驳回 0 取消
     * @return: null
     */
    reviewFeedback(type) {
      this.$emit('reviewFeedback', type)
    },
    async getCarrierInfo() {
      if (this.safeOrgId) {
        await this.$http(this.$interfaces.user.get_carrier_info, { orgId: this.safeOrgId }).then(res => {
          this.bindPhone = res.bindPhone
          this.status = res.org.status
          this.tradeType = res.org.tradeType
          this.otherPay = res.org.otherPay
          this.p2pEnable = res.org.p2pEnable
          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
        })
      }
      this.inited = true
    },

    uploadOrgPic(path) {
      this.carrierRoadInfo.roadTransport = path
    },
    transportUp() {
      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>