tuanfeng-pc-admin/src/views/business/paymentCode/index.vue

<template>
    <div class="paymentCode">
        <div class="paymentCode-select">
            <el-form :inline="true" :model="payQuery">
                <el-form-item label="收款码状态">
                    <el-select v-model="payQuery.state" placeholder="请选择">
                        <el-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="getAllPay()">查询</el-button>
                </el-form-item>
            </el-form>
           
        </div>
        <div class="paymentCode-table">
            <el-table ref="multipleTable" :data="tableData" border
                :header-cell-style="{ background: '#EEF3FF', color: '#333333' }" tooltip-effect="dark"
                style="width: 100%" v-loading="loading">
                <el-table-column label="商家名称" width="220" align="center">
                    <template slot-scope="scope">{{ scope.row.shopName }}</template>
                </el-table-column>
                <el-table-column prop="codeImage" label="商家收款码" align="center">
                    <template slot-scope="scope">
                        <img :src="scope.row.codeImage" alt="" style="width: 120px; height: 120px;">
                    </template>
                </el-table-column>
                <el-table-column prop="state" label="收款码状态" align="center">
                    <template slot-scope="scope">{{ scope.row.state == 1 ? '已启用' : '已禁用' }}</template>
                </el-table-column>
                <el-table-column prop="createTime" label="创建时间" align="center" />
                <el-table-column label="操作" align="center" show-overflow-tooltip>
                    <template slot-scope="scope">
                        <div class="btnList">
                            <template v-if="scope.row.state == 1">
                                <el-button type="text" @click="handleDel(scope.row, 2)">禁用该收款码</el-button>
                            </template>
                            <template v-if="scope.row.state == 2">
                                <el-button type="text" @click="handleDel(scope.row, 1)">启用该收款码</el-button>
                            </template>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="fenye">
            <el-pagination :current-page="payQuery.page" :page-sizes="[5, 10, 15, 20]" :page-size="10"
                layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
                @current-change="handleCurrentChange" />
        </div>
    </div>
</template>

<script>
import { getAllPaymentCode, disablePaymentCode } from '@/api/business'
export default {
    created() {
        this.getAllPay()
    },
    data() {
        return {
            tableData: [],
            total: null,
            //  获取收款码的参数
            payQuery: {
                codeType: '',
                state: '',
                page: 1,
                pageSize: 5
            },
            typeList:[
                {
                    label:'全部',
                    value:''
                },
                {
                    label:'启用',
                    value:1
                },
                {
                    label:'禁用',
                    value:2
                }
            ],
            loading: false
        }
    },
    methods: {
        async getAllPay() {
            this.loading = true
            try {
                let res = await getAllPaymentCode(this.payQuery)
                this.tableData = res.data.list
                this.total = res.data.total
            } catch (error) {
                console.log(error);
            } finally {
                this.loading = false
            }

        },
        handleSizeChange(val) {
            this.payQuery.pageSize = val
            this.getAllPay()
        },
        handleCurrentChange(val) {
            this.payQuery.page = val
            this.getAllPay()
        },
        //  启用禁用收款码
        handleDel(row, state) {
            this.$confirm('此操作将操作该收款码, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                let result = await disablePaymentCode({ codeId: row.codeId, state: state })
                if (result.code == '') {
                    this.$message({
                        type: 'success',
                        message: '操作成功!'
                    });
                    this.getAllPay()
                }
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消操作'
                });
            });
        },
    }
}
</script>

<style lang="scss" scoped>
.paymentCode {
    padding: 50px;

    .fenye {
        margin: 30px auto;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}
</style>