完善提现认证、提现记录、提现逻辑

src/pages/member/index.jsx

@@ -18,7 +18,7 @@ export default class Index extends Component {
       users: { name: "去登录", icon: avatar },
       earnings: { store_earnings_now: 0, store_earnings_all: 0 },
       draw_money: { store_earnings_now: 0 },
-      partner: { partner_direct_cnt: 0},
+      partner: { partner_direct_cnt: 0 },
       order: { order_all: 0, order_promotion: 0, order_pay: 0, unissued_order_cnt: 0, on_arrival_order_cnt: 0, dead_order_cnt: 0 },
     }, //会员信息
   };
@@ -37,7 +37,7 @@ export default class Index extends Component {
       });
     }
   };
-  componentDidShow() {
+  componentDidShow () {
     if (Taro.getStorageSync("session_key")) {
       this.getVipInfo(); //获取会员首页数据
     }
@@ -46,7 +46,7 @@ export default class Index extends Component {
   handleOrderClick = (type) => {
     Taro.navigateTo({ url: `/pages/memberSub/earningsOrder/index?type=${type}` });
   }
-  render() {
+  render () {
     const { vipInfo } = this.state;
     return (
       <View className="member">
@@ -120,12 +120,12 @@ export default class Index extends Component {
                   ¥{vipInfo.draw_money.store_earnings_now}
                 </Text>
 
-                {/* <View className="warning-icon-box">
+                <View className="warning-icon-box">
                   <Image className="warning-icon" src={warning} />
                   <Text className="warning-text">未完成提现认证</Text>
-                </View> */}
+                </View>
               </View>
-              {/* <View onClick={() => Taro.navigateTo({ url: `/pages/memberSub/cashOut/index` })} className="right">点击提现</View> */}
+              <View onClick={() => Taro.navigateTo({ url: `/pages/memberSub/cashOut/index` })} className="right">点击提现</View> 
             </View>
           </View>
           {/* 我的伙伴 */}
@@ -176,7 +176,7 @@ export default class Index extends Component {
               <View className="order-item" onClick={() => this.handleOrderClick(2)}>
                 <Text className="label">已付款订单</Text>
                 <Text className="amount">{vipInfo.order.unissued_order_cnt}</Text>
-              </View>            
+              </View>
               <View className="order-item" onClick={() => this.handleOrderClick(2)}>
                 <Text className="label">已收货订单</Text>
                 <Text className="amount">{vipInfo.order.on_arrival_order_cnt}</Text>

src/pages/memberSub/Alipay/index.config.js

@@ -1,3 +1,3 @@
 export default definePageConfig({
-  navigationBarTitleText: '支付宝'
+  navigationBarTitleText: '提现认证'
 })

src/pages/memberSub/Alipay/index.jsx

@@ -3,6 +3,10 @@ import { View, Text, Image } from "@tarojs/components";
 import { AtInput } from "taro-ui";
 import "./index.less";
 import aliPayIcon from "../../../images/aliPayIcon.png";
+import { get_my_worker_info, worker_register, card_ocr } from "../../../service/money_api";
+import Taro from '@tarojs/taro';
+
+
 export default class Index extends Component {
   state = {
     name: "", // 账户姓名
@@ -10,51 +14,247 @@ export default class Index extends Component {
     phone: "", // 手机号
     idCard: "", // 身份证号
     bankCard: "", // 银行卡号
+    idCardFront: "https://video-img.fyshark.com/1735011631991upload-background-front.11d37038.png", // 身份证正面
+    idCardBack: "https://video-img.fyshark.com/1735011647149upload-background-back.5b42ae0e.png", // 身份证反面
+    type: "alipay", // 类型
+    phoneError: false, // 手机号格式错误标志
+    isLoading: false, // 是否加载中
+    isAlipay: false, // 是否已绑定支付宝
+    isBank: false, // 是否已绑定银行卡
+    signImg: "https://video-img.fyshark.com/1735033624483%E5%B7%B2%E7%AD%BE%E7%BA%A6.png", // 签约码
   };
+
+  componentDidMount () {
+    this.getWorkerInfo(); // 页面加载时请求签约信息
+  }
+
+  // 获取签约信息
+  getWorkerInfo = async () => {
+    const res = await get_my_worker_info();
+    if (res.length > 0) {
+      res.forEach(item => {
+        if (item.rsv_account_type === 1) {
+          this.setState({
+            name: item.name,
+            idCard: item.card_no,
+            phone: item.phone,
+            idCardFront: item.portrait_page,
+            idCardBack: item.national_emblem_page,
+            account: item.bank_no,
+            isAlipay: true
+          });
+        } else {
+          this.setState({
+            name: item.name,
+            idCard: item.card_no,
+            phone: item.phone,
+            idCardFront: item.portrait_page,
+            idCardBack: item.national_emblem_page,
+            bankCard: item.bank_no,
+            isBank: true
+          });
+        }
+      });
+    }
+    console.log(res, 'res');
+  }
   // 账户姓名
-  handleChangeName(value) {
+  handleChangeName (value) {
     this.setState({ name: value });
   }
   // 支付宝账户
-  handleChangeAccount(value) {
+  handleChangeAccount (value) {
     this.setState({ account: value });
   }
   // 手机号
-  handleChangePhone(value) {
+  handleChangePhone (value) {
     this.setState({ phone: value });
   }
   // 身份证号
-  handleChangeIdCard(value) {
+  handleChangeIdCard (value) {
     this.setState({ idCard: value });
   }
   // 银行卡号
-  handleChangeBankCard(value) {
+  handleChangeBankCard (value) {
     this.setState({ bankCard: value });
   }
-  render() {
+
+
+
+  handleChooseImage (type) {
+    if (this.isBind()) return;
+    Taro.chooseImage({
+      count: 1, // 选择一张图片
+      sizeType: ['compressed'], // 可以指定是原图还是压缩图
+      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机
+      success: (res) => {
+        const filePath = res.tempFilePaths[0];
+        Taro.showLoading({
+          title: '上传中...',
+          mask: true
+        });
+        Taro.uploadFile({
+          url: 'https://api.yushixcx.com/money/upload', // 上传接口地址
+          filePath: filePath,
+          name: 'file',
+          header: {
+            'accept': 'application/json',
+            'Content-Type': 'multipart/form-data'
+          },
+          formData: {
+            'type': 'image/png' // 根据需要设置文件类型
+          },
+          success: async (uploadRes) => {
+            const data = JSON.parse(uploadRes.data);
+            if (type === 'front') {
+              this.setState({ idCardFront: data.url });
+              let that = this;
+              await card_ocr({
+                img_url: data.url
+              }).then(res => {
+                console.log(res, 'res111');
+                let info = JSON.parse(res);
+                that.setState({ idCard: info.card_no, name: info.name });
+              })
+            } else if (type === 'back') {
+              this.setState({ idCardBack: data.url });
+            }
+            // 隐藏加载提示
+            Taro.hideLoading();
+          }
+
+        });
+      }
+    });
+  }
+  // 提交
+  handleSubmit () {
+    const { name, account, phone, idCard, bankCard, idCardFront, idCardBack, type, phoneError } = this.state;
+    const defaultFront = "https://video-img.fyshark.com/1735011631991upload-background-front.11d37038.png";
+    const defaultBack = "https://video-img.fyshark.com/1735011647149upload-background-back.5b42ae0e.png";
+    switch (true) {
+      case name.length === 0:
+        Taro.showToast({
+          title: '请填写账户姓名',
+          icon: 'none',
+          duration: 2000
+        });
+        return;
+      case phone.length === 0 || phoneError:
+        Taro.showToast({
+          title: phone.length === 0 ? '请填写手机号' : phoneError ? '手机号格式错误' : '请填写手机号',
+          icon: 'none',
+          duration: 2000
+        });
+        return;
+      case idCard.length === 0:
+        Taro.showToast({
+          title: '请填写身份证号',
+          icon: 'none',
+          duration: 2000
+        });
+        return;
+      case type === 'alipay' && account.length === 0:
+        Taro.showToast({
+          title: '请填写支付宝账户',
+          icon: 'none',
+          duration: 2000
+        });
+        return;
+      case type === 'bank' && bankCard.length === 0:
+        Taro.showToast({
+          title: '请填写银行卡号',
+          icon: 'none',
+          duration: 2000
+        });
+        return;
+      case idCardFront === defaultFront || idCardBack === defaultBack:
+        Taro.showToast({
+          title: '请上传身份证照片',
+          icon: 'none',
+          duration: 2000
+        });
+        return;
+    }
+    Taro.showLoading({
+      title: '签约中...',
+      mask: true
+    });
+    worker_register({
+      name,
+      card_no: idCard,
+      bank_no: type === 'alipay' ? account : bankCard,
+      phone,
+      rsv_account_type: type === 'alipay' ? "1" : "0",
+      portrait_page: idCardFront,
+      national_emblem_page: idCardBack
+    }).then(res => {
+      console.log(res, 'res');
+      Taro.showToast({
+        title: '签约成功',
+        icon: 'none',
+        duration: 2000
+      });
+    }).finally(() => {
+      Taro.hideLoading();
+    })
+  }
+
+  // 选择类型
+  handleChooseType (type) {
+    this.setState({ type });
+  }
+
+  // 手机号
+  handleBlurPhone (value) {
+    const phonePattern = /^1[3-9]\d{9}$/; // 简单的中国大陆手机号验证
+    if (phonePattern.test(value)) {
+      this.setState({ phoneError: false });
+    } else {
+      this.setState({ phoneError: true });
+    }
+  }
+  // 是否已绑定
+  isBind () {
+    return (this.state.isAlipay && this.state.type === 'alipay') || (this.state.isBank && this.state.type === 'bank')
+  }
+  render () {
     return (
       <View className="index">
         {/* 支付宝信息 */}
+
         <View className="alipay-info">
+          <View className="alipay-info-item">
+            <View className="type-box">
+              <View className={["type-title", this.state.type === 'alipay' ? 'active' : '']} onClick={() => this.handleChooseType('alipay')}>支付宝</View>
+              <View className={["type-title", this.state.type === 'bank' ? 'active' : '']} onClick={() => this.handleChooseType('bank')}>银行卡</View>
+            </View>
+          </View>
+          <View className="upload-box">
+            <View className="upload-title" style={{ color: this.isBind() ? '#999' : '#333' }}>请上传身份证照片</View>
+            <View className="upload-image">
+              <View className="upload-image-item" onClick={() => this.handleChooseImage('front')}>
+                <Image src={this.state.idCardFront} className="upload-image-item-image" />
+              </View>
+              <View className="upload-image-item" onClick={() => this.handleChooseImage('back')}>
+                <Image src={this.state.idCardBack} className="upload-image-item-image" />
+              </View>
+            </View>
+          </View>
+
           <AtInput
             name="value"
             title="账户姓名"
             type="text"
+            disabled={this.isBind()}
             placeholder="请输入账户姓名"
             value={this.state.name}
             onChange={this.handleChangeName.bind(this)}
           />
           <AtInput
             name="value"
-            title="手机号"
-            type="text"
-            placeholder="请输入手机号"
-            value={this.state.phone}
-            onChange={this.handleChangePhone.bind(this)}
-          />
-          <AtInput
-            name="value"
             title="身份证号"
+            disabled={this.isBind()}
             type="text"
             placeholder="请输入身份证号"
             value={this.state.idCard}
@@ -62,34 +262,75 @@ export default class Index extends Component {
           />
           <AtInput
             name="value"
-            title="银行卡号"
-            type="text"
-            placeholder="请输入银行卡号"
-            value={this.state.bankCard}
-            onChange={this.handleChangeBankCard.bind(this)}
-          />
-          <AtInput
-            border={false}
-            name="value"
-            title="支付宝账户"
-            type="text"
-            placeholder="请输入支付宝账户"
-            value={this.state.account}
-            onChange={this.handleChangeAccount.bind(this)}
+            title="手机号"
+            disabled={this.isBind()}
+            type='phone'
+            placeholder="请输入手机号"
+            value={this.state.phone}
+            onChange={this.handleChangePhone.bind(this)}
+            onBlur={this.handleBlurPhone.bind(this)}
+            error={this.state.phoneError}
+            errorMessage={this.state.phoneError ? '请输入正确的手机号' : ''}
           />
+          {
+            this.state.type === 'bank' && (
+              <AtInput
+                name="value"
+                disabled={this.isBind()}
+                title="银行卡号"
+                type="text"
+                placeholder="请输入银行卡号"
+                value={this.state.bankCard}
+                onChange={this.handleChangeBankCard.bind(this)}
+              />
+            )
+          }
+          {
+            this.state.type === 'alipay' && (
+              <AtInput
+                border={false}
+                disabled={this.isBind()}
+                name="value"
+                title="支付宝账户"
+                type="text"
+                placeholder="请输入支付宝账户"
+                value={this.state.account}
+                onChange={this.handleChangeAccount.bind(this)}
+              />
+            )
+          }
         </View>
-        {/* 注意 */}
-        <View className="attention">
-          <View className="attention-top">
-            <Image src={aliPayIcon} className="attention-icon" />
-            注意：
-          </View>
-          <View className="attention-bottom">
-            所维护的信息需要与提现认证提交的自然人为同一人，非同一人会提现失败
+        <View className="alipay-info-tips">
+          <View className="alipay-info-tips-item">
+            <Image src={this.state.signImg} className="alipay-info-tips-item-icon" />
+            <View className="alipay-info-tips-item-text">
+              如需更改，请联系客服
+            </View>
           </View>
         </View>
+        {/* 注意 */}
+        {
+          !this.isBind() && (
+            <View className="attention">
+              <View className="attention-top">
+                <Image src={aliPayIcon} className="attention-icon" />
+                注意：
+              </View>
+              <View className="attention-bottom">
+                所维护的信息需要与提现认证提交的自然人为同一人，非同一人会提现失败
+              </View>
+            </View>
+          )
+        }
         {/* 提交 */}
-        <View className="submit">提交</View>
+        {
+          !this.isBind() &&
+          <View className="submit" onClick={this.handleSubmit.bind(this)}>提交</View>
+        }
+        {
+          !this.isBind() &&
+          <View className="submit" onClick={this.handleSubmit.bind(this)}>提交</View>
+        }
       </View>
     );
   }

src/pages/memberSub/Alipay/index.less

@@ -1,61 +1,161 @@
 .index {
-    padding: 30px 16px;
-    background-color: #f9f9f9;
+  padding: 30px 16px;
+  background-color: #f9f9f9;
+  box-sizing: border-box;
+  min-height: 100vh;
+  position: relative;
+
+  .alipay-info {
+    padding: 0 17px;
+    border-radius: 20px;
+    background-color: #fff;
     box-sizing: border-box;
-    min-height: 100vh;
-
-    .alipay-info {
-        padding: 0 17px;
-        border-radius: 20px;
-        background-color: #fff;
-        box-sizing: border-box;
-        overflow: hidden;
-
-        .at-input__title {
-            font-size: 28px;
-            color: #000000;
-        }
+    overflow: hidden;
 
-        .at-input {
-            margin-left: 0;
-        }
-    }
+    .upload-box {
+      margin-top: 20px;
+      padding: 20px 0;
 
-    // 注意
-    .attention {
-        padding: 22px 41px 22px 19px;
-        box-sizing: border-box;
-        background-color: #fdf7e7;
-        border-radius: 20px;
+      .upload-title {
+        font-size: 28px;
+        color: #000000;
+      }
+
+      .upload-image {
         margin-top: 20px;
-        font-size: 26px;
-        color: #A0A0A0;
-        line-height: 38px;
-        .attention-top {
-            display: flex;
-            align-items: center;
-
-            .attention-icon {
-                width: 38px;
-                height: 38px;
-                margin-right: 10px;
-            }
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+        gap: 20px;
+
+        .upload-image-item {
+          flex: 1;
+          width: 100%;
+          aspect-ratio: 294 / 199;
+          background-color: #f0f0f0;
+          border-radius: 20px;
+          margin-bottom: 20px;
+          position: relative;
+
+          .upload-image-item-image {
+            width: 100%;
+            height: 100%;
+            border-radius: 20px;
+            object-fit: cover;
+          }
+
+          .upload-image-item-input {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            opacity: 0;
+            z-index: 10;
+          }
         }
+      }
     }
-    // 提交
-    .submit{
-        background-color: #f6c71a;
-        margin: 0 16px;
-        position: fixed;
-        bottom: 30px;
-        left: 0;
-        right: 0;
-        height: 88px;
+
+    .alipay-info-item {
+      width: 100%;
+
+      .type-box {
         display: flex;
+        flex-direction: row;
         align-items: center;
         justify-content: center;
-        font-size: 28px;
-        color: #000000;
-        border-radius: 70px;
+        width: 100%;
+
+        .type-title {
+          width: 50%;
+          font-weight: 600;
+          font-size: 36px;
+          color: #868484;
+          text-align: center;
+          padding: 20px 0;
+          border-bottom: 2px solid transparent;
+        }
+
+        .active {
+          color: #000000;
+          border-bottom: 2px solid #000000;
+        }
+      }
+    }
+
+    .at-input__title {
+      font-size: 28px;
+      color: #000000;
+    }
+
+    .at-input {
+      margin-left: 0;
+    }
+  }
+
+  .alipay-info-tips {
+    position: absolute;
+    left: 50%;
+    top: 70%;
+    transform: translateX(15%) translateY(-50%);
+
+  .alipay-info-tips-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    .alipay-info-tips-item-icon {
+      width: 200px;
+      height: 200px;
     }
+
+    .alipay-info-tips-item-text {
+      margin-top: 20px;
+      font-size: 28px;
+      color: #F9C518;
+    }
+  }
+}
+
+// 注意
+.attention {
+  padding: 22px 41px 22px 19px;
+  box-sizing: border-box;
+  background-color: #fdf7e7;
+  border-radius: 20px;
+  margin-top: 20px;
+  font-size: 26px;
+  color: #A0A0A0;
+  line-height: 38px;
+
+  .attention-top {
+    display: flex;
+    align-items: center;
+
+    .attention-icon {
+      width: 38px;
+      height: 38px;
+      margin-right: 10px;
+    }
+  }
+}
+
+// 提交
+.submit {
+  background-color: #f6c71a;
+  margin: 0 16px;
+  position: fixed;
+  bottom: 30px;
+  left: 0;
+  right: 0;
+  height: 88px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 28px;
+  color: #000000;
+  border-radius: 70px;
+}
 }

src/pages/memberSub/cashOut/index.jsx

@@ -1,56 +1,180 @@
 import { Component } from 'react'
-import { View, Text } from '@tarojs/components'
-import { AtList, AtListItem } from "taro-ui"
+import { View, Text, Image } from '@tarojs/components'
+import { AtList, AtListItem, AtModal, AtModalHeader, AtModalContent, AtModalAction, AtInput } from "taro-ui"
 import './index.less'
 import Taro from '@tarojs/taro'
+import { get_my_worker_info, submit_withdraw_record } from '../../../service/money_api'
+import { getUserInfo } from '../../../service/index'
 export default class Index extends Component {
+  state = {
+    userInfo: {},
+    isOpened: false,
+    isAlipay: false, // 是否已绑定支付宝
+    isBank: false, // 是否已绑定银行卡
+    amount: 0, // 提现金额
+    bank_id: 0, // 银行卡id
+    alipay_id: 0, // 支付宝id
+    type: 0, // 提现类型
+    translate_money: 0, // 可提现金额
+  }
+  componentDidMount () {
+    this.getWorkerInfo(); // 页面加载时请求签约信息
+    this.getUserInfo(); // 页面加载时请求用户信息
+  }
+  // 获取用户信息
+  getUserInfo = async () => {
+    const userInfoRes = await getUserInfo();
+    this.setState({
+      translate_money: userInfoRes.translate_money
+    });
+    console.log(userInfoRes, 'userInfoRes');
+
+  }
+  // 获取签约信息
+  getWorkerInfo = async () => {
+    const res = await get_my_worker_info();
+    if (res.length > 0) {
+      res.forEach(item => {
+        if (item.rsv_account_type === 1) {
+          this.setState({
+            type: 1,
+            isAlipay: true,
+            alipay_id: item.rsv_account_id
+          });
+        } else {
+          this.setState({
+            type: 0,
+            isBank: true,
+            bank_id: item.rsv_account_id
+          });
+        }
+      });
+    }
+    console.log(res, 'res');
+  }
+
+
+  openModal = () => {
+    if (!this.state.isAlipay && !this.state.isBank) {
+      Taro.showToast({
+        title: '请先提现认证',
+        icon: 'none'
+      })
+      return;
+    }
+    this.setState({
+      isOpened: true
+    })
+  }
+  handleChange = (e) => {
+    if (e > this.state.translate_money) {
+      e == this.state.translate_money
+    }
+    this.setState({
+      amount: e
+    })
+  }
+  handleSubmit = async () => {
+    const res = await submit_withdraw_record({
+      amount: this.state.amount,
+      bank_id: this.state.type === 1 ? this.state.alipay_id : this.state.bank_id
+    });
+    if (res.code === 0) {
+      Taro.showToast({
+        title: '提现申请成功',
+        icon: 'none'
+      })
+      this.setState({
+        isOpened: false
+      })
+      this.getUserInfo();
+    }
+  }
 
   render () {
     return (
-      <View className='index'>  
-      {/* 提现 */}
+      <View className='index'>
+        {/* 提现 */}
         <View className='cash-out'>
           <View className='balance-section'>
-          <View className='balance-info'>
-            <Text className='label'>可提现金额</Text>
-            <View className='amount'>
-              <Text className='integer'>¥888.</Text>
-              <Text className='decimal'>00</Text>
+            <View className='balance-info'>
+              <Text className='label'>可提现金额</Text>
+              <View className='amount'>
+                <Text className='integer'>{`¥ ${this.state.translate_money}`}</Text>
+              </View>
+            </View>
+            <View className='action'>
+              <View className='withdraw-btn' onClick={() => this.openModal()}>提现</View>
             </View>
-          </View>
-          <View className='action'>
-            <View className='withdraw-btn'>提现</View>
           </View>
         </View>
-      </View>
-      {/* 提现功能 */}
-      <View className='cash-out-function'>
-        <AtList hasBorder={false}>
-        <AtListItem hasBorder={false} onClick={() => Taro.navigateTo({ url: `/pages/memberSub/Alipay/index` })} title='提现认证' extraText='认证审核中' arrow='right' />
-        <View className='line'></View>
-        <AtListItem hasBorder={false} onClick={() => Taro.navigateTo({ url: `/pages/memberSub/cashOutRecord/index` })} title='提现记录' extraText='' arrow='right' />
-        <View className='line'></View>
-        <AtListItem hasBorder={false} title='支付账户' extraText='需维护支付宝账户信息' arrow='right' />
-        <View className='line'></View>
-        <AtListItem hasBorder={false} onClick={() => Taro.navigateTo({ url: `/pages/memberSub/statementRecords/index` })} title='标题结算单记录' extraText='6月结算单已出' arrow='right' />
-        </AtList>
-      </View>
-      {/* 结算单说明 */}
-      <View className='settlement-statement'>
-        <Text className='title'>结算单说明</Text>
-        <View className='contentBox'>
-        <View className='content indent'>1. 每月 <Text className='highlight'>27</Text>号 出上月结算单</View>
-        <View className='content sub-content'>收益可在当月27号至30号全天申请提现</View>
-        <View className='content sub-content'>错过需要等下个月,提现金额会在1-5个工作日到账</View>
-        <View className='content indent'>2. 会员需要在提现前完成 提现认证 并审核通过</View>
-        <View className='content sub-content'>维护完善 支付宝账户信息，否则将影响提现进行</View>
-        <View className='content indent'>3. 结算单收益:订单完成时间在上个月的总收益</View>
-        <View className='content sub-content'>上个月【已付款】但未完成订单可在下个月提现</View>
-        <View className='content indent'>4. 可提现金额已扣除各项税费，提现金额需大于1元</View>
-        <View className='content indent'>5. 本月未提现收益不会清 0</View>
-        <View className='content sub-content'>会累积到账户余额，下个月合并提现</View>
+        {/* 提现功能 */}
+        <View className='cash-out-function'>
+          <AtList hasBorder={false}>
+            <AtListItem hasBorder={false} onClick={() => Taro.navigateTo({ url: `/pages/memberSub/Alipay/index` })} title='提现认证' arrow='right' />
+            <View className='line'></View>
+            <AtListItem hasBorder={false} onClick={() => Taro.navigateTo({ url: `/pages/memberSub/cashOutRecord/index` })} title='提现记录' extraText='' arrow='right' />
+            <View className='line'></View>
+            {/* <AtListItem hasBorder={false} title='支付账户' extraText='需维护支付宝账户信息' arrow='right' /> */}
+            {/* <View className='line'></View> */}
+            <AtListItem hasBorder={false} onClick={() => Taro.navigateTo({ url: `/pages/memberSub/statementRecords/index` })} title='标题结算单记录' extraText='6月结算单已出' arrow='right' />
+          </AtList>
         </View>
-      </View>
+        {/* 结算单说明 */}
+        <View className='settlement-statement'>
+          <Text className='title'>结算单说明</Text>
+          <View className='contentBox'>
+            <View className='content indent'>1. 每月 <Text className='highlight'>27</Text>号 出上月结算单</View>
+            <View className='content sub-content'>收益可在当月27号至30号全天申请提现</View>
+            <View className='content sub-content'>错过需要等下个月,提现金额会在1-5个工作日到账</View>
+            <View className='content indent'>2. 会员需要在提现前完成 提现认证 并审核通过</View>
+            <View className='content sub-content'>维护完善 支付宝账户信息，否则将影响提现进行</View>
+            <View className='content indent'>3. 结算单收益:订单完成时间在上个月的总收益</View>
+            <View className='content sub-content'>上个月【已付款】但未完成订单可在下个月提现</View>
+            <View className='content indent'>4. 可提现金额已扣除各项税费，提现金额需大于1元</View>
+            <View className='content indent'>5. 本月未提现收益不会清 0</View>
+            <View className='content sub-content'>会累积到账户余额，下个月合并提现</View>
+          </View>
+        </View>
+        <AtModal
+          isOpened={this.state.isOpened}
+        >
+          <AtModalHeader>提现申请</AtModalHeader>
+          <AtModalContent>
+            <View className='amount-box'>
+              <AtInput
+                className='amount-input'
+                name='value2'
+                title='金额'
+                type='number'
+                placeholder='请输入金额'
+                value={this.state.amount}
+                onChange={this.handleChange}
+              />
+              <View className='all-btn' onClick={() => this.handleChange(this.state.translate_money)}>全部</View>
+            </View>
+            <View className='amount-info'>
+              {
+                this.state.isAlipay &&
+                <View className={['amount-info-item', this.state.type === 1 ? 'active' : '']} onClick={() => this.setState({ type: 1 })}>
+                  <Image src='https://video-img.fyshark.com/1735041316314%E6%94%AF%E4%BB%98%E5%AE%9D%E6%94%AF%E4%BB%98.png' style={{ width: '24px', height: '24px' }} />
+                  <Text className='amount-info-item-text'>支付宝</Text>
+                </View>
+              }
+              {
+                this.state.isBank &&
+                <View className={['amount-info-item', this.state.type === 0 ? 'active' : '']} onClick={() => this.setState({ type: 2 })}>
+                  <Image src='https://video-img.fyshark.com/1735041334363%E6%94%AF%E4%BB%98%E5%B9%B3%E5%8F%B0-%E9%93%B6%E8%81%94.png' style={{ width: '32px', height: '24px' }} />
+                  <Text className='amount-info-item-text'>银行卡</Text>
+                </View>
+              }
+            </View>
+            <View className='submit-btn'>
+              <View className='submit-btn-text' onClick={this.handleSubmit}>提交</View>
+            </View>
+          </AtModalContent>
+          <AtModalAction>  </AtModalAction>
+        </AtModal>
       </View>
     )
   }

src/pages/memberSub/cashOut/index.less

@@ -1,122 +1,188 @@
 .index {
-    min-height: 100vh;
-    background-color: #f0f2f5;
-    padding: 20px 16px 0 16px;
-    box-sizing: border-box;
+  min-height: 100vh;
+  background-color: #f0f2f5;
+  padding: 20px 16px 0 16px;
+  box-sizing: border-box;
 
 }
 
 .cash-out {
-    .balance-section {
+  .balance-section {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background-color: #fff;
+    border-radius: 20px;
+    padding: 0 17px;
+    box-sizing: border-box;
+
+    .balance-info {
+      padding: 35px 0 25px 0;
+      box-sizing: border-box;
+
+      .label {
+        font-size: 28px;
+        color: #000000;
+        display: block;
+        margin-bottom: 11px;
+        line-height: 41px;
+        font-weight: 500;
+      }
+
+      .amount {
         display: flex;
-        justify-content: space-between;
-        align-items: center;
-        background-color: #fff;
-        border-radius: 20px;
-        padding: 0 17px;
-        box-sizing: border-box;
-
-        .balance-info {
-            padding: 35px 0 25px 0;
-            box-sizing: border-box;
-
-            .label {
-                font-size: 28px;
-                color: #000000;
-                display: block;
-                margin-bottom: 11px;
-                line-height: 41px;
-                font-weight: 500;
-            }
-
-            .amount {
-                display: flex;
-                align-items: baseline;
-                font-weight: 700;
-                line-height: 70px;
-                color: #F6C71A;
-
-                .integer {
-                    font-size: 48px;
-                }
-
-                .decimal {
-                    font-size: 36px;
-                }
-            }
+        align-items: baseline;
+        font-weight: 700;
+        line-height: 70px;
+        color: #F6C71A;
+
+        .integer {
+          font-size: 48px;
         }
 
-        .action {
-            .withdraw-btn {
-                color: #F6C71A;
-                padding: 13px 53px;
-                line-height: 38px;
-                border-radius: 60px;
-                font-size: 26px;
-                border: 1px solid #F6C71A;
-            }
+        .decimal {
+          font-size: 36px;
         }
+      }
+    }
+
+    .action {
+      .withdraw-btn {
+        color: #F6C71A;
+        padding: 13px 53px;
+        line-height: 38px;
+        border-radius: 60px;
+        font-size: 26px;
+        border: 1px solid #F6C71A;
+      }
     }
+  }
 }
 
 // 提现功能
 .cash-out-function {
-    margin-top: 20px;
-    border-radius: 20px;
-    background-color: #fff;
-    overflow: hidden;
-    .line{
-        margin: 0 17px;
-        height: 1px;
-        background-color: #D8D8D8;
-    }
-    .item-content__info-title {
-        font-weight: 500;
-        font-size: 28px;
-        color: #000000;
-    }
-    .item-extra__info{
-        font-size: 24px;
-    }
-    .at-list__item-extra{
-        max-width: 400px;
-    }
-    .at-list__item .item-extra__icon-arrow{
-        font-size: 32px;
-    }
-    .at-list__item{
-        padding: 31px 17px;
-    }
+  margin-top: 20px;
+  border-radius: 20px;
+  background-color: #fff;
+  overflow: hidden;
+
+  .line {
+    margin: 0 17px;
+    height: 1px;
+    background-color: #D8D8D8;
+  }
+
+  .item-content__info-title {
+    font-weight: 500;
+    font-size: 28px;
+    color: #000000;
+  }
+
+  .item-extra__info {
+    font-size: 24px;
+  }
+
+  .at-list__item-extra {
+    max-width: 400px;
+  }
+
+  .at-list__item .item-extra__icon-arrow {
+    font-size: 32px;
+  }
+
+  .at-list__item {
+    padding: 31px 17px;
+  }
 }
+
 // 结算单说明
-.settlement-statement{
-    margin-top: 30px;
-    padding: 0 17px;
-    box-sizing: border-box;
-    .title{
-        font-size: 24px;
-        line-height: 35px;
-        color: #000000;
+.settlement-statement {
+  margin-top: 30px;
+  padding: 0 17px;
+  box-sizing: border-box;
+
+  .title {
+    font-size: 24px;
+    line-height: 35px;
+    color: #000000;
+  }
+
+  .contentBox {
+    margin-top: 10px;
+  }
+
+  .content {
+    font-size: 22px;
+    line-height: 32px;
+    color: #B5B5B5;
+
+    &.indent {
+      padding-left: 24px;
+      text-indent: -24px;
     }
-    .contentBox{
-        margin-top: 10px;
+
+    &.sub-content {
+      padding-left: 24px;
     }
-    .content{
-        font-size: 22px;
-        line-height: 32px;
-        color: #B5B5B5;
-        
-        &.indent {
-            padding-left: 24px;
-            text-indent: -24px;
-        }
-        
-        &.sub-content {
-            padding-left: 24px;
-        }
 
-        .highlight{
-            color: #EC8F2B;
-        }
+    .highlight {
+      color: #EC8F2B;
     }
+  }
 }
+
+.amount-box {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  .amount-input {
+    flex: 1;
+  }
+
+  .all-btn {
+    font-size: 24px;
+    color: #113fab;
+    border-radius: 10px;
+  }
+}
+
+.amount-info {
+  margin-top: 80px;
+  display: flex;
+  align-items: center;
+  gap: 20px;
+
+  .amount-info-item {
+    padding: 10rpx 30rpx;
+    border: 2rpx solid #9c9ca0;
+    border-radius: 30rpx;
+    display: flex;
+    align-items: center;
+    gap: 5px;
+
+    .amount-info-item-text {
+      font-size: 24px;
+      color: #000000;
+    }
+  }
+
+  .active {
+    border: 2rpx solid #FCE020 !important;
+  }
+}
+
+.submit-btn {
+  margin-top: 40px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 10px 0;
+  background-color: #FCE020;
+  border-radius: 10px;
+
+  .submit-btn-text {
+    font-size: 28px;
+    color: #000000;
+  }
+}

src/pages/memberSub/cashOutRecord/index.jsx

@@ -2,21 +2,44 @@ import { Component } from 'react'
 import { View, Text, Image } from '@tarojs/components'
 import './index.less'
 import wallet from '../../../images/wallet.png'
-export default class Index extends Component {
-
-  componentWillMount () { }
+import { get_withdraw_record } from '../../../service/money_api'
 
-  componentDidMount () { }
+export default class Index extends Component {
+  state = {
+    withdraw_record_list: [],
+    page: 1,
+    page_size: 20, // 每页加载20条
+    total: 0,
+    loading: false // 加载状态
+  }
 
-  componentWillUnmount () { }
+  componentDidShow () {
+    this.get_withdraw_record()
+  }
 
-  componentDidShow () { }
+  get_withdraw_record = async () => {
+    if (this.state.loading) return; // 防止重复加载
+    this.setState({ loading: true });
+    const res = await get_withdraw_record({
+      page: this.state.page,
+      page_size: this.state.page_size
+    })
+    console.log(res, 'res')
+    this.setState(prevState => ({
+      withdraw_record_list: prevState.page === 1 ? res : [...prevState.withdraw_record_list, ...res],
+      loading: false
+    }))
+  }
 
-  componentDidHide () { }
+  onReachBottom = () => {
+    if (this.state.withdraw_record_list.length < this.state.total) {
+      this.setState(prevState => ({ page: prevState.page + 1 }), this.get_withdraw_record)
+    }
+  }
 
   render () {
     return (
-      <View className='index'>
+      <View className='index' onScrollToLower={this.onReachBottom}>
         {/* 提现记录 */}
         <View className='cash-out-record'>
           {/* 累计提现金额 */}
@@ -31,13 +54,17 @@ export default class Index extends Component {
             </View>
           </View>
           {/* 提现记录 */}
-          <View className='record-item'>
-            <View className='item-time'>2024-06-27 10:00:00</View>
-            <View className='item-amount'>
-              <View className='amount'>￥ 10000.00</View>
-              <View className='status'>提现成功</View>
-            </View>
-          </View>
+          {this.state.withdraw_record_list.map((item, index) => {
+            return (
+              <View className='record-item' key={index}>
+                <View className='item-time'>{item.time.replace('T', ' ')}</View>
+                <View className='item-amount'>
+                  <View className='amount'>￥{item.amount}</View>
+                  <View className='status'>{item.msg}</View>
+                </View>
+              </View>
+            )
+          })}
         </View>
       </View>
     )

src/service/money_api.js

@@ -0,0 +1,41 @@
+import Request from '../api/request';
+
+// 提现认证 
+export const worker_register = data =>
+  Request({
+    url: '/money/worker_register',
+    method: 'POST',
+    data,
+  });
+
+// 获取签约信息
+export const get_my_worker_info = data =>
+  Request({
+    url: '/money/get_my_worker_info',
+    method: 'POST',
+    data,
+  });
+
+  // 申请提现
+  export const submit_withdraw_record = data =>
+  Request({
+    url: '/money/submit_withdraw_record',
+    method: 'POST',
+    data,
+  });
+
+  // 身份证ocr
+  export const card_ocr = data =>
+    Request({
+      url: '/money/card_ocr',
+      method: 'POST',
+      data,
+    });
+
+  // 获取提现记录
+  export const get_withdraw_record = data =>
+    Request({
+      url: '/money/get_withdraw_record',
+      method: 'POST',
+      data,
+    });