pay-video-applet-uniapp-24-8-22/pages/mine/withdraw.vue

<template>
  <view class="withdraw">
    <!--顶部导航栏-->
    <navbar leftClick @leftClick="$utils.navigateBack" title="提现"/>

    <!--内容区-->
    <view class="content">

      <!--上部分-->
      <view class="content-top">
        <view class="aaa">
          <view class="top">￥1240,045</view>
          <view class="bottom">可提现金额</view>
        </view>
      </view>

      <!--下部分-->
      <view class="content-bottom">

        <view class="inputComponent">
          <view class="left">填写提现金额</view>
          <view class="centerAndRight">
            <view class="center">
              <uv-input placeholder="输入金额" v-model="withdrawMoney"
                        border="none" @change="moneyChange"></uv-input>
            </view>
            <view class="right">全部提现</view>
          </view>
        </view>
      </view>
    </view>

    <!--提现按钮-->
    <button @click="withdrawPage" class="bottomBtn">
      提现
    </button>

  </view>
</template>

<script>
import '../../common.css'; // 引入公共 CSS 文件

export default {
  data() {
    return {
      withdrawMoney: "",
    };
  },
  methods: {
    // 金额发生变化
    moneyChange(e) {
      console.log(e)
      this.withdrawMoney = e
    },

    // 提现
    withdrawPage() {
      this.$api('infoWithdraw', {
        withdrawMoney: this.withdrawMoney
      }, res => {
        if (res.code == 200) {
          this.$utils.navigateTo('/mine/withdrawalRecord');
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.withdraw {
  .content {
    .content-top {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding-top: 60rpx;
      background-color: #f8faff;

      height: 10vh;

      .aaa {
        color: #000000;

        .top {
          font-size: 50rpx;
        }

        .bottom {
          font-size: 14px;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }


    }

    .content-bottom {
      border-radius: 50rpx 50rpx 0 0;
      box-shadow: 0 -10rpx 10rpx rgba(0, 0, 0, 0.2); /* 仅上边的阴影效果 */
      background-color: #fff;
      height: calc(90vh - 240rpx);
      //width: 100vw;
      padding: 40rpx;

      .inputComponent {
        display: flex;

        //gap: 20rpx;
        //border: 1px solid red;

        .left {
          display: flex;
          justify-content: flex-start;
          align-items: center;

          font-size: 30rpx;

          width: 50%;
          margin-right: 20rpx;
        }

        .centerAndRight {
          display: flex;
          width: 50%;

          .center {
            width: 60%;
          }

          .right {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            font-size: 32rpx;
            margin-left: 20rpx;

            width: 40%;


            background: $uni-linear-gradient-color;
            -webkit-background-clip: text; /*将设置的背景颜色限制在文字中*/
            -webkit-text-fill-color: transparent; /*给文字设置成透明*/
          }
        }


      }
    }
  }

}

</style>