LittleBeePlatform/src/views/Manage/ShopRemain/index.vue

<template>
    <div class="main">
        <div class="cardTitle">商城余额</div>
        <div class="search-box">
            <a-space size="large">
                <a-descriptions layout="vertical">
                    <a-descriptions-item label="余额">
                        ¥ <span class="total-amount">5112</span>
                    </a-descriptions-item>
                </a-descriptions>
            </a-space>
        </div>
        <div id="commonTable">
            <div style="margin-bottom: 16px">
				<a-button @click="handlerCharge" type="primary">
					充值
				</a-button>
			</div>
            <a-table :scroll="{ x: 1300 }"
                :columns="columns"
                :data-source="tableData"
                :pagination="pagination"
                @change="handleTableChange"
                :row-key="
                (record, index) => {
                    return index;
                }
            ">

            </a-table>
        </div>
        <a-modal title="充值" :visible="modalVisible" @cancel="modalClose" @ok="confirm">
            <a-form-model layout="inline">
                <a-form-model-item label="充值金额">
                 ¥ <a-input-number
                        :formatter="value => ` ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
                        :parser="value => value.replace(/\$\s?|(,*)/g, '')"
                        v-model="form.payAmount" :min="0" :step="0.01" style="width: 150px">
                    </a-input-number>
                </a-form-model-item>
            </a-form-model>
            <div style="margin-top: 12px">
                <span>当前余额<span>{{}}</span>元，点击继续将跳转至支付宝付款页面</span>
            </div>
        </a-modal>
        <!-- <div>
            <form name="punchout_form" method="post" action="https://openapi.alipay.com/gateway.do?charset=UTF-8&method=alipay.trade.page.pay&sign=B5HCq8qiiwkOfH%2FwKaKwxMeExsKFcibdK4oLcz5ypYxqSKcXn0KfqEBcW3u2219sqKKuzFNZGuT5%2F%2BK%2FO3RCeQGUBalM2JdknrI7MiJ4%2B3CvBfyLKDuwZd0SRu7xaPb0VkjIkgbn9g4vpufQaezq19lErd7LCL7wMu14%2FduswqptCQW9bYn%2F4uhTEcgm%2FTu3Ab17fEe3DKSHqG2VqjhzxhViRENB9wZ6Nvq6LltDHJF5QGBbellwvv%2BGikwYAyghtVwc61GJuagldqtlT4fP0zmUIpA1dj4ctUQuyfMYuBIzFbT3TuGDksJFfKQJ17FJkT9kSZYTJZy%2F2wN1Vdl3nQ%3D%3D&notify_url=http%3A%2F%2Fsaas.kaidalai.cn%2Fapi%2Fadmin%2Falipay%2FnotifyInfo%2FbalanceRechargeOrderNotifyInfo&version=1.0&app_id=2021003124652865&sign_type=RSA2&timestamp=2022-04-02+10%3A46%3A20&alipay_sdk=alipay-sdk-java-3.1.0&format=json">
                <input type="hidden" name="biz_content" value="{&quot;body&quot;:&quot;商城购物支付&quot;,&quot;out_trade_no&quot;:&quot;CZ20220402104620169001&quot;,&quot;product_code&quot;:&quot;QUICK_MSECURITY_PAY&quot;,&quot;subject&quot;:&quot;商城购物&quot;,&quot;timeout_express&quot;:&quot;30m&quot;,&quot;total_amount&quot;:&quot;0.6&quot;}">
                <input type="submit" value="立即支付" style="display:none" >
            </form>
            <script>document.forms[0].submit();</script>
        </div> -->
    </div>
</template>

<script>
import {getBalanceList, createBalanceRechargeOrder} from "@/api/user"
export default {
    name: 'shopRemain',
    data() {
        return {
            form: {
                payAmount: 0
            },
            columns: [
                {
					title: "创建时间",
					dataIndex: "createDate",
					key: "createDate",
					width: "200",
				},
                {
					title: "订单编号",
					dataIndex: "code",
					key: "code",
					width: "200",
				},
                {
					title: "账单金额",
					dataIndex: "payAmount",
					key: "payAmount",
					width: "200",
				},
                {
					title: "账单类型",
					dataIndex: "type",
					key: "type",
					width: "200",
                    customRender: function (type) {
                        switch (type) {
                        case 1: return '充值'
                        case 2: return '扣款'
                        case 3: return '退款'
                        default:
                            break;
                        }
                    }
				},
                {
					title: "来源小区",
					dataIndex: "communityName",
					key: "communityName",
					width: "200",
				},
            ],
            tableData: [],
            pagination: {
                current: 1,
				total: 0,
				pageSize: 10,
				showTotal: (total) => `共 ${total} 条`,
				showSizeChanger: true,
				showQuickJumper: true,
            },
            modalVisible: false,

        }
    },
    mounted() {
        this.getData()
    },
    methods: {
        getData() {
            let obj = {pageNum: this.pagination.current,size: this.pagination.pageSize}
            getBalanceList(obj).then(res => {
                let data = res.data;
                this.tableData = data.rows;
                this.pagination.total = data.total
            })
        },
        handleTableChange(val) {
            this.pagination.current = val.current;
            this.pagination.pageSize = val.pageSize;
            this.getData()
        },
        //充值
        handlerCharge() {
            this.modalVisible = true
        },
        modalClose() {
            this.modalVisible = false
        },
        confirm() {
            createBalanceRechargeOrder(this.form).then(res => {
                if (res.code === 200) {
					this.$message.success(res.msg);
                    let data = res.data
                    let routeData = this.$router.resolve({ 
                        path: '/Manage/Pay', 
                        query: {
                            htmls: data 
                        }
                    });
                    window.open(routeData.href, '_blank');
					this.getData();
                    this.form.payAmount = 0;
				} else {
					this.$message.error(res.msg);
				}
            })
            this.modalVisible = false
        }
    }
}
</script>

<style lang="less">
.total-amount {
    font-family: 'Roboto';
    color: #CF1322;
    font-style: normal;
    font-weight: 500;
    font-size: 24px;
    line-height: 28px;
    text-transform: uppercase;
}
</style>