新增营销系统、分销系统、会员功能、门店、提现功能
This commit is contained in:
Shaw
371
views/account/withdraw/index.vue
Normal file
371
views/account/withdraw/index.vue
Normal file
@ -0,0 +1,371 @@
|
||||
<!--
|
||||
@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>
|
||||
Reference in New Issue
Block a user