Merge branch 'feature-2.0' of ssh://git.mooctest.com:1022/crowd-2019/crowd-test-service-front into feature-2.0

package.json

@@ -20,11 +20,13 @@
     "mockjs": "^1.0.1-beta3",
     "moment": "^2.27.0",
     "querystring": "^0.2.0",
+    "v-region": "^2.2.2",
     "vue": "^2.5.2",
     "vue-router": "^3.0.1",
     "vue-waterfall": "^1.0.6",
     "vue-waterfall-easy": "^2.4.4",
-    "vuex": "^3.1.1"
+    "vuex": "^3.1.1",
+    "webpack-dev-server": "^2.11.5"
   },
   "devDependencies": {
     "autoprefixer": "^7.1.2",

src/components/commons/Header2.0.vue

@@ -76,7 +76,7 @@
                 </a>
               </router-link>
             </li>
-            &nbsp;&nbsp;&nbsp;<span v-if="isLogin">&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;</span>
+            <span v-if="isLogin">&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;</span>
             <li>
               <a @click="gotoHome" style="cursor: pointer">首页</a>
             </li>

src/main.js

@@ -9,6 +9,7 @@ import {getAuthUrls, getCurrentUser, getRolesPermissions, storageGet, storageSav
 import {notify} from '@/constants/index'
 import store from './store'
 import moment from 'moment'
+import vRegion from 'v-region'
 import {
   Avatar,
   Badge,
@@ -189,7 +190,7 @@ Vue.use(Popover)
 Vue.use(Progress)
 Vue.use(Steps)
 Vue.use(Step)
-
+Vue.use(vRegion)
 Vue.prototype.$msgbox = MessageBox
 Vue.prototype.$alert = MessageBox.alert
 Vue.prototype.$confirm = MessageBox.confirm

src/pages/DetailPage/UserDetail.vue

@@ -104,6 +104,5 @@
 
   .el-form-item {
     max-height: 120px !important;
-    overflow: auto;
   }
 </style>

src/pages/UserCenter/BankCard.vue

@@ -1,28 +1,72 @@
 <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>
+    <el-row :gutter="15">
+      <el-col :span="8" v-for="item in bankCardVOList" :key="item.id">
+        <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">{{item.name}}</span>
+            <el-button type="primary" plain class="pull-right" size="mini" @click="requestUntieBankCard(item)">解绑
+            </el-button>
+          </div>
+          <div class="bank-card-detail-wrapper">
+            <div class="bank-card-detail">
+              <div class="bank-card-detail-info">{{item.user}}</div>
+              <div class="bank-card-detail-info">{{item.number}}</div>
+            </div>
+          </div>
+        </div>
+      </el-col>
+    </el-row>
+    <el-dialog
+      title="提示"
+      :visible.sync="untieBankCard"
+      width="30%"
+    >
+      <span>确定解绑{{nowCard.name}},卡号为：{{nowCard.number}}的银行卡吗？</span>
+      <span slot="footer" class="dialog-footer">
+    <el-button @click="untieBankCard = false">取 消</el-button>
+    <el-button type="primary" @click="handleUntieBankCard">确 定</el-button>
+  </span>
+    </el-dialog>
+
   </div>
 
 </template>
 
 <script>
+  import {storageGet} from '@/js/index'
+  import Http from '@/js/http.js'
+  import BankCard from './BankCard'
+
   export default {
     name: "BankCard",
-    data(){
+    props: ['bankCardVOList'],
+    data() {
       return {
-        addBankCard:false,
-
+        untieBankCard: false,
+        nowCard: {},
+        user: {}
       }
+    },
+    methods: {
+      setUserInfo() {
+        this.user = storageGet('user') && storageGet('user').userVO;
+      },
+      requestUntieBankCard(item) {
+        this.untieBankCard = true;
+        this.nowCard = item;
+      },
+      handleUntieBankCard() {
+        Http.delete(`/api/personal/deletebankcard/${this.nowCard.id}/${this.user.id}`,{}).then((res) => {
+          //调用父组件的loadData方法
+          this.$emit('loadData');
+          this.untieBankCard = false
+        })
+      },
+    },
+    mounted() {
+      this.setUserInfo();
     }
   }
 </script>
@@ -30,16 +74,21 @@
 <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);
+    height: 160px;
+    background: rgba(255, 255, 255, 1);
+    box-shadow: 0px 1px 6px 0px rgba(8, 6, 6, 0.13);
+    margin-bottom: 10px;
+
     .bank-card-detail-wrapper {
       padding: 10px;
-      .bank-card-detail{
+
+      .bank-card-detail {
         margin-bottom: 5px;
+
         .bank-card-detail-title {
           font-size: 14px;
         }
+
         .bank-card-detail-info {
           margin-left: 43px;
         }

src/pages/UserCenter/MyBankCard.vue

@@ -5,17 +5,9 @@
         <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 style="margin-bottom: 15px">
+        <BankCard :bankCardVOList="bankCardVOList" @loadData="loadData"></BankCard>
+      </div>
     </div>
     <el-dialog
       title="新增银行卡"
@@ -24,10 +16,10 @@
     >
       <el-form ref="bankCardForm" :model="bankCardForm" label-width="80px">
         <el-form-item label="持卡人">
-          <el-input v-model="bankCardForm.username"></el-input>
+          <el-input v-model="bankCardForm.user"></el-input>
         </el-form-item>
         <el-form-item label="卡号">
-          <el-input v-model="bankCardForm.cardNumber"></el-input>
+          <el-input v-model="bankCardForm.number"></el-input>
         </el-form-item>
       </el-form>
       <div>
@@ -38,14 +30,17 @@
       <div>③可以申请平台的收益</div>
       <span slot="footer" class="dialog-footer">
     <el-button @click="addBankCard = false">取 消</el-button>
-    <el-button type="primary" @click="addBankCard = false">确认添加</el-button>
+    <el-button type="primary" @click="handleAddBankCard">确认添加</el-button>
   </span>
     </el-dialog>
+
   </div>
 
 </template>
 
 <script>
+  import {storageGet} from '@/js/index'
+  import Http from '@/js/http.js'
   import BankCard from './BankCard'
   export default {
     name: "MyBankCard",
@@ -55,6 +50,7 @@
     data(){
       return {
         addBankCard: false,
+        UntieBankCard:false,
         form: {
           name: '',
           number:'',
@@ -63,10 +59,33 @@
           isPublic:''
         },
         bankCardForm:{
-          username:'',
-          cardNumber:''
-        }
+          user:'',
+          number:''
+        },
+        user:{},
+        bankCardVOList:[]
       }
+    },
+    methods:{
+      loadData() {
+        Http.get(`/api/personal/displaybankcard/${this.user.id}`).then((res) => {
+          this.bankCardVOList = res.bankCardVOList;
+        })
+      },
+      setUserInfo(){
+        this.user = storageGet('user') && storageGet('user').userVO;
+      },
+      handleAddBankCard(){
+        Http.post(`/api/personal/addbankcard/${this.user.id}`,this.bankCardForm).then(res=>{
+          console.log(res);
+        })
+        this.addBankCard = false
+        this.loadData();
+      }
+    },
+    mounted() {
+      this.setUserInfo();
+      this.loadData();
     }
   }
 </script>

src/pages/UserCenter/MyQualification.vue

@@ -5,17 +5,9 @@
         <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 style="margin-bottom: 15px">
+        <QualificationCard :qualificationVOList="qualificationVOList"></QualificationCard>
+      </div>
     </div>
     <el-dialog
       title="新增资质"
@@ -30,21 +22,21 @@
           <el-input v-model="form.number"></el-input>
         </el-form-item>
         <el-form-item label="发证机构">
-          <el-input v-model="form.institution"></el-input>
+          <el-input v-model="form.licensingAuthority"></el-input>
         </el-form-item>
         <el-form-item label="发证时间">
-          <el-input v-model="form.date"></el-input>
+          <el-input v-model="form.time"></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 label="1">公开</el-radio>
+            <el-radio label="0">不公开</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>
+    <el-button type="primary" @click="handleAddQualification">确 定</el-button>
   </span>
     </el-dialog>
   </div>
@@ -53,6 +45,9 @@
 
 <script>
   import QualificationCard from './QualificationCard'
+  import {storageGet} from '@/js/index'
+  import Http from '@/js/http.js'
+
   export default {
     name: "MyQualification",
     components:{
@@ -64,11 +59,34 @@
         form: {
           name: '',
           number:'',
-          institution:'',
-          date:'',
+          licensingAuthority:'',
+          time:'',
           isPublic:''
-        }
+        },
+        user:{},
+        qualificationVOList:[]
       }
+    },
+    methods:{
+      loadData(){
+        Http.get(`/api/personal/displayqualification/${this.user.id}`).then((res)=>{
+          this.qualificationVOList = res.qualificationVOList;
+        })
+      },
+      setUserInfo(){
+        this.user = storageGet('user') && storageGet('user').userVO;
+      },
+      handleAddQualification(){
+        Http.post(`/api/personal/addqualification/${this.user.id}`,this.form).then(res=>{
+          console.log(res);
+        })
+        this.addQualification = false;
+        this.loadData();
+      }
+    },
+    mounted() {
+      this.setUserInfo();
+      this.loadData()
     }
   }
 </script>

src/pages/UserCenter/QualificationCard.vue

@@ -1,29 +1,34 @@
 <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>
+  <el-row :gutter="15">
+    <el-col :span="8" v-for="item in qualificationVOList" :key="item.id">
+      <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">{{item.name}}</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">{{item.number}}</div>
+          </div>
+          <div class="qualification-card-detail">
+            <div class="qualification-card-detail-title">发证机关：</div>
+            <div class="qualification-card-detail-info">{{item.licensingAuthority}}</div>
+          </div>
+          <div class="qualification-card-detail">
+            <div class="qualification-card-detail-title">发证时间：</div>
+            <div class="qualification-card-detail-info">{{item.time}}</div>
+          </div>
+        </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>
+    </el-col>
+  </el-row>
 </template>
 
 <script>
   export default {
-    name: "QualifucationCard"
+    name: "QualifucationCard",
+    props:['qualificationVOList']
   }
 </script>
 
@@ -33,17 +38,18 @@
   height:160px;
   background:rgba(255,255,255,1);
   box-shadow:0px 1px 6px 0px rgba(8,6,6,0.13);
+  margin-bottom: 10px;
   .qualification-card-detail-wrapper {
     padding: 10px;
     .qualification-card-detail{
       display: flex;
       margin-bottom: 5px;
       .qualification-card-detail-title {
-        font-size: 14px;
+        font-size: 13px;
       }
       .qualification-card-detail-info {
         color: rgba(153, 153, 153, 1);
-        font-size: 14px;
+        font-size: 13px;
       }
     }
   }

src/style/main.scss

@@ -360,3 +360,12 @@ a {
   height: 178px;
   display: block;
 }
+.rg-select {
+  padding:0 !important;
+  width: 110px !important;
+  height: 38px !important;
+}
+.rg-select__content {
+  padding: 0 8px !important;
+  height: 38px !important;
+}