4D_uniapp_service/pages/account/cash.vue

<template>
	
	<view>
		<uni-nav-bar :fixed="true" shadow left-icon="left" title="余额明细" :statusBar="true" @clickLeft="handleToBack" />
		<view class="content">
		  <view class="content_background" style="padding: 49upx 0">
		    <view class="card">
		      <view class="uni-form" style="padding: 34upx 0">
		        <view
		          style="
		            font-size: 32upx;
		            font-weight: bold;
		            color: #000000;
		            margin: 0px 32upx 18upx;
		          "
		          >提现账户</view
		        >
		
		        <view class="uni-form-item" style="border-bottom: 0">
		          <view class="title">
		            <image
		              src="/static/common/alipay.png"
		              mode="aspectFill"
		              class="form_item_icon"
		            />
		            支付宝支付
		          </view>
		          <view @tap="handleSelectPayType" data-type="alipay">
		            <image
		              src="/static/common/radio_selected.png"
		              mode="aspectFill"
		              class="form_item_btn_icon"
		              v-if="payType == 'alipay'"
		            />
		            <image
		              src="/static/common/radio_unselect.png"
		              mode="aspectFill"
		              class="form_item_btn_icon"
		              v-else
		            />
		          </view>
		        </view>
		        <view
		          class="uni-column"
		          style="padding: 10upx 80upx 30upx"
		          v-if="payType == 'alipay'"
		        >
		          <input
		            class="uni-input"
		            placeholder="支付宝账号"
		            style="
		              height: 50upx;
		              font-size: 28upx;
		              font-weight: 400;
		              color: #999999;
		              margin: 0 0 20upx;
		              border-bottom: 1px solid #eee;
		            "
		            v-model="alipayParams.account"
		          />
		          <input
		            class="uni-input"
		            placeholder="支付宝认证实名(真实姓名)"
		            style="
		              height: 50upx;
		              font-size: 28upx;
		              font-weight: 400;
		              color: #999999;
		              border-bottom: 1px solid #eee;
		            "
		            v-model="alipayParams.name"
		          />
		        </view>
		        <view class="uni-form-item uni-column" v-if="false">
		          <view class="title">
		            <image
		              src="/static/common/wechat.png"
		              mode="aspectFill"
		              class="form_item_icon"
		            />
		            微信支付
		          </view>
		          <view @tap="handleSelectPayType" data-type="wxpay">
		            <image
		              src="/static/common/radio_selected.png"
		              mode="aspectFill"
		              class="form_item_btn_icon"
		              v-if="payType == 'wxpay'"
		            />
		            <image
		              src="/static/common/radio_unselect.png"
		              mode="aspectFill"
		              class="form_item_btn_icon"
		              v-else
		            />
		          </view>
		        </view>
		      </view>
		    </view>
		    <view class="card" style="margin-top: 20upx">
		      <view class="uni-form" style="padding: 34upx 0">
		        <view
		          style="
		            font-size: 32upx;
		            font-weight: bold;
		            color: #000000;
		            margin: 0px 32upx 18upx;
		          "
		          >提现金额</view
		        >
		        <view
		          class="uni-column"
		          style="padding: 10upx 80upx 30upx"
		          v-if="payType == 'alipay'"
		        >
		          <view
		            class="flex align-center"
		            style="
		              border-bottom: 1px solid #eee;
		              margin: 0 0 20upx;
		              color: #ff490e;
		            "
		          >
		            <text style="margin-right: 5upx">￥</text>
		            <input
		              class="uni-input"
		              type="number"
		              style="
		                height: 50upx;
		                font-size: 28upx;
		                font-weight: 400;
		                color: #999999;
		              "
		              placeholder="请填写提现金额"
		              v-model="alipayParams.money"
		            />
		          </view>
		          <view
		            class="flex"
		            style="font-size: 24upx; font-weight: 400; color: #999999"
		          >
		            <view>当前余额 {{ maxMoney }}</view>
		            <view
		              style="color: #07d69e; margin-left: 20upx"
		              @tap.stop="handleAllCash"
		              >全部提现</view
		            >
		          </view>
		        </view>
		
		        <view class="uni-form-item uni-column" v-if="false">
		          <view class="title">
		            <image
		              src="/static/common/wechat.png"
		              mode="aspectFill"
		              class="form_item_icon"
		            />
		            微信支付
		          </view>
		          <view @tap="handleSelectPayType" data-type="wxpay">
		            <image
		              src="/static/common/radio_selected.png"
		              mode="aspectFill"
		              class="form_item_btn_icon"
		              v-if="payType == 'wxpay'"
		            />
		            <image
		              src="/static/common/radio_unselect.png"
		              mode="aspectFill"
		              class="form_item_btn_icon"
		              v-else
		            />
		          </view>
		        </view>
		      </view>
		    </view>
		
		    <view class="footer">
		      <image mode="widthFix" src="/static/common/footer.png" />
		    </view>
		  </view>
		
		  <view class="footer_btn_wrap" style="position: fixed" @tap="handleToCash">
		    <view
		      class="footer_btn"
		      :class="{
		        footer_btn_disabled: alipayParams?.money <= 0 || maxMoney <= 0,
		      }"
		    >
		      确认提现
		    </view>
		  </view>
		</view>
	</view>

</template>

<script setup>
import { ref, reactive } from "vue";
import { onLoad, onShow } from "@dcloudio/uni-app";
import request from "/common/request.js";
import auth from "/common/auth.js";

const statusBarHeight = ref();
const payType = ref("alipay");
const maxMoney = ref(0);
const alipayParams = reactive({
  account: "",
  name: "",
  money: "",
});

onLoad((option) => {
  statusBarHeight.value = uni.getSystemInfoSync().statusBarHeight;
});

onShow(() => {
  renderData();
  uni.$emit('fastOrderNum', false);
  uni.$emit('receiveOrdernum', false);
});

async function renderData() {
  if (auth()) {
    getUserInfo();
    uni.pageScrollTo({ scrollTop: 0, duration: 0 });
  }
}

const handleToBack = () => {
	const canNavBack = getCurrentPages();
	if (canNavBack && canNavBack.length > 1) uni.navigateBack();
	else history.back();
};
const handleSelectPayType = (e) => {
  payType.value = e?.currentTarget?.dataset?.type;
};

function getUserInfo() {
  request({
    url: "/api/user/getInfo",
    method: "GET",
    success: (res) => {
      console.log("用户信息", res);
      if (res.data?.code == 1) {
        maxMoney.value = res.data?.data?.balance;
        // alipayParams.money = res.data?.data?.balance;
      }
    },
    fail: () => {},
    complete: () => {
      uni.hideLoading();
    },
  });
}

function handleAllCash() {
  alipayParams.money = maxMoney.value;
}

function handleToCash() {
  if (maxMoney.value <= 0) return;

  if (payType.value == "alipay") {
    if (!alipayParams.account) {
      uni.showToast({
        title: "请输入支付宝账号",
        duration: 2000,
        icon: "none",
      });
      return;
    } else {
      // const reg =
      //   /^(1[3456789]\d{9})|([a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+\.[a-zA-Z0-9_-]+)$/;
      // if (!reg.test(alipayParams.account)) {
      //   uni.showToast({
      //     title: "支付宝账号为手机或邮箱",
      //     duration: 3000,
      //     icon: "none",
      //   });
      //   return;
      // }
    }

    if (!alipayParams.name) {
      uni.showToast({
        title: "请输入支付宝认证实名",
        duration: 2000,
        icon: "none",
      });
      return;
    } else {
      const reg = /^[\u4e00-\u9fa5]+$/;
      if (!reg.test(alipayParams.name)) {
        uni.showToast({
          title: "支付宝认证实名需为中文",
          duration: 3000,
          icon: "none",
        });
        return;
      }
    }
  }

  if (!alipayParams.money) {
    uni.showToast({
      title: "请填写提现金额",
      duration: 2000,
      icon: "none",
    });
    return;
  }

  if (alipayParams.money > maxMoney) {
    uni.showToast({
      title: "提现余额不足",
      duration: 2000,
      icon: "none",
    });
    return;
  }

  uni.showLoading();
  request({
    url: "/api/user/addTx",
    method: "POST",
    data: {
      money: alipayParams.money,
      tx_type: 2,
      zfb_name: alipayParams.name,
      zfb_action: alipayParams.account,
    },
    success: (res) => {
      console.log("提现res", res);
      if (res.data?.code == 1) {
        uni.showToast({
          title: "提现申请已提交",
          duration: 2000,
          icon: "none",
        });
        setTimeout(function () {
          const canNavBack = getCurrentPages();
          if (canNavBack && canNavBack.length > 1) {
            uni.navigateBack();
          } else {
            history.back();
          }
        }, 2000);
      } else {
        uni.showToast({
          title: res.data.msg,
          duration: 2000,
          icon: "none",
        });
      }
    },
    fail: () => {},
    complete: () => {
      uni.hideLoading();
    },
  });
}
</script>

<style lang="scss" scoped>
uni-page-body,
.content {
  // min-height: calc(100vh);
}
.content {
  background: linear-gradient(90deg, #37ecba 0%, #72afd3 100%);
  .uni-form {
    .uni-form-item {
      margin: 0 20upx 0 32upx;
      .title {
        font-size: 30upx !important;
        .form_item_icon {
          width: 52upx;
          height: 52upx;
        }
      }
    }
  }
}
</style>