add:我的银行卡

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

@@ -3,19 +3,11 @@
     <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>
+        <el-button type="primary" size="mini" class="pull-right" @click="addBankCard = true">添加</el-button>
+      </div>
+      <div style="margin-bottom: 15px">
+        <BankCard :bankCardVOList="bankCardVOList" @loadData="loadData"></BankCard>
       </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="新增银行卡"
@@ -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,9 +30,10 @@
       <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>
@@ -57,6 +50,7 @@
     data(){
       return {
         addBankCard: false,
+        UntieBankCard:false,
         form: {
           name: '',
           number:'',
@@ -65,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>