CZKJ.XKJ.Helper/src/pages/wallet/index.vue

<template>
    <div class="page">
        <div
            v-if="!loading && !account"
            class="go-bind"
            @click="jump('/pages/wallet/bind')"
        >
            您还未绑定账号,请先绑定绑定账号
        </div>
        <block v-if="!loading && account">
            <!-- <block> -->
            <div class="info card">
                <h1 class="tit">账号信息</h1>
                <ul class="info-list">
                    <li class="item">
                        <div class="key">姓名:</div>
                        <div class="value">{{ account.name }}</div>
                    </li>
                    <li class="item">
                        <div class="key">微信号:</div>
                        <div class="value">{{ account.wechat }}</div>
                    </li>
                    <li class="item">
                        <div class="key">银行:</div>
                        <div class="value">{{ account.bank }}</div>
                    </li>
                    <li class="item">
                        <div class="key">开户行:</div>
                        <div class="value">{{ account.bankBranch }}</div>
                    </li>
                    <li class="item">
                        <div class="key">卡号:</div>
                        <div class="value">{{ account.bankAccount }}</div>
                    </li>
                </ul>
            </div>
            <div class="money card">
                <h1 class="tit">可提现金额</h1>
                <div class="money-num">
                    <div class="num">￥{{ balance / 100 }}</div>
                    <div class="view" @click="jump('/pages/wallet/bill')">
                        查看账单
                    </div>
                </div>
                <p class="tip">最低提现2元，单日上线20000元</p>
                <div class="input">
                    <input type="digit" v-model="formVal" placeholder="￥0" />
                </div>
                <p class="tip tip-color">提现金额超出总金额，请重新填写</p>
                <button type="button" class="btn" @click="withdrawal">
                    申请提现
                </button>
            </div>
            <div class="card record">
                <h1 class="tit">提现记录</h1>
                <ul class="table">
                    <li class="row">
                        <div class="item">申请时间</div>
                        <div class="item">备注</div>
                        <div class="item">金额</div>
                        <div class="item">状态</div>
                    </li>
                    <li
                        class="row"
                        v-for="item of withdrawalList"
                        :key="item.id"
                    >
                        <div class="item">
                            {{ item.applyTime | dateFormat("yyyy/MM/dd") }}
                        </div>
                        <div class="item">
                            {{ item.remark }}
                        </div>
                        <div class="item">
                            {{ item.amount / 100 }}
                        </div>
                        <div class="item">
                            {{ item.status | status }}
                        </div>
                    </li>
                </ul>
            </div>
        </block>

        <uni-popup ref="popup" type="dialog">
            <uni-popup-dialog
                mode="input"
                :title="'提现备注'"
                :content="false"
                :inputType="'text'"
                placeholder="请输入备注"
                @confirm="popupConfirm"
            ></uni-popup-dialog>
        </uni-popup>
    </div>
</template>

<script>
import MyImage from "../../components/image/index";
import uniPopupDialog from "../../components/uni-popup/uni-popup-dialog";
import uniPopup from "../../components/uni-popup/uni-popup";

export default {
    name: "",
    components: { MyImage, uniPopupDialog, uniPopup },
    // 数据
    data() {
        return {
            formVal: "",
            withdrawalPageIndex: 1,
            withdrawalList: [],
            withdrawalTotal: "",
            account: null,
            balance: 0,
            loading: false,
        };
    },
    filters: {
        status(v) {
            let obj = {
                0: "审核中",
                1: "待打款",
                2: "已完成",
                3: "未通过",
                4: "打款失败",
            };
            let str = obj[v];
            return str || "";
        },
    },
    onLoad() {},
    async onShow() {
        this.getWithdrawalInfo();
    },

    // onPullDownRefresh() {
    //     this.getList();
    // },

    // 函数
    methods: {
        getWithdrawalInfo() {
            uni.showLoading({
                title: "加载中...",
            });
            this.loading = true;
            this.api.get("/User/GetWithdrawalInfo").then((res) => {
                uni.hideLoading();
                this.loading = false;
                if (!res.data.account) {
                    // this.router.push('/pages/wallet/bind');
                    // return;
                }
                this.account = res.data.account;
                this.balance = res.data.balance;
                this.withdrawalList = res.data.withdrawalList.data;
            });
        },

        withdrawal() {
            if (!this.formVal) {
                return this.fn.showToast("请输入提现金额");
            }
            if (this.formVal * 100 > this.balance) {
                return this.fn.showToast(
                    "提现金额不能大于" + this.balance / 100 + "元"
                );
            }
            this.$refs.popup.open({
                type: "dialog",
            });
        },
        popupConfirm(done, value) {
            if (!value) {
                return this.fn.showToast("请输入提现备注");
            }
            console.log(this.formVal, value);
            uni.showLoading({
                title: "提交中...",
            });
            let data = {
                amount: this.formVal * 100,
                remark: value,
            };
            this.api
                .post("/User/Withdrawal", data, { pass: true })
                .then((res) => {
                    this.submitLoading = false;
                    uni.hideLoading();
                    if (res.success) {
                        // 刷新页面数据
                        this.formVal = "";
                        this.getWithdrawalInfo();
                        this.fn.showToast("提现成功");
                    } else {
                        this.fn.showModal({
                            content: "错误信息：" + res.message,
                            showCancel: false,
                        });
                    }
                });
            done();
        },
    },

    // 数据计算
    computed: {
        user() {
            return this.$store.state.user.user;
        },
    },

    // 数据监听
    watch: {},
};
</script>


<style lang="scss" scoped>
.card {
    margin: px(40) px(40);
    border: 1px solid #efefef;
    padding: px(40);
    background-color: #fff;
    .tit {
        font-size: px(44);
        font-weight: bold;
        padding-bottom: px(20);
    }
}
.info {
    .item {
        margin-top: px(20);
        font-size: px(44);
        display: flex;
        align-items: start;
        line-height: px(60);
        .key {
            margin-right: px(20);
            flex-shrink: 0;
            color: #666;
        }
    }
}
.money {
    .money-num {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: px(20) 0;
        .num {
            font-size: px(56);
            color: red;
        }
        .view {
            width: px(340);
            height: px(88);
            border: 1px solid rgb(0, 188, 38);
            color: rgb(0, 188, 38);
            font-size: px(44);
            text-align: center;
            line-height: px(88);
            border-radius: px(10);
        }
    }
    .input {
        margin: px(30) 0;
        input {
            height: px(100);
            padding: 0 px(20);
            border: 1px solid #ededed;
        }
    }
    .tip {
        font-size: px(40);
        color: #999;
        &.top-color {
            color: rgb(255, 173, 129);
        }
    }
    .btn {
        margin-top: px(40);
        background-color: rgb(0, 188, 38);
        color: #fff;
        border: none;
    }
}
.record {
    .table {
        margin-top: px(30);
        .row {
            display: flex;
            border-right: 1px solid #efefef;
            border-bottom: 1px solid #efefef;
        }
        .item {
            border-left: 1px solid #efefef;
            border-top: 1px solid #efefef;
            width: 25%;
            flex-shrink: 0;
            font-size: px(42);
            // text-align: center;
            padding: px(20);
            @include omits(4);
            &:nth-child(1){
                width: 30%;
            }
            &:nth-child(2){
                width: 30%;
            }
            &:nth-child(3){
                width: 20%;
            }
            &:nth-child(4){
                width: 20%;
            }
        }
    }
}
.go-bind {
    margin: px(40);
    border: 1px solid #f1f1f1;
    border-radius: px(10);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    min-height: px(300);
    font-size: px(46);
}
</style>