feat(/personal-center): 完善个人中心页面

src/router/router.js

@@ -40,6 +40,7 @@ export const otherRouters = {
             path:'personalCenter',
             name:'personalCenter',
             title:'个人中心',
+            redirect:'/personalCenter/personalInfo',
             component: personalCenter => import('@/views/personal-center/personalCenter'),
             children:[
                 {
@@ -57,6 +58,11 @@ export const otherRouters = {
                     name:'updatePassword',
                     component: updatePassword => import('@/views/personal-center/components/update-password/updatePassword')
                 },
+                {
+                    path:'completeInfo',
+                    name:'completeInfo',
+                    component: completeInfo => import("@/views/personal-center/components/complete-info/completeInfo")
+                },
                 {
                     path:'myCollection',
                     name:"myCollection",

src/views/Home.vue

@@ -30,12 +30,12 @@
         v-model="isShowlogDialog"
         title="登录"
         >
-        <Form ref="formData" :model="formData" :rules="rules" label-position="left" >
+        <Form ref="formData" :model="formData" :rules="rules" label-position="left" :label-width="80">
             <FormItem prop="user" label="用户名:">
                 <Input type="text" v-model="formData.user" placeholder="用户名"/>
             </FormItem>
             <FormItem prop="password" label="密码:">
-                <Input type="password" v-model="formData.password" placeholder="密码"/>
+                <Input type="password" v-model="formData.password" placeholder="密码" password/>
             </FormItem>
         </Form>
         <div slot="footer">
@@ -87,7 +87,7 @@ export default {
   computed:{
     ...mapState({
       menuList: state => {
-        console.log("state menuList",state.app.menuList);
+        // console.log("state menuList",state.app.menuList);
         return state.app.menuList;
       }
     })

src/views/personal-center/components/complete-info/completeInfo.vue

+<template>
+    <Card>
+        <p slot="title">
+            <Icon type="ios-film-outline"></Icon>
+            完善个人信息
+        </p>    
+        <Form ref='completeInfo' :model='completeInfo' :label-width="80" label-position="left" >
+        <FormItem prop='realName' label="真实姓名">
+            <Input type="text" v-model="completeInfo.realName"/>
+        </FormItem>
+        <FormItem prop="education" label="学历">
+            <Select v-model="completeInfo.education" style="width:200px">
+                <Option v-for="item in educationList" :value="item.label" :key="item.label">{{ item.label }}</Option>
+            </Select>
+        </FormItem>
+        <FormItem prop="companyName" label = "公司名称">
+            <Input type="text" v-model="completeInfo.companyName"/>
+        </FormItem>
+        <FormItem prop="postName" label = "岗位">
+            <Input type="text" v-model="completeInfo.postName"/>
+        </FormItem>
+         <FormItem >
+            <Button type="primary" @click="handleSubmit('completeInfo')">提交</Button>
+        </FormItem>
+    </Form>
+    </Card>
+</template>
+
+<script>
+    export default{
+        data(){
+            return {
+                completeInfo:{
+                    education:'',
+                    companyName:'',
+                    postName:'',
+                    realName:''
+                },
+                educationList:[
+                    {
+                        label:'博士'
+                    },
+                    {
+                        label:'硕士'
+                    },
+                    {
+                        label:'本科',
+                    },
+                    {
+                        label:'专科'
+                    },
+                    {
+                        label:'其他'
+                    }
+                ]
+
+                
+            }
+        },
+        methods:{
+             handleSubmit(name) {
+               this.$refs[name].resetFields();
+            }
+        }
+    }
+</script>
+
+<style scoped>
+@import './completeInfo.less';
+</style>
\ No newline at end of file

src/views/personal-center/components/my-collection/myCollection.vue

 <template>
-    <div>
-        myCollection
-    </div>
+    <Card>
+        <p slot="title">
+            <Icon type="ios-film-outline"></Icon>
+            我的收藏
+        </p>    
+    </Card>
 </template>
 
 <script>

src/views/personal-center/components/personal-info/personalInfo.vue

 <template>
-    <div>
-        personalInfo
-    </div>
+    <Card>
+         <p slot="title">
+            <Icon type="ios-film-outline"></Icon>
+            个人资料
+        </p>    
+        <Form ref='personalInfo' :model='personalInfoForm'>
+            <FormItem prop='avatarUrl'>
+                <div>
+                    个人头像: 
+                    <Avatar src="https://i.loli.net/2017/08/21/599a521472424.jpg" size='large' style="margin-left:10px"></Avatar>
+                </div>
+                
+            </FormItem>
+
+            <FormItem prop='nickName'>
+                <p>
+                    <span>真实姓名: {{personalInfoForm.realName}}</span>
+                </p>
+            </FormItem>
+
+
+            <FormItem prop='nickName'>
+                <p>
+                    <span>用户名: {{personalInfoForm.nickName}}</span>
+                </p>
+            </FormItem>
+
+            <FormItem prop='address'>
+                  <p>
+                    <span>地址: {{personalInfoForm.address}}</span>
+                  </p>
+            </FormItem>
+            
+            <FormItem prop="companyName">
+                <p>
+                    <span>所在公司: {{personalInfoForm.companyName}}</span>
+                </p>
+            </FormItem>
+
+            <FormItem prop="postName">
+                  <p>
+                    <span>岗位: {{personalInfoForm.postName}}</span>
+                </p>
+            </FormItem>
+        </Form>
+    </Card>
 </template>
 
 <script>
     export default {
-
+        data(){
+            return {
+                personalInfoForm:{
+                    nickName:'bemount',
+                    avatarUrl:'',
+                    address:'',
+                    companyName:'',
+                    postName:'',
+                    realName:''
+                }
+            }
+        }
     }
 </script>
 

src/views/personal-center/components/update-avatar/updateAvatar.vue

 <template>
-    <div>
-        updateAvatar
-    </div>
+    <Card>
+         <p slot="title">
+            <Icon type="ios-film-outline"></Icon>
+            头像修改
+        </p>
+        <div>
+            AvatarUrl: 
+            <Input v-model="avatarUrl">
+               <Icon type="ios-camera-outline" slot='prefix'/>
+            </Input>
+            <span style="color:red;font-size:5px">(为线上图片格式)</span>
+        </div>
+        <div style="margin-top:50px">
+            <Button type="info">提交</Button>
+        </div>
+    </Card>
 </template>
 
 <script>
     export default {
+        data(){
+            return {
+                avatarUrl:''
+            }
+        },
+        methods:{
 
+        }
     }
 </script>
 

src/views/personal-center/components/update-password/updatePassword.vue

 <template>
-    <div>
-        updatePassword
-    </div>
+        <Card>
+            <p slot="title">
+            <Icon type="ios-film-outline"></Icon>
+             更改密码
+            </p>    
+            <Form ref="updatePasswordInfo" :model="updatePasswordInfo" :label-width='80' label-position='left' :rules="rules">
+                <FormItem label='原密码' prop="oldPassword" >
+                    <Input type='password' password v-model="updatePasswordInfo.oldPassword">
+                        <Icon type="ios-lock-outline" slot="prepend"></Icon>
+                    </Input>
+                </FormItem>
+                <FormItem label="新密码" prop='newPassword'>
+                    <Input type='password' password v-model="updatePasswordInfo.newPassword">
+                        <Icon type="ios-lock-outline" slot="prepend"></Icon>
+                    </Input>
+                </FormItem>
+                <FormItem label="确认密码" prop="reNewPassword">
+                    <Input type='password' password v-model="updatePasswordInfo.reNewPassword">
+                        <Icon type="ios-lock-outline" slot="prepend"></Icon>
+                    </Input>
+                </FormItem>
+                <FormItem>
+                    <Button type="primary" @click="handleSubmit('updatePasswordInfo')">更改</Button>
+                </FormItem>
+            </Form>
+        </Card>
 </template>
 
 <script>
     export default {
-
+        data(){
+            return {
+                updatePasswordInfo:{
+                    oldPassword:'',
+                    newPassword:'',
+                    reNewPassword:''
+                },
+                rules:{
+                     newPassword: [
+                        { required: true, message: 'Please fill in the password.', trigger: 'blur' },
+                        { type: 'string', min: 6, message: 'The password length cannot be less than 6 bits', trigger: 'blur' }
+                    ],
+                    reNewPassword:[
+                        { required: true, message: 'Please fill in the password.', trigger: 'blur' },
+                        { type: 'string', min: 6, message: 'The password length cannot be less than 6 bits', trigger: 'blur' }
+                    ],
+                    oldPassword: [
+                        { required: true, message: 'Please fill in the password.', trigger: 'blur' },
+                        { type: 'string', min: 6, message: 'The password length cannot be less than 6 bits', trigger: 'blur' }
+                    ]
+                }
+            }
+        },
+        methods:{
+            handleSubmit(name){
+                 this.$refs[name].validate((valid) => {
+                    if (valid) {
+                        this.$Message.success('Success!');
+                    } else {
+                        this.$Message.error('Fail!');
+                    }
+                })
+                this.$refs[name].resetFields();
+            }
+        }
     }
 </script>
 
 <style lang='less'>
-
+@import './updatePassword.less';
 </style>
\ No newline at end of file

src/views/personal-center/personalCenter.vue

@@ -18,6 +18,10 @@
                 <Icon type="md-color-filter" />
                 修改头像
             </MenuItem>
+            <MenuItem name="completeInfo">
+                <Icon type="ios-briefcase-outline" />
+                 完善信息
+            </MenuItem>
         </Menu>
        </Col>
        <Col span="15"  >