add:mine

src/components/commons/Header2.0.vue

@@ -13,6 +13,13 @@
                   {{user.userVO.name}}<i class="el-icon-arrow-down el-icon--right"></i>
                 </span>
                 <el-dropdown-menu slot="dropdown">
+                  <el-dropdown-item>
+                    <router-link :to="{ name: 'UserCenter',params:{userId:user.userVO.id}}">
+                      <el-link icon="el-icon-user" :underline="false">
+                        个人中心
+                      </el-link>
+                    </router-link>
+                  </el-dropdown-item>
                   <el-dropdown-item v-if="rolesPermissions.isSystemAdministrator">
                     <router-link :to="{ name: 'AuthenticationManage'}">
                       <el-link icon="el-icon-view" :underline="false">

src/main.js

@@ -60,7 +60,9 @@ import {
   TimeSelect,
   Tooltip,
   Upload,
-  Progress
+  Progress,
+  Step,
+  Steps,
 } from 'element-ui'
 Vue.prototype.$moment = moment
 function getCurrentUserSuccess(res){
@@ -185,6 +187,8 @@ Vue.use(Image)
 Vue.use(Badge)
 Vue.use(Popover)
 Vue.use(Progress)
+Vue.use(Steps)
+Vue.use(Step)
 
 Vue.prototype.$msgbox = MessageBox
 Vue.prototype.$alert = MessageBox.alert

src/pages/UserCenter/BankCard.vue

@@ -0,0 +1,49 @@
+<template>
+  <div class="bank-card">
+    <div class="bank-card-title" style="padding: 10px;height:43px">
+      <img src="../../assets/img/bankimg.png">
+      <span class="" style="font-size: 16px;font-weight: bold;line-height: 43px">建设银行</span>
+      <el-button type="primary" plain class="pull-right" size="mini">编辑</el-button>
+    </div>
+    <div class="bank-card-detail-wrapper">
+      <div class="bank-card-detail">
+        <div class="bank-card-detail-info">张晓楠</div>
+        <div class="bank-card-detail-info">********************5656</div>
+      </div>
+    </div>
+  </div>
+
+</template>
+
+<script>
+  export default {
+    name: "BankCard",
+    data(){
+      return {
+        addBankCard:false,
+
+      }
+    }
+  }
+</script>
+
+<style scoped lang="less">
+  .bank-card {
+    /*width:285px;*/
+    height:160px;
+    background:rgba(255,255,255,1);
+    box-shadow:0px 1px 6px 0px rgba(8,6,6,0.13);
+    .bank-card-detail-wrapper {
+      padding: 10px;
+      .bank-card-detail{
+        margin-bottom: 5px;
+        .bank-card-detail-title {
+          font-size: 14px;
+        }
+        .bank-card-detail-info {
+          margin-left: 43px;
+        }
+      }
+    }
+  }
+</style>

src/pages/UserCenter/ModifyPsw.vue

@@ -0,0 +1,57 @@
+<template>
+  <div>
+    <div class="right-modifyPsw">
+      <div class="right-modifyPsw-title">
+        <span style="font-size: 18px;font-weight: bold">修改密码</span>
+      </div>
+      <div style="background-color: rgba(233,239,249,1);padding: 10px">
+        <i class="el-icon-warning" style="color: rgba(0, 117, 203, 1);font-size: 18px"></i>
+        <span style="font-size: 16px">安全提醒：请妥善保管密码，众测服务平台人员不会以任何理由向您索取密码。</span>
+      </div>
+      <el-form ref="modifyForm" :model="modifyForm" label-width="80px" style="margin-top: 20px">
+        <el-form-item label="当前密码">
+          <el-input v-model="modifyForm.password"></el-input>
+        </el-form-item>
+        <el-form-item label="新密码">
+          <el-input v-model="modifyForm.newpassword"></el-input>
+        </el-form-item>
+        <el-form-item label="确认密码">
+          <el-input v-model="modifyForm.password"></el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary">确认修改</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+  </div>
+</template>
+
+<script>
+
+  export default {
+    name: "ModifyPsw",
+    data(){
+      return {
+        modifyForm: {
+          password:'',
+          newpassword: '',
+          repassword:'',
+        },
+      }
+    }
+  }
+</script>
+
+<style scoped lang="less">
+  .right-modifyPsw {
+    padding: 20px;
+    background: rgba(255, 255, 255, 1);
+    box-shadow: 0px 1px 6px 0px rgba(8, 6, 6, 0.13);
+
+    .right-modifyPsw-title {
+      padding: 10px;
+      border-bottom: 1px solid #ccc;
+      margin-bottom: 20px;
+    }
+  }
+</style>

src/pages/UserCenter/MyBankCard.vue

@@ -0,0 +1,86 @@
+<template>
+  <div>
+    <div class="right-qualification">
+      <div class="right-qualification-title">
+        <span style="font-size: 18px;font-weight: bold">我的银行卡</span>
+        <el-button type="primary" size="mini" class="pull-right" @click="addBankCard = true">添加</el-button>
+      </div>
+      <el-row :gutter="15" style="margin-bottom: 15px">
+        <el-col :span="8">
+          <BankCard></BankCard>
+        </el-col>
+        <el-col :span="8">
+          <BankCard></BankCard>
+        </el-col>
+        <el-col :span="8">
+          <BankCard></BankCard>
+        </el-col>
+      </el-row>
+    </div>
+    <el-dialog
+      title="新增银行卡"
+      :visible.sync="addBankCard"
+      width="30%"
+    >
+      <el-form ref="bankCardForm" :model="bankCardForm" label-width="80px">
+        <el-form-item label="持卡人">
+          <el-input v-model="bankCardForm.username"></el-input>
+        </el-form-item>
+        <el-form-item label="卡号">
+          <el-input v-model="bankCardForm.cardNumber"></el-input>
+        </el-form-item>
+      </el-form>
+      <div>
+        银行卡绑定成功后，您将享受以下服务：
+      </div>
+      <div>①可以申请平台的收益</div>
+      <div>②可以申请平台的收益</div>
+      <div>③可以申请平台的收益</div>
+      <span slot="footer" class="dialog-footer">
+    <el-button @click="addBankCard = false">取 消</el-button>
+    <el-button type="primary" @click="addBankCard = false">确认添加</el-button>
+  </span>
+    </el-dialog>
+  </div>
+
+</template>
+
+<script>
+  import BankCard from './BankCard'
+  export default {
+    name: "MyBankCard",
+    components:{
+      BankCard
+    },
+    data(){
+      return {
+        addBankCard: false,
+        form: {
+          name: '',
+          number:'',
+          institution:'',
+          date:'',
+          isPublic:''
+        },
+        bankCardForm:{
+          username:'',
+          cardNumber:''
+        }
+      }
+    }
+  }
+</script>
+
+<style scoped lang="less">
+  .right-qualification {
+    padding: 20px;
+    background: rgba(255, 255, 255, 1);
+    box-shadow: 0px 1px 6px 0px rgba(8, 6, 6, 0.13);
+
+    .right-qualification-title {
+      padding: 10px;
+      border-bottom: 1px solid #ccc;
+      margin-bottom: 20px;
+    }
+  }
+</style>

src/pages/UserCenter/MyQualification.vue

@@ -0,0 +1,88 @@
+<template>
+  <div>
+    <div class="right-qualification">
+      <div class="right-qualification-title">
+        <span style="font-size: 18px;font-weight: bold">我的资质</span>
+        <el-button type="primary" size="mini" class="pull-right" @click="addQualification = true">添加</el-button>
+      </div>
+      <el-row :gutter="15" style="margin-bottom: 15px">
+        <el-col :span="8">
+          <QualificationCard></QualificationCard>
+        </el-col>
+        <el-col :span="8">
+          <QualificationCard></QualificationCard>
+        </el-col>
+        <el-col :span="8">
+          <QualificationCard></QualificationCard>
+        </el-col>
+      </el-row>
+    </div>
+    <el-dialog
+      title="新增资质"
+      :visible.sync="addQualification"
+      width="30%"
+    >
+      <el-form ref="form" :model="form" label-width="80px">
+        <el-form-item label="证书名称">
+          <el-input v-model="form.name"></el-input>
+        </el-form-item>
+        <el-form-item label="证书编号">
+          <el-input v-model="form.number"></el-input>
+        </el-form-item>
+        <el-form-item label="发证机构">
+          <el-input v-model="form.institution"></el-input>
+        </el-form-item>
+        <el-form-item label="发证时间">
+          <el-input v-model="form.date"></el-input>
+        </el-form-item>
+        <el-form-item label="是否公开">
+          <el-radio-group v-model="form.isPublic">
+            <el-radio label="公开"></el-radio>
+            <el-radio label="不公开"></el-radio>
+          </el-radio-group>
+        </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+    <el-button @click="addQualification = false">取 消</el-button>
+    <el-button type="primary" @click="addQualification = false">确 定</el-button>
+  </span>
+    </el-dialog>
+  </div>
+
+</template>
+
+<script>
+  import QualificationCard from './QualificationCard'
+  export default {
+    name: "MyQualification",
+    components:{
+      QualificationCard
+    },
+    data(){
+      return {
+        addQualification: false,
+        form: {
+          name: '',
+          number:'',
+          institution:'',
+          date:'',
+          isPublic:''
+        }
+      }
+    }
+  }
+</script>
+
+<style scoped lang="less">
+  .right-qualification {
+    padding: 20px;
+    background: rgba(255, 255, 255, 1);
+    box-shadow: 0px 1px 6px 0px rgba(8, 6, 6, 0.13);
+
+  .right-qualification-title {
+    padding: 10px;
+    border-bottom: 1px solid #ccc;
+    margin-bottom: 20px;
+  }
+  }
+</style>

src/pages/UserCenter/PhoneBinding.vue

@@ -0,0 +1,64 @@
+<template>
+  <div>
+    <div class="right-modifyPsw">
+      <div class="right-modifyPsw-title">
+        <span style="font-size: 18px;font-weight: bold">手机绑定</span>
+      </div>
+      <el-steps :active="active" process-status="finish" style="margin-bottom: 20px">
+        <el-step title="验证原手机"></el-step>
+        <el-step title="绑定新手机"></el-step>
+        <el-step title="完成绑定"></el-step>
+      </el-steps>
+
+      <el-form  label-width="80px" :model="formLabelAlign" v-if="active===0">
+        <el-form-item label="原手机号">
+          <span v-model="phoneBindingForm.phone">135****6699</span>
+        </el-form-item>
+        <el-form-item label="验证码">
+          <span v-model="phoneBindingForm.phone">135****6699</span>
+        </el-form-item>
+      </el-form>
+
+      <el-form  label-width="80px" :model="formLabelAlign" v-if="active===1">
+        <el-form-item label="新手机号">
+          <el-input v-model="phoneBindingForm.phone"></el-input>
+        </el-form-item>
+        <el-form-item label="验证码">
+          <span v-model="phoneBindingForm.phone">135****6699</span>
+        </el-form-item>
+      </el-form>
+    </div>
+  </div>
+</template>
+
+<script>
+
+  export default {
+    name: "PhoneBinding",
+    data() {
+      return {
+        active: 1,
+        phoneBindingForm:{
+          phone:''
+        }
+      }
+    },
+    methods: {
+
+    }
+  }
+</script>
+
+<style scoped lang="less">
+  .right-modifyPsw {
+    padding: 20px;
+    background: rgba(255, 255, 255, 1);
+    box-shadow: 0px 1px 6px 0px rgba(8, 6, 6, 0.13);
+
+    .right-modifyPsw-title {
+      padding: 10px;
+      border-bottom: 1px solid #ccc;
+      margin-bottom: 20px;
+    }
+  }
+</style>

src/pages/UserCenter/QualificationCard.vue

@@ -0,0 +1,51 @@
+<template>
+  <div class="qualification-card">
+    <div class="qualification-card-title" style="padding: 10px;height:28px">
+      <span class="pull-left" style="font-size: 16px;font-weight: bold;line-height: 28px">信息安全工程师</span>
+      <el-button type="primary" plain class="pull-right" size="mini">编辑</el-button>
+    </div>
+    <div class="qualification-card-detail-wrapper">
+      <div class="qualification-card-detail">
+        <div class="qualification-card-detail-title">证书编号：</div>
+        <div class="qualification-card-detail-info">314020191144011401528</div>
+      </div>
+      <div class="qualification-card-detail">
+        <div class="qualification-card-detail-title">发证机关：</div>
+        <div class="qualification-card-detail-info">314020191144011401528</div>
+      </div>
+      <div class="qualification-card-detail">
+        <div class="qualification-card-detail-title">发证时间：</div>
+        <div class="qualification-card-detail-info">2020-06-30</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: "QualifucationCard"
+  }
+</script>
+
+<style scoped lang="less">
+.qualification-card {
+  /*width:285px;*/
+  height:160px;
+  background:rgba(255,255,255,1);
+  box-shadow:0px 1px 6px 0px rgba(8,6,6,0.13);
+  .qualification-card-detail-wrapper {
+    padding: 10px;
+    .qualification-card-detail{
+      display: flex;
+      margin-bottom: 5px;
+      .qualification-card-detail-title {
+        font-size: 14px;
+      }
+      .qualification-card-detail-info {
+        color: rgba(153, 153, 153, 1);
+        font-size: 14px;
+      }
+    }
+  }
+}
+</style>

src/pages/UserCenter/UserCenter.vue

@@ -0,0 +1,88 @@
+<template>
+  <div class="user-center container">
+    <el-row :gutter="20">
+      <el-col :span="5">
+        <div class="left-menu">
+          <div class="menu-block">
+            <div class="menu-block-title">
+              <img src="../../assets/img/user-info.png">个人资料
+            </div>
+            <div class="menu-item"><router-link to="/personal/mine">基本信息</router-link></div>
+            <div class="menu-item"><router-link to="/personal/qualification">我的资质</router-link></div>
+            <div class="menu-item"><router-link to="/personal/bankCard">我的银行卡</router-link></div>
+          </div>
+          <div class="menu-block">
+            <div class="menu-block-title">
+              <img src="../../assets/img/count-security.png">账号安全
+            </div>
+            <div class="menu-item"><router-link to="/personal/modifyPsw">修改登陆密码</router-link></div>
+            <div class="menu-item"><router-link to="/personal/phoneBinding">手机绑定</router-link></div>
+            <div class="menu-item">邮箱绑定</div>
+            <div class="menu-item">身份认证</div>
+          </div>
+          <div class="menu-block">
+            <div class="menu-block-title">
+              <img src="../../assets/img/project-manager.png">项目管理
+            </div>
+            <div class="menu-item">我的订单</div>
+          </div>
+        </div>
+      </el-col>
+      <el-col :span="19">
+        <router-view></router-view>
+      </el-col>
+    </el-row>
+
+  </div>
+</template>
+
+<script>
+  import QualificationCard from './qualification-card'
+
+  export default {
+    name: "UserCenter",
+    components: {
+      QualificationCard
+    },
+    data() {
+      return {
+
+      }
+    }
+  }
+</script>
+
+<style scoped lang="less">
+  .user-center {
+    margin-top: 15px;
+
+    .left-menu {
+      /*height:827px;*/
+      background: rgba(255, 255, 255, 1);
+      box-shadow: 0px 1px 6px 0px rgba(8, 6, 6, 0.13);
+      padding: 20px 30px;
+
+      .menu-block {
+        margin-bottom: 20px;
+
+        .menu-block-title {
+          font-size: 18px;
+          font-family: Source Han Sans CN;
+          font-weight: bold;
+
+          img {
+            margin-right: 5px;
+          }
+        }
+
+        .menu-item {
+          font-size: 16px;
+          font-family: Source Han Sans CN;
+          font-weight: 400;
+          margin: 3px 0 3px 28px;
+        }
+      }
+    }
+
+  }
+</style>

src/router/index.js

@@ -325,7 +325,41 @@ export default new Router({
         requireAuth: false,
       }
     },
-
+    {
+      path: '/personal',
+      name: 'UserCenter',
+      component: resolve => require(['@/pages/UserCenter/UserCenter.vue'], resolve),
+      meta: {
+        title: '',
+        requireAuth: false,
+      },
+      children: [
+        {
+          path: '/personal/mine',
+          component: resolve => require(['@/pages/UserCenter/Mine.vue'], resolve),
+        },
+        {
+          path: '/personal/qualification',
+          component: resolve => require(['@/pages/UserCenter/MyQualification.vue'], resolve),
+        },
+        {
+          path: '/personal/bankCard',
+          component: resolve => require(['@/pages/UserCenter/MyBankCard.vue'], resolve),
+        },
+        {
+          path: '/personal/modifyPsw',
+          component: resolve => require(['@/pages/UserCenter/ModifyPsw.vue'], resolve),
+        },
+        {
+          path: '/personal/phoneBinding',
+          component: resolve => require(['@/pages/UserCenter/PhoneBinding.vue'], resolve),
+        },
+        {
+          path: '',
+          redirect: '/personal/mine'
+        }
+      ]
+    },
   ]
 })
 const originalPush = Router.prototype.push