李志伟 3 anos atrás
pai
commit
4dd71cdbe8

+ 79
- 3
src/pages/addBankCard/index.jsx Ver arquivo

@@ -1,17 +1,93 @@
1 1
 import Taro from "@tarojs/taro"
2
-import { View,Image } from "@tarojs/components"
2
+import { View, Input } from "@tarojs/components"
3 3
 import withLayout from '@/layouts'
4 4
 import CustomNav from "@/components/CustomNav"
5
+import MyButton from "@/components/MyButton"
5 6
 import './style.less'
7
+import { useState } from "react"
6 8
 
7 9
 export default withLayout((props) => {
10
+  const [name, setName] = useState()
11
+  const [bankCode, setBankCode] = useState()
12
+  const [bankAddress, setBankAddress] = useState()
13
+  const [phone, setPhone] = useState()
14
+  const rulePhone = (val) => {
15
+    if (!/^1[0-9]{10}$/.test(val)) {
16
+      Taro.showToast({
17
+        title: '请输入正确的11位手机号',
18
+        icon: 'none',
19
+        duration: 2000
20
+      })
21
+      return false
22
+    } else return true
23
+  }
24
+  const ruleCard = (val) => {
25
+    if (!/[0-9]{19}$/.test(val)) {
26
+      Taro.showToast({
27
+        title: '请输入正确的19位银行卡号',
28
+        icon: 'none',
29
+        duration: 2000
30
+      })
31
+      return false
32
+    } else return true
33
+  }
34
+  const onClick = () => {
35
+    if (name) {
36
+      if (bankAddress) {
37
+        if (ruleCard(bankCode) && rulePhone(phone)) {
38
+          Taro.showToast({
39
+            title: '添加成功',
40
+            icon: 'none',
41
+            duration: 2000
42
+          })
43
+          Taro.navigateBack({ delta: 1 })
44
+        }
45
+      } else {
46
+        Taro.showToast({
47
+          title: '请输入开户行',
48
+          icon: 'none',
49
+        })
50
+      }
51
+    } else {
52
+      Taro.showToast({
53
+        title: '请输入持卡人姓名',
54
+        icon: 'none',
55
+      })
56
+    }
57
+  }
8 58
   return (
9 59
     <View className='page-index'>
10 60
       <View className='index-navbar'>
11 61
         <CustomNav title='我的银行卡' />
12 62
       </View>
13
-      <View className='index-container bankCardBox'>
14
-        88
63
+      <View className='index-container addBankCard'>
64
+        <View className='title'>请绑定持卡人本人的银行卡</View>
65
+        <View className='addCardCell'>
66
+          <View className='cellLeft'>
67
+            <View className='label'>持卡人姓名</View>:</View>
68
+          <Input type='text' value={name} onBlur={(e) => { setName(e.detail.value) }} placeholder='请输入真实姓名' />
69
+        </View>
70
+        <View className='addCardCell'>
71
+          <View className='cellLeft'>
72
+            <View className='label'>卡号</View>:
73
+          </View>
74
+          <Input type='number' maxlength='19' value={bankCode} onBlur={(e) => { setBankCode(e.detail.value) }} placeholder='请输入有效卡号' />
75
+        </View>
76
+        <View className='addCardCell'>
77
+          <View className='cellLeft'>
78
+            <View className='label'>开户行</View>:
79
+          </View>
80
+          <Input type='text' value={bankAddress} onBlur={(e) => { setBankAddress(e.detail.value) }} />
81
+        </View>
82
+        <View className='addCardCell'>
83
+          <View className='cellLeft'>
84
+            <View className='label'>预留手机号</View>:
85
+          </View>
86
+          <Input type='number' maxlength='11' value={phone} onBlur={(e) => { setPhone(e.detail.value) }} placeholder='请输入银行卡预留手机号' />
87
+        </View>
88
+        <View className='bottomBtn'>
89
+          <MyButton value='提现' onClick={onClick} />
90
+        </View>
15 91
       </View>
16 92
     </View>
17 93
   )

+ 42
- 0
src/pages/addBankCard/style.less Ver arquivo

@@ -0,0 +1,42 @@
1
+.addBankCard{
2
+  background: #f8f8f8;
3
+  .title{
4
+    font-size: 28px;
5
+    font-weight: 500;
6
+    color: #323232;
7
+    margin: 20px 0 0 30px;
8
+  }
9
+  .addCardCell{
10
+    background: #FFFFFF;
11
+    display: flex;
12
+    align-items: center;
13
+    height: 108px;
14
+    box-sizing: border-box;
15
+    margin-top: 20px;
16
+    padding: 38px 30px;
17
+    .cellLeft{
18
+      flex: none;
19
+      font-size: 32px;
20
+      font-weight: 500;
21
+      color: #333333;
22
+      margin-right: 50px;
23
+      .label{
24
+        //两端对齐
25
+        width: 6em;
26
+        display: inline-block;
27
+        text-align: justify;
28
+        text-align-last: justify;
29
+      }
30
+    }
31
+    input{
32
+      flex: 1;
33
+    }
34
+  }
35
+  .bottomBtn{
36
+    position: absolute;
37
+    bottom: 62px;
38
+    width: 100%;
39
+    padding: 0 30px;
40
+    box-sizing: border-box;
41
+  }
42
+}

+ 17
- 2
src/pages/userInfo/index.jsx Ver arquivo

@@ -18,9 +18,24 @@ export default withLayout((props) => {
18 18
   const changePhone = (e) => {
19 19
     setPhone(e.detail.value)
20 20
   }
21
+  const rulePhone=(val)=>{
22
+    if (!/^1[0-9]{10}$/.test(val)) {
23
+      Taro.showToast({
24
+        title: '请输入正确的11位手机号',
25
+        icon: 'none',
26
+        duration: 2000
27
+      })
28
+      return false
29
+    } else return true
30
+  }
21 31
   const handleSave = () => {
22
-    console.log('保存成功')
23
-    Taro.navigateBack({delta:1})
32
+    if (rulePhone(phone)) {
33
+      Taro.showToast({
34
+        title: '保存成功',
35
+        icon: 'none',
36
+      })
37
+      Taro.navigateBack({delta:1})
38
+    }
24 39
   }
25 40
   const resetName=()=>{
26 41
     setName()