.

src/pages/addBankCard/index.jsx

@@ -1,16 +1,60 @@
+import React, { useState } from "react"
 import Taro from "@tarojs/taro"
-import { View, Input } from "@tarojs/components"
+import { View, Input, Picker } from "@tarojs/components"
 import withLayout from '@/layouts'
 import CustomNav from "@/components/CustomNav"
 import MyButton from "@/components/MyButton"
+import { useModel } from "@/store"
+import { addBank } from '@/services/bank'
 import './style.less'
-import { useState } from "react"
+
+const bankList = [
+  {
+    key: 1,
+    value: '中国建设银行'
+  },
+  {
+    key: 2,
+    value: '中国农业银行'
+  },
+  {
+    key: 3,
+    value: '中国银行'
+  },
+  // {
+  //   key: 4,
+  //   value: '中国工商银行'
+  // },
+  // {
+  //   key: 5,
+  //   value: '中国招商银行'
+  // },
+  // {
+  //   key: 6,
+  //   value: '中国交通银行'
+  // },
+  // {
+  //   key: 7,
+  //   value: '中国邮政银行'
+  // },
+]
+const bankContentList = ['中国建设银行', '中国农业银行', '中国银行']
 
 export default withLayout((props) => {
+  const { person } = useModel('person')
   const [name, setName] = useState()
   const [bankCode, setBankCode] = useState()
-  const [bankAddress, setBankAddress] = useState()
+  const [bankAddress, setBankAddress] = useState(bankContentList[0])
   const [phone, setPhone] = useState()
+  const [index, setIndex] = useState(0)
+  const [loading, setLoading] = useState(false)
+
+
+  const onChange = e => {
+    console.log(bankList[e.detail.value])
+    setBankAddress(bankContentList[e.detail.value])
+    setIndex(e.detail.value)
+  }
   const rulePhone = (val) => {
     if (!/^1[0-9]{10}$/.test(val)) {
       Taro.showToast({
@@ -33,19 +77,24 @@ export default withLayout((props) => {
   }
   const onClick = () => {
     if (name) {
-      if (bankAddress) {
-        if (ruleCard(bankCode) && rulePhone(phone)) {
+      if (ruleCard(bankCode) && rulePhone(phone)) {
+        setLoading(true)
+        addBank({ cardNo: bankCode, personId: person.personId, ownerBank: bankAddress, owerName: name, phone: phone }).then(res => {
           Taro.showToast({
             title: '添加成功',
             icon: 'none',
             duration: 2000
           })
-          Taro.navigateBack({ delta: 1 })
-        }
-      } else {
-        Taro.showToast({
-          title: '请输入开户行',
-          icon: 'none',
+          setTimeout(() => {
+            Taro.navigateBack({ delta: 1 })
+          }, 1000)
+        }).catch(err => {
+          Taro.showToast({
+            title: err.message,
+            icon: 'none',
+            duration: 1000
+          })
+          setLoading(false)
         })
       }
     } else {
@@ -65,28 +114,30 @@ export default withLayout((props) => {
         <View className='addCardCell'>
           <View className='cellLeft'>
             <View className='label'>持卡人姓名</View>：</View>
-          <Input type='text' value={name} onInput={(e) => {()=> setName(e.detail.value) }} placeholder='请输入真实姓名' />
+          <Input type='text' value={name} onInput={(e) => setName(e.detail.value)} placeholder='请输入真实姓名' />
         </View>
         <View className='addCardCell'>
           <View className='cellLeft'>
             <View className='label'>卡号</View>：
           </View>
-          <Input type='number' maxlength='19' value={bankCode} onInput={(e) => { ()=>setBankCode(e.detail.value) }} placeholder='请输入有效卡号' />
+          <Input type='number' maxlength='19' value={bankCode} onInput={(e) => setBankCode(e.detail.value)} placeholder='请输入有效卡号' />
         </View>
         <View className='addCardCell'>
           <View className='cellLeft'>
             <View className='label'>开户行</View>：
           </View>
-          <Input type='text' value={bankAddress} onInput={(e) => { ()=>setBankAddress(e.detail.value) }} />
+          <Picker mode='selector' style={{ width: '100%' }} range={bankContentList} onChange={onChange}>
+            {bankContentList[index]}
+          </Picker>
         </View>
         <View className='addCardCell'>
           <View className='cellLeft'>
             <View className='label'>预留手机号</View>：
           </View>
-          <Input type='number' maxlength='11' value={phone} onInput={(e) => { ()=>setPhone(e.detail.value) }} placeholder='请输入银行卡预留手机号' />
+          <Input type='number' maxlength='11' value={phone} onInput={(e) => setPhone(e.detail.value)} placeholder='请输入银行卡预留手机号' />
         </View>
         <View className='bottomBtn'>
-          <MyButton value='提现' onClick={onClick} />
+          <MyButton loading={loading} value='提现' onClick={onClick} />
         </View>
       </View>
     </View>

src/pages/bankCard/Card/index.jsx

@@ -9,13 +9,13 @@ export default (props) => {
   return (
     <View className='bankCard' >
       <Image src={
-        type === 'abc' ? ABCImg :
-          type === 'boc' ? BOCImg :
-            type === 'ccb' ? CCBImg : ''
+        type === '中国农业银行' ? ABCImg :
+          type === '中国银行' ? BOCImg :
+            type === '中国建设银行' ? CCBImg : ''
       } className='CardImg'
       />
       <View className='unBind' onClick={onChange}>解除绑定</View>
-      <View className='cardType'>信用卡</View>
+      <View className='cardType'>储蓄卡</View>
       <View className='cCode'>
         <Text className='codeText'>****</Text>
         <Text className='codeText'>****</Text>

src/pages/bankCard/index.jsx

@@ -1,34 +1,53 @@
-import Taro from "@tarojs/taro"
+import { useState, useEffect } from "react"
+import Taro, { useDidShow } from "@tarojs/taro"
 import { View, Image, ScrollView } from "@tarojs/components"
 import withLayout from '@/layouts'
+import NullCard from "@/components/NullCard";
 import CustomNav from "@/components/CustomNav"
+import { getBankList, deleteBank } from '@/services/bank'
 import addImg from '@/assets/bank/addBank.png'
 import BankCard from './Card'
 import './style.less'
 
+
 export default withLayout((props) => {
+  const [bankList, setBankList] = useState([])
+
   const unBind = (val) => {
     Taro.showModal({
       content: `确认解绑?`,
       success: function (res) {
         if (res.confirm) {
-          // deleteRoom(val.roomId).then(() => {
-          Taro.showToast({
-            title: '已经解除',
-            icon: 'none',
+          deleteBank(val).then(() => {
+            Taro.showToast({
+              title: '已经解除',
+              icon: 'none',
+            })
+            getList()
+          }).catch(err => {
+            Taro.showToast({
+              title: err.message,
+              icon: 'none',
+            })
           })
-          // getRoomList({ hotelId: hotel.hotelId }).then((vals) => {
-          //   setDetail(vals.records || [])
-          // })
-          // })
         }
       }
     })
-    console.log(val)
   }
   const addCard = () => {
     Taro.navigateTo({ url: '/pages/addBankCard/index' });
   }
+  useDidShow(() => {
+    getList()
+  })
+  const getList = () => {
+    getBankList().then((res) => {
+      setBankList(res.records)
+    })
+  }
+  useEffect(() => {
+    getList()
+  }, [])
   return (
     <View className='page-index'>
       <View className='index-navbar'>
@@ -36,9 +55,13 @@ export default withLayout((props) => {
       </View>
       <View className='index-container bankCardBox'>
         <ScrollView scrollY style={{ height: 'calc(100% - 89px)' }}>
-          <BankCard type='abc' value='6217001700003637161' onChange={() => unBind(6)} />
-          <BankCard type='boc' value='6217001700003637881' onChange={() => unBind(6)} />
-          <BankCard type='ccb' value='6217001700003637651' onChange={() => unBind(6)} />
+          {
+            bankList.length == 0 ?
+              <NullCard value='您还没有添加银行卡！' /> :
+              bankList.map(item => {
+                return <BankCard type={item.ownerBank} key={item.cardId} value={item.cardNo} onChange={() => unBind(item.cardId)} />
+              })
+          }
         </ScrollView>
         <View className='addBank' onClick={addCard}>
           <Image src={addImg} className='addIcon' />

src/pages/withdrawal/index.jsx

@@ -1,35 +1,25 @@
-import Taro from "@tarojs/taro"
-import { useState } from "react"
+import Taro, { useDidShow } from "@tarojs/taro"
+import { useState, useEffect } from "react"
 import { View, Image, Input, Picker } from "@tarojs/components"
 import CustomNav from "@/components/CustomNav"
 import WalletCard from "@/components/walletCard"
 import ListTitle from "@/components/ListTitle"
-import goto from '@/assets/user/goto.png'
 import MyButton from "@/components/MyButton"
 import withLayout from '@/layouts'
+import { getBankList } from '@/services/bank'
+import goto from '@/assets/user/goto.png'
+import addImg from '@/assets/bank/addBank.png'
 import './style.less'
 
+
 export default withLayout((props) => {
   const { router } = props
   let { balance } = router.params
   const [money, setMoney] = useState()
+  const [bankList, setBankList] = useState([])
+  const [bankContentList, setBankContentList] = useState([])
 
   const [index, setIndex] = useState(0)
-  const bankList = [
-    {
-      key: 1,
-      value: '中国建设银行（2258）'
-    },
-    {
-      key: 2,
-      value: '中国招商银行（9755）'
-    },
-    {
-      key: 3,
-      value: '中国工商银行（5675）'
-    },
-  ]
-  const bankContentList = ['中国建设银行（2258）', '中国招商银行（9755）', '中国工商银行（5675）']
   const onChange = e => {
     console.log(bankList[e.detail.value])
     setIndex(e.detail.value)
@@ -61,6 +51,25 @@ export default withLayout((props) => {
   const handleChanage = (e) => {
     setMoney(e.detail.value)
   }
+  const addCard = () => {
+    Taro.navigateTo({ url: '/pages/addBankCard/index' });
+  }
+  const getList = () => {
+    getBankList().then(res => {
+      if (res.records.length != 0) {
+        setBankList(res.records)
+        setBankContentList(res.records.map(item => {
+          return item.ownerBank + '(' + item.cardNo.substr(15, 4) + ')'
+        }))
+      }
+    })
+  }
+  useDidShow(() => {
+    getList()
+  })
+  useEffect(() => {
+    getList()
+  }, [])
   return (
     <View className='page-index'>
       <View className='index-navbar'>
@@ -69,14 +78,21 @@ export default withLayout((props) => {
       <View className='index-container withdrawal'>
         <WalletCard tixian value={balance} />
         <ListTitle value='选择银行卡' />
-        <Picker mode='selector' placeholder='请选择提现银行卡' range={bankContentList} onChange={onChange}>
-          <View className='bankPicker'>
-            <View className='body'>
-              {bankContentList[index]}
+        {
+          bankList.length == 0 ?
+            <View className='addBank' onClick={addCard}>
+              <Image src={addImg} className='addIcon' />
+              添加银行卡
             </View>
-            <Image className='cell-action-picker' src={goto} />
-          </View>
-        </Picker>
+            : <Picker mode='selector' placeholder='请选择提现银行卡' range={bankContentList} onChange={onChange}>
+              <View className='bankPicker'>
+                <View className='body'>
+                  {bankContentList[index]}
+                </View>
+                <Image className='cell-action-picker' src={goto} />
+              </View>
+            </Picker>
+        }
         <ListTitle value='选择银行卡' />
         <View className='bankInput'>
           <View className='header'>￥</View>

src/pages/withdrawal/style.less

@@ -44,4 +44,23 @@
     bottom: 0;
     width: 100%;
   }
+  .addBank{
+    width: 100%;
+    height: 98px;
+    background: #FFFFFF;
+    border: 2px dashed #BFBFBF;
+    border-radius: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    font-size: 32px;
+    font-weight: bold;
+    color: #323232;
+    .addIcon{
+      width: 36px;
+      height: 36px;
+      margin-right: 20px;
+    }
+  }
 }

src/services/bank.js

@@ -0,0 +1,29 @@
+import request from '@/utils/request'
+
+/**
+  * 银行卡列表
+  * @returns 
+  * params 搜索条件放这里
+  */
+ export const getBankList = (params) => request('/bankcard', { params })
+
+/**
+  * 银行卡详情
+  * @returns 
+  * params 搜索条件放这里
+  */
+ export const getBankDetail = (id,params) => request(`/bankcard/${id}`, { params })
+
+ /**
+ * 添加银行卡
+ * @param {*} data
+ * @returns
+ */
+export const addBank = (data) => request('/bankcard', { method: 'post', data });
+
+/**
+ * 解绑银行卡
+ * @param {*} data
+ * @returns
+ */
+ export const deleteBank = (id) => request(`/bankcard/${id}`, { method: 'delete' });