applet/pages/distribution/withdraw.vue

<template>
  <view class="main">
    <navbar :config="config" backColor="#666"></navbar>
    <view class="canWithdrawCls">
      <view>
        <view>可提现服务积分：</view>
        <view class="canWithdrawCls_val"
          ><text>{{ walletInfo.commission_able }}</text></view
        >
      </view>
      <view class="u-mt20 markBox">
        <view class="u-mr30"
          >待入账 <view><text></text>{{ walletInfo.wait_account }}</view>
        </view>
        <view
          >冻结中 <view><text></text>{{ walletInfo.freezing }}</view>
        </view>
      </view>
    </view>

    <view class="withdrawCls">
      <view class="withdrawCls_lab"
        >提现服务积分
        <!-- <text>（最低提现佣金1公益服务积分）</text> -->
        <text>（最低提现佣金{{ walletInfo.min_extract }}）</text>
      </view>
      <view class="withdrawCls_val">
        <!-- <text>￥</text> -->
        <input
          @input="getMoney"
          maxlength="10"
          type="digit"
          v-model="dataForm.public_service_points"
          placeholder-style="color:#CCCCCC"
          placeholder="提现服务积分"
        />
      </view>
      <view class="bg-fff">
        <view class="u-flex-center-sb u-1A1A1A" @click="openBankCard">
          <view class="u-flex">
            <text class="u-font30">提现方式</text>
            <view
              class="ml46 u-font28"
              v-if="bankCardList.length > 0 && dataForm.payment_term == 2"
            >
              <view>
                <image :src="bankIcon" class="img30"></image>
                <text class="u-ml20">{{ dataForm.bank_name }}</text>
              </view>
              <view class="u-999 u-mt5 u-ml45 u-flex">
                尾号
                <rich-text
                  :nodes="$mUtil.cutOut(dataForm.withdraw_account)"
                ></rich-text>
                储蓄卡
              </view>
            </view>
            <view
              class="ml46 u-font28"
              v-if="bankCardList.length <= 0 && dataForm.payment_term == 2"
            >
              添加银行卡
            </view>
            <view class="ml46 u-font28 sBox" v-if="dataForm.payment_term == 1">
              <image
                :src="$mUtil.staticUrl + '/alipay.png'"
                class="img30"
              ></image>
              支付宝
            </view>
            <view class="ml46 u-font28 sBox" v-if="dataForm.payment_term == 0">
              <image
                :src="$mUtil.staticUrl + '/weChat.png'"
                class="img30"
              ></image>
              微信
            </view>
            <view class="ml46 u-font28" v-if="dataForm.payment_term == 4">
              提现到公益积分
            </view>
          </view>
          <view class="iconfont u-font24 u-666"> &#xe6c7;</view>
        </view>
      </view>
    </view>
    <view class="btnBox">
      <view @click="requestWithdrawal">提交申请</view>
    </view>

    <uni-popup
      class="submit-popup"
      ref="submitPopup"
      type="center"
      :mask-click="false"
    >
      <view class="content-box">
        <view class="title">提交完成</view>
        <view class="content">
          <image
            class="success-icon"
            src="/static/common/success-icon.png"
          ></image>
          <view class="tip"> </view>
          <button class="btn" @click="closePopup()">确 定</button>
        </view>
      </view>
    </uni-popup>
    <!--弹窗选择银行卡-->
    <uniPopup type="bottom" ref="uniPopup">
      <view class="popup">
        <view class="bg-top">
          <text class="iconfont u-999" @click="close">&#xe612;</text>
          <text class="u-text-center ml200">选择优先付款方式</text>
        </view>
        <view class="bankCardList">
          <view v-for="(item, index) in bankCardList" :key="item.id">
            <!--index 下标，2 是类型自定义（下面支付宝，微信一样）-->
            <view class="item u-flex" @click="pitchOn(index, 2)">
              <image :src="item.icon"></image>
              <view class="u-ml25 rh-br u-flex-sb">
                <view class="u-flex">
                  <text>{{ item.bank_name }}</text>
                  （<rich-text :nodes="$mUtil.cutOut(item.card_num)"></rich-text
                  >）
                </view>
                <text class="iconfont pull-right" v-if="pitchOnIndex == index"
                  >&#xe63e;</text
                >
              </view>
            </view>
          </view>

          <!--添加银行卡-->
          <view class="item u-flex" @click="goAddBankCard">
            <text class="iconfont">&#xe81a;</text>
            <view class="u-ml25 rh-br">
              <text>添加银行卡</text>
            </view>
          </view>

          <!--支付宝-->
          <view class="item u-flex" @click="pitchOn(-1, 1)">
            <image :src="$mUtil.staticUrl + '/alipay.png'"></image>
            <view class="u-ml25 rh-br">
              <text>支付宝</text>
              <text class="iconfont pull-right" v-if="pitchOnIndex == -1"
                >&#xe63e;</text
              >
            </view>
          </view>
          <view class="item u-flex" @click="pitchOn(-2, 0)">
            <image :src="$mUtil.staticUrl + '/weChat.png'"></image>
            <view class="u-ml25 rh-br">
              <text>微信</text>
              <text class="iconfont pull-right" v-if="pitchOnIndex == -2"
                >&#xe63e;</text
              >
            </view>
          </view>
          <view class="item u-flex" @click="pitchOn(-3, 4)">
            <view class="u-ml25 rh-br">
              <text>提现到公益积分</text>
              <text class="iconfont pull-right" v-if="pitchOnIndex == -3"
                >&#xe63e;</text
              >
            </view>
          </view>
        </view>
      </view>
    </uniPopup>
  </view>
</template>

<script setup>
import { ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";

const $http = uni.$http;

const dataForm = ref({
  public_service_points: "", // 提现金额
  payment_term: 2, // * 收款方式：* 0 微信，* 1 支付宝，* 2 银行线下 * 3 现金支付
  payee: "", // 收款人
  withdraw_account: "", // 提现账户
  withdraw_mobile: "", // 提现手机
  bank_name: "", // 银行名称
});
const bankIcon = ref("");
const pitchOnIndex = ref(0);
const walletInfo = ref({
  min_extract: 0,
  wait_account: 0,
  freezing: 0,
}); // 账户信息
const bankCardList = ref([]);
const submitPopup = ref(null);
const uniPopup = ref(null);

// 生命周期
onLoad(() => {
  // 获取账户信息
  getAccountMsg();
  // 获取银行卡列表
  getBankCardList();
});

// 方法
// 获取账户信息
const getAccountMsg = () => {
  $http.get("/withdraw/getWalletInfo", {}).then(async (res) => {
    if (res && res.code == 200) {
      if (res.data) {
        walletInfo.value = res.data;
      }
    }
  });
};

// 获取银行卡列表
const getBankCardList = () => {
  $http.get("/member/bankcard/bankCardList", {}).then(async (res) => {
    if (res && res.code == 200) {
      bankCardList.value = res.list;
      // 默认提方式为用户银行卡列表第一张银行卡
      if (res.list.length > 0) {
        dataForm.value.bank_name = res.list[0].bank_name;
        dataForm.value.withdraw_account = res.list[0].card_num;
        bankIcon.value = res.list[0].icon;
        dataForm.value.payee = res.list[0].name;
        dataForm.value.withdraw_mobile = res.list[0].mobile;
        dataForm.value.user_bank_id = bankCardList.value[0].id;
      }
    }
  });
};

// 打开弹窗银行卡列表
const openBankCard = () => {
  uniPopup.value.open();
};

// 关闭弹窗
const close = () => {
  uniPopup.value.close();
};

// 选择提现方式
const pitchOn = (index, type) => {
  pitchOnIndex.value = index;
  dataForm.value.payment_term = type;
  if (type == 2) {
    dataForm.value.bank_name = bankCardList.value[index].bank_name;
    dataForm.value.withdraw_account = bankCardList.value[index].card_num;
    bankIcon.value = bankCardList.value[index].icon;
    dataForm.value.user_bank_id = bankCardList.value[index].id;
  } else {
    dataForm.value.user_bank_id = null;
  }
  uniPopup.value.close();
};

// 跳到添加银行卡
const goAddBankCard = () => {
  uni.navigateTo({
    url: "/pages/user/bankCard/addBankCard",
  });
};

// 获取输入提现金额
const getMoney = (e) => {
  e.target.value = e.target.value.match(/^\d*(\.?\d{0,2})/g)[0] || null;
  // 重新赋值给 input
  setTimeout(() => {
    dataForm.value.public_service_points = e.target.value
      ? e.target.value * 1
      : "";
  }, 0);
};

// 申请提现
const requestWithdrawal = () => {
  if (!dataForm.value.public_service_points) {
    uni.$uv.toast("请输入提现服务积分");
    return false;
  }
  if (dataForm.value.public_service_points < walletInfo.value.min_extract) {
    uni.$uv.toast("提现金额超出您的最低提现服务积分");
    return false;
  }
  if (dataForm.value.payment_term === "") {
    uni.$uv.toast("请选择提现方式");
    return false;
  }
  if (dataForm.value.payment_term == 2) {
    if (!dataForm.value.bank_name) {
      uni.$uv.toast("请先添加银行卡");
      return false;
    }
  }

  $http.post("/withdraw/memberWithdraw", dataForm.value).then(async (res) => {
    if (res && res.code == 200) {
      uni.$uv.toast("申请成功");
      setTimeout(() => {
        uni.navigateBack({
          success: () => {
            let page = getCurrentPages().pop(); // 跳转页面成功之后
            if (!page) {
              return;
            } else {
              page.onLoad(page.options); // page 自带 options 对象.
            }
          },
        });
      }, 2000);
    } else {
      uni.$uv.toast(res.msg);
    }
  });
};

// 关闭弹窗
const closePopup = () => {
  submitPopup.value.close();
};
</script>

<style lang="scss" scoped>
.canWithdrawCls {
  font-size: 28rpx;
  color: #1a1a1a;
  padding: 60rpx;
  border-bottom: 8rpx solid #f5f5f5;

  .markBox {
    text {
      display: inline-block;
      width: 10rpx;
    }
  }

  > view {
    display: flex;

    .canWithdrawCls_val {
      font-size: 24rpx;
      align-items: baseline;

      text {
        font-size: 36rpx;
        color: #ff0000;
      }
    }

    > view {
      display: flex;

      text {
        font-size: 24rpx;
        color: #808080;
      }

      > view {
        color: #808080;
      }
    }
  }
}

.withdrawCls {
  padding: 40rpx 60rpx;

  .withdrawCls_lab {
    font-size: 28rpx;
    color: #1a1a1a;

    text {
      color: #808080;
    }
  }

  .withdrawCls_val {
    display: flex;
    align-items: center;
    font-size: 60rpx;
    padding: 30rpx 0;
    border-bottom: 3rpx dashed #808080;

    text {
      color: #181818;
    }

    input {
      margin-left: 10rpx;
      font-size: 42rpx;
    }
  }

  .withdrawTypeCls {
    display: flex;
    justify-content: space-between;
    margin-top: 40rpx;

    .withdrawTypeCls_lab {
      font-size: 30rpx;
      color: #1a1a1a;
    }

    .withdrawTypeCls_val {
      font-size: 28rpx;
      color: #999999;

      .selLab {
        color: #1a1a1a;
      }
    }

    .withdrawTypeCls_dir {
      color: #808080;
    }
  }
}

.btnBox {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #ffffff;
  padding: 30rpx 30rpx 60rpx 30rpx;

  > view {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 32rpx;
    color: #ffffff;
    padding: 20rpx 0;
    background: #0b844a;
    border-radius: 40rpx;
  }
}

.content-box {
  width: 440rpx;
  padding-bottom: 50rpx;
}

.bg-fff {
  background-color: #ffffff;
  padding: 26rpx 0rpx 36rpx;
  border-radius: 0rpx 0rpx 18px 18rpx;
}

.ml46 {
  margin-left: 46rpx;
}

.apply-btn {
  margin-top: 80rpx;

  button {
    background: #0b844a;
    color: #ffffff;
  }
}

.zfb-wx {
  padding-bottom: 24rpx;

  .payIcon {
    color: #00aaef;
    font-size: 32rpx;
    margin-right: 18rpx;
  }

  .wxIcon {
    color: rgb(37, 171, 56);
    font-size: 32rpx;
    margin-right: 18rpx;
  }
}

.zhInput input {
  width: 62%;
  height: 70rpx;
  line-height: 70rpx;
  padding: 0rpx 20rpx;
  border: 1rpx solid #d9d9d9;
  border-radius: 6rpx;
}

.popup {
  width: 100%;

  .bg-top {
    background-color: #f5f5f5;
    padding: 20rpx 30rpx;
    border-radius: 18rpx 18rpx 0px 0px;
  }

  .bankCardList {
    background-color: #ffffff;
    padding: 0rpx 30rpx;
    padding-bottom: 185rpx;

    .item {
      height: 84rpx;
      line-height: 84rpx;

      image {
        width: 48rpx;
        height: 42rpx;
        // margin-top: 20rpx;
        vertical-align: bottom;
      }

      .rh-br {
        width: 100%;
        border-bottom: 1rpx solid #e6e6e6;
      }

      .pull-right {
        float: right !important;
      }
    }
  }
}

.ml56 {
  margin-left: 56rpx;
}

.ml200 {
  margin-left: 200rpx;
}

.wt112 {
  width: 140rpx;
}

.img30 {
  width: 30rpx;
  height: 30rpx;
}

.wd-bgImg {
  position: relative;
  padding: 25rpx 0rpx;

  image {
    width: 100%;
    height: 200rpx;
    vertical-align: bottom;
  }

  .moneyInfo {
    position: absolute;
    top: 25rpx;
    width: 92%;

    .mt40 {
      margin-top: 40rpx;
    }

    .detail-btn button {
      height: 56rpx;
      line-height: 30rpx;
      border-radius: 28px;
      opacity: 0.82;
      padding: 10rpx 30rpx;
      background-color: #eed9a9;
      color: #0b844a;
    }
  }
}

.wdInput {
  background-color: #ffffff;
  border-radius: 18rpx 18rpx 0px 0rpx;
  padding: 40rpx 22rpx 32rpx;

  .input {
    height: 80rpx;
    line-height: 80rpx;
    font-size: 60rpx;
    border-bottom: 1rpx solid #d9d9d9;
    padding-bottom: 25rpx;

    input {
      height: 80rpx;
      line-height: 80rpx;
      font-size: 36rpx;
    }
  }
}

.u-flex-sb {
  display: flex;
  justify-content: space-between;
}

.sBox {
  display: flex;
  align-items: center;

  > image {
    margin-right: 10rpx;
  }
}
</style>