qimall/addons/QiDingDong/backend/views/mall/index.php

<div id="app" v-cloak>
    <el-card shadow="never" style="border:0;min-width: 800px;" body-style="background-color: #f3f3f3;padding: 10px 0 0;">
        <div slot="header">
            <span>商城列表</span>
        </div>
        <div class="table-body">
            <el-form size="small" :inline="true" v-if="is_master">
                <el-form-item>
                    <el-input style="width: 200px" v-model="searchData.keyword" placeholder="商城名称/ID" clearable></el-input>
                </el-form-item>
                <el-form-item>
                    <el-input style="width: 200px" v-model="searchData.min_balance" placeholder="资金低于" clearable>
                        <template #append>元</template>
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="searchs">搜索</el-button>
                </el-form-item>
            </el-form>
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-table :data="list" stripe v-loading="loading" size="small" style="margin-bottom: 15px;">
                    <el-table-column prop="id" label="商城ID" width="200" align="center"></el-table-column>
                    <el-table-column label="商城信息">
                        <template slot-scope="scope">
                            <div class="table-info-img-text">
                                <el-image class="table-info-img circle" :src="scope.row.logo">
                                    <div slot="error" class="image-slot">
                                        <com-image src="/resources/img/admin/mall-logo.png"></com-image>
                                    </div>
                                </el-image>
                                <div class="table-info-text">
                                    <div style="color:#000;">{{scope.row.name}}</div>
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="余额" align="center">
                        <template slot-scope="scope">
                            <div :style="scope.row.balance * 0.01 <= config.min_balance ? 'color: red' : ''">{{scope.row.balance|amount}}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="定价策略" align="left" v-if="is_master">
                        <template slot-scope="scope">
                            <div flex="cross:center" v-if="is_master">
                                <div v-if="rate_id != scope.row.id" flex="cross:center">
                                    <el-tooltip class="item" effect="dark" :content="scope.row.rate+''" placement="top">
                                        <span class="over2">{{scope.row.rate|amount}}%</span>
                                    </el-tooltip>
                                    <el-button class="edit-sort" type="text" @click="edit(scope.row,'rate')">
                                        <img src="resources/img/mall/order/edit.png" alt="">
                                    </el-button>
                                </div>
                                <div style="display: flex;align-items: center" v-else>
                                    <el-input style="min-width: 70px" size="mini" class="change" v-model="rate" autocomplete="off"></el-input>
                                    <el-button class="change-quit" type="text" style="color: #F56C6C;padding: 0 5px" icon="el-icon-error" circle @click="cancelEdit('rate')"></el-button>
                                    <el-button class="change-success" type="text" style="margin-left: 0;color: #67C23A;padding: 0 5px" icon="el-icon-success" circle @click="handle('rate',scope.row)">
                                    </el-button>
                                </div>
                            </div>
                            <div v-else>
                                <span class="over2">{{scope.row.rate|amount}}%</span>
                            </div>
                        </template>
                    </el-table-column>
<!--                    <el-table-column label="企商通定价策略" align="center">-->
<!--                        <template slot-scope="scope">-->
<!--                            <div flex="cross:center">-->
<!--                                <div v-if="shang_rate_id != scope.row.id" flex="cross:center">-->
<!--                                    <el-tooltip class="item" effect="dark" :content="scope.row.shang_rate+''" placement="top">-->
<!--                                        <span class="over2">{{scope.row.shang_rate|amount}}%</span>-->
<!--                                    </el-tooltip>-->
<!--                                    <el-button class="edit-sort" type="text" @click="edit(scope.row,'shang_rate')">-->
<!--                                        <img src="resources/img/mall/order/edit.png" alt="">-->
<!--                                    </el-button>-->
<!--                                </div>-->
<!--                                <div style="display: flex;align-items: center" v-else>-->
<!--                                    <el-input style="min-width: 70px" size="mini" class="change" v-model="shang_rate" autocomplete="off"></el-input>-->
<!--                                    <el-button class="change-quit" type="text" style="color: #F56C6C;padding: 0 5px" icon="el-icon-error" circle @click="cancelEdit('shang_rate')"></el-button>-->
<!--                                    <el-button class="change-success" type="text" style="margin-left: 0;color: #67C23A;padding: 0 5px" icon="el-icon-success" circle @click="handle('shang_rate',scope.row)">-->
<!--                                    </el-button>-->
<!--                                </div>-->
<!--                            </div>-->
<!--                        </template>-->
<!--                    </el-table-column>-->
                    <el-table-column label="创建时间" align="center">
                        <template slot-scope="scope">
                            <div>{{scope.row.created_at|dateTimeFormat('Y-m-d H:i:s')}}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" align="center">
                        <template slot-scope="scope">
                            <el-popconfirm v-if="is_master" @confirm="onRecharge(scope.row)" title="您真的要对当前商城进行余额操作吗？">
                                <el-button type="text" slot="reference" style="color: #F56C6C">余额充值</el-button>
                            </el-popconfirm>
                            <div v-else>-</div>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tabs>
            <div flex="box:last cross:center">
                <div></div>
                <div>
                    <el-pagination v-if="list && list.length > 0" style="display: inline-block;" background :page-size="pagination.pageSize" @current-change="pageChange" layout="prev, pager, next" :current-page="pagination.current_page" :total="pagination.totalCount">
                    </el-pagination>
                </div>
            </div>
        </div>
    </el-card>
    <el-dialog
            title="余额充值"
            :visible.sync="dialogVisible"
            width="50%">
        <el-form :model="ruleForm" size="small" ref="ruleForm" label-width="300px">
            <el-form-item label="充值金额" prop="amount" :rules="[{required: true, message:'请输入充值金额'}]">
                <el-input v-model="ruleForm.amount" placeholder="请输入充值金额">
                    <template #append>元</template>
                </el-input>
                <p style="color: #999999">如果小于0则为扣除金额</p>
            </el-form-item>
            <el-form-item label="操作备注" prop="remark" :rules="[{required: true, message:'请输入操作备注'}]">
                <el-input type="textarea" :rows="3" v-model="ruleForm.remark" placeholder="请输入操作备注">
                </el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button :disabled="btnLoading" v-loading="btnLoading" type="primary" @click="onSubmit">确 定</el-button>
        </span>
    </el-dialog>
</div>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            searchData: {
                keyword: '',
                min_balance: '',
                page: 1,
                limit: 10,
            },
            loading: false,
            activeName: '-1',
            list: [],
            pagination: null,
            currentItem: null,
            ruleForm: {
                mall_id: 0,
                amount: 0,
                remark: ''
            },
            dialogVisible: false,
            btnLoading: false,
            config: {
                min_balance: 0
            },
            rate: 0,
            rate_id: 0,
            shang_rate: 0,
            shang_rate_id: 0,
            is_master: <?= $is_master ? 1 : 0 ?>,
        },
        mounted() {
            this.loadData();
        },
        methods: {
            confirmSubmit() {
                this.search.status = this.activeName
            },
            selectDateTime(e) {
                if (e != null) {
                    this.searchData.start_date = e[0];
                    this.searchData.end_date = e[1];
                } else {
                    this.searchData.start_date = '';
                    this.searchData.end_date = '';
                }
                this.searchs();
            },
            loadData() {
                this.loading = true;
                request({
                    params: {
                        r: 'qi-ding-dong/mall/index',
                        ...this.searchData
                    },
                }).then(e => {
                    this.loading = false;
                    if (e.data.code === 0) {
                        this.list = e.data.data.list
                        this.pagination = e.data.data.pagination;
                        this.config = Object.assign(this.config, e.data.data.config)
                    } else {
                        this.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    this.loading = false;
                });
            },
            pageChange(page) {
                this.searchData.page = page;
                this.loadData();
            },
            handleClick(tab, event) {},
            searchs() {
                this.searchData.page = 1;
                this.loadData();
            },
            onRecharge(item) {
                this.currentItem = item
                this.ruleForm.mall_id = item.id
                this.dialogVisible = true
            },
            onSubmit() {
                this.$refs['ruleForm'].validate((valid) => {
                    if (valid) {
                        this.btnLoading = true;
                        request({
                            params: {
                                r: 'qi-ding-dong/mall/recharge',
                            },
                            method: 'post',
                            data: this.ruleForm
                        }).then(e => {
                            this.btnLoading = false;
                            if (e.data.code == 0) {
                                this.$message.success(e.data.msg);
                                this.loadData()
                                this.dialogVisible = false
                            } else {
                                this.$message.error(e.data.msg);
                            }
                        }).catch(e => {
                            this.$message.error(e);
                            this.btnLoading = false;
                        })
                    }
                })
            },
            cancelEdit(type) {
                switch (type) {
                    case 'shang_rate':
                        this.shang_rate = 0;
                        this.shang_rate_id = 0;
                        break;
                    case 'rate':
                        this.rate = 0;
                        this.rate_id = 0;
                        break;
                }
            },
            edit(row, type) {
                switch (type) {
                    case 'shang_rate':
                        this.shang_rate_id = row.id;
                        this.shang_rate = row.shang_rate;
                        break;
                    case 'rate':
                        this.rate_id = row.id;
                        this.rate = parseFloat(row.rate * 0.01).toFixed(2);
                        break;
                }
            },
            handle(type, data = null) {
                let id = null
                let val = null
                let field = type
                switch (type) {
                    case 'rate':
                        id = this.rate_id
                        val = this.rate
                        break
                    case 'shang_rate':
                        id = this.shang_rate_id
                        val = this.shang_rate
                        break
                }
                request({
                    params: {
                        r: 'qi-ding-dong/mall/rate',
                    },
                    method: 'post',
                    data: {
                        mall_id: id,
                        field: field,
                        val: val,
                    }
                }).then(e => {
                    this.btnLoading = false;
                    if (e.data.code == 0) {
                        this.$message.success(e.data.msg);
                        this.loadData()
                        this.cancelEdit(type)
                    } else {
                        this.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    this.$message.error(e);
                    this.btnLoading = false;
                })
            }
        },
        filters: {
            amount: function(val) {
                return parseFloat(val * 0.01).toFixed(2)
            }
        }
    });
</script>
<style>
    .el-tabs__header {
        font-size: 16px;
    }

    .table-body {
        padding: 20px;
        background-color: #fff;
    }


    .input-item {
        width: 250px;
        margin: 0 0 20px;
        display: inline-block;
    }

    .input-item .el-input__inner {
        border-right: 0;
    }

    .input-item .el-input__inner:hover {
        border: 1px solid #dcdfe6;
        border-right: 0;
        outline: 0;
    }

    .input-item .el-input__inner:focus {
        border: 1px solid #dcdfe6;
        border-right: 0;
        outline: 0;
    }

    .input-item .el-input-group__append {
        background-color: #fff;
        border-left: 0;
        width: 10%;
        padding: 0;
    }

    /* .input-item .el-input-group__append .el-button {
        padding: 0;
    }

    .input-item .el-input-group__append .el-button {
        margin: 0;
    } */

    .batch {
        margin: 0 0 20px;
        display: inline-block;
    }

    /* .batch .el-button {
        padding: 9px 15px !important;
    } */


    .el-table th>.cell {
        color: #333;
        font-weight: bold;
        font-size: 14px;
    }

    .el-table__footer-wrapper,
    .el-table__header-wrapper {
        border-bottom: 1.4px solid #D6D6D6;
    }
</style>