ClientManagerment.vue

<template>
  <div>
    <block-header title="搜索"/>
    <div class="page-search">
      <el-form label-suffix=":" size="small" :inline="true" :model="searchInfo" class="demo-form-inline">
        <el-form-item label="手机号">
          <el-input v-model="searchInfo.clientCell" placeholder="请输入手机号"></el-input>
        </el-form-item>

        <el-form-item label="产品名称">
          <app-select v-model="searchInfo.appName" @handleSetting="(e)=>{ searchInfo.appName = e}"/>
        </el-form-item>

        <el-form-item>
          <el-button size="small" type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </div>


    <div v-show="isShow">
      <!--用户信息-->
      <block-header title="客户信息"/>
      <el-collapse v-model="activeNames">

        <el-collapse-item title="用户基本信息" name="1">
          <br/>
          <div v-if="this.clientInfo.ucUserDO !=null">
            <el-row :gutter="24" :data="clientInfo.ucUserDO" style="margin-left:50px">
              <el-col :span="16">
                <div class="grid-content bg-purple">客户编号：{{ clientInfo.ucUserDO.clientNo }}</div>
              </el-col>
              <br/>
              <el-col :span="16">
                <div class="grid-content bg-purple">姓名：{{ clientInfo.ucUserDO.realName }}</div>
              </el-col>
              <br/>
              <el-col :span="16">
                <div class="grid-content bg-purple">注册时间：{{ clientInfo.ucUserDO.gmtFirstLogin | dateFilter }}</div>
              </el-col>
              <br/>
              <el-col :span="16">
                <div class="grid-content bg-purple">末次登陆：{{ clientInfo.ucUserDO.gmtLastLogin | dateFilter }}</div>
              </el-col>
              <br/>
              <el-col :span="16">
                <div class="grid-content bg-purple">
                  用户状态：{{ clientFormat(clientInfo.ucUserDO.state) }}
                  <el-button style="margin-left: 30px" type="danger" size="small"
                             v-if="this.clientInfo.ucUserDO.state != 4" @click="handleShow">销户
                  </el-button>
                </div>
              </el-col>
              <br/>
            </el-row>
          </div>
        </el-collapse-item>


        <el-collapse-item title="实名认证" name="2">
          <div v-if="this.clientInfo.clientRealAuthDO !=null">
            <el-row :gutter="20" :data="clientInfo.clientRealAuthDO" style="margin-left:50px">
              <el-col :span="8">
                <div class="grid-content bg-purple">
                  实名认证状态：{{ realAuthFormat(clientInfo.clientRealAuthDO.state) }}
                  <el-button type="primary" size="small"
                             v-if="this.clientInfo.userFaceRecognitionDO == null || this.clientInfo.userFaceRecognitionDO.state != 1"
                             @click="resetRealAuth(clientInfo.clientRealAuthDO.clientNo)">重置实名
                  </el-button>
                </div>
              </el-col>
            </el-row>
          </div>
          <br/>
          <div v-if="this.clientInfo.clientRealAuthDO !=null">
            <el-row :gutter="24" :data="clientInfo.clientRealAuthDO" style="margin-left:50px">
              <el-col :span="12">
                <img :src="clientInfo.clientRealAuthDO.idPhotoFrontUrl" alt="" style="width: 60%;height: 60%"/>
              </el-col>
              <el-col :span="12">
                <img :src="clientInfo.clientRealAuthDO.idPhotoConUrl" alt="" style="width: 60%;height: 60%"/>
              </el-col>
              <br/>
            </el-row>
          </div>
        </el-collapse-item>


        <el-collapse-item title="活体认证" name="3">
          <div v-if="this.clientInfo.userFaceRecognitionDO !=null">
            <el-row :gutter="24" :data="clientInfo.userFaceRecognitionDO" style="margin-left:50px">
              <el-col :span="24">
                <div class="grid-content bg-purple">
                  活体认证状态：{{ faceFormat(clientInfo.userFaceRecognitionDO.state) }}
                  <el-button style="margin-left: 30px" type="primary" size="small"
                             v-if="clientInfo.userFaceRecognitionDO.state != 1"
                             @click="manuallyCheck(clientInfo.userFaceRecognitionDO.userId)">人工通过
                  </el-button>
                </div>
              </el-col>
              <el-col :span="24">
                <div class="grid-content bg-purple">
                  认证次数：{{ clientInfo.userFaceRecognitionDO.verifyTimes }}
                  <el-button style="margin-left: 30px" type="primary" size="small"
                             v-if="clientInfo.userFaceRecognitionDO.state != 1"
                             @click="resetNumber(clientInfo.userFaceRecognitionDO.userId)">重置次数
                  </el-button>
                </div>
              </el-col>
              <el-col :span="24">
                <div class="grid-content bg-purple">认证结果：{{ clientInfo.userFaceRecognitionDO.faceResult }}</div>
              </el-col>
            </el-row>

            <el-row :gutter="24" :data="clientInfo.userFaceRecognitionDO" style="margin-left:50px;margin-top: 20px">
              <el-col :span="12">
                <div class="grid-content bg-purple-light">
                  人脸照片<br/><img :src="clientInfo.userFaceRecognitionDO.faceBestImgPath" alt=""
                                style="width: 50%;height: 50%"/>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-collapse-item>


        <el-collapse-item title="基本信息" name="4">
          <br/>
          <div v-if="this.clientInfo.clientRiskFileDO !=null">
            <el-row :gutter="24" :data="clientInfo.clientRiskFileDO" style="margin-left:50px">
              <el-col :span="16">
                <div class="grid-content bg-purple">通讯录权限：{{ fileTypeFormat(clientInfo.clientRiskFileDO.fileType) }}
                </div>
              </el-col>
              <br/>
            </el-row>
          </div>
          <div v-else>
            <el-row :gutter="24" style="margin-left:50px">
              <el-col :span="16">
                <div class="grid-content bg-purple">通讯录权限：通讯录未获取</div>
              </el-col>
              <br/>
            </el-row>
          </div>
          <div>
            <el-row :gutter="24" :data="clientInfo.clientRiskFileDO" style="margin-left:50px;margin-top: 30px">
              <el-col :span="16">
                <div class="grid-content bg-purple">盈火老用户数据清理(谨慎操作)：
                  <el-button style="margin-left: 10px" type="danger" size="small" @click="removeUserInfo">清除</el-button>
                </div>
              </el-col>
              <br/>
            </el-row>
          </div>
        </el-collapse-item>

      </el-collapse>
    </div>

    <!--销户弹框-->
    <el-dialog title="销户" :visible.sync="logVisible" width="30%" :before-close="handleClose">
      <div style="margin-bottom: 20px;padding-left: 5px">正在进行销户操作，该操作不可恢复，请确认是否继续？</div>
      <br/>

      <el-form label-suffix=":" ref="logOffForm" :rules="rules" size="small" label-width="65px" :model="form"
               class="demo-form-inline">
        <el-form-item prop="memo" label="备注">
          <el-input type="textarea" v-model="form.memo" :rows="2" placeholder="请输入内容"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="logVisible = false" size="small">取 消</el-button>
        <el-button type="primary" size="small" @click="handleLogSubmit">确 定</el-button>
      </span>
    </el-dialog>


  </div>
</template>

<script>
import * as moment from "moment";

export default {
  name: "ClientManagerment",
  data() {
    return {
      isShow: false,
      activeNames: ['1', '2', '3', '4'],
      searchInfo: {
        clientCell: '',
        appName: ''
      },
      clientInfo: {
        ucUserDO: {},
        clientRealAuthDO: {},
        userFaceRecognitionDO: {},
        clientRiskFileDO: {},
      },

      rules: {
        memo: [
          {required: true, message: "请输入备注信息", trigger: 'blur'}
        ]
      },
      user: {},
      form: {
        userId: '',
        creator: '',
        clientCell: '',
        appName: '',
        memo: '',
      },
      logVisible: false,

    }
  },
  filters: {
    dateFilter: function (row) {
      const exp = row;
      if (!exp || typeof (exp) === undefined || typeof (exp) === null) {
        return ''
      }
      return moment(exp).format("YYYY-MM-DD HH:mm:ss")
    }
  },

  created() {
    //Vue的方法给原生调用，则需要把方法挂在Window下面
    window.clientData = this.clientData;
  },

  methods: {
    // 显示销户弹框
    handleShow() {
      const {clientCell, appName} = this.searchInfo
      this.form.appName = appName
      this.form.clientCell = clientCell

      this.logVisible = true;
    },
    // 关闭销户弹框
    handleClose() {
      this.logVisible = false;
    },
    // 注销提交
    handleLogSubmit() {
      this.$refs['logOffForm'].validate(async (valid) => {
        if (valid) {

          const form = this.form;
          const user = this.user;
          form.userId = user.userId;
          form.creator = encodeURIComponent(localStorage.getItem("userName"));
          try {
            const res = await this.$$get('/client/accountCancellation', form);
            const result = res.data;
            if (result.success) {
              this.$message({message: '销户成功', type: 'success'});
              const {clientCell, appName} = this.searchInfo;
              this.clientData(clientCell, appName);
              this.handleClose()
            }
          } catch (err) {
            this.$message({
              type: 'info',
              message: '销户失败'
            });
          }
        }
      })
    },
    /*搜索条件*/
    onSubmit() {
      if (this.searchInfo.clientCell === '' || this.searchInfo.appName === '') {
        this.$message({message: '手机号或产品名称不能为空', type: 'error'});
        return;
      }
      this.clientData(this.searchInfo.clientCell, this.searchInfo.appName);
    },

    clientData(record, value) {
      //查询客户数据
      this.$$get('/client/getClientInfo?cell=' + record + '&appName=' + value).then(res => {
        if (res.data.code != 200) {
          this.isShow = false;
          this.$message.error(res.data.message);
          return
        }
        this.isShow = true;
        const result = res.data.result;
        this.clientInfo = result;
        if (result.ucUserDO) {
          this.user = result.ucUserDO
        }
      }).catch(error => {
        this.$Message.error(error || '系统异常');
      });
    },

    //客户注册状态
    clientFormat(value) {
      var userStatus = value;
      if (userStatus == null || userStatus == '' || userStatus == undefined) {
        return ''
      }
      return this.$enumUtils.toMsg('ClientStatusEnum', userStatus);
    },

    //实名状态
    realAuthFormat(value) {
      var realAuthStatus = value;
      if (realAuthStatus == null || realAuthStatus == '' || realAuthStatus == undefined) {
        return ''
      }
      return this.$enumUtils.toMsg('RealAuthStatusEnum', realAuthStatus);
    },

    //活体状态
    faceFormat(value) {
      var faceStatus = value;
      if (faceStatus == null || faceStatus == '' || faceStatus == undefined) {
        return ''
      }
      return this.$enumUtils.toMsg('FaceStatusEnum', faceStatus);
    },

    //通讯录上传状态
    fileTypeFormat(value) {
      var fileTypeStatus = value;
      if (fileTypeStatus == null || fileTypeStatus == '' || fileTypeStatus == undefined) {
        return ''
      }
      if (fileTypeStatus == 1) {
        return '已获取';
      } else {
        return '无法获取获取';
      }
    },

    //重置实名
    resetRealAuth(value) {
      var clientCell = this.searchInfo.clientCell;
      var appName = this.searchInfo.appName;
      this.$confirm('正在重置实名认证, 是否继续?', '重置实名', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        beforeClose: (action, instance, done) => {
          if (action === 'confirm') {
            this.$$get(`/client/resetAuthen?clientNo=${value}&appName=${appName}`)
                .then(res => {
                  if (res.data.code != 200) {
                    this.$message.error(res.data.message);
                    return
                  }
                  this.$message({message: '实名重置成功', type: 'success'});
                  done();
                  this.clientData(clientCell, appName);
                }).catch(err => {
              this.$Message.error(error || '系统异常');
            });
          } else {
            done();
          }
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消重置'
        });
      });
    },


    //销户
    cancelUser(record) {
      const clientCell = this.searchInfo.clientCell;
      const appName = this.searchInfo.appName;


      this.$confirm('正在进行销户操作, 是否继续?', '销户', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        beforeClose: (action, instance, done) => {
          if (action === 'confirm') {
            this.$$get('/client/accountCancellation?userId=' + record.userId + '&clientCell=' + record.cell + '&appName=' + this.searchInfo.appName + '&creator=' + localStorage.getItem("userName"))
                .then(res => {
                  if (res.data.code != 200) {
                    this.$message.error(res.data.message);
                    return
                  }
                  this.$message({message: '销户成功', type: 'success'});
                  done();
                  this.clientData(clientCell, appName);
                }).catch(err => {
              this.$Message.error(error || '系统异常');
            });
          } else {
            done();
          }
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消销户'
        });
      });
    },

    //活体人工通过接口
    manuallyCheck(record) {
      var clientCell = this.searchInfo.clientCell;
      var appName = this.searchInfo.appName;
      this.$$get('/client/manuallyCheck?userId=' + record).then(res => {
        if (res.data.code != 200) {
          this.$message.error(res.data.message);
          return
        }
        this.$message({message: '人工通过成功', type: 'success'});
        this.clientData(clientCell, appName);
      }).catch(error => {
        this.$Message.error(error || '系统异常');
      });
    },

    //重置用户认证次数
    resetNumber(record) {
      var clientCell = this.searchInfo.clientCell;
      var appName = this.searchInfo.appName;
      this.$$get('/client/resetNumber?userId=' + record).then(res => {
        if (res.data.code != 200) {
          this.$message.error(res.data.message);
          return
        }
        this.$message({message: '重置用户认证次数成功', type: 'success'});
        this.clientData(clientCell, appName);
      }).catch(error => {
        this.$Message.error(error || '系统异常');
      });
    },

    //清除用户数据
    removeUserInfo() {

      var clientCell = this.searchInfo.clientCell;
      var appName = this.searchInfo.appName;
      this.$confirm('正在进行用户数据清除操作, 是否继续?', '清除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        beforeClose: (action, instance, done) => {
          if (action === 'confirm') {
            this.$$get('/client/removeUserInfo?cell=' + clientCell + '&appName=' + appName)
                .then(res => {
                  if (res.data.code != 200) {
                    this.$message.error(res.data.message);
                    return
                  }
                  this.$message({message: '清除用户数据成功', type: 'success'});
                  done();
                  this.clientData(clientCell, appName);
                }).catch(err => {
              this.$Message.error(error || '系统异常');
            });
          } else {
            done();
          }
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消清除'
        });
      });
    },

  }
}
</script>

<style scoped>

</style>