.

src/pages/bankCard/Card/index.jsx

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

src/pages/bankCard/Card/style.less

@@ -0,0 +1,11 @@
+.bankCard{
+  width: 100%;
+  height: calc( calc(100vw - 60px) * 0.36);
+  border-radius: 40px;
+  .CardImg{
+    width: 100%;
+    height: calc( calc(100vw - 60px) * 0.36);
+    position: absolute;
+  }
+  
+}

src/pages/bankCard/index.config.js

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

src/pages/bankCard/index.jsx

@@ -0,0 +1,21 @@
+import { View } from "@tarojs/components"
+import withLayout from '@/layouts'
+import CustomNav from "@/components/CustomNav"
+import BankCard from './Card'
+import './style.less'
+
+export default withLayout((props) => {
+  const unBind=(val)=>{
+    console.log(val)
+  }
+  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)} />
+      </View>
+    </View>
+  )
+})

src/pages/bankCard/style.less

@@ -0,0 +1,3 @@
+.bankCardBox{
+  margin: 30px;
+}

src/pages/index/components/User/index.jsx

@@ -18,7 +18,7 @@ import './style.less'
 export default (props) => {
   const { isLogin } = props
   const handleAccount = () => { 
-    
+    Taro.navigateTo({ url: '/pages/userInfo/index' });
    }
   const handleAboutUs = () => { }
   const handleUpdate = () => { }
@@ -32,7 +32,9 @@ export default (props) => {
   const goWallet = () => {
     Taro.navigateTo({ url: '/pages/wallet/index?balance=2022.56' });
    }
-  const goBank = () => { }
+  const goBank = () => {
+    Taro.navigateTo({ url: '/pages/bankCard/index' });
+   }
   const signOut = () => { 
     Taro.reLaunch({ url: '/pages/index/index?tab=2' });
   }

src/pages/userInfo/index.config.js

@@ -0,0 +1,7 @@
+export default {
+  navigationBarTitleText: '个人信息',
+  navigationStyle: 'custom',
+  styleIsolation: 'shared',
+  enableShareAppMessage: true,
+  disableScroll: true,
+}

src/pages/userInfo/index.jsx

@@ -0,0 +1,83 @@
+import { useState } from "react"
+import Taro from "@tarojs/taro"
+import { Input, View, Image } from "@tarojs/components"
+import withLayout from '@/layouts'
+import CustomNav from "@/components/CustomNav"
+import MyButton from "@/components/MyButton"
+import banner1 from '@/assets/banner/1.jpg'
+import resetImg from '@/assets/user/cancel.png'
+import './style.less'
+
+export default withLayout((props) => {
+  const [name, setName] = useState()
+  const [phone, setPhone] = useState()
+  const [avatar, setAvatar] = useState(banner1)
+  const changeName = (e) => {
+    setName(e.detail.value)
+  }
+  const changePhone = (e) => {
+    setPhone(e.detail.value)
+  }
+  const handleSave = () => {
+    console.log('保存成功')
+    Taro.navigateBack({delta:1})
+  }
+  const resetName=()=>{
+    setName()
+  }
+  const resetPhone=()=>{
+    setPhone()
+  }
+  const changeAvatar=()=>{
+    Taro.chooseImage({
+      count: 1,
+      success: function (res) {
+        setAvatar(res.tempFilePaths[0])
+        // uploadFile(res.tempFilePaths[0]).then((res2) => {
+        //   const date = {
+        //     targetId: roomId,
+        //     targetType: 'room',
+        //     content: res2,
+        //     contentType: 'image'
+        //   }
+        //   saveExtend(date)
+        //   setReset(!reset)
+        // })
+      }
+    })
+  }
+  return (
+    <View className='page-index'>
+      <View className='index-navbar'>
+        <CustomNav title='个人信息' />
+      </View>
+      <View className='index-container userCard'>
+        <View className='avatar' onClick={changeAvatar}>
+          <Image src={avatar} className='avatarImg' />
+          <View className='change'>更换头像</View>
+        </View>
+        <View className='userCell'>
+          <View>姓名：</View>
+          <View style={{ display: 'flex', alignItems: 'center', height: '54px' }}>
+            <Input type='text' placeholder='请输入您的姓名' value={name} onBlur={changeName} className='userName' />
+            <View className='reset' onClick={resetName}>
+              <Image src={resetImg} className='close' />
+            </View>
+          </View>
+        </View>
+        <View className='userCell'>
+          <View>手机号：</View>
+          <View style={{ display: 'flex', alignItems: 'center', height: '54px' }}>
+            <Input type='text' placeholder='请输入您的手机号' value={phone} onBlur={changePhone} className='userName' />
+            <View className='reset' onClick={resetPhone}>
+              <Image src={resetImg} className='close' />
+            </View>
+          </View>
+        </View>
+        <View className='bottomBtn'>
+          <MyButton value='保存' onClick={handleSave} />
+        </View>
+      </View>
+    </View>
+  )
+})

src/pages/userInfo/style.less

@@ -0,0 +1,54 @@
+.userCard{
+  margin: 30px;
+  .avatar{
+    height: 184px;
+    background: #FFF;
+    box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.12);
+    display: flex;
+    align-items: center;
+    .avatarImg{
+      width: 124px;
+      height: 124px;
+      background: #F2F2F2;
+      border: 4px solid #FFFFFF;
+      border-radius: 50%;
+    }
+    .change{
+      font-size: 34px;
+      font-weight: 500;
+      color: #333333;
+      position: absolute;
+      right: 0;
+    }
+  }
+  .userCell{
+    background: #FFF;
+    box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.12);
+    font-size: 34px;
+    font-weight: bold;
+    color: #333333;
+    margin-top: 80px;
+    .userName{
+      height: 108px;
+      flex: 1;
+    }
+    .reset{
+      flex: none;
+      width: 100px;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      .close{
+        width: 36px;
+        height: 36px;
+        margin: auto;
+      }
+    }
+  }
+  .bottomBtn{
+    margin-bottom: 30px;
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+  }
+}

src/routes.js

@@ -34,6 +34,14 @@ const mainPages = [
     title: '提现',
     page: 'pages/withdrawal/index',
   },
+  {
+    title: '我的银行卡',
+    page: 'pages/bankCard/index',
+  },
+  {
+    title: '个人信息',
+    page: 'pages/userInfo/index',
+  },
   
 ];