报名表

src/containers/center/setting/index.vue

@@ -3,9 +3,14 @@
     <div class="right-block-bd">
       <div class="m-account">
         <div class="account-tit" style="height:30px">
-          <a :class="{'current':show===1}" style="text-decoration: none;padding-bottom: 5px" @click="show=1" class="">基础资料</a>
-          <a :class="{'current':show===2}" style="text-decoration: none;padding-bottom: 5px" @click="show=2" class="">实名认证</a>
-          <a :class="{'current':show===3}" style="text-decoration: none;padding-bottom: 5px" @click="show=3" class="">额外信息</a>
+          <a :class="{'current':show===1}" style="text-decoration: none;padding-bottom: 5px" @click="show=1"
+            class="">基础资料</a>
+          <a :class="{'current':show===2}" style="text-decoration: none;padding-bottom: 5px" @click="show=2"
+            class="">实名认证</a>
+          <a :class="{'current':show===3}" style="text-decoration: none;padding-bottom: 5px" @click="show=3"
+            class="">额外信息</a>
+          <a :class="{'current':show===6}" style="text-decoration: none;padding-bottom: 5px" @click="show=6"
+            class="">报名信息</a>
           <!-- <a :class="{'current':show===4}" style="text-decoration: none;padding-bottom: 5px" @click="show=4" class="">密码修改</a> -->
           <!-- <a :class="{'current':show===5}" style="text-decoration: none;padding-bottom: 5px" @click="show=5" class="">手机修改</a> -->
         </div>
@@ -21,9 +26,10 @@
               </el-col>
 
               <el-col :span="6" class="col-normal tc">
-                <img :src="userInfo.featureImg" :onerror="errorImg" class="setting-img" @click="showImg(userInfo.featureImg)">
+                <img :src="userInfo.featureImg" :onerror="errorImg" class="setting-img"
+                  @click="showImg(userInfo.featureImg)">
                 <!-- <do-upload @onFinish="setFeatureImg" placeholder="人脸采集"> </do-upload> -->
-                <i-camara @onFinish="setFeatureImg" placeholder="人脸采集"/>
+                <i-camara @onFinish="setFeatureImg" placeholder="人脸采集" />
               </el-col>
             </el-row>
 
@@ -38,7 +44,8 @@
                   required="" placeholder="请输入用户名" disabled="disabled">
               </li>
               <li class="ng-binding">
-                <span class="l-t">证件号：</span>{{userInfo.cardId||'未知'}}</li>
+                <span class="l-t">证件号：</span>{{userInfo.cardId||'未知'}}
+              </li>
               <li>
                 <span class="l-t"><i></i>性别：</span>
 
@@ -47,13 +54,13 @@
                     <span class="p-ico2 ico-man"></span>男
                   </a>
                   <a href="javascript:void(0)" @click="userInfo.gender='女'" :class="{'selected':userInfo.gender=='女'}">
-                    <span  class="p-ico2 ico-woman"></span>女
+                    <span class="p-ico2 ico-woman"></span>女
                   </a>
                 </span>
               </li>
               <li>
                 <span class="l-t"><i></i>手机号码：</span>
-                <input type="text" v-model="userInfo.phone"  class="ipt" disabled placeholder="请输入手机号码">
+                <input type="text" v-model="userInfo.phone" class="ipt" disabled placeholder="请输入手机号码">
 
                 <span class="tips ng-scope" v-if="!isPhone()">
                   <span class="p-ico2"></span>手机格式不对
@@ -75,12 +82,13 @@
 
             <el-row :gutter="40" class="mt20">
               <el-col :span="6" class="col-normal tc">
-                 <img :src="userInfo.cardImg" :onerror="errorImg" class="setting-img" @click="showImg(userInfo.cardImg)">
+                <img :src="userInfo.cardImg" :onerror="errorImg" class="setting-img" @click="showImg(userInfo.cardImg)">
                 <do-upload @onFinish="setCardImg" placeholder="身份证正面"> </do-upload>
               </el-col>
 
               <el-col :span="6" class="col-normal tc">
-                <img :src="userInfo.cardBackImg" :onerror="errorImg" class="setting-img" @click="showImg(userInfo.cardBackImg)">
+                <img :src="userInfo.cardBackImg" :onerror="errorImg" class="setting-img"
+                  @click="showImg(userInfo.cardBackImg)">
                 <do-upload @onFinish="setCardBackImg" placeholder="身份证背面"> </do-upload>
               </el-col>
             </el-row>
@@ -88,7 +96,7 @@
             <ul class="ul-form mt50 ng-scope">
               <li>
                 <span class="l-t">身份证：</span>
-                 <input v-model="userInfo.cardId" class="ipt1" disabled></input>
+                <input v-model="userInfo.cardId" class="ipt1" disabled></input>
               </li>
               <li>
                 <span class="l-t">姓名：</span>
@@ -102,45 +110,45 @@
               <li class="mt30">
                 <span class="l-t"></span>
                 <el-button type="primary" class="confirm" @click="identify()" v-if="!userInfo.identify">实名认证</el-button>
-                <el-button type="text" v-else >已经完成实名认证</el-button>
+                <el-button type="text" v-else>已经完成实名认证</el-button>
               </li>
             </ul>
           </form>
         </div>
 
 
-        <div v-if="show===3" >
-          <el-form ref="elForm" :inline="false"  class="mt50">
-            <el-form-item label="详细地址" label-width='150px' class="mt30" prop="address" >
-               <el-input placeholder="详细地址" v-model="userInfo.address " class="pass-input">
-               </el-input>
+        <div v-if="show===3">
+          <el-form ref="elForm" :inline="false" class="mt50">
+            <el-form-item label="详细地址" label-width='150px' class="mt30" prop="address">
+              <el-input placeholder="详细地址" v-model="userInfo.address " class="pass-input">
+              </el-input>
             </el-form-item>
 
-            <el-form-item label="邮政编码" label-width='150px' class="mt30" prop="postalCode" >
-               <el-input placeholder="邮政编码" v-model="userInfo.postalCode " class="pass-input">
-               </el-input>
+            <el-form-item label="邮政编码" label-width='150px' class="mt30" prop="postalCode">
+              <el-input placeholder="邮政编码" v-model="userInfo.postalCode " class="pass-input">
+              </el-input>
             </el-form-item>
 
 
-            <el-form-item label="工作年限" label-width='150px' class="mt30" prop="years" >
-               <el-input placeholder="工作年限" v-model="userInfo.years " class="pass-input">
-               </el-input>
+            <el-form-item label="工作年限" label-width='150px' class="mt30" prop="years">
+              <el-input placeholder="工作年限" v-model="userInfo.years " class="pass-input">
+              </el-input>
             </el-form-item>
 
-            <el-form-item label="工作单位" label-width='150px' class="mt30" prop="company" >
-               <el-input placeholder="工作单位" v-model="userInfo.company " class="pass-input">
-               </el-input>
+            <el-form-item label="工作单位" label-width='150px' class="mt30" prop="company">
+              <el-input placeholder="工作单位" v-model="userInfo.company " class="pass-input">
+              </el-input>
             </el-form-item>
 
-            <el-form-item label="最高学历" label-width='150px' class="mt30" prop="oldPass" >
-               <el-input placeholder="最高学历" v-model="userInfo.education " class="pass-input">
-               </el-input>
+            <el-form-item label="最高学历" label-width='150px' class="mt30" prop="oldPass">
+              <el-input placeholder="最高学历" v-model="userInfo.education " class="pass-input">
+              </el-input>
             </el-form-item>
 
-            <el-form-item   label="" label-width='150px' class="mt30" prop="rePass">
-               <el-button type="primary"  class="confirm" @click="saveMoreInfo()">
-                 确认修改
-                </el-button>
+            <el-form-item label="" label-width='150px' class="mt30" prop="rePass">
+              <el-button type="primary" class="confirm" @click="saveMoreInfo()">
+                确认修改
+              </el-button>
             </el-form-item>
           </el-form>
 
@@ -149,29 +157,29 @@
 
         <div v-if="show===4" class="ng-scope">
           <el-form ref="elForm" :inline="false" :model="passForm" :rules="passRules" class="mt50">
-            <el-form-item label="输入旧密码" label-width='150px' class="mt30" prop="oldPass" >
-               <el-input placeholder="输入旧密码" v-model="passForm.oldPass " class="pass-input" type="password"
-               show-password auto-complete="new-password">
+            <el-form-item label="输入旧密码" label-width='150px' class="mt30" prop="oldPass">
+              <el-input placeholder="输入旧密码" v-model="passForm.oldPass " class="pass-input" type="password" show-password
+                auto-complete="new-password">
 
-               </el-input>
+              </el-input>
             </el-form-item>
 
-            <el-form-item label="输入新密码" label-width='150px' class="mt30" prop="newPass" >
-               <el-input placeholder="输入新密码" v-model="passForm.newPass" class="pass-input" type="password"
-               show-password auto-complete="new-password">
-               </el-input>
+            <el-form-item label="输入新密码" label-width='150px' class="mt30" prop="newPass">
+              <el-input placeholder="输入新密码" v-model="passForm.newPass" class="pass-input" type="password" show-password
+                auto-complete="new-password">
+              </el-input>
             </el-form-item>
 
-            <el-form-item   label="确认新密码" label-width='150px' class="mt30" prop="rePass">
-               <el-input placeholder="确认新密码" v-model="passForm.rePass" class="pass-input" type="password"
-               show-password auto-complete="new-password">
-               </el-input>
+            <el-form-item label="确认新密码" label-width='150px' class="mt30" prop="rePass">
+              <el-input placeholder="确认新密码" v-model="passForm.rePass" class="pass-input" type="password" show-password
+                auto-complete="new-password">
+              </el-input>
             </el-form-item>
 
-            <el-form-item   label="" label-width='150px' class="mt30" prop="rePass">
-               <el-button type="primary"  class="confirm" @click="doSavePassword()">
-                 确认修改
-                </el-button>
+            <el-form-item label="" label-width='150px' class="mt30" prop="rePass">
+              <el-button type="primary" class="confirm" @click="doSavePassword()">
+                确认修改
+              </el-button>
             </el-form-item>
 
           </el-form>
@@ -179,52 +187,78 @@
 
         <div v-if="show===5" class="ng-scope">
           <el-form ref="elFormPhone" :inline="false" :model="phoneForm" :rules="phoneRules" class="mt50">
-            <el-form-item label="输入新手机" label-width='150px' class="mt30" prop="phone" >
-               <el-input placeholder="输入新手机" v-model="phoneForm.phone " style="width: 300px;" :maxlength="11" show-word-limit>
-               </el-input>
+            <el-form-item label="输入新手机" label-width='150px' class="mt30" prop="phone">
+              <el-input placeholder="输入新手机" v-model="phoneForm.phone " style="width: 300px;" :maxlength="11"
+                show-word-limit>
+              </el-input>
             </el-form-item>
 
-            <el-form-item label="短信检验码" label-width='150px' class="mt30" prop="code" >
-               <el-input placeholder="输入短信检验码" v-model="phoneForm.code" style="width: 180px;" :maxlength="6" show-word-limit>
-               </el-input>
-               <el-button style="width: 120px;" type="info" v-if="phoneForm.phone.length!=11" disabled>获取检验码</el-button>
-               <el-button style="width: 120px;" type="primary" v-else-if="!count" @click="getCode()">获取检验码</el-button>
-               <el-button style="width: 120px;" type="info" disabled v-else>剩余时间{{count}} s</el-button>
+            <el-form-item label="短信检验码" label-width='150px' class="mt30" prop="code">
+              <el-input placeholder="输入短信检验码" v-model="phoneForm.code" style="width: 180px;" :maxlength="6"
+                show-word-limit>
+              </el-input>
+              <el-button style="width: 120px;" type="info" v-if="phoneForm.phone.length!=11" disabled>获取检验码</el-button>
+              <el-button style="width: 120px;" type="primary" v-else-if="!count" @click="getCode()">获取检验码</el-button>
+              <el-button style="width: 120px;" type="info" disabled v-else>剩余时间{{count}} s</el-button>
             </el-form-item>
-            <el-form-item label="" label-width='150px' class="mt30" prop="code" >
+            <el-form-item label="" label-width='150px' class="mt30" prop="code">
               <span style="color: red;">注意：手机必须本人实名认证手机</span>
             </el-form-item>
-            <el-form-item   label="" label-width='150px' class="mt30" prop="rePass">
-               <el-button type="primary"  class="confirm" @click="doSavePhone()">
-                 确认修改
-                </el-button>
+            <el-form-item label="" label-width='150px' class="mt30" prop="rePass">
+              <el-button type="primary" class="confirm" @click="doSavePhone()">
+                确认修改
+              </el-button>
             </el-form-item>
 
           </el-form>
         </div>
 
+        <div v-if="show===6" class="lwh-ul-form">
+          <form name="user">
+            <div class="m-img tc"></div>
+
+            <el-row :gutter="40" class="mt20">
+              <el-col :span="6" class="col-normal tc">
+                <img :src="userInfo.graduateImg" :onerror="errorImg" class="setting-img"
+                  @click="showImg(userInfo.graduateImg)">
+                <do-upload @onFinish="setGraduateImg" placeholder="学历证件"> </do-upload>
+              </el-col>
+
+              <el-col :span="6" class="col-normal tc">
+                <img :src="userInfo.applyImg" :onerror="errorImg" class="setting-img"
+                  @click="showImg(userInfo.applyImg)">
+                <do-upload @onFinish="setApplyImg" placeholder="报名表"> </do-upload>
+              </el-col>
+            </el-row>
+          </form>
+
+          <div class="mt10 tc">
+            <el-button type="text" style="margin-top: 100px;text-align: center; font-size: 30px;" @click="download">下载报名表 </el-button>
+          </div>
+        </div>
 
       </div>
     </div>
 
-    <el-dialog
-        append-to-body
-        close-on-click-modal
-        :visible.sync="visible"
-        :width="width">
-        <img :src="imgUrl" @load="onLoad" alt="" />
+    <el-dialog append-to-body close-on-click-modal :visible.sync="visible" :width="width">
+      <img :src="imgUrl" @load="onLoad" alt="" />
     </el-dialog>
   </div>
 </template>
 
 <script>
-  import { httpServer } from "@/components/httpServer/httpServer.js";
+  import {
+    httpServer
+  } from "@/components/httpServer/httpServer.js";
   import UploadImage from "@/components/upload/index.vue";
   import ImgView from '@/components/upload/imgView.vue';
   import DoUpload from '@/components/upload/index.vue'
   import ICamara from '@/components/camara/index.vue'
   import rules from "@/utils/rules.js";
-  import { mapGetters,mapActions } from "vuex";
+  import {
+    mapGetters,
+    mapActions
+  } from "vuex";
   export default {
     data() {
       var validatePass2 = (rule, value, callback) => {
@@ -243,24 +277,26 @@
         visible: false,
         timer: false,
         count: 0,
-        imgUrl:'',
-        passForm:{
-          oldPass:'',
-          newPass:'',
-          rePass:'',
+        imgUrl: '',
+        passForm: {
+          oldPass: '',
+          newPass: '',
+          rePass: '',
         },
-        passRules:{
+        passRules: {
           oldPass: rules.defaultFun("请输入密码"),
           newPass: rules.passwordItem,
-          rePass: [
-            { required: true, validator: validatePass2, trigger: "blur" },
-          ],
+          rePass: [{
+            required: true,
+            validator: validatePass2,
+            trigger: "blur"
+          }, ],
         },
-        phoneForm:{
-          phone:'',
-          code:''
+        phoneForm: {
+          phone: '',
+          code: ''
         },
-        phoneRules:{
+        phoneRules: {
           phone: rules.defaultFun("请输入新手机"),
           code: rules.defaultFun("请输入短信校验码")
         },
@@ -268,14 +304,19 @@
       }
     },
     computed: {
-    	...mapGetters("user", ["userInfo"])
+      ...mapGetters("user", ["userInfo"])
+    },
+    components: {
+      DoUpload,
+      UploadImage,
+      ImgView,
+      ICamara
     },
-    components:{DoUpload,UploadImage,ImgView,ICamara},
     methods: {
-       ...mapActions("user", ["saveBaseInfo"]),
-      isPhone( ){
+      ...mapActions("user", ["saveBaseInfo"]),
+      isPhone() {
         let phone = this.userInfo.phone;
-        return !phone||/^1[0-9]{10}$/.test(phone)
+        return !phone || /^1[0-9]{10}$/.test(phone)
       },
       checkPhone() {
         let phone = this.phoneForm.phone;
@@ -285,21 +326,23 @@
         }
         return true
       },
-      showImg( url ){
+      showImg(url) {
         this.imgUrl = url;
         this.visible = true;
       },
-      setHeadImg( imgUrl ){
+      setHeadImg(imgUrl) {
         this.userInfo.headImg = imgUrl;
         this.saveBaseInfo(this.userInfo)
       },
-      setFeatureImg( imgUrl ){
+      setFeatureImg(imgUrl) {
         this.userInfo.featureImg = imgUrl;
         this.saveBaseInfo(this.userInfo)
       },
-      setCardImg( url ){
-        httpServer("User.addCardImg", {url}).then( res=>{
-          if( res.code == 200){
+      setCardImg(url) {
+        httpServer("User.addCardImg", {
+          url
+        }).then(res => {
+          if (res.code == 200) {
             this.userInfo.cardImg = res.url;
             this.userInfo.nickname = res.nickanme
             this.userInfo.address = res.address;
@@ -307,54 +350,71 @@
           }
         })
       },
-      setCardBackImg( url  ){
-        httpServer("User.addCardBackImg", {url}).then( res=>{
-          if( res.code == 200){
+      setCardBackImg(url) {
+        httpServer("User.addCardBackImg", {
+          url
+        }).then(res => {
+          if (res.code == 200) {
             this.userInfo.cardBackImg = url;
             this.saveBaseInfo(this.userInfo)
-           }
+          }
         })
       },
-      setGraduateImg( url  ){
-        httpServer("User.addGraduateImg", {url}).then( res=>{
-          if( res.code == 200){
+      setGraduateImg(url) {
+        httpServer("User.addGraduateImg", {
+          url
+        }).then(res => {
+          if (res.code == 200) {
             this.userInfo.graduateImg = url;
             this.saveBaseInfo(this.userInfo);
-           }
+          }
         })
       },
-      identify(){
-        httpServer("User.identify", {}).then( res=>{
-          if( res.code == 200){
+      setApplyImg(url) {
+        httpServer("User.addApplyImg", {
+          url
+        }).then(res => {
+          if (res.code == 200) {
+            this.userInfo.applyImg = url;
+            this.saveBaseInfo(this.userInfo);
+          }
+        })
+      },
+      identify() {
+        httpServer("User.identify", {}).then(res => {
+          if (res.code == 200) {
             this.userInfo.identify = 1;
             this.saveBaseInfo(this.userInfo)
-            this.$message.success( "实名认证成功")
-           }
+            this.$message.success("实名认证成功")
+          }
         })
       },
-      doSaveBaseInfo(){
+      doSaveBaseInfo() {
         let param = {
-           headImg:this.userInfo.headImg,
-           gender:this.userInfo.gender,
-           featureImg: this.userInfo.featureImg,
-         }
-        httpServer("User.saveBaseInfo", param).then( res=>{
-          if( res.code == 200){
+          headImg: this.userInfo.headImg,
+          gender: this.userInfo.gender,
+          featureImg: this.userInfo.featureImg,
+        }
+        httpServer("User.saveBaseInfo", param).then(res => {
+          if (res.code == 200) {
             this.$message.success("保存成功")
             this.saveBaseInfo(this.userInfo)
           }
         })
       },
-      doSavePhone(){
-        let {phone, code}  = this.phoneForm;
+      doSavePhone() {
+        let {
+          phone,
+          code
+        } = this.phoneForm;
         this.$refs["elFormPhone"].validate((valid) => {
           if (!valid) return;
           let param = {
-             phone: phone,
-             code: code
-           }
-          httpServer("User.ChangePhone", param).then( res=>{
-            if( res.code == 200){
+            phone: phone,
+            code: code
+          }
+          httpServer("User.ChangePhone", param).then(res => {
+            if (res.code == 200) {
               this.userInfo.phone = phone;
               this.$message.success("修改手机成功");
               this.saveBaseInfo(this.userInfo);
@@ -368,7 +428,10 @@
         let phone = this.phoneForm.phone
         this.startTimer()
         let type = "changePhone"
-        httpServer("Auth.getCode", { phone, type}).then(res => {
+        httpServer("Auth.getCode", {
+          phone,
+          type
+        }).then(res => {
           if (res.code == 200) {
             this.$message.successMsg("发送成功", 1)
             this.startTimer()
@@ -389,18 +452,25 @@
           }
         }, 1000)
       },
-      doSavePassword(){
-        let {oldPass, newPass}  = this.passForm;
+      doSavePassword() {
+        let {
+          oldPass,
+          newPass
+        } = this.passForm;
         this.$refs["elForm"].validate((valid) => {
           console.log(" valid")
           if (!valid) return;
           let param = {
-             oldPass:this.$md5(oldPass),
-             newPass:this.$md5(newPass)
-           }
-          httpServer("User.ResetPass", param).then( res=>{
-            if( res.code == 200){
-              this.passForm = {oldPass:'', newPass:'', rePass:''};
+            oldPass: this.$md5(oldPass),
+            newPass: this.$md5(newPass)
+          }
+          httpServer("User.ResetPass", param).then(res => {
+            if (res.code == 200) {
+              this.passForm = {
+                oldPass: '',
+                newPass: '',
+                rePass: ''
+              };
               this.$message.success("密码修改成功")
               this.$refs["elForm"].resetField();
             }
@@ -411,24 +481,28 @@
         const img = e.target;
         let width = 0;
         if (img.fileSize > 0 || (img.width > 1 && img.height > 1)) {
-            width = img.width + 40;
+          width = img.width + 40;
         }
         this.width = width + "px";
-        console.log( this.width )
+        console.log(this.width)
       },
-      saveMoreInfo(){
-         let param = {
-           education:this.userInfo.education,
-           address:this.userInfo.address,
-           years:+this.userInfo.years,
-           company: this.userInfo.company,
-           address: this.userInfo.address,
-           education: this.userInfo.education,
-           postalCode:this.userInfo.postalCode,
-         }
-        httpServer("User.saveMoreInfo", param).then( res=>{
-          if( res.code == 200){
-            this.$message.success( "编辑成功")
+      download() {
+        let burl = "/static/doc/报名表.docx";
+        window.open(burl)
+      },
+      saveMoreInfo() {
+        let param = {
+          education: this.userInfo.education,
+          address: this.userInfo.address,
+          years: +this.userInfo.years,
+          company: this.userInfo.company,
+          address: this.userInfo.address,
+          education: this.userInfo.education,
+          postalCode: this.userInfo.postalCode,
+        }
+        httpServer("User.saveMoreInfo", param).then(res => {
+          if (res.code == 200) {
+            this.$message.success("编辑成功")
           }
 
         })
@@ -440,10 +514,12 @@
 <style>
   @import url("./index.css");
   @import url("../../../assets/css/m-account.css");
-  .pass-input{
+
+  .pass-input {
     width: 296px;
   }
-  .confirm{
+
+  .confirm {
     width: 296px;
   }
 </style>