提交登陆

王富生
1 parent 249594b5
Showing 3 changed files with 165 additions and 75 deletions
src/api/mycar.js
src/api/user.js
src/views/information/index.vue
@@ -26,11 +26,10 @@ export function boundCarNum(params) {
  * 解绑车牌
  * @param params
  */
-export function unboundCarNum(params) {
+export function unboundCarNum() {
   return request({
     url: '/personCarNumPc/unboundCarNum',
-    method: 'post',
-    params
+    method: 'post'
   })
 }
  
@@ -34,3 +34,25 @@ export function logout() {
     method: 'post'
   })
 }
+
+export function uploadUserPic(file){
+  debugger
+  return request({
+    url: '/personPc/uploadUserPic',
+    method: 'post',
+    data:file
+  })
+}
+
+/**
+ * 更新个人客户信息
+ * @param params
+ */
+export function updatePersonByCustId(params){
+  return request({
+    url: '/personPc/updatePersonBycustId',
+    method: 'post',
+    data:params
+  })
+}
+
 <template>
   <div class="">
-        <!--卡片-->
-        <el-row :gutter="16" class="">
-          <el-col :span="8">
-            <el-card class="box-card">
-              <el-upload
-                class="avatar-uploader text-center"
-                action="https://jsonplaceholder.typicode.com/posts/"
-                :show-file-list="false"
-                :on-success="handleAvatarSuccess"
-                :on-remove="handleRemove"
-                :before-upload="beforeAvatarUpload">
-                <img v-if="imageUrl" :src="imageUrl" class="avatar">
-                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
-              </el-upload>
-              <!--<el-button  class="text-center" size="small" type="primary">点击上传</el-button>-->
-              <!--<div slot="tip" class="el-upload__tip"></div>-->
-              <div class="common-color text-center" style="line-height: 30px">15143234323</div>
-
-              <div class="font-size12 text-center" style="line-height: 30px">支持JPG格式且小于5MB</div>
-              <div class="font-size12 text-center" style="height: 146px"> </div>
-            </el-card>
-          </el-col>
-          <el-col :span="16">
-            <el-card class="box-card">
-             <!-- <div slot="header" class="clearfix" style="line-height: 32px;">
-                <span>个人资料</span>
-              </div>-->
-              <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="80px">
-                <el-form-item label="姓名" class="margin-bottom30" prop="username">
-                  <el-input v-model="ruleForm.username" style="width: 300px"></el-input>
-                </el-form-item>
-                <el-form-item label="性别" class="margin-bottom30" prop="sex">
-                  <el-select  v-model="ruleForm.sex" style="width: 300px">
-                    <el-option label="男" value="1"/>
-                    <el-option label="女" value="2"/>
-                  </el-select>
-                </el-form-item>
-                <el-form-item label="生日" class="margin-bottom30" prop="birthday">
-                  <el-date-picker
-                    v-model="ruleForm.birthday"
-                    type="date"
-                    placeholder="选择日期" style="width: 300px">
-                  </el-date-picker>
-                </el-form-item>
-                <el-form-item label="年龄" class="margin-bottom30" prop="num">
-                  <el-input-number v-model="ruleForm.num" @change="handleChange" :min="1" :max="150"  style="width: 300px"></el-input-number>
-                </el-form-item>
-                <el-form-item label="位置" class="margin-bottom30" prop="address">
-                  <el-input type="text" v-model="ruleForm.address" style="width: 300px"></el-input>
-                </el-form-item>
-
-                <el-form-item>
-                  <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
-                  <el-button @click="resetForm('ruleForm')">取消</el-button>
-                </el-form-item>
-              </el-form>
-            </el-card>
-          </el-col>
-        </el-row>
+    <!--卡片-->
+    <el-row :gutter="16" class="">
+      <el-col :span="8">
+        <el-card class="box-card">
+          <el-form status-icon :rules="rules" ref="fileUploadForm">
+            <el-upload
+              class="avatar-uploader text-center"
+              action="#"
+              :show-file-list="false"
+              :on-success="handleAvatarSuccess"
+              :on-remove="handleRemove"
+              :before-upload="beforeAvatarUpload">
+              <img v-if="imageUrl" :src="imageUrl" class="avatar">
+              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+            </el-upload>
+          </el-form>
+          <!--<el-button  class="text-center" size="small" type="primary">点击上传</el-button>-->
+          <!--<div slot="tip" class="el-upload__tip"></div>-->
+          <div class="common-color text-center" style="line-height: 30px">{{userPhone}}</div>
+
+          <div class="font-size12 text-center" style="line-height: 30px">支持JPG格式且小于5MB</div>
+          <div class="font-size12 text-center" style="height: 146px"></div>
+        </el-card>
+      </el-col>
+      <el-col :span="16">
+        <el-card class="box-card">
+          <!-- <div slot="header" class="clearfix" style="line-height: 32px;">
+             <span>个人资料</span>
+           </div>-->
+          <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="80px">
+            <el-form-item label="姓名" class="margin-bottom30" prop="username">
+              <el-input v-model="ruleForm.username" style="width: 300px"></el-input>
+            </el-form-item>
+            <el-form-item label="性别" class="margin-bottom30" prop="sex">
+              <el-select v-model="ruleForm.sex" style="width: 300px">
+                <el-option label="男" value="1"/>
+                <el-option label="女" value="2"/>
+                <el-option label="未知" value="3"/>
+              </el-select>
+            </el-form-item>
+            <el-form-item label="生日" class="margin-bottom30" prop="birthday">
+              <el-date-picker
+                v-model="ruleForm.birthday"
+                type="date"
+                placeholder="选择日期" style="width: 300px">
+              </el-date-picker>
+            </el-form-item>
+            <el-form-item label="位置" class="margin-bottom30" prop="address">
+              <el-input type="text" v-model="ruleForm.address" style="width: 300px"></el-input>
+            </el-form-item>
+
+            <el-form-item>
+              <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
+            </el-form-item>
+          </el-form>
+        </el-card>
+      </el-col>
+    </el-row>
   </div>
 </template>
  
 <script>
+  import {uploadUserPic,updatePersonByCustId} from '@/api/user.js';
+
   export default {
     data() {
       return {
         imageUrl: '',
         ruleForm: {
-          username: '万八',
-          num: '23',
-          sex:'男',
-          birthday: '2019-08-17',
-          address: '北京海淀区上地五街1003号'
+          username: '',
+          num: '',
+          sex: '',
+          birthday: '',
+          address: '',
+          custId: '',
         },
+        userPhone:'',
         rules: {
           username: [
-            { required: true, message: '请输入活动名称', trigger: 'blur' },
-            { min: 1, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
+            {required: true, message: '请输入用户名', trigger: 'blur'},
+            {min: 1, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur'}
           ],
           birthday: [
-            { required: true, message: '请输入日期', trigger: 'blur' },
-            { type: 'email', message: '请输入正确的日期', trigger: ['blur', 'change'] }
+            {required: true, message: '请输入日期', trigger: 'blur'}
           ],
           address: [
-            { required: true, message: '请输入活动名称', trigger: 'blur' },
-            { min: 1, max: 30, message: '长度在 1 到 30 个字符', trigger: 'blur' }
+            {required: true, message: '请输入地址信息', trigger: 'blur'},
+            {min: 1, max: 30, message: '长度在 1 到 30 个字符', trigger: 'blur'}
           ],
         }
       };
@@ -96,8 +98,10 @@
       },
       handleAvatarSuccess(res, file) {
         this.imageUrl = URL.createObjectURL(file.raw);
+        debugger
       },
       beforeAvatarUpload(file) {
+       let that = this;
         const isJPG = file.type === 'image/jpeg';
         const isLt5M = file.size / 1024 / 1024 < 5;
  
@@ -107,15 +111,76 @@
         if (!isLt5M) {
           this.$message.error('上传头像图片大小不能超过 5MB!');
         }
+        let userInfo = this.$store.state.user.userInfo;
+        let fd = new FormData();
+        fd.append('custId', userInfo.custId)
+        fd.append('file', file)
+        uploadUserPic(fd).then(response => {
+           if(response.code ='8888'){
+             that.imageUrl=response.data;
+           }
+
+
+        });
+
+
         return isJPG && isLt5M;
       },
+      submitForm: function (formName) {
+        let username = this.ruleForm.username;
+        let sex = this.ruleForm.sex;
+        let birthday = this.ruleForm.birthday
+        let address = this.ruleForm.address;
+        let custId = this.ruleForm.custId;
+
+        this.$refs[formName].validate((valid) => {
+          if (valid) {
+              let req ={
+                custName:username,
+                sex:sex,
+                birthDate:birthday,
+                address:address,
+                custId:custId
+              };
+            updatePersonByCustId(req).then(response =>{
+               if(response.code ='8888'){
+                 debugger
+                 let userInfo = this.$store.state.user.userInfo;
+                 userInfo.custName=username;
+                 userInfo.sex=sex;
+                 userInfo.birthDate=birthday;
+                 userInfo.address=address;
+                 this.$message({
+                   type: 'success',
+                   message: '更新用户信息成功！'
+                 });
+               }
+            });
+          }
+        });
+      },
       resetForm(formName) {
         this.$refs[formName].resetFields();
+      },
+      queryUserInfo: function () {
+        let userInfo = this.$store.state.user.userInfo;
+          this.userPhone=userInfo.userPhone;
+        this.ruleForm = {
+          username: userInfo.custName,
+          //num: '',
+          sex: userInfo.sex + "",
+          birthday: userInfo.birthDate,
+          address: userInfo.address,
+          custId: userInfo.custId
+        }
       }
+    },
+    mounted: function () {
+      this.queryUserInfo();
     }
   }
 </script>
-<style lang="scss" >
+<style lang="scss">
  
   .avatar-uploader .el-upload {
     border: 1px dashed #d9d9d9;
@@ -124,9 +189,11 @@
     position: relative;
     overflow: hidden;
   }
+
   .avatar-uploader .el-upload:hover {
     border-color: #409EFF;
   }
+
   .avatar-uploader-icon {
     font-size: 28px;
     color: #8c939d;
@@ -135,12 +202,14 @@
     line-height: 178px;
     text-align: center;
   }
+
   .avatar {
     width: 178px;
     height: 178px;
     display: block;
   }
-  .margin-bottom30{
+
+  .margin-bottom30 {
     margin-bottom: 30px;
   }
 </style>