1

src/pages/addBankCard/index.jsx

@@ -111,7 +111,7 @@ export default withLayout((props) => {
           <Input type='number' maxlength='11' value={phone} onInput={(e) => setPhone(e.detail.value)} placeholder='请输入银行卡预留手机号' />
         </View>
         <View className='bottomBtn'>
-          <MyButton loading={loading} value='提现' onClick={onClick} />
+          <MyButton loading={loading} value='绑定' onClick={onClick} />
         </View>
       </View>
     </View>

src/pages/bankCard/Card/index.jsx

@@ -1,25 +1,20 @@
-import { View, Image, Text } from "@tarojs/components"
-import logoImg from '@/assets/bank/jianhang.jpg'
+import { View, Image } from "@tarojs/components"
 import './style.less'
 
 export default (props) => {
   const { value, onChange } = props
-  let style = { background: `linear-gradient(0deg,#${value.color1},#${value.color2})`  }
   return (
-    <View className='bank' style={style}>
+    <View className='bank' style={{ background: `radial-gradient(circle at 0% 0%,#${value.color2},#${value.color1})` }}>
       <View className='top'>
-        <Image className='logo' src={logoImg} />
-        <View className='title'>{value.ownerBank}</View>
-        <View className='cardType'>储蓄卡</View>
-        <View className='light'>Bank</View>
-        <View className='unBind' onClick={onChange}>解除绑定</View>
-      </View>
-      <View className='bottom'>
-        <Text className='codeText'>{value.cardNo.substr(0, 4)}</Text>
-        <Text className='codeText'>****</Text>
-        <Text className='codeText'>****</Text>
-        <Text className='codeText'>{value.cardNo.slice(-4)}</Text>
+        <View className='ImgBox'>
+          <Image src={value.bankCode} className='logo' />
+        </View>
+        <View className='title'>
+          {value.ownerBank}储蓄卡
+        </View>
+        <View className='codeNo'>****&nbsp;<text>{value.cardNo.slice(-4)}</text></View>
       </View>
+      <View className='unBing' onClick={onChange}>解除绑定</View>
     </View>
   )
 }

src/pages/bankCard/Card/style.less

@@ -1,48 +1,42 @@
 .bank{
-  // background: linear-gradient(0deg,#375BCA,#5E93E0);
-  border-radius: 40px;
-  color: #FFFFFF;
+  height: 30vw;
+  color: #fff;
   position: relative;
-  font-weight: bold;
-  padding: 60px 20px 70px 60px;
   margin-bottom: 30px;
+  border-radius: 20px;
+  padding: 30px;
+  overflow: hidden;
+  box-sizing: border-box;
   .top{
     display: flex;
-    align-items: center;
-    margin-bottom: 40px;
-    .logo{
-      width: 40px;
-      height: 40px;
+    .ImgBox{
+      width: 60px;
+      height: 60px;
+      background: #fff;
       border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-right: 30px;
+      .logo{
+        width: 40px;
+        height: 40px;
+      }
     }
     .title{
-      font-size: 36px;
-      margin: 0 21px 0 16px;
+      width: 48vw;
     }
-    .cardType{
-      font-size: 28px;
-      font-weight: 400;
-    }
-    .light{
-      font-size: 89px;
-      opacity: 0.1;
-      position: absolute;
-      right: 20px;
-      letter-spacing: 10px;
-    }
-    .unBind{
-      font-size: 28px;
+    .codeNo{
       position: absolute;
-      right: 20px;
-      top: 40px;
+      right: 30px;
+      view>text{
+        font-weight: bold;
+      }
     }
   }
-  .bottom{
-    .codeText{
-      font-size: 40px;
-    }
-    .codeText+.codeText{
-      margin-left: 1em;
-    }
+  .unBing{
+    position: absolute;
+    bottom: 30px;
+    right: 30px;
   }
 }

src/pages/bankCard/index.jsx

@@ -1,10 +1,10 @@
-import { useState, useEffect } from "react"
+import { useState } from "react"
 import Taro, { useDidShow } from "@tarojs/taro"
-import { View, Image, ScrollView, Text } from "@tarojs/components"
+import { View, Image, ScrollView } from "@tarojs/components"
 import withLayout from '@/layouts'
 import NullCard from "@/components/NullCard";
 import CustomNav from "@/components/CustomNav"
-import { getBankList, deleteBank,getBankTypeList } from '@/services/bank'
+import { getBankList, deleteBank, getBankTypeList } from '@/services/bank'
 import addImg from '@/assets/bank/addBank.png'
 import BankCard from './Card'
 import './style.less'
@@ -41,13 +41,13 @@ export default withLayout((props) => {
     getList()
   })
   const getList = () => {
-    getBankList({pageSize:500}).then((res) => {
-      getBankTypeList({pageSize:500}).then((res2)=>{
-        let list1=[]
+    getBankList({ pageSize: 500 }).then((res) => {
+      getBankTypeList({ pageSize: 500 }).then((res2) => {
+        let list1 = []
         let current
         res.records.forEach(item => {
-          current= res2.records.filter(v=>item.ownerBank==v.name)[0]
-          list1.push({...item,color1:current.color1,color2:current.color2})
+          current = res2.records.filter(v => item.ownerBank == v.name)[0]
+          list1.push({ ...item, color1: current.color1, color2: current.color2, bankCode: current.bankCode })
         });
         setBankList(list1)
       })