Files

372 lines
8.5 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!--
@name: index
@author: kahu4
@date: 2024-01-21 15:38
@description订单核销
@update: 2024-01-21 15:38
-->
<script setup>
import Header from "@/components/Header/index.vue"
import { useScroll } from "@/hooks/useScroll";
import { useInterface } from "@/hooks/useInterface";
import Modal from "@/components/Modal/index.vue";
import { ref } from "vue";
import Popup from "@/components/Popup.vue";
import { getWithDrawMethodList, updateWithDrawMethod, withDrawNow } from "@/api/account/integral";
import { onLoad } from "@dcloudio/uni-app";
import { useRouter } from "@/hooks/useRouter";
import { useMainStore } from "@/store/store";
import { storeToRefs } from "pinia";
import { aliIcon, balanceIcon } from "@/utils/images";
import { cloneDeep } from "loadsh";
// ========================= hooks ==========================
const {toast, loading, hideLoading} = useInterface();
const {scrollTop} = useScroll();
const {getParams, goBack} = useRouter();
const mainStore = useMainStore();
const {user} = storeToRefs(mainStore)
// =========================== 提现方式 =========================
const methodRenderList = ref([])
const updatePopupRef = ref()
const methodCurrent = ref()
/**
* 获取提现方式列表
* 此处服务端使用list方便后期扩展
* @return {Promise<void>}
*/
async function doGetWithDrawMethodList() {
methodRenderList.value = await getWithDrawMethodList()
methodCurrent.value = methodRenderList.value[0].id
}
const getMethodIcon = (type) => {
return [balanceIcon, aliIcon][type]
}
const methodLoading = ref(false)
const methodForm = ref()
/**
* 保存提现方式
*/
async function confirmDrawMethod() {
if (methodLoading.value) return
if (!methodForm.value.realName) return toast({title: '请输入真实姓名'})
if (!methodForm.value.accountNum) return toast({title: '请输入账号'})
await updateWithDrawMethod(methodForm.value)
toast({title: '设置成功'})
await doGetWithDrawMethodList()
updatePopupRef.value.close()
}
/**
* 打开添加支付方式
* @return {Promise<void>}
*/
async function openAliPopup(item) {
methodForm.value = cloneDeep(item)
updatePopupRef.value.show()
}
// ========================== 提现 =============================
const maxMoney = ref(0) // 最大提现金额
const modalRef = ref()
const modalTitle = ref('')
function selectAll() {
withdrawForm.value.amount = maxMoney.value
}
/**
* 提现防呆
*/
function openModal() {
if (withdrawForm.value.amount <= 0) return toast({title: '提现金额必须大于0'})
const method = methodRenderList.value.find(item => item.id === methodCurrent.value)
modalTitle.value = `确定要提现 ${ withdrawForm.value.amount }${ method.paymentMethod } 吗?`
modalRef.value.show()
}
const withdrawLoading = ref(false)
const withdrawForm = ref({
amount: 0,
})
async function doWithdrawDeposit() {
try {
withdrawLoading.value = true
withdrawForm.value.id = methodRenderList.value.find(item => item.id === methodCurrent.value).id
await withDrawNow(withdrawForm.value)
toast({title: '提现成功'})
withdrawForm.value.id = undefined
maxMoney.value -= withdrawForm.value.amount
withdrawForm.value.amount = 0
goBack({}, 2000)
} finally {
withdrawLoading.value = false
}
}
onLoad(async (options) => {
const params = getParams(options);
await doGetWithDrawMethodList()
maxMoney.value = params.maxMoney || 0
if (params && Number(params.type) === 1) {
const find = methodRenderList.value.find((item) => item.paymentMethod === "余额");
if (!find) return
methodCurrent.value = find.id
}
})
</script>
<template>
<Header
:scroll-top="scrollTop"
system-bar-area-bg="#fff"
header-area-bg="#fff">
提现
</Header>
<view>
<view class="verification">
<view class="ver-card">
<view class="title">提现金额</view>
<view class="input row">
<view class="flex flex-ai__center">
<text class="price"></text>
<input
v-model="withdrawForm.amount"
:max="maxMoney"
type="digit"
placeholder="请输入提现金额" />
</view>
<text
v-if="maxMoney>0"
class="btn"
@click="selectAll">全部提现
</text>
</view>
<view class="row">
可提现金额{{ maxMoney }}
</view>
</view>
<view class="ver-card">
<view class="title">提现至</view>
<u-radio-group
activeColor="#EE6D46"
v-model="methodCurrent"
placement="column"
>
<template
v-for="item in methodRenderList"
:key="item.id">
<view
class="flex flex-jc__sb flex-ai__center"
@click="methodCurrent = item.id">
<view class="input row method">
<view class="flex flex-ai__center">
<image
class="icon"
:src="getMethodIcon(item.type)" />
<text class="text">{{ item.paymentMethod }}</text>
</view>
<text
v-if="item.type!==0"
class="btn primary-color"
@click.stop="openAliPopup(item)">
更新账户
</text>
</view>
<u-radio
:customStyle="{marginBottom: '8px'}"
label=" "
:name="item.id"
/>
</view>
</template>
</u-radio-group>
</view>
<view
class="btn-row row animation-button"
:class="{disabled:withdrawForm.amount<=0}"
@click="openModal">
确认提现
</view>
</view>
</view>
<Modal
ref="modalRef"
:content="modalTitle"
@confirm="doWithdrawDeposit" />
<!-- 绑定 -->
<Popup
ref="updatePopupRef"
:title="`绑定${methodForm&&methodForm.paymentMethod || ''}`"
mode="center"
:show-closeable="false">
<view
class="ali-popup"
v-if="methodForm">
<view class="input">
<input
type="text"
placeholder="请输入真实姓名"
v-model="methodForm.realName">
</view>
<view class="input">
<input
type="text"
placeholder="请输入账号"
v-model="methodForm.accountNum">
</view>
<view
class="btn animation-button"
@click="confirmDrawMethod">
保存
</view>
</view>
</Popup>
</template>
<style
scoped
lang="scss">
.verification {
@include usePadding(34, 34);
.ver-card {
@include usePadding(32, 32);
margin-bottom: 24rpx;
border-radius: 15rpx;
background: #fff;
.title {
text-align: left;
font-size: 38rpx;
font-weight: bold;
}
.input {
@include useFlex(space-between, center);
@include usePadding(21, 24);
width: 100%;
//background: #F6F8F8;
border-radius: 8rpx;
border-bottom: 1rpx solid #f6f8f8;
.price {
font-size: 48rpx;
font-weight: bolder;
}
input {
width: 100%;
}
.icon {
width: 80rpx;
height: 80rpx;
margin-right: 30rpx;
}
}
.method {
margin-top: 0 !important;
}
.none-border {
border: none;
}
.qr-scan {
@include useFlex(center, center);
margin-top: 40rpx !important;
image {
width: 120rpx;
height: 120rpx;
transition: all .3s;
&:active {
scale: 1.1;
}
}
}
}
.row {
margin-top: 24rpx;
}
.btn-row {
@include useFlex(center, center);
height: 80rpx;
border-radius: 15rpx;
position: fixed;
width: 90%;
margin: 0 auto;
bottom: 50rpx;
}
.disabled {
background: #f3997d;
&:active {
scale: 1;
animation: disabledAnimation 200ms 15;
}
}
@keyframes disabledAnimation {
0%, 90% {
transform: translateX(0);
}
30% {
transform: translateX(-20rpx);
}
60% {
transform: translateX(20rpx);
}
}
}
.ali-popup {
width: 80vw;
@include usePadding(32, 32);
.input {
width: 100%;
background: #f6f8f8;
@include usePadding(21, 21);
border-radius: 8rpx;
margin-bottom: 16rpx;
}
.btn {
height: 80rpx;
line-height: 80rpx;
text-align: center;
border-radius: 8rpx;
}
}
:deep(.u-radio) {
margin-bottom: 0 !important;
}
</style>