添加绑定银行卡和收获地址功能

src/api/testdata.js

 import request from '@/utils/requestTestdata'
+import requests from '@/utils/request'
 
 export function getAll(query) {
   return request({
@@ -28,3 +29,19 @@ export function getProvinceList() {
     method: 'get'
   })
 }
+// 绑定银行卡接口(2021-10-25)
+export function bindingCard(data) {
+  return requests({
+    url: '/bind/card',
+    method: 'post',
+    data
+  })
+}
+// 绑定银行卡接口(2021-10-25)
+export function bindingAddress(data) {
+  return requests({
+    url: '/yxm/bind/address',
+    method: 'post',
+    data
+  })
+}

src/router/index.js

@@ -55,7 +55,8 @@ import CreateEnv from '../views/docker/CreateEnv'
 // 新添加Confluence数据列表页(2021-09-29)
 import DataIndex from '../views/confluence/DataIndex'
 import DataList from '../views/confluence/DataList'
-
+// 新添加绑定收货地址页面(2021-10-26)
+import BindAddress from '../views/effect/BindAddress'
 const originalPush = Router.prototype.push
 Router.prototype.push = function push(location) {
   return originalPush.call(this, location).catch(err => err)
@@ -295,6 +296,12 @@ const router = new Router({
           path: '/confluence/dataList',
           name: '数据列表',
           component: DataList
+        },
+        // 绑定收获地址表页(2021-10-26)
+        {
+          path: '/effect/BindAddress',
+          name: '数据列表',
+          component: BindAddress
         }
       ]
     }

src/views/Home.vue

@@ -118,7 +118,8 @@ export default {
     },
     saveNavState(curPath) {
       this.activePath = curPath
-      window.sessionStorage.setItem('activePath', curPath)
+      // window.sessionStorage.setItem('activePath', curPath)
+      window.localStorage.setItem('activePath', curPath)
     },
     gotoMain() {
       if (this.$route.path !== '/main') {

src/views/effect/BindAddress.vue

+<template>
+  <div>
+    <el-form ref="bindAddressRef" :rules="rules" :model="bindAddressForm" label-width="90px">
+      <el-form-item label="环境名称:" prop="namespace" style="width:400px">
+        <el-select v-model="bindAddressForm.namespace" placeholder="请选择环境" style="width:310px">
+          <el-option v-for="item in namespaceList" :key="item.name" :label="item.name" :value="item.name">
+          </el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="版本号:" prop="phoneNo" placeholder="请输入版本号" style="width:400px">
+        <el-input v-model="bindAddressForm.version"></el-input>
+      </el-form-item>
+      <el-form-item label="手机号:" prop="phoneNo" placeholder="请输入手机号" style="width:400px">
+        <el-input v-model="bindAddressForm.phoneNo"></el-input>
+      </el-form-item>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button type="primary" @click="bindAddress">确 定</el-button>
+    </span>
+  </div>
+</template>
+<script>
+import { bindingAddress } from '@/api/testdata'
+import { getNamespaceList } from '@/api/k8s'
+export default {
+  data() {
+    return {
+      namespaceList: [],
+      bindAddressForm: {
+        namespace: window.sessionStorage.getItem('env')
+      },
+      rules: {
+        namespace: [
+          {
+            required: true,
+            message: '环境名称不能为空！',
+            trigger: 'blur'
+          }
+        ],
+        version: [
+          {
+            required: true,
+            message: '版本号不能为空！',
+            trigger: 'blur'
+          }
+        ],
+        phoneNo: [
+          {
+            required: true,
+            message: '电话号码不能为空！',
+            trigger: 'blur'
+          }
+        ]
+      }
+    }
+  },
+  created() {
+    this.getNamespaceList()
+  },
+  methods: {
+    getNamespaceList() {
+      getNamespaceList({ env: 'all' }).then((resp) => {
+        this.namespaceList = resp.data.data
+      })
+    },
+    bindAddress() {
+      var formData = new FormData()
+      formData.set('namespace', this.bindAddressForm.namespace)
+      formData.set('version', this.bindAddressForm.version)
+      formData.set('phoneNo', this.bindAddressForm.phoneNo)
+      this.$refs.bindAddressRef.validate((valid) => {
+        if (!valid) {
+          return false
+        } else {
+          bindingAddress(formData).then((resp) => {
+            if (resp.data.success === 'true') {
+              this.$message.success('地址绑定成功！')
+              this.bindAddressForm.namespace = ''
+              this.bindAddressForm.version = ''
+              this.bindAddressForm.phoneNo = ''
+            } else {
+              this.$message.error(resp.data.msg)
+            }
+          })
+        }
+      })
+    }
+  }
+}
+</script>

src/views/effect/DataGenerator.vue

@@ -58,13 +58,72 @@
           <span>{{ scope.row.bankType }}</span>
         </template>
       </el-table-column>
+      <el-table-column label="操作">
+        <slot slot-scope="scope">
+          <el-button type="primary" icon="el-icon-key" @click="bandingCardData(scope.row)">绑卡</el-button>
+          <el-button type="primary" icon="el-icon-key" @click="bandingAddress(scope.row)">绑定收货地址</el-button>
+        </slot>
+      </el-table-column>
     </el-table>
+    <!-- 绑卡弹框 -->
+    <el-dialog title="绑定银行卡" :visible.sync="DialogVisible" width="40%" @close="closeAddDialog">
+      <el-form ref="bindCardFormRef" :rules="rules" :model="bindCardForm" label-width="90px">
+        <el-form-item label="环境名称:" prop="namespace">
+          <el-select v-model="bindCardForm.namespace" placeholder="请选择环境" style="width:310px">
+            <el-option v-for="item in namespaceList" :key="item.name" :label="item.name" :value="item.name">
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="手机号:" prop="phoneNo" style="width:400px">
+          <el-input v-model="bindCardForm.phoneNo"></el-input>
+        </el-form-item>
+        <el-form-item label="卡 号:" style="width:400px">
+          <el-input v-model="bindCardForm.cardNo" :disabled=true></el-input>
+        </el-form-item>
+        <el-form-item label="银行Code:" style="width:400px">
+          <el-input v-model="bindCardForm.bankCode" :disabled=true></el-input>
+        </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="DialogVisible=false">取 消</el-button>
+        <el-button type="primary" @click="bindCard">确 定</el-button>
+      </span>
+    </el-dialog>
+
+    <!-- 绑定收获地址 -->
+    <el-dialog title="绑定收货地址" :visible.sync="DialogVisibleAddress" width="40%" @close="closeAddDialog">
+      <el-form ref="bindAddressRef" :rules="rules" :model="bindAddressForm" label-width="90px">
+        <el-form-item label="环境名称:" prop="namespace" style="width:400px">
+          <el-select v-model="bindAddressForm.namespace" placeholder="请选择环境" style="width:310px">
+            <el-option v-for="item in namespaceList" :key="item.name" :label="item.name" :value="item.name">
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="版本号:" prop="version" placeholder="请输入版本号" style="width:400px">
+          <el-input v-model="bindAddressForm.version"></el-input>
+        </el-form-item>
+        <el-form-item label="手机号:" prop="phoneNo" placeholder="请输入手机号" style="width:400px">
+          <el-input v-model="bindAddressForm.phoneNo"></el-input>
+        </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="DialogVisibleAdd=false">取 消</el-button>
+        <el-button type="primary" @click="bindAddress">确 定</el-button>
+      </span>
 
+    </el-dialog>
   </div>
 </template>
 
 <script>
-import { getAll, getBankList, getProvinceList } from '@/api/testdata'
+import {
+  getAll,
+  getBankList,
+  getProvinceList,
+  bindingCard,
+  bindingAddress
+} from '@/api/testdata'
+import { getNamespaceList } from '@/api/k8s'
 
 export default {
   data() {
@@ -76,7 +135,39 @@ export default {
       peopleInfo: null,
       count: 5,
       province: null,
-      bank: null
+      bank: null,
+      DialogVisible: false,
+      bindCardForm: {
+        namespace: window.sessionStorage.getItem('env')
+      },
+      namespaceList: [],
+      rules: {
+        namespace: [
+          {
+            required: true,
+            message: '环境名称不能为空！',
+            trigger: 'blur'
+          }
+        ],
+        phoneNo: [
+          {
+            required: true,
+            message: '手机号不能为空！',
+            trigger: 'blur'
+          }
+        ],
+        version: [
+          {
+            required: true,
+            message: '版本号不能为空！',
+            trigger: 'blur'
+          }
+        ]
+      },
+      bindAddressForm: {
+        namespace: window.sessionStorage.getItem('env')
+      },
+      DialogVisibleAddress: false
     }
   },
   created() {
@@ -114,6 +205,67 @@ export default {
           type: 'warning'
         })
       }
+    },
+    // 环境列表
+    getNamespaceList() {
+      getNamespaceList({ env: 'all' }).then((resp) => {
+        this.namespaceList = resp.data.data
+      })
+    },
+    bandingCardData(row) {
+      var bankCode = row.bankType.split(' ')
+      var newBankCode = bankCode[1]
+      this.DialogVisible = true
+      this.getNamespaceList()
+      this.bindCardForm.cardNo = row.bankNo
+      this.bindCardForm.bankCode = newBankCode
+    },
+    // 绑定银行卡
+    bindCard() {
+      this.$refs.bindCardFormRef.validate((valid) => {
+        if (!valid) {
+          return false
+        } else {
+          bindingCard(this.bindCardForm).then((resp) => {
+            if (resp.data.success === 'true') {
+              this.DialogVisibleAddress = false
+              this.getAll()
+              this.$message.success('绑卡成功！')
+            } else {
+              this.$message.error(resp.data.msg)
+            }
+          })
+        }
+      })
+    },
+    closeAddDialog() {
+      this.$refs.bindCardFormRef.resetFields()
+    },
+    // 绑定收货地址
+    bandingAddress() {
+      this.DialogVisibleAddress = true
+    },
+    // 保存收货地址
+    bindAddress() {
+      var formData = new FormData()
+      formData.set('namespace', this.bindAddressForm.namespace)
+      formData.set('version', this.bindAddressForm.version)
+      formData.set('phoneNo', this.bindAddressForm.phoneNo)
+      this.$refs.bindAddressRef.validate((valid) => {
+        if (!valid) {
+          return false
+        } else {
+          bindingAddress(formData).then((resp) => {
+            if (resp.data.success === true) {
+              this.$message.success('地址绑定成功！')
+              this.getAll()
+              this.DialogVisibleAdd = false
+            } else {
+              this.$message.error(resp.data.msg)
+            }
+          })
+        }
+      })
     }
   }
 }

src/views/layout/leftAside/menu.json

@@ -182,6 +182,12 @@
           "title": "数据生成器",
           "icon": "iconfont icon-yinhang",
           "path": "/effect/testdata"
+        },
+        {
+          "id": 5,
+          "title": "绑定收获地址",
+          "icon": "iconfont icon-yinhang",
+          "path": "/effect/BindAddress"
         }
       ]
     },