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

<script setup>
import XNav from "../../components/XNav.vue";
import {showToast, toPage} from "../../utils/uils.js";
import ICON1 from "../../static/icons/payICON.png";
import ICON2 from "../../static/icons/right_blue.png";
import ICON3 from "../../static/icons/icon-edit-white.png";
import ICON4 from "../../static/icons/icon-delete-white.png";
import ICON5 from "../../static/icons/icon-radio.png";
import ICON6 from "../../static/icons/icon-radio-s.png";
import XLink from "../../components/XLink.vue";
import XConfirmModal from "../../components/XConfirmModal.vue";
import {onShow} from "@dcloudio/uni-app";
import Api from "../../api/index.js";
import {reactive} from "vue";

const list = reactive([]);

const getData = async () => {
    const {data} = await Api.system.getWithdrawal();
    list.length = 0;
    list.push(...data);
}

const deletePayment = async (id) => {
    const {msg} = await Api.system.delWithdrawal(id);
    showToast({
        icon: 'success',
        title: msg
    });
    await getData();
}

const setDefaultWithdrawal = async (id) => {
    const {msg} = await Api.system.setDefaultWithdrawal(id);
    showToast(msg);
    await getData();
}

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

<template>
    <x-nav></x-nav>

    <view class="p-[20rpx] !flex flex-col gap-[20rpx]">
        <view class="py-[20rpx] pl-[30rpx] pr-[24rpx] rounded-[12rpx] bg-[#fff] w-full !flex gap-[22rpx] items-center"
              @click="toPage('/pages/addPaymentAccount/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="['p-[32rpx] rounded-[12rpx]', v.type === 1 ? 'ZFB' : 'YHK']" v-for="v in list" :key="v.id">
            <view class="!flex items-center">
                <view class="text-[#fff]">{{ v.type_text }}</view>
                <image @click="toPage(`/pages/addPaymentAccount/index?id=${v.id}`)" class="!size-[35rpx] !ml-auto"
                       mode="aspectFill" :src="ICON3"></image>
                <x-confirm-modal title="确定删除银行卡" :info="v.account" @success="deletePayment(v.id)">
                    <image class="!size-[30rpx] !ml-[20rpx]" mode="aspectFill" :src="ICON4"></image>
                </x-confirm-modal>
            </view>
            <view class="HarmonyOS account">
                {{ v.account }}
            </view>
            <view class="radio-info" @click="setDefaultWithdrawal(v.id)">
                <image v-if="v.is_default !== 1" class="!size-[30rpx]" mode="aspectFill" :src="ICON5"></image>
                <image v-else class="!size-[30rpx]" mode="aspectFill" :src="ICON6"></image>
                设为默认打款信息
            </view>
        </view>
    </view>
</template>

<style scoped lang="scss">
.YHK {
    background: linear-gradient(90.00deg, rgb(96, 137, 255), rgb(68, 81, 255) 100%);
}

.ZFB {
    background: linear-gradient(90.00deg, rgb(0, 141, 255), rgb(22, 119, 255) 100%);
}

.radio-info {
    color: rgb(255, 255, 255);
    font-size: 12px;
    font-weight: 400;
    line-height: 140%;
    letter-spacing: 0;
    display: flex;
    align-items: center;
    gap: 10rpx;
}

.account {
    color: rgb(255, 255, 255);
    font-size: 24px;
    font-weight: 500;
    line-height: 140%;
    letter-spacing: 0;
    margin-top: 26rpx;
    margin-bottom: 22rpx;
}
</style>