.

src/assets/walletCard/index.jsx → src/components/walletCard/index.jsx

@@ -3,13 +3,15 @@ import walletImg from '@/assets/bank/walletBgi.png'
 import './style.less'
 
 export default (props) => {
-  const {value,onClick}=props
+  const {value,onClick,tixian}=props
   return (
     <View className='walletCard'>
       <Image src={walletImg} className='walletImg' />
       <View className='title'>钱包余额(元)</View>
-      <View className='price'>2022.56</View>
-      <View className='withdrawalBtn' onClick={onClick}>提现</View>
+      <View className='price'>{value}</View>
+      {
+        !tixian&&<View className='withdrawalBtn' onClick={onClick}>提现</View>
+      }
     </View>
     )
 }

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

@@ -30,7 +30,7 @@ export default (props) => {
     Taro.navigateTo({ url: '/pages/machineryList/index' });
    }
   const goWallet = () => {
-    Taro.navigateTo({ url: '/pages/wallet/index' });
+    Taro.navigateTo({ url: '/pages/wallet/index?balance=2022.56' });
    }
   const goBank = () => { }
   const signOut = () => { 

src/pages/wallet/index.jsx

@@ -1,12 +1,17 @@
+import Taro from "@tarojs/taro"
 import { View, ScrollView } from "@tarojs/components"
 import withLayout from '@/layouts'
 import CustomNav from "@/components/CustomNav"
-import WalletCard from "@/assets/walletCard"
+import WalletCard from "@/components/walletCard"
 import ListTitle from "@/components/ListTitle"
 import './style.less'
 
 export default withLayout((props) => {
-  const goWithdrawal = () => { }
+  const { router } = props
+  let { balance } = router.params
+  const goWithdrawal = () => { 
+    Taro.navigateTo({ url: `/pages/withdrawal/index?balance=${balance}` });
+  }
   return (
     <View className='page-index'>
       <View className='index-navbar'>
@@ -14,12 +19,8 @@ export default withLayout((props) => {
       </View>
       <View className='index-container wallet'>
         <ScrollView scrollY style={{ height: '100%' }}>
-          <WalletCard onClick={goWithdrawal} />
+          <WalletCard onClick={goWithdrawal} value={balance} />
           <ListTitle value='零钱明细' />
-          {/* <View className='listTitle'>
-            <View className='verticalLine' />
-            零钱明细
-          </View> */}
           <View className='dayClass'>2022-03-10</View>
           <View className='walletCell'>
             <View className='content'>

src/pages/wallet/style.less

@@ -1,19 +1,6 @@
 .wallet{
   margin: 30px;
   font-weight: bold;
-  // .listTitle{
-  //   display: flex;
-  //   align-items: center;
-  //   font-size: 34px;
-  //   color: #333;
-  //   margin: 60px 0 10px;
-  //   .verticalLine{
-  //     width: 8px;
-  //     height: 32px;
-  //     background: #000;
-  //     margin-right: 23px;
-  //   }
-  // }
   .dayClass{
     height: 68px;
     background: #F8F8F8;

src/pages/withdrawal/index.config.js

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

src/pages/withdrawal/index.jsx

@@ -0,0 +1,75 @@
+import { useState } from "react"
+import { View, Image, Input, Picker } from "@tarojs/components"
+import CustomNav from "@/components/CustomNav"
+import WalletCard from "@/components/walletCard"
+import ListTitle from "@/components/ListTitle"
+import goto from '@/assets/user/goto.png'
+import MyButton from "@/components/MyButton"
+import withLayout from '@/layouts'
+import './style.less'
+
+export default withLayout((props) => {
+  const { router } = props
+  let { balance } = router.params
+  const [money, setMoney] = useState()
+
+  const [index, setIndex] = useState(0)
+  const bankList = [
+    {
+      key: 1,
+      value: '中国建设银行（2258）'
+    },
+    {
+      key: 2,
+      value: '中国招商银行（9755）'
+    },
+    {
+      key: 3,
+      value: '中国工商银行（5675）'
+    },
+  ]
+  const bankContentList = ['中国建设银行（2258）', '中国招商银行（9755）', '中国工商银行（5675）']
+  const onChange = e => {
+    console.log(bankList[e.detail.value])
+    setIndex(e.detail.value)
+  }
+
+  const onClick = () => {
+    if ((money - 0) > balance) {
+      console.log('您的余额不足');
+    } else {
+      console.log('提交成功，1到3个工作日将到您的付款账户')
+      // 刷新页面
+    }
+  }
+  const handleChanage = (e) => {
+    setMoney(e.detail.value)
+  }
+  return (
+    <View className='page-index'>
+      <View className='index-navbar'>
+        <CustomNav title='我的钱包' />
+      </View>
+      <View className='index-container withdrawal'>
+        <WalletCard tixian value={balance} />
+        <ListTitle value='选择银行卡' />
+        <Picker mode='selector' placeholder='请选择提现银行卡' range={bankContentList} onChange={onChange}>
+          <View className='bankPicker'>
+            <View className='body'>
+              {bankContentList[index]}
+            </View>
+            <Image className='cell-action-picker' src={goto} />
+          </View>
+        </Picker>
+        <ListTitle value='选择银行卡' />
+        <View className='bankInput'>
+          <View className='header'>￥</View>
+          <Input className='body' type='number' placeholder='请输入提取金额' value={money} onBlur={handleChanage} />
+        </View>
+        <View className='bottomBtn'>
+          <MyButton value='提现' onClick={onClick} />
+        </View>
+      </View>
+    </View>
+  )
+})

src/pages/withdrawal/style.less

@@ -0,0 +1,47 @@
+.withdrawal{
+  margin: 30px;
+  .bankPicker,.bankInput{
+    background: #FFF;
+    border: 2px solid #F2F2F2;
+    border-radius: 40px;
+    display: flex;
+    align-items: center;
+    padding: 36px 30px;
+    margin-top: 30px;
+    height: 108px;
+    box-sizing: border-box;
+  }
+  .bankPicker{
+    .body{
+      font-size: 32px;
+      font-weight: 500;
+      color: #333;
+      flex: 1;
+    }
+    .cell-action-picker{
+      width: 21px;
+      flex: none;
+      height: 36px;
+    }
+  }
+  .bankInput{
+    .header{
+      font-size: 48px;
+      font-weight: 500;
+      color: #333;
+      flex: none;
+      margin-right: 20px;
+    }
+    .body{
+      flex: 1;
+      font-size: 32px;
+      font-weight: 400;
+    }
+  }
+  .bottomBtn{
+    margin-bottom: 32px;
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+  }
+}

src/routes.js

@@ -30,6 +30,10 @@ const mainPages = [
     title: '我的钱包',
     page: 'pages/wallet/index',
   },
+  {
+    title: '提现',
+    page: 'pages/withdrawal/index',
+  },
   
 ];