qimall/backend/modules/admin/views/addons/local.php

<?php

?>
<div id="app" v-cloak>
    <el-card shadow="never" body-style="background-color: #f3f3f3;padding: 10px 0 0;">
        <div slot="header">
            <span>应用（待安装）</span>
            <div style="float: right; margin: -5px 0">
                <el-button type="primary" @click="handle('open')" size="small">批量安装</el-button>
            </div>
        </div>
        <div class="table-body">
            <el-table v-loading="listLoading" :data="list" stripe style="width: 100%">
                
                <el-table-column label="应用标题" prop="title" align="center">
                    <template slot-scope="scope">
                        <div size="small">{{scope.row.title}}</div>
                    </template>
                </el-table-column>
                <el-table-column label="应用名称" prop="name" align="center">
                    <template slot-scope="scope">
                        <div size="small">{{scope.row.name}}</div>
                    </template>
                </el-table-column>
                <el-table-column label="应用封面" prop="name" align="center">
                    <template slot-scope="scope">
                        <div size="small">
                            <el-image style="width: 50px;height: 50px;border-radius: 5px;border: 1px solid black" :src="scope.row.cover">
                                <div slot="error" class="image-slot">
                                    <com-image :src="scope.row.default_cover"></com-image>
                                </div>
                            </el-image>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="作者" prop="author" align="center">
                    <template slot-scope="scope">
                        <div size="small">{{scope.row.author}}</div>
                    </template>
                </el-table-column>
                <el-table-column label="应用分组" prop="group" align="center">
                    <template slot-scope="scope">
                        <div size="small">{{addons_group_name(scope.row.group)}}</div>
                    </template>
                </el-table-column>
                <el-table-column label="版本号" prop="version" align="center">
                    <template slot-scope="scope">
                        <div size="small">{{scope.row.version}}</div>
                    </template>
                </el-table-column>
                <el-table-column label="简介" prop="version" align="center">
                    <template slot-scope="scope">
                        <div size="small">{{scope.row.brief_introduction}}</div>
                    </template>
                </el-table-column>

                <el-table-column label="操作" min-width="100" align="center">
                    <template slot-scope="scope">
                        <el-button type="primary" icon="el-icon-s-tools" size="mini" @click="install(scope.row.name)">安装</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div style="text-align: right;margin: 20px 0;">
                <el-pagination @current-change="pagination" background layout="prev, pager, next" :page-count="pageCount"></el-pagination>
            </div>
        </div>
    </el-card>

    <!-- 批量安装 -->
    <el-dialog v-loading="dialogLoading" element-loading-text="弹框加载中" title="批量安装" :visible.sync="dialogVisible" width="40%">
        <el-form :model="ruleForm"
                 ref="ruleForm"
                 label-width="172px"
                 size="small">
            <el-form-item label="是否批量上架">
                <el-col :span="12">
                    <el-radio-group v-model="ruleForm.is_online">
                        <el-radio :label="1" >是</el-radio>
                        <el-radio :label="0">否</el-radio>
                    </el-radio-group>
                </el-col>
            </el-form-item>

            <el-form-item label="支付方式" prop="payment_type">
                <el-col :span="12">
                    <el-checkbox-group v-model="ruleForm.payment_type" >
                        <el-checkbox :label="1" >微信支付</el-checkbox>
                        <el-checkbox :label="2" >支付宝支付</el-checkbox>
                    </el-checkbox-group>
                </el-col>
            </el-form-item>

            <el-form-item label="设置永久价格">
                <el-col :span="12">
                    <el-radio-group v-model="ruleForm.is_set_price" @change="setPrice">
                        <el-radio :label="1" >是</el-radio>
                        <el-radio :label="0">否</el-radio>
                    </el-radio-group>
                </el-col>
            </el-form-item>

            <el-form-item label="设置售价">
                <div v-for="(item,key) in setting">
                    <!-- 永久价格特殊处理 -->
                    <div v-if="key == 0 && item.duration == -1">
                        <el-input placeholder="0.00" style="width:300px" v-model="item.money" onInput="value=toNumber(value,2)">
                            <template slot="prepend">永久</template>
                            <template slot="append">元</template>
                        </el-input>
                    </div>
                    <div v-else style="margin-top: 10px;">
                        <el-input style="width:150px" type="number" v-model="item.duration" onInput="value=toNumber(value)">
                        </el-input>
                        <el-select v-model="item.unit" style="width: 64px;">
                            <el-option label="月"  value="1">月</el-option>
                            <el-option label="年"  value="2">年</el-option>
                        </el-select><el-input placeholder="0.00" style="width:150px" v-model="item.money" onInput="value=toNumber(value,2)">
                            <template slot="append">元</template>
                        </el-input>
                        <el-button type="text" @click="handle('delete',key)" style="margin-left: 10px;">删除</el-button>
                    </div>
                </div>
                <div v-if="setting && setting.length <= 3 && ruleForm.is_set_price == 1 || setting && setting.length < 3 && ruleForm.is_set_price == 0"><el-button type="text" @click="handle('add')">+添加售价</el-button> <span style="font-size: 12px; color: #cccbcb;">最多可添加3条</span></div>
            </el-form-item>

            <el-form-item>
                <el-col :span="12">
                    <el-button :loading="submitLoading" size="small" type="primary"
                               @click="submit('ruleForm')">保存
                    </el-button>
                </el-col>
            </el-form-item>
        </el-form>
    </el-dialog>
</div>
<script>
    const app = new Vue({
        el: '#app',
        data() {
            return {
                list: [],
                addons_group:{},
                listLoading: false,
                page: 1,
                pageCount: 0,
                dialogLoading: false,
                dialogVisible: false,
                submitLoading: false,
                ruleForm: {
                    addons_names: {},
                    is_online: 1,
                    payment_type: [1,2],
                    is_set_price: 1,
                },
                setting: [
                    {
                        "unit":"0",
                        "money":"0",
                        "duration":"-1",
                    }
                ]
            };
        },
        methods: {
            addons_group_name(name){
                return this.addons_group[name].title ?? '未分类';
            },
            search() {
                this.page = 1;
                this.getList();
            },
            pagination(currentPage) {
                let self = this;
                self.page = currentPage;
                self.getList();
            },
            handleList(list){
                for(let item in list){
                    list[item].default_cover = _diy_img_prefix+'/static/addons/icon/'+list[item].name+'.png'
                }
            },
            // 获取本地插件列表
            getList() {
                let self = this;
                if(self.listLoading == false){
                    self.listLoading = true;
                    request({
                        params: {
                            r: 'admin/addons/local',
                            page: self.page,
                        },
                        method: 'get',
                    }).then(e => {
                        self.listLoading = false;
                        if(e.data.data.list) this.handleList(e.data.data.list)
                        self.list = e.data.data.list;
                        self.addons_group = e.data.data.addons_group;
                        console.log(self.list)
                        self.pageCount = e.data.data.page_count;
                    }).catch(e => {
                        console.log(e);
                    });
                }
            },
            // 安装插件
            install(name){
                let self = this;
                request({
                    params: {
                        r: 'admin/addons/local'
                    },
                    method: 'post',
                    data:{name:name}
                }).then(e => {
                    if (e.data.code == 0) {
                        self.$message.success('安装成功');
                        self.getList();
                    } else {
                        self.$message.error(response.data.msg);
                    }
                }).catch(e => {
                    console.log(e);
                });
            },
            setPrice(event) {
                this.handle('set',event)
            },
            handle(type, data = null) {
                switch (type) {
                    case 'open':
                        if (this.list.length == 0) {
                            this.$message.error('暂无可安装的应用');
                            return;
                        }
                        this.dialogVisible = true;
                        break;
                    case 'add':// 添加规格
                        this.setting.push({
                            unit:"1",
                            money:"0",
                            duration:"",
                        });

                        break;
                    case 'delete':// 删除规格
                        this.setting.splice(data,1);
                        break;
                    case 'set':// 是否设置永久价格
                        if(data == 0 && this.setting.length>0 && this.setting[0].duration == -1) {
                            this.setting.splice(0, 1);
                        }
                        if(data == 1 && this.setting.length>0 && this.setting[0].duration != -1) {
                            this.setting.unshift({
                                unit:"0",
                                money:"0",
                                duration:"-1",
                            });
                            if(this.setting && this.setting.length>=4){
                                this.del_setting = this.setting[4];
                                this.setting.splice(4,1);
                            }
                        }
                        if(data == 1 && this.setting.length<=0){
                            this.setting.unshift({
                                unit:"0",
                                money:"0",
                                duration:"-1",
                            });
                        }
                        break;
                }
            },
            submit() {
                if (this.setting.length == 0) {
                    this.$message.error('售价不能为空');
                    return;
                }
                let addons_arrs = [];
                for(let item of this.list) {
                    addons_arrs.push(item.name);
                }
                this.ruleForm.addons_names = addons_arrs;
                this.ruleForm.price_setting = this.setting;
                this.submitLoading = true;
                this.$message('更新时间可能会比较长，请耐心等候');
                request({
                    params: {
                        r: 'admin/addons/batch-local-install',
                    },
                    method: 'post',
                    data: this.ruleForm,
                }).then(e => {
                    this.submitLoading = false;
                    if (e.data.code === 0) {
                        this.$message.success(e.data.msg);
                        this.dialogVisible = false;
                        this.getList();
                    } else {
                        this.$message.error(e.data.msg);
                    }
                }).catch(e => {
                });
            }
        },
        mounted: function() {
            this.getList();
        }
    });
</script>