李志伟 3 years ago
parent
commit
9f47d4d998

+ 67
- 16
src/pages/addBankCard/index.jsx View File

1
+import React, { useState } from "react"
1
 import Taro from "@tarojs/taro"
2
 import Taro from "@tarojs/taro"
2
-import { View, Input } from "@tarojs/components"
3
+import { View, Input, Picker } from "@tarojs/components"
3
 import withLayout from '@/layouts'
4
 import withLayout from '@/layouts'
4
 import CustomNav from "@/components/CustomNav"
5
 import CustomNav from "@/components/CustomNav"
5
 import MyButton from "@/components/MyButton"
6
 import MyButton from "@/components/MyButton"
7
+import { useModel } from "@/store"
8
+import { addBank } from '@/services/bank'
6
 import './style.less'
9
 import './style.less'
7
-import { useState } from "react"
10
+
11
+const bankList = [
12
+  {
13
+    key: 1,
14
+    value: '中国建设银行'
15
+  },
16
+  {
17
+    key: 2,
18
+    value: '中国农业银行'
19
+  },
20
+  {
21
+    key: 3,
22
+    value: '中国银行'
23
+  },
24
+  // {
25
+  //   key: 4,
26
+  //   value: '中国工商银行'
27
+  // },
28
+  // {
29
+  //   key: 5,
30
+  //   value: '中国招商银行'
31
+  // },
32
+  // {
33
+  //   key: 6,
34
+  //   value: '中国交通银行'
35
+  // },
36
+  // {
37
+  //   key: 7,
38
+  //   value: '中国邮政银行'
39
+  // },
40
+]
41
+const bankContentList = ['中国建设银行', '中国农业银行', '中国银行']
8
 
42
 
9
 export default withLayout((props) => {
43
 export default withLayout((props) => {
44
+  const { person } = useModel('person')
10
   const [name, setName] = useState()
45
   const [name, setName] = useState()
11
   const [bankCode, setBankCode] = useState()
46
   const [bankCode, setBankCode] = useState()
12
-  const [bankAddress, setBankAddress] = useState()
47
+  const [bankAddress, setBankAddress] = useState(bankContentList[0])
13
   const [phone, setPhone] = useState()
48
   const [phone, setPhone] = useState()
49
+  const [index, setIndex] = useState(0)
50
+  const [loading, setLoading] = useState(false)
51
+
52
+
53
+  const onChange = e => {
54
+    console.log(bankList[e.detail.value])
55
+    setBankAddress(bankContentList[e.detail.value])
56
+    setIndex(e.detail.value)
57
+  }
14
   const rulePhone = (val) => {
58
   const rulePhone = (val) => {
15
     if (!/^1[0-9]{10}$/.test(val)) {
59
     if (!/^1[0-9]{10}$/.test(val)) {
16
       Taro.showToast({
60
       Taro.showToast({
33
   }
77
   }
34
   const onClick = () => {
78
   const onClick = () => {
35
     if (name) {
79
     if (name) {
36
-      if (bankAddress) {
37
-        if (ruleCard(bankCode) && rulePhone(phone)) {
80
+      if (ruleCard(bankCode) && rulePhone(phone)) {
81
+        setLoading(true)
82
+        addBank({ cardNo: bankCode, personId: person.personId, ownerBank: bankAddress, owerName: name, phone: phone }).then(res => {
38
           Taro.showToast({
83
           Taro.showToast({
39
             title: '添加成功',
84
             title: '添加成功',
40
             icon: 'none',
85
             icon: 'none',
41
             duration: 2000
86
             duration: 2000
42
           })
87
           })
43
-          Taro.navigateBack({ delta: 1 })
44
-        }
45
-      } else {
46
-        Taro.showToast({
47
-          title: '请输入开户行',
48
-          icon: 'none',
88
+          setTimeout(() => {
89
+            Taro.navigateBack({ delta: 1 })
90
+          }, 1000)
91
+        }).catch(err => {
92
+          Taro.showToast({
93
+            title: err.message,
94
+            icon: 'none',
95
+            duration: 1000
96
+          })
97
+          setLoading(false)
49
         })
98
         })
50
       }
99
       }
51
     } else {
100
     } else {
65
         <View className='addCardCell'>
114
         <View className='addCardCell'>
66
           <View className='cellLeft'>
115
           <View className='cellLeft'>
67
             <View className='label'>持卡人姓名</View>:</View>
116
             <View className='label'>持卡人姓名</View>:</View>
68
-          <Input type='text' value={name} onInput={(e) => {()=> setName(e.detail.value) }} placeholder='请输入真实姓名' />
117
+          <Input type='text' value={name} onInput={(e) => setName(e.detail.value)} placeholder='请输入真实姓名' />
69
         </View>
118
         </View>
70
         <View className='addCardCell'>
119
         <View className='addCardCell'>
71
           <View className='cellLeft'>
120
           <View className='cellLeft'>
72
             <View className='label'>卡号</View>:
121
             <View className='label'>卡号</View>:
73
           </View>
122
           </View>
74
-          <Input type='number' maxlength='19' value={bankCode} onInput={(e) => { ()=>setBankCode(e.detail.value) }} placeholder='请输入有效卡号' />
123
+          <Input type='number' maxlength='19' value={bankCode} onInput={(e) => setBankCode(e.detail.value)} placeholder='请输入有效卡号' />
75
         </View>
124
         </View>
76
         <View className='addCardCell'>
125
         <View className='addCardCell'>
77
           <View className='cellLeft'>
126
           <View className='cellLeft'>
78
             <View className='label'>开户行</View>:
127
             <View className='label'>开户行</View>:
79
           </View>
128
           </View>
80
-          <Input type='text' value={bankAddress} onInput={(e) => { ()=>setBankAddress(e.detail.value) }} />
129
+          <Picker mode='selector' style={{ width: '100%' }} range={bankContentList} onChange={onChange}>
130
+            {bankContentList[index]}
131
+          </Picker>
81
         </View>
132
         </View>
82
         <View className='addCardCell'>
133
         <View className='addCardCell'>
83
           <View className='cellLeft'>
134
           <View className='cellLeft'>
84
             <View className='label'>预留手机号</View>:
135
             <View className='label'>预留手机号</View>:
85
           </View>
136
           </View>
86
-          <Input type='number' maxlength='11' value={phone} onInput={(e) => { ()=>setPhone(e.detail.value) }} placeholder='请输入银行卡预留手机号' />
137
+          <Input type='number' maxlength='11' value={phone} onInput={(e) => setPhone(e.detail.value)} placeholder='请输入银行卡预留手机号' />
87
         </View>
138
         </View>
88
         <View className='bottomBtn'>
139
         <View className='bottomBtn'>
89
-          <MyButton value='提现' onClick={onClick} />
140
+          <MyButton loading={loading} value='提现' onClick={onClick} />
90
         </View>
141
         </View>
91
       </View>
142
       </View>
92
     </View>
143
     </View>

+ 4
- 4
src/pages/bankCard/Card/index.jsx View File

9
   return (
9
   return (
10
     <View className='bankCard' >
10
     <View className='bankCard' >
11
       <Image src={
11
       <Image src={
12
-        type === 'abc' ? ABCImg :
13
-          type === 'boc' ? BOCImg :
14
-            type === 'ccb' ? CCBImg : ''
12
+        type === '中国农业银行' ? ABCImg :
13
+          type === '中国银行' ? BOCImg :
14
+            type === '中国建设银行' ? CCBImg : ''
15
       } className='CardImg'
15
       } className='CardImg'
16
       />
16
       />
17
       <View className='unBind' onClick={onChange}>解除绑定</View>
17
       <View className='unBind' onClick={onChange}>解除绑定</View>
18
-      <View className='cardType'>信用卡</View>
18
+      <View className='cardType'>储蓄卡</View>
19
       <View className='cCode'>
19
       <View className='cCode'>
20
         <Text className='codeText'>****</Text>
20
         <Text className='codeText'>****</Text>
21
         <Text className='codeText'>****</Text>
21
         <Text className='codeText'>****</Text>

+ 36
- 13
src/pages/bankCard/index.jsx View File

1
-import Taro from "@tarojs/taro"
1
+import { useState, useEffect } from "react"
2
+import Taro, { useDidShow } from "@tarojs/taro"
2
 import { View, Image, ScrollView } from "@tarojs/components"
3
 import { View, Image, ScrollView } from "@tarojs/components"
3
 import withLayout from '@/layouts'
4
 import withLayout from '@/layouts'
5
+import NullCard from "@/components/NullCard";
4
 import CustomNav from "@/components/CustomNav"
6
 import CustomNav from "@/components/CustomNav"
7
+import { getBankList, deleteBank } from '@/services/bank'
5
 import addImg from '@/assets/bank/addBank.png'
8
 import addImg from '@/assets/bank/addBank.png'
6
 import BankCard from './Card'
9
 import BankCard from './Card'
7
 import './style.less'
10
 import './style.less'
8
 
11
 
12
+
9
 export default withLayout((props) => {
13
 export default withLayout((props) => {
14
+  const [bankList, setBankList] = useState([])
15
+
10
   const unBind = (val) => {
16
   const unBind = (val) => {
11
     Taro.showModal({
17
     Taro.showModal({
12
       content: `确认解绑?`,
18
       content: `确认解绑?`,
13
       success: function (res) {
19
       success: function (res) {
14
         if (res.confirm) {
20
         if (res.confirm) {
15
-          // deleteRoom(val.roomId).then(() => {
16
-          Taro.showToast({
17
-            title: '已经解除',
18
-            icon: 'none',
21
+          deleteBank(val).then(() => {
22
+            Taro.showToast({
23
+              title: '已经解除',
24
+              icon: 'none',
25
+            })
26
+            getList()
27
+          }).catch(err => {
28
+            Taro.showToast({
29
+              title: err.message,
30
+              icon: 'none',
31
+            })
19
           })
32
           })
20
-          // getRoomList({ hotelId: hotel.hotelId }).then((vals) => {
21
-          //   setDetail(vals.records || [])
22
-          // })
23
-          // })
24
         }
33
         }
25
       }
34
       }
26
     })
35
     })
27
-    console.log(val)
28
   }
36
   }
29
   const addCard = () => {
37
   const addCard = () => {
30
     Taro.navigateTo({ url: '/pages/addBankCard/index' });
38
     Taro.navigateTo({ url: '/pages/addBankCard/index' });
31
   }
39
   }
40
+  useDidShow(() => {
41
+    getList()
42
+  })
43
+  const getList = () => {
44
+    getBankList().then((res) => {
45
+      setBankList(res.records)
46
+    })
47
+  }
48
+  useEffect(() => {
49
+    getList()
50
+  }, [])
32
   return (
51
   return (
33
     <View className='page-index'>
52
     <View className='page-index'>
34
       <View className='index-navbar'>
53
       <View className='index-navbar'>
36
       </View>
55
       </View>
37
       <View className='index-container bankCardBox'>
56
       <View className='index-container bankCardBox'>
38
         <ScrollView scrollY style={{ height: 'calc(100% - 89px)' }}>
57
         <ScrollView scrollY style={{ height: 'calc(100% - 89px)' }}>
39
-          <BankCard type='abc' value='6217001700003637161' onChange={() => unBind(6)} />
40
-          <BankCard type='boc' value='6217001700003637881' onChange={() => unBind(6)} />
41
-          <BankCard type='ccb' value='6217001700003637651' onChange={() => unBind(6)} />
58
+          {
59
+            bankList.length == 0 ?
60
+              <NullCard value='您还没有添加银行卡!' /> :
61
+              bankList.map(item => {
62
+                return <BankCard type={item.ownerBank} key={item.cardId} value={item.cardNo} onChange={() => unBind(item.cardId)} />
63
+              })
64
+          }
42
         </ScrollView>
65
         </ScrollView>
43
         <View className='addBank' onClick={addCard}>
66
         <View className='addBank' onClick={addCard}>
44
           <Image src={addImg} className='addIcon' />
67
           <Image src={addImg} className='addIcon' />

+ 41
- 25
src/pages/withdrawal/index.jsx View File

1
-import Taro from "@tarojs/taro"
2
-import { useState } from "react"
1
+import Taro, { useDidShow } from "@tarojs/taro"
2
+import { useState, useEffect } from "react"
3
 import { View, Image, Input, Picker } from "@tarojs/components"
3
 import { View, Image, Input, Picker } from "@tarojs/components"
4
 import CustomNav from "@/components/CustomNav"
4
 import CustomNav from "@/components/CustomNav"
5
 import WalletCard from "@/components/walletCard"
5
 import WalletCard from "@/components/walletCard"
6
 import ListTitle from "@/components/ListTitle"
6
 import ListTitle from "@/components/ListTitle"
7
-import goto from '@/assets/user/goto.png'
8
 import MyButton from "@/components/MyButton"
7
 import MyButton from "@/components/MyButton"
9
 import withLayout from '@/layouts'
8
 import withLayout from '@/layouts'
9
+import { getBankList } from '@/services/bank'
10
+import goto from '@/assets/user/goto.png'
11
+import addImg from '@/assets/bank/addBank.png'
10
 import './style.less'
12
 import './style.less'
11
 
13
 
14
+
12
 export default withLayout((props) => {
15
 export default withLayout((props) => {
13
   const { router } = props
16
   const { router } = props
14
   let { balance } = router.params
17
   let { balance } = router.params
15
   const [money, setMoney] = useState()
18
   const [money, setMoney] = useState()
19
+  const [bankList, setBankList] = useState([])
20
+  const [bankContentList, setBankContentList] = useState([])
16
 
21
 
17
   const [index, setIndex] = useState(0)
22
   const [index, setIndex] = useState(0)
18
-  const bankList = [
19
-    {
20
-      key: 1,
21
-      value: '中国建设银行(2258)'
22
-    },
23
-    {
24
-      key: 2,
25
-      value: '中国招商银行(9755)'
26
-    },
27
-    {
28
-      key: 3,
29
-      value: '中国工商银行(5675)'
30
-    },
31
-  ]
32
-  const bankContentList = ['中国建设银行(2258)', '中国招商银行(9755)', '中国工商银行(5675)']
33
   const onChange = e => {
23
   const onChange = e => {
34
     console.log(bankList[e.detail.value])
24
     console.log(bankList[e.detail.value])
35
     setIndex(e.detail.value)
25
     setIndex(e.detail.value)
61
   const handleChanage = (e) => {
51
   const handleChanage = (e) => {
62
     setMoney(e.detail.value)
52
     setMoney(e.detail.value)
63
   }
53
   }
54
+  const addCard = () => {
55
+    Taro.navigateTo({ url: '/pages/addBankCard/index' });
56
+  }
57
+  const getList = () => {
58
+    getBankList().then(res => {
59
+      if (res.records.length != 0) {
60
+        setBankList(res.records)
61
+        setBankContentList(res.records.map(item => {
62
+          return item.ownerBank + '(' + item.cardNo.substr(15, 4) + ')'
63
+        }))
64
+      }
65
+    })
66
+  }
67
+  useDidShow(() => {
68
+    getList()
69
+  })
70
+  useEffect(() => {
71
+    getList()
72
+  }, [])
64
   return (
73
   return (
65
     <View className='page-index'>
74
     <View className='page-index'>
66
       <View className='index-navbar'>
75
       <View className='index-navbar'>
69
       <View className='index-container withdrawal'>
78
       <View className='index-container withdrawal'>
70
         <WalletCard tixian value={balance} />
79
         <WalletCard tixian value={balance} />
71
         <ListTitle value='选择银行卡' />
80
         <ListTitle value='选择银行卡' />
72
-        <Picker mode='selector' placeholder='请选择提现银行卡' range={bankContentList} onChange={onChange}>
73
-          <View className='bankPicker'>
74
-            <View className='body'>
75
-              {bankContentList[index]}
81
+        {
82
+          bankList.length == 0 ?
83
+            <View className='addBank' onClick={addCard}>
84
+              <Image src={addImg} className='addIcon' />
85
+              添加银行卡
76
             </View>
86
             </View>
77
-            <Image className='cell-action-picker' src={goto} />
78
-          </View>
79
-        </Picker>
87
+            : <Picker mode='selector' placeholder='请选择提现银行卡' range={bankContentList} onChange={onChange}>
88
+              <View className='bankPicker'>
89
+                <View className='body'>
90
+                  {bankContentList[index]}
91
+                </View>
92
+                <Image className='cell-action-picker' src={goto} />
93
+              </View>
94
+            </Picker>
95
+        }
80
         <ListTitle value='选择银行卡' />
96
         <ListTitle value='选择银行卡' />
81
         <View className='bankInput'>
97
         <View className='bankInput'>
82
           <View className='header'>¥</View>
98
           <View className='header'>¥</View>

+ 19
- 0
src/pages/withdrawal/style.less View File

44
     bottom: 0;
44
     bottom: 0;
45
     width: 100%;
45
     width: 100%;
46
   }
46
   }
47
+  .addBank{
48
+    width: 100%;
49
+    height: 98px;
50
+    background: #FFFFFF;
51
+    border: 2px dashed #BFBFBF;
52
+    border-radius: 40px;
53
+    display: flex;
54
+    align-items: center;
55
+    justify-content: center;
56
+    box-sizing: border-box;
57
+    font-size: 32px;
58
+    font-weight: bold;
59
+    color: #323232;
60
+    .addIcon{
61
+      width: 36px;
62
+      height: 36px;
63
+      margin-right: 20px;
64
+    }
65
+  }
47
 }
66
 }

+ 29
- 0
src/services/bank.js View File

1
+import request from '@/utils/request'
2
+
3
+/**
4
+  * 银行卡列表
5
+  * @returns 
6
+  * params 搜索条件放这里
7
+  */
8
+ export const getBankList = (params) => request('/bankcard', { params })
9
+
10
+/**
11
+  * 银行卡详情
12
+  * @returns 
13
+  * params 搜索条件放这里
14
+  */
15
+ export const getBankDetail = (id,params) => request(`/bankcard/${id}`, { params })
16
+
17
+ /**
18
+ * 添加银行卡
19
+ * @param {*} data
20
+ * @returns
21
+ */
22
+export const addBank = (data) => request('/bankcard', { method: 'post', data });
23
+
24
+/**
25
+ * 解绑银行卡
26
+ * @param {*} data
27
+ * @returns
28
+ */
29
+ export const deleteBank = (id) => request(`/bankcard/${id}`, { method: 'delete' });