5.19登陆验证

src/assets/css/theme/00a598/index.css

@@ -147,6 +147,28 @@ background-color: #757070;
     .custom-00a598 .tabsel{
       border-bottom:1px solid  #666;
     }
+    .custom-00a598 .real-form .el-form-item__label{
+      color: #d5d5d5;
+    }
+    .custom-00a598  .real-form  .el-input__inner{
+      background-color: #535353;
+    }
+    .custom-00a598 .user-form .el-form-item__label{
+      color: #d5d5d5;
+    }
+    .custom-00a598 .user-form  .el-input__inner{
+      background-color: #535353;
+    }
+    .custom-00a598 .el-upload__tip{
+      color: #d5d5d5;
+    }
+    .custom-00a598 .real .real-content .real-result,.custom-00a598 .real .real-content .status{
+      color: #d5d5d5;
+    }
+.custom-00a598 .el-button--primary{
+  background-color: #535353;
+  border-color: #fff;
+}
     /* .el-tabs{
     border-bottom: 1px solid #666;
     } */

src/router/index.js

@@ -61,12 +61,39 @@ export const constantRoutes = [
             meta: { title: '公开项目', icon: '' },
             hidden: true
           },
-      
-        
+          {
+            path: '/user-info',
+            name: 'userInfo',
+            component: () => import('@/views/home/user-info/index'),
+            meta: { title: '用户信息', icon: '' },
+            hidden: true
+        },
+        {
+          path: '/modify',
+          name: 'Modify',
+          component: () =>
+              import ('@/views/home/modify/index'),
+          meta: {
+              title: '修改密码',
+              icon: ''
+          }
+      },
+      {
+        path: '/real',
+        name: 'real',
+        component: () =>
+            import ('@/views/home/real/index'),
+        meta: {
+            title: '实名验证',
+            icon: ''
+        }
+    },
         
         ]
       }]
     },
+    
+
     {
       path: '/index',
       component: Layout,

src/views/home/index.vue

@@ -4,8 +4,14 @@
     <div class="container border">
       <div class="user-slider lbg_color3 el-menu">
         <el-menu class="lbg_color3" :default-active="activeIndex" @select="Select">
+           <!--  -->
+             <el-menu-item   index="/user-info">用户信息</el-menu-item>
+          <el-menu-item   index="/modify" >修改密码</el-menu-item>
+            <el-menu-item   index="/real">实名验证</el-menu-item>
           <el-menu-item   index="/home/myproject">我的项目</el-menu-item>
           <el-menu-item   index="/home/openproject" >公开项目</el-menu-item>
+        
+
 
         </el-menu>
       </div>
@@ -36,8 +42,6 @@ export default {
      
       if (path === '/home') {
         this.$router.replace({ path: path + this.defaultPage })
-           console.log(  path + this.defaultPage);
-        console.log(111)
       }
       return path
     },
@@ -62,7 +66,7 @@ export default {
     @include flex();
     @include w_h(100%, 100%);
     .user-slider {
-      @include w_h(180px, 100%);
+      @include w_h(190px, 100%);
       padding-top: 20px;
     }
     .user-main {

src/views/home/modify/index.vue

@@ -0,0 +1,287 @@
+
+/*修改密码*/
+<template>
+  <div class="modify">
+    <div class="container">
+      <h3 class="title">修改密码</h3>
+      <el-form
+        ref="modifyForm"
+        class="modify-form"
+        :model="modifyForm"
+        :rules="modifyRules"
+        label-position="left"
+      >
+        <el-form-item prop="opwd">
+          <el-input
+            ref="opwd"
+            v-model="modifyForm.opwd"
+            :type="modifyForm.opwdType"
+            size="small"
+            name="opwd"
+            minlength="6"
+            maxlength="9"
+            placeholder="请输入原密码"
+          >
+            <span slot="prefix" class="solt">原密码</span>
+            <svg-icon
+              slot="suffix"
+              :icon-class="
+                modifyForm.opwdType === 'password' ? 'eye' : 'eye-open'
+              "
+              @click="showOpwd"
+            />
+          </el-input>
+        </el-form-item>
+
+        <el-form-item prop="pwd">
+          <el-input
+            ref="pwd"
+            v-model="modifyForm.pwd"
+            :type="modifyForm.pwdType"
+            size="small"
+            name="pwd"
+            placeholder="请输入密码"
+          >
+            <span slot="prefix" class="solt">密码</span>
+            <svg-icon
+              slot="suffix"
+              :icon-class="
+                modifyForm.pwdType === 'password' ? 'eye' : 'eye-open'
+              "
+              @click="showPwd"
+            />
+          </el-input>
+        </el-form-item>
+        <el-form-item prop="spwd">
+          <el-input
+            ref="spwd"
+            v-model="modifyForm.spwd"
+            :type="modifyForm.spwdType"
+            size="small"
+            name="spwd"
+            placeholder="请确认密码"
+          >
+            <span slot="prefix" class="solt">确认密码</span>
+            <svg-icon
+              slot="suffix"
+              :icon-class="
+                modifyForm.spwdType === 'password' ? 'eye' : 'eye-open'
+              "
+              @click="showSpwd"
+            />
+          </el-input>
+        </el-form-item>
+        <el-button
+          type="danger"
+          size="small"
+          class="next-btn"
+          @click.native.prevent="Next"
+          >确定</el-button
+        >
+      </el-form>
+      <li class="toForg">
+         <span @click="gotoMenu">忘记密码</span>
+      </li>
+    </div>
+    <Forget :forgetShow="forgetShow" @putForget="getForget" />
+  </div>
+</template>
+
+<script>
+import { resetRouter } from '@/router'
+import { validPwd } from '@/utils/validate'
+import { request, enPassword } from '@/utils/request'
+import Forget from '@/components/Forget'
+export default {
+  name: 'Modify',
+  components:{
+    Forget
+  },
+  data() {
+    const validatePwd = (rule, value, callback) => {
+      if (value) {
+        if (!validPwd(value)) {
+          callback(new Error('6~18位，只能包含字母、数字和下划线'))
+        } else {
+          callback()
+        }
+      } else {
+        callback(new Error('请输入密码'))
+      }
+    }
+    const validateSpwd = (rule, value, callback) => {
+      if (value) {
+        if (value !== this.modifyForm.pwd) {
+          callback(new Error('两次密码不一致'))
+        } else {
+          callback()
+        }
+      } else {
+        callback(new Error('请再次输入密码'))
+      }
+    }
+    return {
+      forgetShow: false,
+      modifyForm: {
+        opwd: '',
+        pwd: '',
+        spwd: '',
+        opwdType: 'password',
+        pwdType: 'password',
+        spwdType: 'password',
+      },
+      modifyRules: {
+        opwd: [{ required: true, message: '请输入原密码', trigger: 'blur' }],
+        pwd: [{ required: true, trigger: 'blur', validator: validatePwd }],
+        spwd: [{ required: true, trigger: 'blur', validator: validateSpwd }],
+      },
+    }
+  },
+  computed: {},
+  methods: {
+    // 切换显示原密码
+    showOpwd() {
+      this.modifyForm.opwdType =
+        this.modifyForm.opwdType === 'password' ? '' : 'password'
+      this.$nextTick(() => {
+        this.$refs.opwd.focus()
+      })
+    },
+    // 切换显示密码
+    showPwd() {
+      this.modifyForm.pwdType =
+        this.modifyForm.pwdType === 'password' ? '' : 'password'
+      this.$nextTick(() => {
+        this.$refs.pwd.focus()
+      })
+    },
+    // 切换显示二次密码
+    showSpwd() {
+      this.modifyForm.spwdType =
+        this.modifyForm.spwdType === 'password' ? '' : 'password'
+      this.$nextTick(() => {
+        this.$refs.spwd.focus()
+      })
+    },
+    gotoMenu(){
+      this.forgetShow = true
+    },
+    getForget(data) {
+        this.forgetShow = false
+    },
+    // 确定
+    Next() {
+      this.$refs.modifyForm.validate((valid) => {
+        if (valid) {
+          const params = {
+            transCode: 'B00003',
+            oldPassword: enPassword(this.modifyForm.opwd),
+            newPassword: enPassword(this.modifyForm.pwd),
+            authCode: '',
+            pwdType: '',
+            telNo: '',
+          }
+          request(params)
+            .then((res) => {
+              this.$alert('密码修改成功,请重新登录！', '提示', {
+                confirmButtonText: '确定',
+                center: true,
+                callback: (action) => {
+                  this.$store.dispatch('user/changeState', {
+                    key: 'token',
+                    value: '',
+                  })
+                  this.$store.dispatch('user/changeState', {
+                    key: 'name',
+                    value: '',
+                  })
+                  this.$store.dispatch('user/changeState', {
+                    key: 'userId',
+                    value: '',
+                  })
+                  this.$store.dispatch('user/changeState', {
+                    key: 'loginStatus',
+                    value: false,
+                  })
+                  resetRouter() // 重置路由
+                  setTimeout(() => {
+                    this.$router.replace(`/indexLayout/home`)
+                  }, 1000)
+                },
+              })
+            })
+            .catch((err) => {})
+        } else {
+          return false
+        }
+      })
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+@import '@/styles/variables.scss';
+@import '@/styles/mixin.scss';
+.modify {
+  padding: 50px 70px;
+  @include w_h(100%, calc(100% - 80px));
+  .container {
+    @include w_h(430px);
+    min-height: 405px;
+    margin: 0 auto;
+    padding: 30px;
+    background: $color_f;
+    box-shadow: 0 0 7px 7px rgba(0, 0, 0, 0.04);
+    .title {
+      margin: 30px auto;
+      font-size: 20px;
+      text-align: center;
+      color: $color_3;
+    }
+    .modify-form {
+      padding: 0 50px;
+      @include w_h(100%);
+      background: $color_f;
+      .solt {
+        padding: 0 6px;
+        font-size: 12px;
+        color: $color_6;
+      }
+      .next-btn {
+        margin: 10px auto;
+        @include w_h();
+      }
+    }
+  }
+}
+.toForg{
+  text-align: right;
+  &:hover{
+    color: #78a4db;
+    cursor: default;
+  }
+}
+</style>
+
+<style lang="scss">
+@import '@/styles/variables.scss';
+@supports (-webkit-mask: none) and (not (cater-color: $color_9)) {
+  .modify-form .el-input input {
+    font-size: 12px;
+    color: $color_9;
+  }
+}
+.modify-form {
+  .el-input {
+    &__inner:focus {
+      border-color: $color_9;
+    }
+    &--prefix .el-input__inner {
+      color: $color_6;
+      padding-left: 65px;
+    }
+  }
+}
+</style>>
+

src/views/home/myproject/index.vue

@@ -211,7 +211,6 @@ this.init();
              loading.close()
             this.paginationConfig.total = res.total
            this.tableData=res.rows;
-          console.log(this.tableData)
           })
           .catch((err) => {
              loading.close()

src/views/home/real/index.vue

@@ -0,0 +1,790 @@
+/*实名认证*/
+<template>
+  <div class="real"
+    v-loading="loading"
+    element-loading-text="Loading"
+    element-loading-spinner="el-icon-loading"
+    element-loading-background="rgba(0, 0, 0, 0.8)">
+      <el-form
+        v-if="realStatus == 0"
+        ref="realForm"
+        class="real-form"
+        label-width="120px"
+        :model="realForm"
+        :rules="realRules"
+        hide-required-asterisk
+      >
+        <el-row>
+          <el-col :sm='12' :lg="9" :xl='6'>
+            <el-form-item prop="type" label="证件类型：">
+              <el-select
+                v-model="realForm.type"
+                size="small"
+                style="width: 250px"
+                placeholder="请选择"
+              >
+                <el-option
+                  v-for="item in typeList"
+                  :key="item.code"
+                  :value="item.code"
+                  :label="item.name"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :sm='12' :lg="15" :xl='18'>
+            <el-form-item prop="mobile" label="手机号码：">
+            <el-input
+              ref="mobile"
+              v-model="realForm.mobile"
+              type="text"
+              size="small"
+              style="width: 220px"
+              name="mobile"
+              placeholder="请输入手机号码"
+              :disabled='true'
+            >
+            </el-input>
+            <el-button
+              v-if='!realForm.mobile'
+              class="code"
+              type="danger"
+              size="small"
+              :disabled="countDown > 0"
+              plain
+              @click.native.prevent="getCode"
+              >{{ countDown > 0 ? `${countDown}s` : '获取验证码' }}</el-button
+            >
+          </el-form-item>
+            
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :sm='12' :lg="9" :xl='6'>
+            <el-form-item prop="idNo" label="证件号码：">
+              <el-input
+                ref="idNo"
+                v-model="realForm.idNo"
+                type="text"
+                size="small"
+                style="width: 250px"
+                name="idNo"
+                placeholder="请输入证件号码"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :sm='12' :lg="15" :xl='18'>
+            <el-form-item prop="code" label="验证码：" v-if="!realForm.mobile">
+              <el-input
+                ref="code"
+                v-model="realForm.code"
+                type="text"
+                size="small"
+                style="width: 220px"
+                name="code"
+                placeholder="请输入验证码"
+              >
+              </el-input>
+            </el-form-item>
+      
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :sm='12' :lg="9" :xl='6'>
+            <el-form-item
+              prop="name"
+              :label="realForm.type == '1' ? '企业名称：' : '姓名：'"
+            >
+              <el-input
+                ref="name"
+                v-model="realForm.name"
+                type="text"
+                size="small"
+                style="width: 250px"
+                name="name"
+                :placeholder="realForm.type == '1' ? '企业名称' : '请输入姓名'"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12" :lg="15" :xl='18'>
+            <el-form-item
+              prop="userName"
+              label="管理员姓名："
+              v-if="realForm.type == '1'"
+            >
+              <el-input
+                ref="userName"
+                v-model="realForm.userName"
+                type="text"
+                size="small"
+                style="width: 250px"
+                name="userName"
+                placeholder="管理员姓名"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :sm='12' :lg="9" :xl='6'>
+            <el-form-item
+              v-if="realForm.type == '1'"
+              prop="imageUrl"
+              label="营业执照："
+            >
+              <div v-if="realForm.imageUrl" class="image">
+                <el-image
+                  class="img"
+                  fit="contain"
+                  :src="realForm.imageUrl"
+                  :preview-src-list="[realForm.imageUrl]"
+                />
+                <div class="operation">
+                  <i class="el-icon-circle-close" @click="fileRemove('image')" />
+                </div>
+              </div>
+              <el-upload
+                v-else
+                ref="upload"
+                class="image"
+                action="string"
+                accept="image/jpeg, image/png, image/jpg"
+                :multiple="false"
+                :limit="1"
+                :before-upload="onBeforeUploadImage"
+                :http-request="UploadImage"
+                :on-remove="fileRemove('image')"
+                :show-file-list="false"
+              >
+                <i class="el-icon-circle-plus upload-icon" />
+                <p>上传营业执照</p>
+              </el-upload>
+            </el-form-item>
+          </el-col>
+          <el-col :sm='12' :lg="15" :xl='18'>
+            <el-form-item
+              v-if="realForm.type == '1'"
+              label="其他："
+            >
+              <div class="upimg">
+                <div v-if="realForm.upImg1" class="image">
+                  <el-image
+                    class="img"
+                    fit="contain"
+                    :src="realForm.upImg1"
+                    :preview-src-list="[realForm.upImg1]"
+                  />
+                  <div class="operation">
+                    <i class="el-icon-circle-close" @click="fileRemove('img1')" />
+                  </div>
+                </div>
+                  <el-upload
+                    v-else
+                    ref="upload1"
+                    class="image"
+                    action="string"
+                    accept="image/jpeg, image/png, image/jpg"
+                    :multiple="false"
+                    :limit="1"
+                    :before-upload="onBeforeUploadImage"
+                    :http-request="UploadImage1"
+                    :on-remove="fileRemove('img1')"
+                    :show-file-list="false"
+                  >
+                    <i class="el-icon-circle-plus upload-icon" />
+                    <p>上传其他材料</p>
+                  </el-upload>
+                <div v-if="realForm.upImg2" class="image">
+                  <el-image
+                    class="img"
+                    fit="contain"
+                    :src="realForm.upImg2"
+                    :preview-src-list="[realForm.upImg2]"
+                  />
+                  <div class="operation">
+                    <i class="el-icon-circle-close" @click="fileRemove('img2')" />
+                  </div>
+                </div>
+                  <el-upload
+                    v-else
+                    ref="upload2"
+                    class="image"
+                    action="string"
+                    accept="image/jpeg, image/png, image/jpg"
+                    :multiple="false"
+                    :limit="1"
+                    :before-upload="onBeforeUploadImage"
+                    :http-request="UploadImage2"
+                    :on-remove="fileRemove('img2')"
+                    :show-file-list="false"
+                  >
+                    <i class="el-icon-circle-plus upload-icon" />
+                    <p>上传其他材料</p>
+                  </el-upload>
+                <div v-if="realForm.upImg3" class="image">
+                  <el-image
+                    class="img"
+                    fit="contain"
+                    :src="realForm.upImg3"
+                    :preview-src-list="[realForm.upImg3]"
+                  />
+                  <div class="operation">
+                    <i class="el-icon-circle-close" @click="fileRemove('img3')" />
+                  </div>
+                </div>
+                  <el-upload
+                    v-else
+                    ref="upload3"
+                    class="image"
+                    action="string"
+                    accept="image/jpeg, image/png, image/jpg"
+                    :multiple="false"
+                    :limit="1"
+                    :before-upload="onBeforeUploadImage"
+                    :http-request="UploadImage3"
+                    :on-remove="fileRemove('img3')"
+                    :show-file-list="false"
+                  >
+                    <i class="el-icon-circle-plus upload-icon" />
+                    <p>上传其他材料</p>
+                  </el-upload>
+
+              </div>
+            </el-form-item>
+
+          </el-col>
+        </el-row>
+        <el-form-item>
+           <!-- //type="danger" -->
+          <el-button
+           
+             type="primary"
+            size="small"
+            class="next-btn"
+            @click.native.prevent="Next"
+            >确认</el-button
+          >
+        </el-form-item>
+      </el-form>
+    <div v-if='realStatus != 0' class="real-content">
+      <div v-if="realStatus == 2" class="status">
+        <i class="el-icon-circle-check success" />
+        <span>恭喜您，认证成功！</span>
+      </div>
+      <div v-if="realStatus == 3" class="status">
+        <i class="el-icon-warning fail" />
+        <span>认证失败，请重新认证</span>
+      </div>
+      <div v-if="realStatus == 1" class="status">
+        <i class="el-icon-time wait" />
+        <span>认证中，请耐心等待...</span>
+      </div>
+
+      <div class="real-result" :style='{"width":realForm.type=="1"?"490px":"265px"}'>
+        <div class="result-item">
+          <div class="lable">证件类型：</div>
+          <div class="item">
+            {{ realForm.type == '1' ? '统一社会代码' : '身份证' }}
+          </div>
+        </div>
+        <div class="result-item">
+          <div class="lable">证件号码：</div>
+          <div :class="['item', realStatus == 3 ? 'fail' : '']">
+            {{ realForm.idNo }}
+          </div>
+          <span v-if="realStatus == 3">×</span>
+        </div>
+        <div class="result-item">
+          <div class="lable">
+            {{ realForm.type == '1' ? '企业名称：' : '姓名：' }}
+          </div>
+          <div class="item">{{ realForm.name }}</div>
+        </div>
+        <div class="result-item" v-if="realForm.type == '1'">
+          <div class="lable">
+            管理员姓名：
+          </div>
+          <div class="item">{{ realForm.userName }}</div>
+        </div>
+        <div v-if="realForm.type == '1'" class="result-item">
+          <div class="lable">营业执照：</div>
+          <div class="item">
+            <el-image
+              class="img"
+              fit="contain"
+              :src="realForm.imageUrl"
+              :preview-src-list="[realForm.imageUrl]"
+            />
+          </div>
+        </div>
+        <div v-if="realForm.type == '1'" class="result-item">
+          <div class="lable">其他材料：</div>
+          <div class="item">
+            <el-image
+              class="img"
+              fit="contain"
+              :src="realForm.upImg1"
+              :preview-src-list="[realForm.upImg1]"
+            />
+          </div>
+          <div class="item">
+            <el-image
+              class="img"
+              fit="contain"
+              :src="realForm.upImg2"
+              :preview-src-list="[realForm.upImg2]"
+            />
+          </div>
+          <div class="item">
+            <el-image
+              class="img"
+              fit="contain"
+              :src="realForm.upImg3"
+              :preview-src-list="[realForm.upImg3]"
+            />
+          </div>
+        </div>
+        <div v-if="realStatus == 3" class="btn">
+          <el-button
+            type="danger"
+            size="small"
+            class="next-btn"
+            @click.native.prevent="Next"
+            >重新认证</el-button
+          >
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { request, uploadFile, getImage } from '@/utils/request'
+export default {
+  name: 'Real',
+  data() {
+    const validateName = (rule, value, callback) => {
+      if (value) {
+        callback()
+      } else {
+        callback(new Error('请输入姓名或企业名称'))
+      }
+    }
+    const validateType = (rule, value, callback) => {
+      if (value) {
+        callback()
+      } else {
+        callback(new Error('请选择证件类型'))
+      }
+    }
+    const validateIdNo = (rule, value, callback) => {
+      if (value) {
+        callback()
+      } else {
+        callback(new Error('请输入证件号码'))
+      }
+    }
+    const validateFile = (rule, value, callback) => {
+      if (value) {
+        callback()
+      } else {
+        callback(new Error('请上传营业执照'))
+      }
+    }
+    const validateAdmin = (rule, value, callback) => {
+      if (value) {
+        callback()
+      } else {
+        callback(new Error('请输入管理员姓名'))
+      }
+    }
+
+    return {
+      mobileFlog:'',
+      loading:false,
+      countDown:'00',
+      realStatus: this.$store.getters.realStatus || 0, // 实名状态（0-未认证 1-认证中 2-认证通过 3-认证失败）
+      typeList: [
+        { code: '0', name: '身份证' },
+        { code: '1', name: '统一社会代码' },
+      ],
+      userType:'',
+      realForm: {
+        name: '',
+        userName:"",
+        type: '',
+        idNo: '',
+        mobile:'',
+        code:'',
+        imageUrl: '',
+        upImg1:'',
+        upImg2:'',
+        upImg3:'',
+      },
+      realRules: {
+        name: [{ required: true, trigger: 'blur', validator: validateName }],
+        type: [{ required: true, trigger: 'blur', validator: validateType }],
+        idNo: [{ required: true, trigger: 'blur', validator: validateIdNo }],
+        imageUrl: [
+          { required: true, trigger: 'blur', validator: validateFile },
+        ],
+        userName:[{ required: true, trigger: 'blur', validator: validateAdmin }]
+      },
+      fileId: '',
+      fileId1: '',
+      fileId2: '',
+      fileId3: '',
+    }
+  },
+  computed: {},
+  created() {
+    this.checkReal()
+    this.$store.getters.userType!=='0'?this.realForm.type='1':this.realForm.type='0'
+  },
+  methods: {
+    checkReal() {
+      let params = {
+        transCode: 'B00001',
+      }
+      request(params)
+        .then((res) => {
+          this.realStatus = res.authenticationState;
+          if (res.authenticationState != 0) {
+            this.$store.dispatch('user/changeState', {
+              key: 'userType',
+              value: res.userType,
+            })
+            this.$store.dispatch('user/changeState', {
+              key: 'realStatus',
+              value: res.authenticationState,
+            })
+            this.realForm.name = res.certName ? res.certName : res.userName
+            this.userType = res.userType
+            this.realForm.idNo = res.certNo
+            this.realForm.userName=res.adminName
+            this.fileId = res.fileId
+            this.realForm.imageUrl = res.fileId ? getImage(res.fileId) : ''
+            this.realForm.upImg1 = res.fileId1 ? getImage(res.fileId1) : ''
+            this.realForm.upImg2 = res.fileId2 ? getImage(res.fileId2) : ''
+            this.realForm.upImg3 = res.fileId3 ? getImage(res.fileId3) : ''
+          }
+          this.realForm.mobile=res.mobileNo
+        })
+        .catch((err) => {})
+    },
+    onBeforeUploadImage(file) {
+      const isIMAGE =
+        file.type === 'image/jpeg' ||
+        file.type === 'image/jpg' ||
+        file.type === 'image/png'
+
+      if (!isIMAGE) {
+        this.$message.error('上传文件只能是图片格式!')
+      }
+      return isIMAGE
+      // const isLt1M = file.size / 1024 / 1024 < 1
+      // if (!isLt1M) {
+      //   this.$message.error('上传文件大小不能超过 1MB!')
+      // }
+      // return isIMAGE && isLt1M
+    },
+    theLast() {
+      this.countDown = 60
+      const timer = setInterval(() => {
+        if (this.countDown > 0) {
+          this.countDown--
+          this.countDown < 10 && (this.countDown = '0' + this.countDown)
+        } else {
+          clearInterval(timer)
+        }
+      }, 1000)
+    },
+    getCode() {
+      this.mobileFlog=1
+      if (this.countDown > 0) return this.$message.error('请不要频繁点击!')
+      if (!this.realForm.mobile) return this.$message.error('请输入手机号码!')
+      // if (!validMobile(this.realForm.mobile))
+      //   return this.$message.error('请输入正确的手机号码!')
+      const params = {
+        transCode: 'A00001',
+        mailOrPhone: this.realForm.mobile,
+        type: '4',
+        channel:'1'
+      }
+      request(params)
+        .then((res) => {
+          this.$message.success(
+            `验证码已发送至手机号码： ${this.realForm.mobile} ,请注意查收！`
+          )
+          this.theLast()
+        })
+        .catch((err) => {})
+    },
+    UploadImage(params) {
+      this.realForm.imageUrl = URL.createObjectURL(params.file)
+      this.$refs.upload.clearFiles() // 清除文件对象
+      const param = new FormData()
+      param.append('transCode', 'B00021')
+      param.append('file', params.file)
+      uploadFile(param)
+        .then((res) => {
+          this.fileId = res.fileId
+        })
+        .catch((err) => {})
+    },
+    UploadImage1(params) {
+      this.realForm.upImg1 = URL.createObjectURL(params.file)
+      this.$refs.upload1.clearFiles() // 清除文件对象
+      const param = new FormData()
+      param.append('transCode', 'B00021')
+      param.append('file', params.file)
+      uploadFile(param)
+        .then((res) => {
+          this.fileId1 = res.fileId
+        })
+        .catch((err) => {})
+    },
+    UploadImage2(params) {
+      this.realForm.upImg2 = URL.createObjectURL(params.file)
+      this.$refs.upload2.clearFiles() // 清除文件对象
+      const param = new FormData()
+      param.append('transCode', 'B00021')
+      param.append('file', params.file)
+      uploadFile(param)
+        .then((res) => {
+          this.fileId2 = res.fileId
+        })
+        .catch((err) => {})
+    },
+    UploadImage3(params) {
+      this.realForm.upImg3 = URL.createObjectURL(params.file)
+      this.$refs.upload3.clearFiles() // 清除文件对象
+      const param = new FormData()
+      param.append('transCode', 'B00021')
+      param.append('file', params.file)
+      uploadFile(param)
+        .then((res) => {
+          this.fileId3 = res.fileId
+        })
+        .catch((err) => {})
+    },
+    fileRemove(type) {
+      switch (type){
+        case 'image':
+          this.realForm.imageUrl = ''
+          break;
+        case 'img1':
+          this.realForm.upImg1 = ''
+          break;
+        case 'img2':
+          this.realForm.upImg2 = ''
+          break;
+        case 'img3':
+          this.realForm.upImg3 = ''
+          break;
+        default:
+      }
+    },
+    // 确定
+    Next() {
+      if (this.realStatus == 0) {
+        this.$refs.realForm.validate((valid) => {
+          if (valid) {
+            this.loading=true
+            const params = {
+              transCode: 'B00020',
+              certName: this.realForm.name,
+              certNo: this.realForm.idNo,
+              type: this.realForm.type,
+              certType: this.realForm.type,
+              // fileId: this.realForm.type == '1' ? this.fileId : '',
+              mobnub:this.realForm.mobile,
+              verificationCode:this.mobileFlog==1?this.realForm.code:'',
+              adminName:this.realForm.type == '1'?this.realForm.userName:'',
+              fileId:this.realForm.type == '1'?this.fileId:'',
+              fileId1:this.realForm.type == '1'?this.fileId1:'',
+              fileId2:this.realForm.type == '1'?this.fileId2:'',
+              fileId3:this.realForm.type == '1'?this.fileId3:'',
+            }
+            request(params)
+              .then((res) => {
+                this.realStatus = res.authenticationState
+                this.loading=false
+              })
+              .catch((err) => {
+                this.loading=false
+              })
+          } else {
+            return false
+          }
+        })
+      } else {
+        this.realStatus = 0
+      }
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+@import '@/styles/variables.scss';
+@import '@/styles/mixin.scss';
+.real {
+  padding: 35px 0;
+  @include w_h(100%, 100%);
+  // background: $color_f;
+  .real-form {
+    padding: 0 30px 30px;
+    @include w_h();
+    // background: $color_f;
+    .next-btn {
+      margin: 10px auto;
+      @include w_h(250px);
+    }
+    .image {
+      position: relative;
+      @include w_h(100px, 130px);
+      font-size: 12px;
+      line-height: 20px;
+      color: $color_d;
+      border-radius: 4px;
+      overflow: hidden;
+      .img {
+        @include w_h(100%, 100%);
+        border: 1px solid $color_d;
+      }
+      .operation {
+        @include position(absolute, 0, auto, auto, 0, 1);
+        font-size: 20px;
+      }
+    }
+  }
+  .real-content {
+    @include w_h(100%);
+    .status {
+      @include flex(center);
+      font-size: 18px;
+      font-weight: 700;
+      line-height: 80px;
+      color: $color_3;
+      i {
+        margin-right: 10px;
+        font-size: 40px;
+      }
+      .success {
+        color: #41b300;
+      }
+      .fail {
+        color: #eb331d;
+      }
+      .wait {
+        color: #f8bd00;
+      }
+    }
+    .real-result {
+      // @include w_h(490px, 100%);
+      height: 100%;
+      margin: 20px auto 0;
+      font-size: 14px;
+      line-height: 20px;
+      color: $color_3;
+      white-space: nowrap;
+      .result-item {
+        @include flex(flex-start, flex-start);
+        margin-bottom: 15px;
+        .lable {
+          @include w_h(110px);
+          text-align: right;
+        }
+        .item {
+          max-width: calc(100% - 110px);
+          word-break: break-all;
+          .img {
+            @include w_h(120px, 150px);
+            border: 1px solid $color_d;
+          }
+        }
+        .fail {
+          color: $color_on;
+        }
+        span {
+          margin-left: 10px;
+          font-size: 18px;
+          line-height: 18px;
+          color: $color_on;
+        }
+      }
+      .btn {
+        @include flex(center);
+        @include w_h();
+        .next-btn {
+          margin: 10px auto;
+          @include w_h(200px);
+        }
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+@import '@/styles/variables.scss';
+@import '@/styles/mixin.scss';
+@supports (-webkit-mask: none) and (not (cater-color: $color_9)) {
+  .real-form .el-input input {
+    font-size: 12px;
+    color: $color_9;
+  }
+}
+
+.real-form {
+  .el-input {
+    &__inner:focus {
+      border-color: $color_9;
+    }
+    &--prefix .el-input__inner {
+      color: $color_6;
+      padding-left: 65px;
+    }
+  }
+
+  .el-form-item__label {
+    font-size: 12px;
+    padding: 0 12px 0 0;
+    line-height: 3;
+  }
+  .el-image__inner--center {
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  .el-upload {
+    @include w_h(100%, 100%);
+    color: $color_d;
+    border: 1px solid $color_d;
+    &:hover {
+      border-color: $color_b;
+    }
+    .upload-icon {
+      margin-top: 40px;
+      font-size: 24px;
+      color: $color_d;
+      text-align: center;
+    }
+  }
+}
+.upimg{
+  display: flex;
+  .image{
+    margin-right: 5px;
+  }
+}
+.code {
+      @include position(absolute, 4px, auto, auto);
+      @include w_h(100px);
+      font-size: 12px;
+      vertical-align: middle;
+      cursor: pointer;
+      user-select: none;
+    }
+</style>>
+

src/views/home/user-info/index.vue

@@ -0,0 +1,448 @@
+/*个人信息*/
+<template>
+  <div class="user"
+    v-loading="loading"
+    element-loading-text="Loading"
+    element-loading-spinner="el-icon-loading"
+    element-loading-background="rgba(0, 0, 0, 0.8)">
+    <el-form
+      ref="userForm"
+      class="user-form"
+      label-width="120px"
+      :model="userForm"
+      :rules="userRules"
+      hide-required-asterisk
+    >
+      <!-- <el-form-item prop="name" label="星级：">
+        <div class="stars" v-if="starLevel != 0">
+          <img
+            v-for="(item, index) in starLevel"
+            :key="index"
+            src="../../../assets/img/star.png"
+          />
+        </div>
+        <p v-else class="noStar">暂无星级</p>
+      </el-form-item> -->
+      <el-form-item prop="name" label="昵称：">
+        <el-input
+          ref="name"
+          v-model="userForm.name"
+          type="text"
+          size="small"
+          style="width: 250px"
+          name="name"
+          placeholder="请输入昵称"
+        />
+      </el-form-item>
+      <el-form-item prop="personWords" label="简介：">
+        <el-input
+          ref="personWords"
+          v-model="userForm.personWords"
+          type="textarea"
+          size="small"
+          style="width: 250px"
+          name="personWords"
+          rows="3"
+          resize="none"
+          placeholder="请输入简介"
+        />
+      </el-form-item>
+
+      <el-form-item prop="imageUrl" label="头像：">
+        <div v-if="userForm.imageUrl" class="image">
+          <el-image
+            class="img"
+            fit="contain"
+            :src="userForm.imageUrl"
+            :preview-src-list="[userForm.imageUrl]"
+          />
+          <div class="operation">
+            <i class="el-icon-circle-close" @click="fileRemove" />
+          </div>
+        </div>
+        <el-upload
+          v-else
+          ref="upload"
+          class="image"
+          action="string"
+          accept="image/jpeg, image/png, image/jpg"
+          :multiple="false"
+          :limit="1"
+          :before-upload="onBeforeUploadImage"
+          :http-request="UploadImage"
+          :on-remove="fileRemove"
+          :show-file-list="false"
+        >
+          <i class="el-icon-circle-plus upload-icon" />
+          <p>上传头像</p>
+        </el-upload>
+        <div class="el-upload__tip">
+          只能上传jpg/png文件，大小不能超过 500KB
+        </div>
+      </el-form-item>
+      <el-form-item>
+        <!--  type="danger" -->
+        <el-button
+         type="primary"
+          size="small"
+          class="next-btn"
+          @click.native.prevent="Save"
+          >保存</el-button
+        >
+      </el-form-item>
+    </el-form>
+    <el-form
+      ref="mobileForm"
+      class="user-form"
+      label-width="120px"
+      :model="mobileForm"
+      :rules="mobileRules"
+      hide-required-asterisk>
+      <el-form-item prop="mobile" label="手机号码：">
+            <el-input
+              ref="mobile"
+              v-model="mobileForm.mobile"
+              type="text"
+              size="small"
+              style="width: 220px"
+              name="mobile"
+              placeholder="请输入手机号码"
+            >
+            </el-input>
+            <el-button
+              class="code"
+              type="danger"
+              size="small"
+              :disabled="countDown > 0"
+              plain
+              @click.native.prevent="getCode"
+              v-show="loginMobile!==mobileForm.mobile"
+              >{{ countDown > 0 ? `${countDown}s` : '获取验证码' }}</el-button
+            >
+          </el-form-item>
+      <el-form-item prop="code" label="验证码：" v-show="loginMobile!==mobileForm.mobile">
+            <el-input
+              ref="code"
+              v-model="mobileForm.code"
+              type="text"
+              size="small"
+              style="width: 220px"
+              name="code"
+              placeholder="请输入验证码"
+            >
+            </el-input>
+      </el-form-item>
+      <el-form-item prop="userName" label="管理员名称：" v-if="userType=='1'||userType=='2'">
+            <el-input
+              ref="userName"
+              v-model="mobileForm.userName"
+              type="text"
+              size="small"
+              style="width: 220px"
+              name="code"
+              placeholder="请输入管理员名称"
+            >
+            </el-input>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+import { request, uploadFile, getImage } from '@/utils/request'
+import { validMobile,validCode } from '@/utils/validate'
+export default {
+  name: 'Real',
+  data() {
+    const validateName = (rule, value, callback) => {
+      if (value) {
+        callback()
+      } else {
+        callback(new Error('请输入昵称'))
+      }
+    }
+    const validateFile = (rule, value, callback) => {
+      if (value) {
+        callback()
+      } else {
+        callback(new Error('请上传头像'))
+      }
+    }
+    const validateEmail = (rule, value, callback) => {
+      if (value) {
+        if (!validMobile(value)) {
+          callback(new Error('请输入正确的手机号码'))
+        }else{
+          callback()
+        }
+      } 
+    }
+    const validateCode = (rule, value, callback) => {
+      if (value) {
+        if (!validCode(value)) {
+          callback(new Error('验证码为6位数字'))
+        } else {
+          callback()
+        }
+      } 
+    }
+    return {
+      loading:false,
+      mobileFlog:'',
+      userType:this.$store.getters.userType,
+      countDown: '00',
+      userForm: {
+        name: '',
+        personWords: '',
+        imageUrl: '',
+      },
+      userRules: {
+        // name: [{ required: true, trigger: 'blur', validator: validateName }],
+        // imageUrl: [
+        //   { required: true, trigger: 'blur', validator: validateFile },
+        // ],
+      },
+      mobileRules: {
+        mobile: [{ required: true, trigger: 'blur', validator: validateEmail }],
+        code: [{ required: true, trigger: 'blur', validator: validateCode }],
+      },
+      mobileForm:{
+        mobile:'',
+        code:'',
+        userName:''
+      },
+      file: '',
+      starLevel: 0,
+      loginMobile:''
+    }
+  },
+  computed: {},
+  created() {
+    this.getUserInfo()
+  },
+  methods: {
+    getUserInfo() {
+      let params = {
+        transCode: 'B00001',
+      }
+      request(params)
+        .then((res) => {
+          console.log(res);
+          this.$store.dispatch('user/changeState', {
+            key: 'name',
+            value: res.nickName,
+          })
+          this.userForm.name = res.nickName
+          this.userForm.personWords = res.personWords
+          this.userForm.imageUrl = getImage(res.headProfile)
+          // this.starLevel = parseInt(res.starLevel)
+          this.mobileForm.mobile=res.mobileNo
+          this.loginMobile=res.mobileNo
+          this.mobileForm.userName=res.adminName
+          this.mobileForm.mobile=res.mobileNo
+        })
+        .catch((err) => {})
+    },
+    onBeforeUploadImage(file) {
+      const isIMAGE =
+        file.type === 'image/jpeg' ||
+        file.type === 'image/jpg' ||
+        file.type === 'image/png'
+
+      if (!isIMAGE) {
+        this.$message.error('上传文件只能是图片格式!')
+      }
+      // return isIMAGE
+
+      const isLt1M = file.size / 1024 / 1024 < 0.5
+      if (!isLt1M) {
+        this.$message.error('上传文件大小不能超过 500KB!')
+      }
+      return isIMAGE && isLt1M
+    },
+    UploadImage(params) {
+      this.userForm.imageUrl = URL.createObjectURL(params.file)
+      this.file = params.file
+      this.$refs.upload.clearFiles() // 清除文件对象
+    },
+    fileRemove() {
+      this.userForm.imageUrl = ''
+      this.file = ''
+    },
+    theLast() {
+      this.countDown = 60
+      const timer = setInterval(() => {
+        if (this.countDown > 0) {
+          this.countDown--
+          this.countDown < 10 && (this.countDown = '0' + this.countDown)
+        } else {
+          clearInterval(timer)
+        }
+      }, 1000)
+    },
+    getCode() {
+      this.mobileFlog=1
+      if (this.countDown > 0) return this.$message.error('请不要频繁点击!')
+      if (!this.mobileForm.mobile) return this.$message.error('请输入手机号码!')
+      if (!validMobile(this.mobileForm.mobile))
+        return this.$message.error('请输入正确的手机号码!')
+      const params = {
+        transCode: 'A00001',
+        mailOrPhone: this.mobileForm.mobile,
+        type: '4',
+        channel:'1'
+      }
+      request(params)
+        .then((res) => {
+          this.$message.success(
+            `验证码已发送至手机号码： ${this.mobileForm.mobile} ,请注意查收！`
+          )
+          this.theLast()
+        })
+        .catch((err) => {})
+    },
+    // 保存
+    Save() {
+      this.$refs.userForm.validate((valid) => {
+        if (valid) {
+          this.loading=true
+          const params = new FormData()
+          params.append('transCode', 'B00002')
+          params.append('nickName', this.userForm.name)
+          params.append('mobnub', this.mobileForm.mobile)
+          this.mobileFlog===1?params.append('mobnub', this.mobileForm.mobile):params.append('mobnub', '')
+          this.mobileFlog===1?params.append('verificationCode', this.mobileForm.code):params.append('verificationCode', '')
+          
+          params.append('adminName', this.mobileForm.userName)
+          params.append('personWords', this.userForm.personWords)
+          params.append('headProfile', this.file)
+          uploadFile(params, 'service', (progress) => {
+            console.log('progress: ' + progress + '%')
+          })
+            .then((res) => {
+              this.$message.success('保存成功！')
+              this.loading=false
+            })
+            .catch((err) => {
+              this.loading=false
+            })
+        } else {
+          return false
+        }
+      })
+    },
+    getImage(id) {
+      return getImage(id)
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+@import '@/styles/variables.scss';
+@import '@/styles/mixin.scss';
+.user {
+  padding: 35px 0;
+  @include w_h(100%, 100%);
+ // background: $color_f;
+  display: flex;
+  .user-form {
+    padding: 0 30px 30px;
+    @include w_h();
+   // background: $color_f;
+    .stars {
+      @include w_h(250px, 40px);
+      @include flex(flex-start);
+      img {
+        @include w_h(16px, 16px);
+        margin-right: 5px;
+      }
+    }
+    .noStar {
+      font-size: 12px;
+      color: $color_9;
+    }
+    .next-btn {
+      margin: 10px auto;
+      @include w_h(250px);
+    }
+    .image {
+      position: relative;
+      @include w_h(100px, 130px);
+      font-size: 12px;
+      line-height: 20px;
+      color: $color_d;
+      border-radius: 4px;
+      overflow: hidden;
+      .img {
+        @include w_h(100%, 100%);
+        border: 1px solid $color_d;
+      }
+      .operation {
+        @include position(absolute, 0, auto, auto, 0, 1);
+        font-size: 20px;
+      }
+    }
+  }
+}
+.el-form{
+  width: 430px !important;
+}
+.code {
+      @include position(absolute, 4px, auto, auto);
+      @include w_h(100px);
+      font-size: 12px;
+      vertical-align: middle;
+      cursor: pointer;
+      user-select: none;
+    }
+</style>
+
+<style lang="scss">
+@import '@/styles/variables.scss';
+@import '@/styles/mixin.scss';
+@supports (-webkit-mask: none) and (not (cater-color: $color_9)) {
+  .user-form .el-input input {
+    font-size: 12px;
+    color: $color_9;
+  }
+}
+
+.user-form {
+  .el-input {
+    &__inner:focus {
+      border-color: $color_9;
+    }
+    &--prefix .el-input__inner {
+      color: $color_6;
+      padding-left: 65px;
+    }
+  }
+
+  .el-form-item__label {
+    font-size: 12px;
+    // color: $color_3;
+        line-height: 3;
+  }
+  .el-image__inner--center {
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  .el-upload {
+    @include w_h(100%, 100%);
+    color: $color_d;
+    border: 1px solid $color_d;
+    &:hover {
+      border-color: $color_b;
+    }
+    .upload-icon {
+      margin-top: 40px;
+      font-size: 24px;
+      color: $color_d;
+      text-align: center;
+    }
+  }
+}
+</style>>
+

src/views/index/index.vue

@@ -684,7 +684,7 @@ let params = {
       },
       websocketonmessage(e){ //数据接收
      
-       this.loadingopen();
+      // this.loadingopen();
     console.log(e);
         // setTimeout(() => {
        //  this.loadingend(this.loadingopen());