shangfutong-ui/jeepay-ui-uapp-agent/pageAccount/takeMoney/takeMoney.vue

<template>
  <JHeaderTitle title="发起提现" bgColor="#f2f2f2"></JHeaderTitle>
  <view class="user-contact bgF2 afterBdR32">
    提现联系人
    <view class="user-name">
      <view
        @tap="contact.open({ contactName: tackInfo.contactName, contactTel: tackInfo.contactTel })"
        :class="{ 'user-weight': tackInfo.contactName }"
        >{{ tackInfo.contactName ? tackInfo.contactName : "暂未设置联系人" }}
        <image src="/static/iconImg/right-arrow.svg" mode="scaleToFill"
      /></view>
      <image v-if="!tackInfo.contactTel" src="/static/iconImg/user-contact.svg" mode="scaleToFill" />
      <template v-else>{{ tackInfo.contactTel }}</template>
    </view>
  </view>
  <view class="money-main">
    <view class="money-title">提现金额</view>
    <view class="money-input">
      <input type="digit" v-model="tackInfo.amount" :maxlength="maxlength" @input="check" />
      (元)
    </view>

    <view class="money-balance">可提现￥{{ tackInfo.allowTakeAmount  }}<text @tap="allIn">全部提现</text></view>
    <view class="money-upload">
      <JUpLoad name="申请资料（请上传发票等凭证图片）" pd="0" pdLeft="0" fontSize="28rpx" v-model:value="settCertImg" borderNone>222</JUpLoad>
    </view>
    <view class="money-remarks">
      <JInput
        name="备注"
        pd="40rpx 0"
        place="请输入备注"
        :maxlength="17"
        size="28rpx"
        v-model:value="tackInfo.applyRemark"
        :isBorder="true"
      ></JInput>
    </view>
  </view>
  <JButton pd="30rpx 60rpx 50rpx 60rpx " pdTop="40rpx" @HandleTouch="createTack">发起提现</JButton>
  <USerContact ref="contact" @userContact="userContact"></USerContact>
  <ConfirmTake ref="tack"></ConfirmTake>
  <SipwTips ref="sipw" />
</template>

<script setup>
import { reactive, ref, watchEffect } from "vue"
import { onLoad, onShow } from "@dcloudio/uni-app"
import {
  $getAmountFee,
  $getAcountInfo,
  $putApplition,
  $statistics,
  $getCashoutDetail,
  $isSipw,
} from "@/http/apiManager.js"
import { horn } from "@/hooks/handleMoney"
import valid from "@/hooks/validate"
import JHeaderTitle from "@/components//newComponents/JHeaderTitle/JHeaderTitle"
import JInput from "@/components//newComponents/JInput/JInput"
import JUpLoad from "@/components//newComponents/JUpLoad/JUpLoad"
import JButton from "@/components//newComponents/JButton/JButton"
import USerContact from "./components/UserContact.vue"
import ConfirmTake from "./components/ConfirmTake"
import SipwTips from "./components/SipwTips.vue"
onLoad((options) => {
  if (options.rid) {
    rid = options.rid
    getWithInfo(options.rid)
  } else {
    getTack()
  }
})
const settCertImg = ref()
const contact = ref(null)
const tack = ref(null)
const sipw = ref(null)
const tackInfo = ref({
  amount: "",
})
const maxlength = ref(10)

let rid = undefined
const getTack = () => {
  $statistics().then(({ bizData }) => {
    tackInfo.value.allowTakeAmount = horn(bizData.allowTakeAmount)
  })
  if (rid) return false
  $getAcountInfo().then(({ bizData }) => {
    tackInfo.value = bizData
    const contactInfo = uni.getStorageSync("contactInfo")
    if (contactInfo.name) {
      tackInfo.value.contactName = contactInfo.name
      tackInfo.value.contactTel = contactInfo.phone
    }
  })
}

// 展业宝提现记录页进入的位置↓↓↓
const getWithInfo = (rid) => {
  $getCashoutDetail(rid).then(({ bizData }) => {
    tackInfo.value = bizData
    tackInfo.value.contactName = bizData.settAccountName
    tackInfo.value.contactTel = bizData.settAccountTelphone
    tackInfo.value.amount = (bizData.applyAmount / 100).toFixed(2)
    tackInfo.value.allowTakeAmount = horn(bizData.allowTakeAmount)
    tackInfo.value.rid = rid
  })
}
const userContact = (val) => {
  tackInfo.value.contactName = val.name
  tackInfo.value.contactTel = val.phone
}
const allIn = () => {
  tackInfo.value.amount = tackInfo.value.allowTakeAmount
}
const createTack = () => {
  tackInfo.value.settCertImg = settCertImg.value
  if (!valid.takeMoney(tackInfo.value.amount)) return errorMsg("请检查输入提现金额数据")

  if (Number(tackInfo.value.amount) > Number(tackInfo.value.allowTakeAmount))
    return errorMsg("提现金额不得大于可提现金额")

  if (!tackInfo.value.contactName || !tackInfo.value.contactTel) return errorMsg("请输入联系人姓名和手机号")

  if (tackInfo.value.contactTel.length != 11) return errorMsg("请检查联系人手机号格式")

  if (tackInfo.value.amount <= 0 || !tackInfo.value.amount) return errorMsg("请输入提现金额并且提现金额不能为0")
  isPwd()
}
// 判断是否设置支付密码

const isPwd = () => {
  $isSipw().then(({ bizData }) => {
    if (bizData) {
      tack.value.open(tackInfo.value)
    } else {
      sipw.value.open()
    }
  })
}
const check = (e) => {
  let value = e.detail.value

  let dot = value.indexOf(".") //包含小数点
  let reg = /^[0-9]+$/ //正整数
  if (dot > -1) {
    maxlength.value = dot + 3 //长度是小数点后两位
    if (value.length > dot + 3) {
    }
  }
  if (reg.test(value)) {
    //如果是正整数不包含小数点
    maxlength.value = 10
  }
}
const errorMsg = (title) => {
  uni.showToast({
    title,
    icon: "none",
    mask: true,
  })
}
</script>

<style lang="scss" scoped>
.user-contact {
  position: relative;
  display: flex;
  align-items: flex-start;
  font-size: 28rpx;
  color: rgba(77, 77, 77, 1);
  padding: 60rpx 60rpx 107rpx 60rpx;
  .user-name {
    flex: 1;
    margin-left: 48rpx;
    color: rgba(145, 145, 145, 1);
    image {
      width: 40rpx;
      height: 40rpx;
    }
    view {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 11rpx;
    }
    .user-weight {
      font-weight: 700;
      color: #000;
    }
  }
}
.money-main {
  padding: 0 60rpx;
  .money-title {
    font-size: 28rpx;
    color: #4d4d4d;
  }
  .money-input {
    display: flex;
    align-items: center;
    border-bottom: 1rpx solid rgba(0, 0, 0, 0.2);
    input {
      flex: 1;
      height: 100rpx;
      font-size: 57rpx;
      font-weight: 700;
      color: $primaryColor;
    }
  }
  .money-balance {
    margin-top: 20rpx;
    font-size: 28rpx;
    text {
      margin-left: 15rpx;
      color: $primaryColor;
    }
  }
  .money-upload {
    padding: 90rpx 0 30rpx 0;
    border-bottom: 1rpx solid rgba(0, 0, 0, 0.2);
  }
  .money-remarks {
    border-bottom: 1rpx solid rgba(0, 0, 0, 0.2);
  }
}
</style>