xl-mobile/src/pages/wallet/index.vue

<script setup>
import ICON1 from "../../static/icons/payICON.png";
import ICON2 from "../../static/icons/right_blue.png";
import XNav from "../../components/XNav.vue";
import XLink from "../../components/XLink.vue";
import Right from "../../static/icons/right.png";
import {toPage} from "../../utils/uils.js";
import WithdrawalModal from "./components/WithdrawalModal.vue";
import {useUserStore} from "../../pinia/UserStore/index.js";
import {onShow} from "@dcloudio/uni-app";
import Api from "../../api/index.js";
import {ref} from "vue";
import ZFENUM from "../../enum/ZFENUM.js";

const UserStore = useUserStore();

const defaultDrawal = ref();
const getData = async () => {
    await UserStore.getUserInfo();
    const {data: _defaultDrawal} = await Api.system.getDefaultWithdrawalInfo();
    defaultDrawal.value = _defaultDrawal;
}

onShow(() => {
    getData();
})
</script>

<template>
    <!--钱包-->
    <x-nav></x-nav>

    <view class="!flex flex-col gap-[20rpx] p-[20rpx]">
        <view class="py-[20rpx] pl-[30rpx] pr-[24rpx] rounded-[12rpx] bg-[#fff] w-full !flex gap-[22rpx] items-center"
              v-if="!defaultDrawal?.id"
              @click="toPage('/pages/paymentAccount/index')">
            <image class="!size-[72rpx]" mode="aspectFill" :src="ICON1"></image>
            <view class="text-[#86909C] test-28r">您还没有添加收款信息~</view>
            <x-link class="test-28r !ml-auto">去添加</x-link>
            <image class="!w-[12rpx]" mode="widthFix" :src="ICON2"></image>
        </view>

        <view class="py-[20rpx] pl-[30rpx] pr-[24rpx] rounded-[12rpx] bg-[#fff] w-full !flex gap-[22rpx] items-center"
              v-else
              @click="toPage('/pages/paymentAccount/index')">
            <image class="!size-[72rpx] rounded-[20rpx]" mode="aspectFill" :src="ZFENUM[defaultDrawal.type]"></image>
            <view class="text-[#1D2129] test-28r">{{ defaultDrawal.realname }} {{ defaultDrawal.account }}</view>
            <image class="!w-[12rpx] !ml-auto" mode="widthFix" :src="ICON2"></image>
        </view>

        <view class="py-[32rpx] px-[24rpx] rounded-[12rpx] bg-[#fff] w-full">
            <view class="!flex items-center justify-between">
                <view>
                    <view class="test-28r">可提现余额(元）</view>
                    <view class="HarmonyOS" style="font-size: 60rpx;font-weight: 500;">
                        {{ UserStore.userInfo.money.toFixed(2) }}
                    </view>
                </view>
                <withdrawal-modal @success="getData">
                    <view
                        class="py-[8rpx] bg-[var(--primary-color)] text-[#fff] rounded-full w-[200rpx] !flex justify-center items-center">
                        立即提现
                    </view>
                </withdrawal-modal>
            </view>

            <view class="h-[3rpx] bg-[#E5E6EB] !my-[20rpx]"></view>

            <view class="wxts">
                温馨提示<br/>
                1.提现门槛为1元<br/>
                2.打款时间:工作日11:00-18:00;<br/>
                3.工作日18:00前提现的当日到款<br/>
                4.工作日18:00后提现的次日到账;<br/>
                5.如遇打款失败，可在提现记录中查看原因
            </view>
        </view>

        <view class="w-full !grid grid-cols-3 gap-[20rpx]">
            <view class="py-[24rpx] px-[20rpx] bg-[#fff] rounded-[16rpx]">
                <view class="text-[#4E5969] test-22r">总收益</view>
                <view class="test-36r" style="font-weight: 700;">{{ UserStore.userInfo.total_money }}</view>
            </view>
            <view class="py-[24rpx] px-[20rpx] bg-[#fff] rounded-[16rpx]">
                <view class="text-[#4E5969] test-22r">打款中</view>
                <view class="test-36r" style="font-weight: 700;">{{ UserStore.userInfo.tx_money }}</view>
            </view>
            <view class="py-[24rpx] px-[20rpx] bg-[#fff] rounded-[16rpx]">
                <view class="text-[#4E5969] test-22r">已提现</view>
                <view class="test-36r" style="font-weight: 700;">{{ UserStore.userInfo.withraw_money }}</view>
            </view>
        </view>

        <view class="w-full bg-[#fff] rounded-[16rpx] overflow-hidden">
            <view class="!flex items-center h-[108rpx] px-[32rpx]" @click="toPage('/pages/walletLog/index')">
                <view class="title">变动记录</view>
                <view class="!ml-auto whitespace-nowrap value"></view>
                <image class="!w-[16rpx] !ml-[16rpx]" mode="widthFix" :src="Right"></image>
            </view>
            <view class="h-[2rpx] w-full bg-[rgb(229,230,235)] !ml-[32rpx]"></view>

            <view class="!flex items-center h-[108rpx] px-[32rpx]" @click="toPage('/pages/withdrawalLog/index')">
                <view class="title">提现记录</view>
                <view class="!ml-auto whitespace-nowrap value"></view>
                <image class="!w-[16rpx] !ml-[16rpx]" mode="widthFix" :src="Right"></image>
            </view>
            <view class="h-[2rpx] w-full bg-[rgb(229,230,235)] !ml-[32rpx]"></view>

            <view class="!flex items-center h-[108rpx] px-[32rpx]" @click="toPage('/pages/incomeLog/index')">
                <view class="title">收益记录</view>
                <view class="!ml-auto whitespace-nowrap value"></view>
                <image class="!w-[16rpx] !ml-[16rpx]" mode="widthFix" :src="Right"></image>
            </view>
        </view>
    </view>
</template>

<style lang="scss" scoped>
.wxts {
    color: rgb(134, 144, 156);
    font-size: 24rpx;
    font-weight: 500;
    line-height: 22px;
    letter-spacing: 0;
}
</style>