cwg-crm
/
cwg_crm_person_front_vu_realse


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702
							<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>Update</title>
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <meta name="full-screen" content="yes" />
  <meta name="x5-fullscreen" content="true" />
  <meta name="viewport"
    content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />

  <link rel="stylesheet" href="css/element-ui.css" />
  <link rel="stylesheet" href="css/element@2.12.2.css" />
  <link rel="stylesheet" href="css/index.css" />

  <style>
    :root {
      --primary: #2563eb;
      --primary-soft: #eff6ff;
      --danger: #ef4444;
      --danger-dark: #dc2626;
      --success: #16a34a;
      --text-main: #0f172a;
      --text-secondary: #475569;
      --text-muted: #94a3b8;
      --border: #e2e8f0;
      --border-strong: #cbd5e1;
      --bg-page: #f4f7fb;
      --bg-card: rgba(255, 255, 255, 0.94);
      --bg-section: #f8fafc;
      --radius-lg: 28px;
      --radius-md: 20px;
      --radius-sm: 14px;
      --shadow-card: 0 24px 70px rgba(15, 23, 42, 0.08),
        0 4px 18px rgba(15, 23, 42, 0.05);
      --shadow-hover: 0 16px 40px rgba(37, 99, 235, 0.14);
    }

    * {
      box-sizing: border-box;
    }

    html,
    body {
      min-height: 100%;
    }

    body {
      margin: 0;
      background:
        radial-gradient(circle at top left, rgba(37, 99, 235, 0.12), transparent 32%),
        radial-gradient(circle at top right, rgba(14, 165, 233, 0.12), transparent 34%),
        var(--bg-page);
      font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
      color: var(--text-main);
      -webkit-font-smoothing: antialiased;
    }

    img {
      display: block;
      max-width: 100%;
    }

    .container {
      width: 100%;
    }

    .page-shell {
      width: 100%;
      min-height: 100vh;
      padding: 32px 20px;
      display: flex;
      justify-content: center;
    }

    .document-card {
      width: min(1080px, 100%);
      background: var(--bg-card);
      border: 1px solid rgba(255, 255, 255, 0.78);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-card);
      backdrop-filter: blur(18px);
      overflow: hidden;
    }

    .hero-header {
      padding: 30px 34px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      background: linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);
      border-bottom: 1px solid var(--border);
    }

    .hero-title-group {
      display: flex;
      align-items: flex-start;
      gap: 16px;
    }

    .hero-icon {
      width: 48px;
      height: 48px;
      flex: 0 0 auto;
      border-radius: 16px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: var(--primary);
      background: var(--primary-soft);
      font-size: 24px;
    }

    .hero-title {
      margin: 0;
      font-size: 28px;
      line-height: 1.2;
      font-weight: 800;
      letter-spacing: -0.03em;
    }

    .hero-subtitle {
      margin: 8px 0 0;
      color: var(--text-secondary);
      font-size: 14px;
      line-height: 1.6;
    }

    .format-badges {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 12px;
    }

    .format-badge {
      padding: 5px 10px;
      border-radius: 999px;
      background: #fff;
      border: 1px solid var(--border);
      color: var(--text-secondary);
      font-size: 12px;
      font-weight: 600;
    }

    .lang-switch {
      flex: 0 0 auto;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 10px 12px;
      border: 1px solid var(--border);
      border-radius: 999px;
      background: #fff;
      box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
    }

    .lang-switch img {
      width: 18px;
      height: 12px;
      object-fit: cover;
      border-radius: 2px;
    }

    .lang-switch .menu {
      color: var(--text-main);
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
    }

    .content-info {
      padding: 30px 34px 36px;
    }

    .section-card {
      margin-bottom: 24px;
      padding: 24px;
      border-radius: var(--radius-md);
      border: 1px solid var(--border);
      background: linear-gradient(180deg, #ffffff 0%, var(--bg-section) 100%);
    }

    .section-header {
      display: flex;
      align-items: center;
      gap: 14px;
      margin-bottom: 22px;
    }

    .section-header-icon {
      width: 38px;
      height: 38px;
      border-radius: 13px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: var(--primary);
      background: var(--primary-soft);
      font-size: 20px;
    }

    .section-title-wrap {
      flex: 1;
      min-width: 0;
    }

    .section-title {
      margin: 0;
      font-size: 18px;
      line-height: 1.35;
      font-weight: 750;
      color: var(--text-main);
    }

    .section-description {
      margin: 6px 0 0;
      color: var(--text-secondary);
      font-size: 14px;
      line-height: 1.55;
    }

    .upload-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 18px;
    }

    .upload-grid.single {
      grid-template-columns: minmax(0, 1fr);
    }

    .upload-box {
      width: 100%;
    }

    .upload-box .el-upload {
      position: relative;
      width: 100%;
      height: 190px;
      border: 2px dashed var(--border-strong);
      border-radius: 18px;
      background: #fff;
      overflow: hidden;
      cursor: pointer;
      transition: border-color 0.22s ease, box-shadow 0.22s ease,
        transform 0.22s ease, background-color 0.22s ease;
    }

    .upload-box .el-upload:hover {
      border-color: var(--primary);
      background: #f8fbff;
      box-shadow: var(--shadow-hover);
      transform: translateY(-2px);
    }

    .upload-inner {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 18px;
      text-align: center;
    }

    .upload-inner .avatar {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .upload-preview {
      width: 100%;
      height: 100%;
    }

    .upload-placeholder-icon {
      width: 56px;
      height: 56px;
      border-radius: 18px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: var(--primary);
      background: var(--primary-soft);
      font-size: 30px;
    }

    .upload-placeholder-title {
      margin: 0;
      color: var(--text-main);
      font-size: 15px;
      font-weight: 700;
    }

    .upload-placeholder-text {
      margin: 0;
      color: var(--text-muted);
      font-size: 13px;
      line-height: 1.45;
    }

    .pdf-preview {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 10px;
      color: var(--primary);
      background: linear-gradient(135deg, #eff6ff 0%, #ffffff 100%);
    }

    .pdf-preview i {
      font-size: 36px;
    }

    .pdf-preview span {
      font-size: 14px;
      font-weight: 700;
    }

    .file-upload-action {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 12px;
      margin-bottom: 16px;
      justify-content: center;
    }

    .file-upload-action .el-button--primary {
      height: 42px;
      padding: 0 20px;
      border-radius: 999px;
      border: none;
      font-weight: 700;
      background: var(--primary);
      box-shadow: 0 10px 22px rgba(37, 99, 235, 0.2);
    }

    .other-files-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 14px;
    }

    .file-card .el-upload {
      height: 140px;
    }

    .submit-area {
      position: sticky;
      bottom: 0;
      z-index: 2;
      display: flex;
      justify-content: center;
      padding: 22px 0 0;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .9) 34%);
    }

    .submit-area .el-button--danger {
      min-width: 240px;
      height: 50px;
      border: none;
      border-radius: 999px;
      font-size: 16px;
      font-weight: 800;
      background: linear-gradient(135deg, var(--danger), var(--danger-dark));
      box-shadow: 0 14px 30px rgba(239, 68, 68, 0.28);
      transition: transform 0.22s ease, box-shadow 0.22s ease;
    }

    .submit-area .el-button--danger:hover,
    .submit-area .el-button--danger:focus {
      transform: translateY(-2px);
      box-shadow: 0 18px 38px rgba(239, 68, 68, 0.34);
    }

    .el-dropdown-menu {
      border-radius: 14px;
      overflow: hidden;
    }

    .el-button,
    .el-input__inner,
    .el-textarea__inner {
      font-family: inherit;
    }

    @media (max-width: 900px) {
      .page-shell {
        padding: 22px 14px;
      }

      .hero-header,
      .content-info {
        padding-left: 24px;
        padding-right: 24px;
      }

      .other-files-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (max-width: 720px) {
      .page-shell {
        padding: 12px;
      }

      .document-card {
        border-radius: 22px;
      }

      .hero-header {
        padding: 22px 18px;
        flex-direction: column;
        align-items: stretch;
      }

      .hero-title-group {
        gap: 12px;
      }

      .hero-icon {
        width: 42px;
        height: 42px;
        border-radius: 14px;
        font-size: 21px;
      }

      .hero-title {
        font-size: 22px;
      }

      .lang-switch {
        width: 100%;
        justify-content: center;
      }

      .content-info {
        padding: 20px 16px 24px;
      }

      .section-card {
        padding: 18px;
        border-radius: 18px;
      }

      .section-header {
        align-items: flex-start;
        margin-bottom: 18px;
      }

      .section-title {
        font-size: 16px;
      }

      .section-description {
        font-size: 13px;
      }

      .upload-grid,
      .other-files-grid {
        grid-template-columns: 1fr;
      }

      .upload-box .el-upload {
        height: 156px;
        border-radius: 16px;
      }

      .file-card .el-upload {
        height: 132px;
      }

      .submit-area .el-button--danger {
        width: 100%;
        min-width: 0;
      }
    }

    @media (max-width: 380px) {
      .hero-title-group {
        flex-direction: column;
      }

      .format-badges {
        gap: 6px;
      }

      .format-badge {
        font-size: 11px;
      }
    }
  </style>
</head>

<body>
  <div class="container" id="index">
    <div class="page-shell">
      <div class="document-card">
        <header class="hero-header">
          <div class="hero-title-group">
            <div class="hero-icon">
              <i class="el-icon-postcard"></i>
            </div>
            <div>
              <h1 class="hero-title">{{lang.item1}}</h1>
              <!-- <p class="hero-subtitle">Please upload clear and valid document images or PDF files.</p> -->
              <div class="format-badges">
                <span class="format-badge">JPEG</span>
                <span class="format-badge">JPG</span>
                <span class="format-badge">PNG</span>
                <span class="format-badge">PDF</span>
              </div>
            </div>
          </div>

          <div class="lang-switch chooseLang">
            <!-- <img
                v-if="langList[language] == 'ENGLISH'"
                src="img/EN.jpg"
                alt="English"
              />
              <img
                v-if="langList[language] == '中文简体'"
                src="img/CN.jpg"
                alt="中文简体"
              /> -->
            <el-dropdown trigger="click" @command="chooseLang">
              <span class="menu">
                {{langList[language]}}
                <i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="en">English</el-dropdown-item>
                <el-dropdown-item command="cn">中文简体</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </header>

        <main class="content-info">
          <section class="section-card">
            <div class="section-header">
              <div class="section-header-icon">
                <i class="el-icon-document"></i>
              </div>
              <div class="section-title-wrap">
                <h2 class="section-title">{{lang.item2}}</h2>
                <p class="section-description"> {{lang.item6}}</p>
              </div>
            </div>

            <div class="upload-grid">
              <el-upload class="avatar-uploader upload-box" action="''" :http-request="handleUploadID1"
                :headers="AccessToken" :disabled="fileListID1.status == 2 ? true : false" :show-file-list="false"
                :on-success="handleAvatarSuccess1" :before-upload="beforeAvatarUpload">
                <div class="upload-inner">
                  <img
                    v-if="(fileListID1.againPath && (fileListID1.againPath.substr(-3,3) != 'pdf' && fileListID1.againPath.substr(-3,3) != 'PDF')) || (fileListID1.path && (fileListID1.path.substr(-3,3) != 'pdf' && fileListID1.path.substr(-3,3) != 'PDF'))"
                    :src="imgUrl+(fileListID1.againPath || fileListID1.path)" class="avatar" />
                  <div class="pdf-preview"
                    v-else-if="(fileListID1.againPath && (fileListID1.againPath.substr(-3,3) == 'pdf' || fileListID1.againPath.substr(-3,3) == 'PDF')) || (fileListID1.path && (fileListID1.path.substr(-3,3) == 'pdf' || fileListID1.path.substr(-3,3) == 'PDF'))">
                    <i class="el-icon-document"></i>
                    <span>PDF</span>
                  </div>
                  <template v-else>
                    <div class="upload-placeholder-icon">
                      <i class="el-icon-picture-outline"></i>
                    </div>
                    <p class="upload-placeholder-title">{{lang.item5}}</p>
                  </template>
                </div>
              </el-upload>

              <el-upload class="avatar-uploader upload-box" action="''" :http-request="handleUploadID2"
                :headers="AccessToken" :disabled="fileListID2.status == 2 ? true : false" :show-file-list="false"
                :on-success="handleAvatarSuccess2" :before-upload="beforeAvatarUpload">
                <div class="upload-inner">
                  <img
                    v-if="(fileListID2.againPath && (fileListID2.againPath.substr(-3,3) != 'pdf' && fileListID2.againPath.substr(-3,3) != 'PDF')) || (fileListID2.path && (fileListID2.path.substr(-3,3) != 'pdf' && fileListID2.path.substr(-3,3) != 'PDF'))"
                    :src="imgUrl+(fileListID2.againPath || fileListID2.path)" class="avatar" />
                  <div class="pdf-preview"
                    v-else-if="(fileListID2.againPath && (fileListID2.againPath.substr(-3,3) == 'pdf' || fileListID2.againPath.substr(-3,3) == 'PDF')) || (fileListID2.path && (fileListID2.path.substr(-3,3) == 'pdf' || fileListID2.path.substr(-3,3) == 'PDF'))">
                    <i class="el-icon-document"></i>
                    <span>PDF</span>
                  </div>
                  <template v-else>
                    <div class="upload-placeholder-icon">
                      <i class="el-icon-picture-outline"></i>
                    </div>
                    <p class="upload-placeholder-title">{{lang.item5}}</p>
                  </template>
                </div>
              </el-upload>
            </div>
          </section>

          <section class="section-card">
            <div class="section-header">
              <div class="section-header-icon">
                <i class="el-icon-document"></i>
              </div>
              <div class="section-title-wrap">
                <h2 class="section-title">{{lang.item7}}</h2>
                <p class="section-description">{{lang.item9}}</p>
              </div>
            </div>

            <div class="upload-grid single">
              <el-upload class="avatar-uploader upload-box" :action="''" :http-request="handleUploadAdd1"
                :headers="AccessToken" :disabled="fileListAdd1.status == 2 ? true : false" :show-file-list="false"
                :on-success="handleAvatarSuccess3" :before-upload="beforeAvatarUpload">
                <div class="upload-inner">
                  <img
                    v-if="(fileListAdd1.againPath && (fileListAdd1.againPath.substr(-3,3) != 'pdf' && fileListAdd1.againPath.substr(-3,3) != 'PDF')) || (fileListAdd1.path && (fileListAdd1.path.substr(-3,3) != 'pdf' && fileListAdd1.path.substr(-3,3) != 'PDF'))"
                    :src="imgUrl+(fileListAdd1.againPath || fileListAdd1.path)" class="avatar" />
                  <div class="pdf-preview"
                    v-else-if="(fileListAdd1.againPath && (fileListAdd1.againPath.substr(-3,3) == 'pdf' || fileListAdd1.againPath.substr(-3,3) == 'PDF')) || (fileListAdd1.path && (fileListAdd1.path.substr(-3,3) == 'pdf' || fileListAdd1.path.substr(-3,3) == 'PDF'))">
                    <i class="el-icon-document"></i>
                    <span>PDF</span>
                  </div>
                  <template v-else>
                    <div class="upload-placeholder-icon">
                      <i class="el-icon-picture-outline"></i>
                    </div>
                    <p class="upload-placeholder-title">{{lang.item8}}</p>
                  </template>
                </div>
              </el-upload>
            </div>
          </section>

          <section class="section-card">
            <div class="section-header">
              <div class="section-header-icon">
                <i class="el-icon-folder-opened"></i>
              </div>
              <div class="section-title-wrap">
                <h2 class="section-title">{{lang.item10}}</h2>
                <p class="section-description">{{lang.item11}} {{lang.item12}}</p>
              </div>
            </div>

            <div class="file-upload-action">
              <el-upload class="avatar-uploaderOther fileOther" :action="''" :http-request="handleUploadOtherAdd"
                :headers="AccessToken" :show-file-list="false" :on-success="handleAvatarSuccessOther"
                :before-upload="beforeAvatarUpload">
                <el-button type="primary">
                  <i class="el-icon-upload"></i>
                  <span>{{lang.Upload}}</span>
                </el-button>
              </el-upload>
            </div>

            <div class="other-files-grid">
              <div id="files" v-for="(item,index) in fileListOthers" :key="index">
                <el-upload class="avatar-uploaderOther fileOthers upload-box file-card"
                  :action="imgUrl +'/custom/file/upload/10/' + item.id" :headers="AccessToken"
                  :disabled="fileListOther.status == 2 ? true : false" :show-file-list="false"
                  :on-success="handleAvatarSuccessOther" :before-upload="beforeAvatarUpload">
                  <div class="upload-inner file">
                    <img
                      v-if="(item.againPath && (item.againPath.substr(-3,3) != 'pdf' && item.againPath.substr(-3,3) != 'PDF')) || (item.path && (item.path.substr(-3,3) != 'pdf' && item.path.substr(-3,3) != 'PDF'))"
                      :src="imgUrl+(item.againPath || item.path)" class="avatar" />
                    <div class="pdf-preview" v-else>
                      <i class="el-icon-document"></i>
                      <span>FILE</span>
                    </div>
                  </div>
                </el-upload>
              </div>
            </div>
          </section>

          <div class="submit-area">
            <el-button type="danger" @click="update">{{lang.btn}}</el-button>
          </div>
        </main>
      </div>
    </div>
  </div>

  <script src="js/vue.min.js"></script>
  <script src="js/axios.min.js"></script>
  <script src="js/element-ui.js"></script>
  <script src="js/element@2.12.2.js"></script>
  <script src="upload.js"></script>
  <script src="info.js"></script>
</body>

</html>