applet/pages/user/wallet/reflect.vue

<template>
  <view class="reflect-container">
    <uv-navbar title="提现" placeholder autoBack bgColor="#f7f7f7"></uv-navbar>
    <view class="reflect-top">
      <view class="reflect-top-container">
        <view class="reflect-top-title">可提现金额</view>
        <view class="reflect-top-amount">
          <text class="reflect-top-amount-text">￥</text>
          <text class="reflect-top-amount-num">{{ info.ableAmount || 0 }}</text>
        </view>
        <view class="reflect-top-withdrawing"
          >提现中金额：￥{{ info.processingAmount || 0 }}</view
        >
        <view class="reflect-top-btn" @click.stop="handleWithdraw">
          <view class="iconfont">&#xe632;</view>
          <text>提现明细</text>
        </view>
      </view>
    </view>
    <view class="main-container">
      <view class="main-container-title">请输入提现金额</view>
      <view class="main-container-input">
        <text class="main-container-input-text">￥</text>
        <input
          v-model="formData.amount"
          class="reflect-input"
          placeholder="请输入提现金额"
          type="digit"
          @blur="handleBlur"
        />
      </view>
      <view class="main-container-prompt">单笔提现上限200，可多笔提现。</view>
      <view class="list u-flex-center-sb">
        <view class="label">到账方式</view>
        <view class="value u-flex-center">
          <text class="value-text">支付宝</text>
          <uv-icon name="arrow-right" color="#808080" size="30rpx"></uv-icon>
        </view>
      </view>
      <view class="list u-flex-center-sb">
        <view class="label">到账支付宝号</view>
        <view class="value">
          <input
            v-model="formData.accountInfo"
            class="reflect-input"
            placeholder="请输入支付宝号"
            placeholder-style="color: #808080;"
          />
        </view>
      </view>
    </view>

    <view class="reflect-btn">
      <button class="u-btn-two" @click.stop="withdrawBtn">确认提现</button>
    </view>

    <!-- 输入支付密码 -->
    <uv-popup
      ref="popupRef"
      mode="bottom"
      round="40rpx"
      closeable
      @change="handleClose"
    >
      <view class="popup-container" :style="{ paddingBottom: keyboardHeight ? keyboardHeight + 'px' : '36rpx'}">
        <view class="popup-container-top">
          <view class="popup-container-title">输入支付密码</view>
          <view class="popup-container-amount">
            <text class="popup-container-amount-text">￥</text>
            <text class="popup-container-amount-num">{{
              formData.amount || 0
            }}</text>
          </view>
          <view class="popup-container-prompt">提现金额</view>
        </view>
        <view class="popup-container-list">
          <view class="popup-list-item">
            <text class="popup-list-item-lable">手续费：</text>
            <text class="popup-list-item-value">￥{{ formData.fee || 0 }}</text>
          </view>
          <view class="popup-list-item u-mb20">
            <text class="popup-list-item-lable">费率：</text>
            <text class="popup-list-item-value"
              >{{ formData.withdrawRatio || 0 }}%</text
            >
          </view>
          <view>
            <uv-code-input
              v-if="formData.fee != null"
              v-model="formData.payPassword"
              size="82rpx"
              space="25rpx"
              dot
              :focus="formData.focusShow ? true : false"
              @finish="handleFinish"
              :adjustPosition="false"
            ></uv-code-input>
          </view>
          <view class="popup-container-btn u-flex-center-sb">
            <view class="confirm" @click="withdrawConfirm">确认提现</view>
            <view class="cancel" @click="withdrawCancel">取消</view>
          </view>
        </view>
      </view>
    </uv-popup>
  </view>
</template>

<script setup>
import { ref, nextTick } from "vue";
import {
  onLoad,
  onReachBottom,
  onPullDownRefresh,
  onShow,
} from "@dcloudio/uni-app";
import {
  withdrawalAmount_Api,
  addWithdrawal_Api,
  withdrawalFee_Api,
  isSetPayPassword_Api,
} from "@/api/userInfo.js";

import {
  agentWithdrawalAmount_Api,
  agentAddWithdrawal_Api,
  agentWithdrawalFee_Api,
} from "@/api/agencyCenter.js";

const popupRef = ref(null);
const info = ref({});
const formData = ref({});
const pageType = ref("1");
const isSetPayPassword = ref(null);

// 跳转提现明细
const handleWithdraw = () => {
  uni.navigateTo({
    url: "/pages/user/wallet/reflectList?pageType=" + pageType.value,
  });
};
// 输入框失焦处理数据
const handleBlur = () => {
  if (formData.value.amount) {
    formData.value.amount = (formData.value.amount * 1).toFixed(2);
  }
};
// 提现按钮
const withdrawBtn = () => {
  // console.log("提现", formData.value);
  if (!formData.value.amount) {
    uni.showToast({
      title: "请输入提现金额",
      icon: "none",
    });
    return;
  }
  if (formData.value.amount * 1 > 200) {
    uni.showToast({
      title: "提现金额不能大于200",
      icon: "none",
    });
    return;
  }
  if (formData.value.amount * 1 > info.value.ableAmount * 1) {
    uni.showToast({
      title: "提现金额不能大于可提现金额",
      icon: "none",
    });
    return;
  }
  if (!formData.value.accountInfo) {
    uni.showToast({
      title: "请输入支付宝号",
      icon: "none",
    });
    return;
  }

  if (!isSetPayPassword.value) {
    uni.$uv.toast("请先设置支付密码");
    setTimeout(() => {
      uni.navigateTo({
        url: "/pages/set/payPassword",
      });
    }, 500);
    return;
  }

  let url = pageType.value == "1" ? withdrawalFee_Api : agentWithdrawalFee_Api;
  url({ amount: formData.value.amount })
    .then((res) => {
      // console.log("提现手续费", res);
      if (res.code == 200 && res.data) {
        formData.value.fee = res.data.fee || 0;
        formData.value.withdrawRatio = res.data.withdrawRatio || 0;
        popupRef.value.open();
        setTimeout(() => {
          formData.value.focusShow = true;
          uni.onKeyboardHeightChange(listener);
        }, 500);
      }
    })
    .catch((err) => {
      console.log(err);
    });
};
const keyboardHeight = ref(0);
const listener = (res) => {
  // console.log(res.height);
  keyboardHeight.value = res.height || 0;
};

// 关闭弹窗处理数据
const handleClose = (e) => {
  if (!e.show) {
    // console.log("关闭");
    formData.value.fee = undefined;
    formData.value.withdrawRatio = undefined;
    formData.value.payPassword = undefined;
    uni.offKeyboardHeightChange(listener); // 需传入与监听时同一个的函数对象
  }
};
// 输入完成处理数据
const handleFinish = () => {
  // console.log("输入完成");
  try {
    uni.hideKeyboard();
  } catch (error) {}
  formData.value.focusShow = false;
  withdrawConfirm();
};

// 确认提现
const withdrawConfirm = () => {
  if (!formData.value.payPassword) {
    uni.showToast({
      title: "请输入支付密码",
      icon: "none",
    });
    return;
  }
  let form = {
    amount: formData.value.amount,
    accountInfo: formData.value.accountInfo,
    fee: formData.value.fee,
    payPassword: formData.value.payPassword,
    withdrawalMethod: "1", // 提现方式 1:支付宝 2:微信
  };
  // console.log("确认提现", form);
  uni.showLoading({
    title: "加载中...",
    mask: true,
  });
  let url = pageType.value == "1" ? addWithdrawal_Api : agentAddWithdrawal_Api;
  url(form)
    .then((res) => {
      // console.log("确认提现", res);
      uni.hideLoading();
      if (res.code == 200) {
        uni.showToast({
          title: "提交成功",
          icon: "success",
        });
        popupRef.value.close();
        formData.value = {};
        setTimeout(() => {
          getInfo();
        }, 500);
      }
    })
    .catch((err) => {
      // uni.hideLoading();
      console.log(err);
    });
};

// 取消提现
const withdrawCancel = () => {
  popupRef.value.close();
  formData.value = {};
};

const getInfo = () => {
  uni.showLoading({
    title: "加载中...",
  });
  let url =
    pageType.value == "1" ? withdrawalAmount_Api : agentWithdrawalAmount_Api;
  url()
    .then((res) => {
      uni.hideLoading();
      if (res.code == 200) {
        info.value = res.data;
      }
    })
    .catch((err) => {
      uni.hideLoading();
      console.log(err);
    });
};

onLoad((options) => {
  console.log("onLoad", options);
  if (options.pageType) {
    console.log("pageType", options.pageType);
    pageType.value = options.pageType;
  }
  getInfo();
});

onShow(() => {
  if (!isSetPayPassword.value) {
    try {
      isSetPayPassword_Api().then((res) => {
        // console.log(res);
        if (res && res.code == 200 && res.data) {
          isSetPayPassword.value = res.data ? true : false;
        }
      });
    } catch (error) {}
  }
});
</script>
<style lang="scss" scoped>
.reflect-container {
  .reflect-top {
    background-color: #f7f7f7;
    padding: 24rpx 30rpx 44rpx 30rpx;
    box-sizing: border-box;
    // min-height: 400rpx;
    .reflect-top-container {
      // min-height: 445rpx;
      width: 100%;
      // https://shop.xiaocaituan.com/image/personalCenter/wallet/icon_bg1.png
      background: url("https://shop.xiaocaituan.com/image/personalCenter/wallet/icon_bg1.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      text-align: center;
      padding: 36rpx 0 44rpx 0;
      color: #ffffff;
      box-sizing: border-box;
      .reflect-top-title {
        margin-bottom: 17rpx;
        font-size: 28rpx;
        font-weight: 700;
        color: #ffffff;
      }
      .reflect-top-amount {
        margin-bottom: 14rpx;
        .reflect-top-amount-text {
          font-size: 36rpx;
        }
        .reflect-top-amount-num {
          font-size: 66rpx;
          font-weight: normal;
        }
      }
      .reflect-top-withdrawing {
        margin-bottom: 28rpx;
        font-size: 28rpx;
        font-weight: 400;
        color: #fceae8;
      }
      .reflect-top-btn {
        width: 280rpx;
        height: 70rpx;
        border: 1rpx solid #ffffff;
        border-radius: 36rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: auto;
        .iconfont {
          margin-right: 10rpx;
        }
      }
    }
  }
  .main-container {
    padding: 40rpx 54rpx;
    box-sizing: border-box;
    margin-top: -40rpx;
    background: #ffffff;
    border-radius: 40rpx 40rpx 0px 0px;

    .main-container-title {
      font-size: 32rpx;
      font-weight: 700;
      color: #333333;
    }

    .main-container-prompt {
      font-size: 28rpx;
      font-weight: 400;
      color: #ff0000;
      margin-top: 10rpx;
    }

    .main-container-input {
      padding: 20rpx 0;
      display: flex;
      align-items: center;
      border-bottom: 1rpx solid #d9d9d9;
      .main-container-input-text {
        font-size: 60rpx;
        font-weight: 700;
        color: #eb5153;
        margin-right: 5rpx;
      }
      .reflect-input {
        // color: #cccccc;
        font-size: 28rpx;
        flex: 1;
      }
    }
    .list {
      padding-top: 30rpx;
      .label {
        flex-shrink: 0;
        margin-right: 10rpx;
        font-size: 28rpx;
        font-weight: 400;
        color: #1a1a1a;
      }
      .value {
        font-size: 28rpx;
        .value-text {
          color: #1a1a1a;
        }
        .value-prompt {
          color: #808080;
        }
        .reflect-input {
          text-align: right;
          flex: 1;
        }
      }
    }
  }

  .reflect-btn {
    padding: 40rpx 54rpx;
    box-sizing: border-box;
    .u-btn-two {
      height: 90rpx;
      line-height: 90rpx;
    }
  }
}
.popup-container {
  padding: 0 0 36rpx 0;
  .popup-container-top {
    text-align: center;
    background: #f8f8f8;
    padding-bottom: 43rpx;
    padding-top: 36rpx;
    .popup-container-title {
      font-size: 32rpx;
      font-weight: 700;
      color: #1a1a1a;
      margin-bottom: 46rpx;
    }
    .popup-container-amount {
      .popup-container-amount-text {
        font-size: 30rpx;
        font-weight: normal;
        color: #eb5153;
      }
      .popup-container-amount-num {
        font-size: 60rpx;
        font-weight: normal;
        color: #eb5153;
      }
    }
    .popup-container-prompt {
      font-size: 28rpx;
      font-weight: 400;
      color: #1a1a1a;
    }
  }
  .popup-container-list {
    padding: 30rpx 54rpx;
    box-sizing: border-box;
    position: relative;
    .popup-list-item {
      padding-bottom: 20rpx;
      font-size: 28rpx;
      .popup-list-item-value {
        color: #808080;
      }
    }
  }
  .popup-container-btn {
    margin: 70rpx 0 0 0;
    .confirm,
    .cancel {
      width: 310rpx;
      height: 76rpx;
      border-radius: 38rpx;
      box-sizing: border-box;
      text-align: center;
      line-height: 76rpx;
      font-weight: 700;
      font-size: 28rpx;
    }
    .confirm {
      background: #eb5153;
      color: #ffffff;
    }
    .cancel {
      background: #ffffff;
      border: 1rpx solid #cccccc;
      color: #808080;
    }
  }
}
</style>