components/pc/wcarrier/join.vue

<template>
  <div class="p-spac p-fz">
    <div class="defbb p-spac">企业认证 [ 未完成 ]</div>
    <div v-if="isAuth" class="s-fz flex">
      <div class="flex1 defbb p-spac p-t-0">
        <div class="chunk1">
          <div><span>公司名称：</span>{{ info.orgName }}</div>
          <div class=" "><span>统一社会信用代码：</span>{{ info.code }}</div>
        </div>
        <div class="gray-color defbb p-spac">公司营业执照</div>
        <div class="p-spac">
          <el-image
            class="big-img"
            src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
            :preview-src-list="[
              'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
            ]"
          >
          </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>{{ info.orgName }}</div>
          <div><span>证件号：</span>{{ info.code }}</div>
        </div>
        <div class="flex">
          <div class="mr-spac">
            <div class="gray-color defbb p-spac">法人身份证人像面</div>
            <div class="p-spac">
              <img
                src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
                class="small-img"
              />
            </div>
          </div>
          <div>
            <div class="gray-color defbb p-spac">法人身份证人像面</div>
            <div class="p-spac">
              <img
                src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
                class="small-img"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
    <auth v-else />
    <div class="defbb p-spac">
      资质审核 [
      <span class="gray-color" :class="{ 'green-color': true }">{{
        operateState
      }}</span>
      ]
      <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="
            operateLiceView ? 'defbb pb-spac' : 'required ml-spac mb-spac'
          "
        >
          道路运输经营许可证
        </div>
        <div class="p-spac" v-if="operateLiceView">
          <img
            src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
            class="big-img"
          />
        </div>
        <el-form
          v-else
          ref="operateLice"
          :model="operateLice"
          :rules="rules"
          size="mini"
        >
          <el-form-item prop="card">
            <upload-img
              :fileList="operateLiceImg"
              :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="!operateLiceView"
      >
        <div v-if="isReject">
          驳回理由：
          <div>驳回理由驳回理由驳回理由驳回理由</div>
        </div>
        <div v-else></div>
        <el-button
          v-if="isAuth"
          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" class="p-spacd2 p-b-0" />
    <authorize :orgInfo="orgInfo" 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'
import { getOrgInfo } from '@/utils/tools'

export default {
  name: 'join',
  data() {
    return {
      orgInfo: {},
      info: {
        orgName: '水电费'
      },
      operateLiceImg: [
        {
          path: '',
          defaultPath: require('@/assets/images/main/license@2x.png'),
          text: '上传道路运输经营许可证'
        }
      ],
      operateLice: {},
      rules: {
        card: {
          required: true,
          message: '请上传道路运输经营许可证',
          trigger: 'blur'
        }
      }
    }
  },
  components: { UploadImg, auth, invoice, authorize },
  computed: {
    ...mapGetters({
      orgId: 'woporg',
      user: 'wopuser'
    }),

    // 已认证
    isAuth() {
      return false
    },
    // 已审核
    isreView() {
      return true
    },
    operateState() {
      return '未发起'
    },
    // 营运许可证为查看状态
    operateLiceView() {
      return this.isreView
    },
    // 被驳回
    isReject() {
      return true
    },
    reviewBtnText() {
      return this.isReject ? '重新发起审核' : '发起审核'
    }
  },
  created() {
    this.userOrgFind()
  },
  methods: {
    userOrgFind() {
      getOrgInfo(this.orgId, 'info').then(res => {
        this.orgInfo = res
      })
    },

    uploadOrgPic() {
      console.log('上传成功', arguments)
    },
    submitForm() {
      this.$refs.operateLice.validate((valid) => {
        if (valid) {
          alert('submit!')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</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>