.

src/pages/addBankCard/index.config.js

@@ -0,0 +1,7 @@
+export default {
+  navigationBarTitleText: '我的银行卡',
+  navigationStyle: 'custom',
+  styleIsolation: 'shared',
+  enableShareAppMessage: true,
+  disableScroll: true,
+}

src/pages/addBankCard/index.jsx

@@ -0,0 +1,18 @@
+import Taro from "@tarojs/taro"
+import { View,Image } from "@tarojs/components"
+import withLayout from '@/layouts'
+import CustomNav from "@/components/CustomNav"
+import './style.less'
+
+export default withLayout((props) => {
+  return (
+    <View className='page-index'>
+      <View className='index-navbar'>
+        <CustomNav title='我的银行卡' />
+      </View>
+      <View className='index-container bankCardBox'>
+        88
+      </View>
+    </View>
+  )
+})

src/pages/bankCard/Card/index.jsx

@@ -1,20 +1,27 @@
-import { View,Image } from "@tarojs/components"
+import { View, Image, Text } from "@tarojs/components"
 import ABCImg from '@/assets/bank/ABCbank.png'
 import BOCImg from '@/assets/bank/BOCbank.png'
 import CCBImg from '@/assets/bank/CCBbank.png'
+import './style.less'
 
 export default (props) => {
-  const {type,value,onChange}=props
+  const { type, value, onChange } = props
   return (
     <View className='bankCard' >
       <Image src={
-        type==='abc'?ABCImg:
-        type==='boc'?BOCImg:
-        type==='ccb'?CCBImg:''
-        } className='CardImg'
+        type === 'abc' ? ABCImg :
+          type === 'boc' ? BOCImg :
+            type === 'ccb' ? CCBImg : ''
+      } className='CardImg'
       />
-      <View className='cCode'>{value}</View>
       <View className='unBind' onClick={onChange}>解除绑定</View>
+      <View className='cardType'>信用卡</View>
+      <View className='cCode'>
+        <Text className='codeText'>****</Text>
+        <Text className='codeText'>****</Text>
+        <Text className='codeText'>****</Text>
+        <Text className='codeText'>{value.substr(15, 4)}</Text>
+      </View>
     </View>
   )
 }

src/pages/bankCard/Card/style.less

@@ -1,11 +1,39 @@
 .bankCard{
-  width: 100%;
   height: calc( calc(100vw - 60px) * 0.36);
   border-radius: 40px;
+  position: relative;
+  color: #fff;
+  margin-bottom: 30px;
   .CardImg{
     width: 100%;
     height: calc( calc(100vw - 60px) * 0.36);
     position: absolute;
+    z-index: -1;
+  }
+  .unBind{
+    position: absolute;
+    font-size: 28px;
+    font-weight: bold;
+    right: 36px;
+    top: 41px;
+  }
+  .cardType{
+    position: absolute;
+    font-size: 28px;
+    font-weight: 400;
+    left: 40vw;
+    top: 69px;
+  }
+  .cCode{
+    position: absolute;
+    font-size: 40px;
+    font-weight: bold;
+    bottom: 69px;
+    left: 8vw;
+    // left: calc(calc(50vw - 30px) - 5.5em);
+    .codeText+.codeText{
+      margin-left: 1em;
+    }
   }
   
 }

src/pages/bankCard/index.jsx

@@ -1,20 +1,49 @@
-import { View } from "@tarojs/components"
+import Taro from "@tarojs/taro"
+import { View, Image, ScrollView } from "@tarojs/components"
 import withLayout from '@/layouts'
 import CustomNav from "@/components/CustomNav"
+import addImg from '@/assets/bank/addBank.png'
 import BankCard from './Card'
 import './style.less'
 
 export default withLayout((props) => {
-  const unBind=(val)=>{
+  const unBind = (val) => {
+    Taro.showModal({
+      content: `确认解绑?`,
+      success: function (res) {
+        if (res.confirm) {
+          // deleteRoom(val.roomId).then(() => {
+          Taro.showToast({
+            title: '已经解除',
+            icon: 'none',
+          })
+          // getRoomList({ hotelId: hotel.hotelId }).then((vals) => {
+          //   setDetail(vals.records || [])
+          // })
+          // })
+        }
+      }
+    })
     console.log(val)
   }
+  const addCard = () => {
+    Taro.navigateTo({ url: '/pages/addBankCard/index' });
+  }
   return (
     <View className='page-index'>
       <View className='index-navbar'>
         <CustomNav title='我的银行卡' />
       </View>
       <View className='index-container bankCardBox'>
-        <BankCard type='abc' value='6217001700003637161' onChange={()=>unBind(6)} />
+        <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)} />
+        </ScrollView>
+        <View className='addBank' onClick={addCard}>
+          <Image src={addImg} className='addIcon' />
+          添加银行卡
+        </View>
       </View>
     </View>
   )

src/pages/bankCard/style.less

@@ -1,3 +1,24 @@
 .bankCardBox{
   margin: 30px;
+  .addBank{
+    position: absolute;
+    bottom: 50px;
+    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/pages/withdrawal/index.jsx

@@ -1,3 +1,4 @@
+import Taro from "@tarojs/taro"
 import { useState } from "react"
 import { View, Image, Input, Picker } from "@tarojs/components"
 import CustomNav from "@/components/CustomNav"
@@ -35,12 +36,27 @@ export default withLayout((props) => {
   }
 
   const onClick = () => {
-    if ((money - 0) > balance) {
-      console.log('您的余额不足');
-    } else {
-      console.log('提交成功，1到3个工作日将到您的付款账户')
-      // 刷新页面
+    if (money) {
+      if ((money - 0) > balance) {
+        Taro.showToast({
+          title: '您的余额不足',
+          icon: 'none',
+        })
+      } else {
+        Taro.showToast({
+          title: '提交成功，1到3个工作日将到您的付款账户',
+          icon: 'none',
+        })
+        // 刷新页面
+      }
     }
+    else {
+      Taro.showToast({
+        title: '请输入本次提现金额',
+        icon: 'none',
+      })
+    }
+
   }
   const handleChanage = (e) => {
     setMoney(e.detail.value)

src/routes.js

@@ -38,6 +38,10 @@ const mainPages = [
     title: '我的银行卡',
     page: 'pages/bankCard/index',
   },
+  {
+    title: '添加银行卡',
+    page: 'pages/addBankCard/index',
+  },
   {
     title: '个人信息',
     page: 'pages/userInfo/index',