underReview.vue

<template>
  <div class="app-container">

    <!-- 搜索工作栏 -->
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item :label="$t('关键字')" prop="nickname">
        <el-input v-model="queryParams.searchKey" :placeholder="$t('搜索昵称、姓名、手机、Email')" clearable @keyup.enter.native="handleQuery"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="handleQuery">{{$t('搜索')}}</el-button>
      </el-form-item>
    </el-form>

    <!-- 操作工具栏 -->
    <el-row :gutter="10" class="mb8">
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <!-- 列表 -->
    <el-table v-loading="loading" :data="list">
      <el-table-column :label="$t('用户昵称')" align="center" prop="nickname" />
      <el-table-column :label="$t('真实姓名')" align="center" prop="identityName" />
      <el-table-column  align="center" :label="$t('区号')">
        <template v-slot:default = 'scope'>
          +{{scope.row.areaCode ? `${scope.row.areaCode}`:''}}
        </template>
      </el-table-column>
      <el-table-column :label="$t('手机号')" show-overflow-tooltip align="center" prop="mobile" >
      </el-table-column>
      <el-table-column :label="$t('提交审核时间')" align="center" prop="createTime">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.identityAuditCreateTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('操作')" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope" >
          <el-button v-if="scope.row.identityAuditStatus !== 0 && scope.row.identityAuditStatus !== undefined" size="mini" type="text"  @click="identityFn(scope.row , '1')">{{$t('身份证审核')}}</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.page" :limit.sync="queryParams.rows"
                @pagination="getList"/>
    <el-dialog
      :title="$t('认证')"
      :visible.sync="attestationShow"
      width="80%">
      <div class="details">
        <el-tabs v-model="activeName" >
          <el-tab-pane :label="$t('身份证')" name="1">
            <div style="padding:0 40px;box-sizing: border-box;">
              <el-form ref="formId" label-position="left" label-width="100px" :rules="rulesId"  :model="IdDetails" >
                <el-form-item :label="$t('姓名')" prop="name">
                  <el-input v-model="IdDetails.name"></el-input>
                </el-form-item>
                <el-form-item :label="$t('证件类型')" prop="cardType">
                  <dict-selector v-model="IdDetails.cardType"  :type="DICT_TYPE.CERTIFICATE_TYPE" ></dict-selector>
                </el-form-item>
                <el-form-item :label="$t('证件号码')" prop="cardNumber">
                  <el-input v-model="IdDetails.cardNumber"></el-input>
                </el-form-item>
                <el-form-item :label="$t('证件正面照')" prop="img1">
                  <div>
                    <el-input  readonly style="margin-bottom: 20px" v-model="IdDetails.img1"></el-input>
                    <ImageUpload :isShowTip="false" v-model="IdDetails.img1" :limit="1"></ImageUpload>
                  </div>
                </el-form-item>
                <el-form-item :label="$t('证件背面照')" prop="img2">
                  <div>
                    <el-input readonly style="margin-bottom: 20px" v-model="IdDetails.img2"></el-input>
                    <ImageUpload :isShowTip="false" :limit="1" v-model="IdDetails.img2"></ImageUpload>
                  </div>
                </el-form-item>
                <el-form-item :label="$t('审核状态')">
                  {{getDictDatas(DICT_TYPE.AUDIT_STATUS)[IdDetails.status].label}}
                </el-form-item>
                <el-form-item :label="$t('审核时间')" v-if="IdDetails.status === 2 || IdDetails.status === 3">
                  {{parseTime(IdDetails.auditTime)}}
                </el-form-item>
                <el-form-item v-if="IdDetails.status === 1 || IdDetails.status === 3" :label="$t('审核备注')">
                  <el-input v-model="IdDetails.auditRemark" :disabled="IdDetails.status === 3" type="textarea"></el-input>
                </el-form-item>
              </el-form>
              <div v-if="IdDetails.status === 1" style="text-align: center;margin-top: 20px;">
                <el-button type="primary" @click="idCardAuditFn(2)">{{$t('审核通过')}}</el-button>
                <el-button type="primary" @click="idCardAuditFn(3)">{{$t('审核不通过')}}</el-button>
                <el-button @click="attestationShow = false">{{$t('取 消')}}</el-button>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  deleteUser,
  exportUserExcel,
  operationLogApi,
  seTupdateBackletter,
  memberGetAuthIdcardInfo,
  memberGetAuthEnterpriseInfo,
  memberUserAuditIdCard,
  setUserUpdateStatus, userCreateAuditEnterprise, getWaitApprovePage
} from "@/api/member/user";
import {DICT_TYPE, getDictDatas} from "@/utils/dict";
import FileUpload  from "@/components/FileUpload"
import ImageUpload from "@/components/ImageUpload";
import uploadImage from "@/components/UploadImage";
import {CommonStatusEnum} from "@/utils/constants";

export default {
  name: "underReview",
  components: {
    FileUpload,
    ImageUpload,uploadImage
  },
  data() {
    return {
      totalLog:0,
      IdDetails:{},
      enterpriseFrom:{},
      guaranteeUrl:undefined,
      DICT_TYPE,
      getDictDatas,
      // audit_status
      activeName:"1",
      // 遮罩层
      loading: true,
      // 导出遮罩层
      exportLoading: false,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 用户列表
      list: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        page: 1,
        rows: 10,
        isDeal:undefined,//	是否成交
        searchKey:undefined,//关键字
        auditStatus:1,//审核状态
        authType:2,//关键字
      },
      // 表单参数
      form: {},
      // 表单校验
      rulesId: {
        name: [{ required: true, message: this.$t('用户昵称不能为空'), trigger: "blur" }],
        cardType: [{ required: true, message: this.$t('证件类型不能为空'), trigger: "blur" }],
        cardNumber: [{ required: true, message: this.$t('证件号码不能为空'), trigger: "blur" }],
        img1: [{ required: true, message: this.$t('身份正面照不能为空'), trigger: ['blur','change'] }],
        img2: [{ required: true, message: this.$t('身份正面照不能为空'), trigger: ['blur','change'] }],
      },
      publicObj:undefined,
      operationLogShow:false,
      guaranteeShow:false,
      operationLogFrom:{
        page:1,
        row:10,
        userId:undefined
      },
      operationLogList:[],
      attestationShow:false
    };
  },
  created() {
    this.resetId();
    this.resetEnterprise()
    this.getList();
  },
  methods: {
    deleteFn(row){
      // this.$modal.confirm(`${this.$t('是否要删除昵称为')}${row.nickname}${this.$t('的会员')}`).then(function (){
      const nickname = row.nickname;
      this.$modal.confirm(`${this.$t('是否确认删除昵称为{nickname}的会员?', {nickname})}`).then(function (){
        return deleteUser(row.id)
      }).then( res => {
        if(res.code === 0) this.getList(); this.$message.success(this.$t('删除成功'))
      }).catch(() =>{
        // this.$message.f(this.$t('取消删除'))
        }

      )
    },
    //导出
    exportFn(){
      this.$modal.confirm(this.$t('是否确认导出所有用户数据项?')).then(() => {
        this.exportLoading = true;
        return exportUserExcel(this.queryParams);
      }).then(response => {
        this.$download.excel(response, `${this.$t('待审核会员')}.xls`);
        this.exportLoading = false;
      }).catch(() => {});
    },
    // 用户状态修改
    handleStatusChange(row) {
      let text = row.status === CommonStatusEnum.ENABLE ? this.$t('启用') : this.$t('停用');
      this.$modal.confirm(this.$t('确认要"') + text + '""' + row.nickname + this.$t('"用户吗?')).then(function() {
        return setUserUpdateStatus({id:row.id,status:row.status})
      }).then(() => {
        this.$modal.msgSuccess(text + this.$t('成功'));
      }).catch(function() {
        row.status = row.status === CommonStatusEnum.ENABLE ? CommonStatusEnum.DISABLE
          : CommonStatusEnum.ENABLE;
      });
    },
    /** 查询列表 */
    getList() {
      this.loading = true;
      // 处理查询参数
      let params = {...this.queryParams};
      // 执行查询
      getWaitApprovePage(params).then(response => {
        this.list = response.data.list;
        this.total = response.data.total;
        this.loading = false;
      });
    },
    /** 表单重置 */
    resetId(){
      this.IdDetails = {
        auditRemark: undefined,
        auditTime: undefined,
        cardNumber: undefined,
        cardType: 0,
        createTime: undefined,
        id: 0,
        img1: undefined,
        img2: undefined,
        name: '',
        status: 0,
        userId: 0
      }
    },//清空身份证
    resetEnterprise(){
      this.enterpriseFrom = {
        auditRemark: undefined,
        auditTime: undefined,
        cardNumber: undefined,
        createTime: undefined,
        id: undefined,
        img1: undefined,
        img2: undefined,
        legalName: undefined,
        name: undefined,
        status: 0,
        userId: undefined
      }
    },//清空企业
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.page = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.queryParams = {
        page: 1,
        rows: 10,
        isDeal:undefined,//	是否成交
        searchKey:undefined,//关键字
        auditStatus:1,//审核状态
        authType:2,//关键字
      }
      this.handleQuery();
    },

    getOperationLogList(){
      operationLogApi(this.operationLogFrom).then(r=>{
        if(r.code === 0){
          this.operationLogList = r.data.list
          this.totalLog = r.data.total
        }
      })
    },
    setGuarantee(){
      seTupdateBackletter({userId:this.publicObj.id,backLetter:this.guaranteeUrl}).then(r=>{
        if(r.code === 0){
          this.publicObj.backLetterImg = this.guaranteeUrl;
          this.guaranteeShow = false;
          this.$message.success(this.$t('保存成功'));
        }
      })
    },
    identityFn(row,val){
      this.attestationShow = true;
      this.activeName = val;
      this.publicObj = row;
      this.getIdentityDetails();
    },
    getIdentityDetails(){
      this.resetId();
      memberGetAuthIdcardInfo({userId:this.publicObj.id}).then(r=>{
        if(r.code === 0 && !!r.data){
          this.IdDetails  = r.data
        }
      })
    },
    getEnterpriseFn(){
      this.resetEnterprise();
      memberGetAuthEnterpriseInfo({userId:this.publicObj.id}).then(r => {
        if(r.code === 0 && !!r.data){
          this.enterpriseFrom = r.data
        }
      })
    },
    //身份证审核
    idCardAuditFn(val){
      let p = {
        auditStatus:val,
        userCardAuthId:this.IdDetails.id,
        auditRemark:this.IdDetails.auditRemark
      }
      if(val === 2){
        p.auditRemark = undefined
      }
      memberUserAuditIdCard(p).then(r => {
        if(r.code === 0){
          this.$message.success(this.$t('修改成功'));
          this.getList()
          this.attestationShow = false;

        }
      })
    },
    submit(){
      let p = {
        cardNumber:this.enterpriseFrom.cardNumber,
        img1:this.enterpriseFrom.img1,
        img2:this.enterpriseFrom.img2,
        legalName:this.enterpriseFrom.legalName,
        name:this.enterpriseFrom.name,
        userEnterpriseAuthId:this.enterpriseFrom.id,
        userId:this.publicObj.id
      }
      userCreateAuditEnterprise(p).then(r => {
        console.log(r);
        if(r.code === 0){
          this.$message.success(this.$t('添加成功!'));
          this.enterpriseFrom.status = 2
          this.enterpriseFrom.auditTime = new Date().getTime()
          this.getEnterpriseFn();
        }
      })
    }
  },
  watch:{
    attestationShow(newVal){
      if(!newVal){
        this.resetId();
        this.resetEnterprise()
        this.publicObj = undefined;
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.details{
  .el-input {
    width: 300px;
  }
  .el-textarea{
    width: 300px;
  }
}
</style>