englishread-front/subPages/user/cash.vue

<template>
  <view class="cash-page">
    <!-- 顶部标题栏 -->
    
    <!-- 表单内容 -->
    <view class="form-container">
      <view class="header">
        <view class="title">微信提现</view>
        <view class="flow-link">过往流水 ></view>
      </view>
      <!-- 真实姓名 -->
      <view class="form-item">
        <view class="label">真实姓名</view>
        <uv-input
          v-model="realName"
          placeholder="请输入"
          border="none"
          :custom-style="inputStyle"
        ></uv-input>
      </view>
      
      <!-- 提现金额 -->
      <view class="form-item">
        <view class="label">提现金额</view>
        <uv-input
          v-model="amount"
          placeholder="请输入"
          type="number"
          border="none"
          :custom-style="inputStyle"
        ></uv-input>
      </view>
    </view>
    
    <!-- 说明文字 -->
    <view class="notice-text">
      请仔细检查并确认相关信息，因用户个人疏忽导致的充值错误，需由用户自行承担。
      <text class="link-text" @click="showWithdrawRules">《提现须知》</text>
    </view>
    
    <!-- 固定底部按钮 -->
    <view class="fixed-bottom">
      <uv-button
        type="primary"
        :custom-style="buttonStyle"
        @click="handleWithdraw"
      >
        提现
      </uv-button>
      <uv-safe-bottom></uv-safe-bottom>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      realName: '',
      amount: '',
      inputStyle: {
        backgroundColor: 'transparent',
        fontSize: '32rpx',
        color: '#333'
      },
      buttonStyle: {
        backgroundColor: '#22F2EB',
        borderRadius: '50rpx',
        height: '88rpx',
        fontSize: '32rpx',
        fontWeight: 'bold'
      }
    }
  },
  methods: {
    handleWithdraw() {
      if (!this.realName) {
        uni.showToast({
          title: '请输入真实姓名',
          icon: 'none'
        })
        return
      }
      if (!this.amount) {
        uni.showToast({
          title: '请输入提现金额',
          icon: 'none'
        })
        return
      }
      
      // 提现逻辑
      console.log('提现信息:', {
        realName: this.realName,
        amount: this.amount
      })
      
      uni.showToast({
        title: '提现申请已提交',
        icon: 'success'
      })
    },
    
    showWithdrawRules() {
      // 显示提现须知
      uni.showModal({
        title: '提现须知',
        content: '1. 提现金额最低10元\n2. 工作日24小时内到账\n3. 手续费按平台规定收取',
        showCancel: false
      })
    }
  }
}
</script>

<style lang="scss" scoped>
// @import '@/uni.scss';

.cash-page {
  min-height: 100vh;
  background-color: #F2F2F2;
  padding-bottom: 200rpx;
  padding-top: 40rpx;
  .header {
    background-color: #fff;
    padding: 40rpx 40rpx 30rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    .title {
      font-size: 36rpx;
      font-weight: bold;
      color: #333;
    }
    
    .flow-link {
      font-size: 28rpx;
      color: #999;
    }
  }
  
  .form-container {
    background-color: #fff;
    margin: 20rpx 40rpx;
    border-radius: 32rpx;
    margin-top: 20rpx;
    .form-item {
      padding: 40rpx;
      border-bottom: 1rpx solid #f0f0f0;
      
      &:last-child {
        border-bottom: none;
      }
      
      .label {
        font-size: 32rpx;
        color: #333;
        margin-bottom: 20rpx;
        font-weight: 500;
      }
    }
  }
  
  .notice-text {
    padding: 40rpx;
    font-size: 24rpx;
    color: #999;
    line-height: 1.6;
    
    .link-text {
      color: #22F2EB;
    }
  }
  
  .fixed-bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 30rpx 40rpx;
    background-color: #fff;
    border-top: 1rpx solid #f0f0f0;
    z-index: 999;
  }
}
</style>