.

src/pages/addBankCard/index.jsx

@@ -1,17 +1,93 @@
 import Taro from "@tarojs/taro"
-import { View,Image } from "@tarojs/components"
+import { View, Input } from "@tarojs/components"
 import withLayout from '@/layouts'
 import CustomNav from "@/components/CustomNav"
+import MyButton from "@/components/MyButton"
 import './style.less'
+import { useState } from "react"
 
 export default withLayout((props) => {
+  const [name, setName] = useState()
+  const [bankCode, setBankCode] = useState()
+  const [bankAddress, setBankAddress] = useState()
+  const [phone, setPhone] = useState()
+  const rulePhone = (val) => {
+    if (!/^1[0-9]{10}$/.test(val)) {
+      Taro.showToast({
+        title: '请输入正确的11位手机号',
+        icon: 'none',
+        duration: 2000
+      })
+      return false
+    } else return true
+  }
+  const ruleCard = (val) => {
+    if (!/[0-9]{19}$/.test(val)) {
+      Taro.showToast({
+        title: '请输入正确的19位银行卡号',
+        icon: 'none',
+        duration: 2000
+      })
+      return false
+    } else return true
+  }
+  const onClick = () => {
+    if (name) {
+      if (bankAddress) {
+        if (ruleCard(bankCode) && rulePhone(phone)) {
+          Taro.showToast({
+            title: '添加成功',
+            icon: 'none',
+            duration: 2000
+          })
+          Taro.navigateBack({ delta: 1 })
+        }
+      } else {
+        Taro.showToast({
+          title: '请输入开户行',
+          icon: 'none',
+        })
+      }
+    } else {
+      Taro.showToast({
+        title: '请输入持卡人姓名',
+        icon: 'none',
+      })
+    }
+  }
   return (
     <View className='page-index'>
       <View className='index-navbar'>
         <CustomNav title='我的银行卡' />
       </View>
-      <View className='index-container bankCardBox'>
-        88
+      <View className='index-container addBankCard'>
+        <View className='title'>请绑定持卡人本人的银行卡</View>
+        <View className='addCardCell'>
+          <View className='cellLeft'>
+            <View className='label'>持卡人姓名</View>：</View>
+          <Input type='text' value={name} onBlur={(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} onBlur={(e) => { setBankCode(e.detail.value) }} placeholder='请输入有效卡号' />
+        </View>
+        <View className='addCardCell'>
+          <View className='cellLeft'>
+            <View className='label'>开户行</View>：
+          </View>
+          <Input type='text' value={bankAddress} onBlur={(e) => { setBankAddress(e.detail.value) }} />
+        </View>
+        <View className='addCardCell'>
+          <View className='cellLeft'>
+            <View className='label'>预留手机号</View>：
+          </View>
+          <Input type='number' maxlength='11' value={phone} onBlur={(e) => { setPhone(e.detail.value) }} placeholder='请输入银行卡预留手机号' />
+        </View>
+        <View className='bottomBtn'>
+          <MyButton value='提现' onClick={onClick} />
+        </View>
       </View>
     </View>
   )

src/pages/addBankCard/style.less

@@ -0,0 +1,42 @@
+.addBankCard{
+  background: #f8f8f8;
+  .title{
+    font-size: 28px;
+    font-weight: 500;
+    color: #323232;
+    margin: 20px 0 0 30px;
+  }
+  .addCardCell{
+    background: #FFFFFF;
+    display: flex;
+    align-items: center;
+    height: 108px;
+    box-sizing: border-box;
+    margin-top: 20px;
+    padding: 38px 30px;
+    .cellLeft{
+      flex: none;
+      font-size: 32px;
+      font-weight: 500;
+      color: #333333;
+      margin-right: 50px;
+      .label{
+        //两端对齐
+        width: 6em;
+        display: inline-block;
+        text-align: justify;
+        text-align-last: justify;
+      }
+    }
+    input{
+      flex: 1;
+    }
+  }
+  .bottomBtn{
+    position: absolute;
+    bottom: 62px;
+    width: 100%;
+    padding: 0 30px;
+    box-sizing: border-box;
+  }
+}

src/pages/userInfo/index.jsx

@@ -18,9 +18,24 @@ export default withLayout((props) => {
   const changePhone = (e) => {
     setPhone(e.detail.value)
   }
+  const rulePhone=(val)=>{
+    if (!/^1[0-9]{10}$/.test(val)) {
+      Taro.showToast({
+        title: '请输入正确的11位手机号',
+        icon: 'none',
+        duration: 2000
+      })
+      return false
+    } else return true
+  }
   const handleSave = () => {
-    console.log('保存成功')
-    Taro.navigateBack({delta:1})
+    if (rulePhone(phone)) {
+      Taro.showToast({
+        title: '保存成功',
+        icon: 'none',
+      })
+      Taro.navigateBack({delta:1})
+    }
   }
   const resetName=()=>{
     setName()