qimall/backend/modules/admin/views/mall/index.php

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

    .table-body .top-input {
        margin-top: 34px;
    }

    .input-item {
        width: 200px;
        margin-right: 20px;
    }

    .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;
    }

    /* #app .table-body .el-table .el-button {
        border-radius: 16px;
    } */

    .create {
        height: 36px;
        line-height: 36px;
        float: right;
        color: #BCBCBC;
        margin-left: 20px;
    }

    .name {
        cursor: pointer;
        color: #49A9FF;
    }

    /* 卡片 */
    .plugin-list {
        margin: 0 0 0 -20px;
        /* padding-right: 100px; */
        display: flex;
        flex-wrap: wrap;
    }

    .plugin-list .plugin-item {
        width: 20%;
        min-width: 400px;
    }


    .plugin-item {
        border: 1px solid #ebebeb;
        background: #FFFFFF;
        box-shadow: 3px 5px 15px rgba(80, 80, 80, 0.16);
        opacity: 1;
        border-radius: 5px;
        padding: 20px;
        margin: 0 0 20px 20px;
        transition: 250ms;
        position: relative;
        /* min-width: 300px; */
    }

    .plugin-item .item-status {
        position: absolute;
        top: 0;
        right: 0;
        width: 94px;
        height: 30px;
        background: #E8EAEC;
        opacity: 1;
        border-radius: 0px 5px 0px 5px;
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        line-height: 30px;
        color: #9398A4;
        text-align: center;
    }

    .item-status-permanent {
        width: 94px;
    }

    .item-status-effective {
        width: 164px;
    }

    .plugin-item .item-info {
        display: flex;
        align-items: center;
    }

    /* .plugin-item .item-info .item-right{
		min-width: 500px;
	} */

    .plugin-item .item-btns {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        margin-top: 12px;
    }


    .plugin-item .mall-logo {
        width: 70px;
        height: 70px;
        margin-right: 12px;
    }

    .plugin-item .mall-logo img {
        width: 100%;
        height: 100%;
        display: block;
        border-radius: 50%;
    }

    .plugin-item .display-name {
        font-size: 18pt;
        margin-top: 10px;
        margin-bottom: 4px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        line-height: 30px;
        color: #3F495D;
        opacity: 1;
        width: 200px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .plugin-item .name {
        color: #909399;
    }

    .plugin-item:hover {
        cursor: pointer;
        border-color: #bfddff;
    }
    .notinstall .el-checkbox.is-bordered+.el-checkbox.is-bordered {
        margin:5px 10px 5px 0px;
    }
    .notinstall .el-checkbox {
        margin-right: 10px;
    }
</style>
<div id="app" v-cloak>
    <el-card shadow="never" style="border:0" body-style="background-color: #f3f3f3;padding: 0;">
        <div slot="header" style="margin-top: 20px;" v-if="!isInd">
            <div>
                <span>小程序管理</span>
            </div>
        </div>
        <div class="table-body">
                <div v-if="isInd">
                    <el-button type="primary" size="small" @click="showCreateMallDialog()">新建商城
                    </el-button>
                </div>
            <br>
            <el-form :inline="true" size="small" class="demo-form-inline">
                <el-form-item label="">
                    <el-input @keyup.enter.native="search" size="small" placeholder="请输入商城名称" type="text" clearable @clear="search" v-model="searchForm.keyword">
                        <el-button slot="append" @click="search" icon="el-icon-search"></el-button>
                    </el-input>
                </el-form-item>
                <el-form-item label="">
                    <el-input @keyup.enter.native="search" size="small" placeholder="请输入手机号" type="text" clearable @clear="search" v-model="searchForm.mobile">
                        <el-button slot="append" @click="search" icon="el-icon-search"></el-button>
                    </el-input>
                </el-form-item>
                <el-form-item label="">
                    <el-date-picker
                        v-model="searchForm.date"
                        type="date"
                        placeholder="选择日期"
                        @change="search"
                    >
                    </el-date-picker>
                </el-form-item>
            </el-form>
            <div class="plugin-list" v-loading="loading">
                <template v-for="(plugin,index) in list">
                    <!-- <el-col> -->
                    <div class="plugin-item">
                        <!-- <div class="plugin-item" @click="entryPlugin(plugin)"> -->
                        <div v-if="plugin.adonsComboRelation && addons_combo_data && addons_combo_data[plugin.adonsComboRelation.addons_combo_id]" class="item-status" style="overflow: hidden;">{{ addons_combo_data[plugin.adonsComboRelation.addons_combo_id] }}</div>

                        <div class="item-info">
                            <div class="mall-logo">
                                <img :src="plugin.logo" alt="">
                            </div>
                            <div class="item-right">
                                <div class="display-name">{{plugin.name}}</div>
                                <div flex="box:last">
                                    <div class="name" v-if="plugin.admin">使用者：{{plugin.admin.username}}</div>
                                </div>
                                <div flex="box:last">
                                    <div class="name">ID：{{plugin.id}}</div>
                                </div>
                                <div flex="box:last">
                                    <div class="name">签名：{{plugin.mall_sign}}</div>
                                </div>
                                <div flex="box:last">
                                    <div v-if="plugin.expired_at=='0'" class="name">期限：永久</div>
                                    <div v-else class="name">期限：{{plugin.expired_at|filterDate}}</div>
                                </div>
                            </div>
                        </div>
                        <div class="item-btns">
                            <el-button  size="mini" style="border:none;color: #9398A4;" id="copyBtn" @click="clickCopyBtn(plugin.mall_info, $event)">复制
                            </el-button>
                            <el-button size="mini" @click="toRecycle(plugin)" style="border:none;color: #9398A4;" slot="reference">删除
                            </el-button>
                            <!-- <el-button plain size="mini" @click="switchAbleStatus(plugin)"
									:type="plugin.is_disable == 0 ? 'danger' : 'primary'" slot="reference">
								    {{plugin.is_disable == 0 ? '禁用' : '启用'}}
								</el-button> -->
                            <el-button style="border:none;color: #9398A4;" size="mini" @click="edit(plugin)">编辑</el-button>
                            <el-button style="border:none;color: #9398A4;" size="mini" @click="customHost(plugin)" v-if="has_subdomain">域名</el-button>
                            <el-button type="primary" size="mini" @click="toEnter(plugin)" >进入商城
                        </div>
                    </div>
                    <!-- </el-col> -->
                </template>
            </div>

            <div style="text-align: right;margin: 20px 0;">
                <el-pagination @current-change="pageChange" background layout="prev, pager, next" :page-count="page_count"></el-pagination>
            </div>

        </div>
    </el-card>

    <!-- 创建/编辑商城 -->
    <el-dialog :title="isEdit==0?'创建商城':'编辑商城'" :visible.sync="createMallDialogVisible" width="40%" :close-on-click-modal="false" @close="closePop">
        <el-form label-width="100px" size="small" :model="createMallForm" :rules="createMallRules" ref="createMallForm">
            <el-form-item label="商城名称" prop="name">
                <el-input type="text" size="small" v-model="createMallForm.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item prop="logo" v-if="isEdit==1">
<!--                <label slot="label">-->
<!--                    <span>商城logo</span>-->
<!--                </label>-->
<!--                <com-attachment v-model="createMallForm.logo" :simple="true">-->
<!--                    <el-button>上传图片</el-button>-->
<!--                </com-attachment>-->
                <div class="customize-share-title">
                    <com-image mode="aspectFill" width='80px' height='80px' :src="createMallForm.logo ? createMallForm.logo : ''"></com-image>
<!--                    <el-button v-if="createMallForm.logo" class="del-btn" size="mini" type="danger" icon="el-icon-close" circle @click="createMallForm.logo = ''"></el-button>-->
                </div>
                <!-- <el-button @click="app_share.dialog = true;app_share.type = 'pic_bg'"
			               type="text">查看图例
			    </el-button> -->
            </el-form-item>

            <el-form-item label="商城有效期" prop="expired_at" ref="expired_at">
                <el-date-picker type="datetime" v-if="isCheckExpired" :disabled="true"></el-date-picker>
                <el-date-picker v-else :picker-options="pickerOptions" :disabled="isCheckExpired" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期" v-model="createMallForm.expired_at">
                </el-date-picker>
                <el-checkbox v-model="isCheckExpired" @change="checkExpiredAt">永久</el-checkbox>
            </el-form-item>
            <el-form-item label="手机号码" prop="mobile" v-if="isEdit==0">
                <el-input type="text" size="small" v-model="createMallForm.mobile" autocomplete="off"></el-input>
            </el-form-item>

            <!-- 应用付费套餐绑定 -->
            <el-form-item label="选择套餐" prop="addons_combo_id" v-if="admin_type == 1 && isEdit==0 && addons_combo.length>0">
                <el-select v-model="createMallForm.addons_combo_id" placeholder="请选择套餐">
                    <el-option
                            v-for="item in addons_combo"
                            :key="item.id"
                            :label="item.title"
                            :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>

            <!-- 重置登录密码 -->
            <el-form-item label="登录密码" prop="password" v-if="admin_type == 1">
                <el-input type="password" size="small" v-model="createMallForm.password"></el-input>
            </el-form-item>

            <el-form-item label="套餐名称" prop="addons_combo_id" v-if="isEdit!=0 && addons_combo.length>0 && addons_combo_name">
               {{addons_combo_name}}
            </el-form-item>
            <el-form-item label="同步示例商城数据" v-if="isEdit==0">
                <el-switch v-model="createMallForm.is_sync_mall_data" :active-value="1" :inactive-value="0">
                </el-switch>
            </el-form-item>

            <el-form-item label="合规模式">
                <el-switch v-model="createMallForm.is_compliance" :active-value="1" :inactive-value="0">
                </el-switch>
            </el-form-item>

            <!-- 应用付费套餐绑定 -->
            <el-form-item label="显示版权">
                <el-switch v-model="createMallForm.is_show_copyright" :active-value="1" :inactive-value="0">
                </el-switch>
            </el-form-item>
            <el-form-item label="客服电话" prop="contact_tel">
                <el-input type="text" size="small" v-model="createMallForm.contact_tel" autocomplete="off"></el-input>
            </el-form-item>
            <!-- 增加套餐 -->
            <el-form-item v-if="createMallForm.id && admin_type == 1" label="安装套餐" prop="install_addons" class="notinstall">
                <el-checkbox-group v-model="createMallForm.install_addons">
                    <el-collapse v-model="activeCollapse">
                        <el-collapse-item v-for="(item, key) in notinstall_addons" :key="key" :title="item.title" :name="key">
                            <el-checkbox class="addons-item"
                                         v-for="(addon, index) in item.list"
                                         :key="index"
                                         :checked="item.check"
                                         size="medium"
                                         :label="addon.name"
                                         border>{{ addon.title }}</el-checkbox>
                        </el-collapse-item>
                    </el-collapse>
                </el-checkbox-group>
            </el-form-item>

            <el-form-item style="text-align: right">
                <el-button size="small" @click="createMallDialogVisible = false">取消</el-button>
                <el-button size="small" :loading="createMallSubmitLoading" type="primary" @click="createMallSubmit('createMallForm')">确定
                </el-button>
            </el-form-item>
        </el-form>
    </el-dialog>

    <!-- 修改版权 -->
    <el-dialog title="修改版权" :visible.sync="copyrightDialogVisible">
        <el-form label-width="130px" v-if="copyrightForm" :model="copyrightForm">
            <el-form-item label="底部版权文字">
                <el-input style="width: 70%" type="textarea" autosize size="small" v-model="copyrightForm.description" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="底部版权图标">
                <com-attachment v-model="copyrightForm.pic_url" :simple="true">
                    <el-tooltip class="item" effect="dark" content="建议尺寸:160*50" placement="top">
                        <el-button size="small">选择图片</el-button>
                    </el-tooltip>
                </com-attachment>
                <com-image width="80px" height="80px" mode="aspectFill" :src="copyrightForm.pic_url"></com-image>
            </el-form-item>
            <el-form-item label="底部版权链接">
                <el-input style="width: 70%" placeholder="请选择链接" size="small" disabled v-model="copyrightForm.link_url">
                    <com-pick-link slot="append" :mall-id="copyrightForm.mall_id" @selected="selectAdvertUrl">
                        <el-button size="mini">选择链接</el-button>
                    </com-pick-link>
                </el-input>
            </el-form-item>
            <el-form-item style="text-align: right">
                <el-button size="small" @click="copyrightDialogVisible = false">取消</el-button>
                <el-button size="small" type="primary" @click="copyrightSubmit()" :loading="copyrightSubmitLoading">确定
                </el-button>
            </el-form-item>
        </el-form>
    </el-dialog>

    <!-- 迁移 -->
    <el-dialog title="选择所属账户" :visible.sync="changeOwnerDialogVisible" width="30%">
        <div style="margin-bottom: 10px;">当前迁移的商城：<span style="color: #ff4544">{{currentChangeOwnerMall.name}}</span>
        </div>
        <div class="search-input-item">
            <el-input size="small" placeholder="请输入搜索内容" type="text" clearable @clear="loadAdminList" v-model="keyword">
                <el-button slot="append" @click="loadAdminList" icon="el-icon-search"></el-button>
            </el-input>
        </div>
        <el-table v-loading="adminListLoading" :data="adminList" style="margin-bottom: 20px;">
            <el-table-column align="center" prop="id" label="id"></el-table-column>
            <el-table-column align="center" prop="nickname" label="用户名"></el-table-column>
            <el-table-column align="center" label="操作">
                <template slot-scope="scope">
                    <el-button :loading="scope.row.loading" plain size="mini" type="primary" @click="changeToOwner(scope.row)">选择
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <el-pagination v-if="adminListPagination" style="text-align: center" background @current-change="adminListPageChange" layout="prev, pager, next" :page-count="adminListPagination.page_count">
        </el-pagination>
    </el-dialog>

    <!-- 操作类提示 -->
    <el-dialog title="提示" :visible.sync="dialogOperation" width="30%">
        <span>这是一段信息</span>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        </span>
    </el-dialog>

    <el-dialog title="自定义域名" :visible.sync="customHostDialogVisible" width="40%" :close-on-click-modal="false" @close="closeCustomHost">
        <el-form label-width="100px" size="small" :model="customHostForm" :rules="customHostRules" ref="hostForm">
            <el-form-item label="启用">
                <el-switch v-model="customHostForm.is_custom_host" :active-value="1" :inactive-value="0">
                </el-switch>
            </el-form-item>
            <el-form-item label="后台域名" prop="backend_url">
                <el-input type="text" size="small" v-model="customHostForm.backend_url" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="h5域名" prop="h5_url">
                <el-input type="text" size="small" v-model="customHostForm.h5_url" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="api域名" prop="api_url">
                <el-input type="text" size="small" v-model="customHostForm.api_url" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="静态域名" prop="api_url">
                <el-input type="text" size="small" v-model="customHostForm.static_url" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="证书" prop="ssl_path">
                <el-input placeholder="请输入内容" v-model="customHostForm.ssl_path" disabled>
                    <template slot="append">
                    <el-upload
                        action="/index.php?r=admin/file/upload"
                        multiple
                        :show-file-list="false"
                        accept=".zip"
                        :on-success="handleAvatarSuccess"
                    >
                        <el-button>点击上传</el-button>
                    </el-upload> 
                    </template>
                </el-input>
            </el-form-item>
            <el-form-item style="text-align: right">
                <el-button size="small" @click="customHostDialogVisible = false">取消</el-button>
                <el-button size="small" type="primary" @click="customHostSubmit('hostForm')">确定
                </el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</div>

<script>
    new Vue({
        el: '#app',
        data() {
            return {
                admin_type:0,
                pickerOptions: {
                    disabledDate(time) {
                        return time.getTime() < Date.now() - 8.64e7
                    }
                },
                isInd: _isInd,
                notinstall_addons:[],
                activeCollapse:[],
                addons_combo_data:[],
                addons_combo_name:'',
                isAdmin: _isAdmin,
                isSuperAdmin: _isSuperAdmin,
                createMallDialogVisible: false,
                keyword: '',
                isEdit: 0, //默认不是编辑
                createMallForm: {
                    id: 0,
                    name: '',
                    contact_tel: '',
                    mobile: '',
                    password: '',
                    logo: '',
                    expired_at: '',
                    addons_combo_id: null,
                    is_compliance: 0,
                    is_show_copyright: 0,
                    install_addons: [],
                    is_sync_mall_data: 0,
                },
                isCheckExpired: false,
                isExpiredDisabled: false,
                createMallRules: {
                    name: [{
                        required: true,
                        message: '请填写商城名称。'
                    }, ],
                    mobile: [
                        {
                            required: true,
                            validator: (rule, value, callback) => {
                                if(value==''){
                                    callback('请输入手机号');
                                    return
                                }
                                if(!(/^1\d{10}$/.test(value))){
                                    callback('手机号码有误，请重填');
                                }
                                callback();
                            }
                        }
                    ],
                    expired_at: [{
                        required: true,
                        message: '请选择商城有效期'
                    }, ]
                },
                createMallSubmitLoading: false,
                adminInfo: {},
                searchForm: {
                    keyword: '',
                    mobile: '',
                    date: '',
                },
                searchLoading: false,
                list: [],
                page_count: null,
                loading: false,
                toRecycleLoading: false,
                copyrightDialogVisible: false,
                copyrightForm: null,
                copyrightSubmitLoading: false,
                switchAbleStatusLoading: false,
                changeOwnerDialogVisible: false,
                currentChangeOwnerMall: {
                    name: ''
                },
                adminListForm: {
                    page: 0,
                },
                adminListLoading: false,
                adminList: null,
                adminListPagination: null,
                mallListPage: 1, //默认请求第一页数据

                user: _baseUrl + '/resources/img/admin/mall-logo.png',
                list: [],
                dialogOperation: false, //操作弹窗显示状态
                TitleOperation: false, //操作标题
                addons_combo:[],
                customHostDialogVisible: false,
                customHostForm: {
                    backend_url: '',
                    h5_url: '',
                    api_url: '',
                    static_url: '',
                    is_custom_host: 0,
                    ssl_path: '',
                },
                customHostRules: {
                    backend_url: [{
                            required: true,
                            message: '请填写后台域名。'
                        },
                    ],
                    h5_url: [
                        {
                            required: true,
                            message: '请填写h5域名。'
                        },
                    ],
                    api_url: [
                        {
                            required: true,
                            message: '请填写api域名。'
                        },
                    ],
                    static_url: [
                        {
                            required: true,
                            message: '请填写静态域名。'
                        },
                    ],
                    ssl_path: [
                        {
                            required: true,
                            message: '请上传您的域名证书。'
                        },
                    ],
                },
                customHostSubmitLoading: false,
                has_subdomain: <?php echo $has_subdomain; ?>,
                mallId: '',
            }
        },
        created() {
            this.loadList({});
            this.expireNotice()
            this.serverNotice()
        },
        methods: {
            // 0.1 新建商城
            showCreateMallDialog() {
                this.isEdit = 0;
                this.createMallDialogVisible = true;
                this.createMallForm.name = '';
                this.createMallForm.expired_at = '';
                this.createMallForm.contact_tel = '';
                this.createMallForm.id = null;
                this.isCheckExpired = false;
                this.install_addons = [];
            },
            // 确认编辑/新增
            createMallSubmit(formName) {
                this.$refs[formName].validate(valid => {
                    if (valid) {
                        this.createMallSubmitLoading = true;
                        this.$refs['expired_at'].clearValidate();
                        console.log(this.createMallForm, '============');
                        this.$request({
                            params: {
                                r: 'admin/mall/create',
                            },
                            method: 'post',
                            data: this.createMallForm,
                        }).then(e => {
                            console.log(e, "创建成功")
                            this.createMallSubmitLoading = false;
                            if (e.data.code === 0) {
                                this.createMallDialogVisible = false;
                                this.$message.success(e.data.msg);
                                this.createMallForm = {
                                    id: null,
                                    name: '',
                                    logo: '',
                                    expired_at: '',
                                    install_addons: [],
                                }
                                this.loadList({
                                    page: this.mallListPage
                                });
                                // 更新当前item数据

                            } else {
                                this.$message.error(e.data.msg);
                            }
                        }).catch(e => {

                            console.log(e, "失败了？")
                        });
                    } else {}
                });
            },

            // 2.0 获取列表数据
            loadList(params) {
                params['r'] = 'admin/mall/index';
                params['keyword'] = this.searchForm.keyword;
                params['mobile'] = this.searchForm.mobile;
                params['date'] = this.searchForm.date;
                params['is_recycle'] = this.searchForm.isRecycle;
                params['user_id'] = getQuery('user_id');
                params['page'] = this.mallListPage;
                params['limit'] = 12;
                this.searchLoading = true;
                this.$request({
                    params: params,
                }).then(e => {
                    this.searchLoading = false;
                    if (e.data.code === 0) {
                        for (let i in e.data.data.list) {
                            e.data.data.list[i].recyclePopoverVisible = false;
                            e.data.data.list[i].ableStatusPopoverVisible = false;
                        }
                        this.list = e.data.data.list;
                        this.admin_type = e.data.data.admin_type;
                        this.page_count = e.data.data.page_count;
                        this.adminInfo = e.data.data.admin_info;
                        this.addons_combo_data = e.data.data.addons_combo_data;
                        //console.log(this.admin_type,55);
                        this.showCopyright = e.data.data.showCopyright;
                        if (!isEmpty(e.data.data.addons_combo)) this.addons_combo = e.data.data.addons_combo;
                    }
                }).catch(e => {});
            },
            search() {
                this.loadList({});
            },
            pageChange(page) {
                this.mallListPage = page;
                this.loadList({
                    page: page,
                });
            },
            toEnter(row) {
                localStorage.clear();
                this.$request({
                    params: {
                        r: 'admin/mall/entry'
                    },
                    method: 'post',
                    data: {
                        mall_id: row.id
                    }
                }).then(e => {
                    if (e.data.code === 0) {
                        this.clearMenuStorage();
                        this.$navigate(e.data.data.redirect_url);
                    } else {
                        this.$message.error(e.data.msg);
                    }
                });
            },
            clearMenuStorage() {
                localStorage.removeItem('open_menu_1_id');
                localStorage.removeItem('open_menu_2_id');
                localStorage.removeItem('open_menu_3_id');
                localStorage.removeItem('unfold_id_1');
                localStorage.removeItem('unfold_id_2');
            },
            // 删除
            toRecycle(row) {
                this.$confirm('删除该条数据后不可以恢复, 是否继续?', '警告', {type: 'warning'}).then(() => {
                    this.toRecycleLoading = true;
                    this.$request({
                        params: {r: 'admin/mall/update'},
                        method: 'post',
                        data: {is_recycle: 1, id: row.id},
                    }).then(e => {
                        this.toRecycleLoading = false;
                        if (e.data.code === 0) {
                            this.$message.success(e.data.msg);
                            row.recyclePopoverVisible = false;
                            this.loadList({});
                        } else {
                            this.$message.error(e.data.msg);
                        }
                    }).catch(e => {
                    });
                });
            },
            clickCopyBtn: function (text, event) {

                const btnId = '#' + event.currentTarget.id;
                const clipboard = new ClipboardJS(btnId, {
                    text: () => text
                });
                // const clipboard = new ClipboardJS(event.target);

                clipboard.on("success", e => {

                    this.$message({
                        type: "success",
                        message: "商城账号信息复制成功",
                        showClose: true,
                    }); //这里你如果引入了elementui的提示就可以用，没有就注释即可

                    // 释放内存

                    clipboard.destroy();

                });
                clipboard.on("error", e => {

                    // 不支持复制

                    this.$message({
                        type: "error",
                        message: "商城账号信息复制失败",
                        showClose: true,
                    });
                    clipboard.destroy();

                });
            },
            showCopyrightDialog(row) {
                if (row.copyright) {
                    this.copyrightForm = row.copyright;
                    this.copyrightForm.mall_id = row.id;
                } else {
                    this.copyrightForm = {
                        description: '',
                        link_url: '',
                        pic_url: null,
                        type: 1,
                        mobile: '',
                        mall_id: row.id,
                        link: ''
                    };
                }
                this.copyrightDialogVisible = true;
            },
            copyrightSubmit() {
                this.copyrightSubmitLoading = true;
                this.copyrightForm['id'] = this.copyrightForm.mall_id;
                this.$request({
                    params: {r: 'admin/mall/set-copyright'},
                    method: 'post',
                    data: this.copyrightForm,
                }).then(e => {
                    this.copyrightSubmitLoading = false;
                    if (e.data.code === 0) {
                        this.copyrightDialogVisible = false;
                        this.$message.success(e.data.msg);
                        this.loadList({});
                    } else {
                        this.$message.error(e.data.msg);
                    }
                }).catch(e => {});
            },

            switchAbleStatus(row) {
                this.switchAbleStatusLoading = true;
                this.$request({
                    params: {r: 'admin/mall/disable',id: row.id,status: 1},
                    method: 'get'
                }).then(e => {
                    this.switchAbleStatusLoading = false;
                    if (e.data.code === 0) {
                        this.$message.success(e.data.msg);
                        row.ableStatusPopoverVisible = false;
                        this.loadList({});
                    } else {
                        this.$message.error(e.data.msg);
                    }
                }).catch(e => {});
            },
            selectAdvertUrl(e) {
                let self = this;
                let link_url;
                e.forEach(function(item, index) {
                    link_url = item.new_link_url;
                });
                this.copyrightForm.link = e[0];
                this.copyrightForm.link_url = link_url;
            },
            showChangeOwnerDialog(row) {
                this.currentChangeOwnerMall = row;
                this.changeOwnerDialogVisible = true;
                if (!this.adminList) {
                    this.loadAdminList();
                }
            },
            loadAdminList() {
                this.adminListLoading = true;
                this.$request({
                    params: {
                        r: 'admin/user/index',
                        page: this.adminListForm.page,
                        keyword: this.keyword,
                        is_super_admin: 1,
                    }
                }).then(e => {
                    this.adminListLoading = false;
                    if (e.data.code === 0) {
                        for (let i in e.data.data.list) {
                            e.data.data.list[i].loading = false;
                        }
                        this.adminList = e.data.data.list;
                        this.adminListPagination = e.data.data.pagination;
                    } else {}
                }).catch(e => {});
            },
            adminListPageChange(page) {
                this.adminListForm.page = page;
                this.loadAdminList();
            },
            changeToOwner(row) {
                const content = '确认将`' + this.currentChangeOwnerMall.name + '`迁移至`' + row.username + '`账户下?';
                this.$confirm(content, '提示').then(e => {
                    row.loading = true;
                    this.$request({
                        params: {
                            r: "admin/mall/removal",
                            user_id: row.id,
                            mall_id: this.currentChangeOwnerMall.id,
                        },
                    }).then(e => {
                        row.loading = false;
                        if (e.data.code === 0) {
                            this.changeOwnerDialogVisible = false;
                            this.$message.success(e.data.msg);
                            this.loadList({});
                        } else {
                            this.$message.error(e.data.msg);
                        }
                    }).catch(e => {});
                }).catch(e => {});
            },
            checkExpiredAt(value) {
                this.isCheckExpired = value;
                if (value) {
                    this.createMallForm.expired_at = 0
                } else {
                    this.createMallForm.expired_at = ''
                }
                this.$refs['expired_at'].clearValidate();
            },
            edit(row) {
                let that = this;
                this.isEdit = 1;
                // return
                this.createMallForm.logo = (!row.logo) ? this.user : row.logo;

                this.createMallDialogVisible = true;
                this.createMallForm.id = row.id;
                this.createMallForm.name = row.name;
                this.createMallForm.is_compliance = row.is_compliance;
                this.createMallForm.is_show_copyright = row.is_show_copyright;
                this.createMallForm.contact_tel = row.contact_tel;
                if(row.adonsComboRelation && row.adonsComboRelation.addons_combo_id){
                    this.addons_combo_name = this.addons_combo_data[row.adonsComboRelation.addons_combo_id];
                }else{
                    this.addons_combo_name = '';
                }

                if (row.expired_at == 0) {
                    this.createMallForm.expired_at = row.expired_at;
                    this.isCheckExpired = true;
                } else {
                    //转为yyyy-MM-dd HH:mm:ss-回显
                    let date = new Date(row.expired_at * 1000);
                    let y = date.getFullYear();
                    let MM = date.getMonth() + 1;
                    MM = MM < 10 ? ('0' + MM) : MM;
                    let d = date.getDate();
                    d = d < 10 ? ('0' + d) : d;
                    let h = date.getHours();
                    h = h < 10 ? ('0' + h) : h;
                    let m = date.getMinutes();
                    m = m < 10 ? ('0' + m) : m;
                    let s = date.getSeconds();
                    s = s < 10 ? ('0' + s) : s;
                    this.createMallForm.expired_at = y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s;
                }

                // 获取插件
                if (this.addons_combo.length > 0) {
                    request({
                        params: {
                            r: 'admin/addons/get-mall-addons',
                            mall_id: row.id
                        },
                        method: 'get',
                    }).then(e => {
                        this.loading = false;
                        if (e.data.code === 0) {
                            if (e.data.data) {
                                this.activeCollapse = [];
                                this.createMallForm.install_addons = [];
                                this.notinstall_addons = e.data.data
                                for (let key in this.notinstall_addons) {
                                    for (let index in this.notinstall_addons[key].list) {
                                        let item = this.notinstall_addons[key].list[index]
                                        if (item.check == true) this.createMallForm.install_addons.push(item.name)
                                    }
                                    this.activeCollapse.push(key)
                                }
                            }
                        } else {
                            this.$message.error(e.data.msg);
                        }
                    }).catch(e => {
                    });
                }
            },
            closePop(){
                this.$refs["createMallForm"].resetFields();
            },
            customHost(row) {
                this.customHostDialogVisible = true;
                this.mallId = row.id;

                if(row.mallHost) {
                    this.customHostForm.backend_url = row.mallHost.backend_url;
                    this.customHostForm.h5_url = row.mallHost.h5_url;
                    this.customHostForm.api_url = row.mallHost.api_url;
                    this.customHostForm.static_url = row.mallHost.static_url;
                    this.customHostForm.is_custom_host = row.mallHost.is_custom_host;
                    this.customHostForm.ssl_path = row.mallHost.ssl_path;
                } else {
                    this.customHostForm.backend_url = ''
                    this.customHostForm.h5_url = ''
                    this.customHostForm.api_url = ''
                    this.customHostForm.static_url = ''
                    this.customHostForm.is_custom_host = ''
                    this.customHostForm.ssl_path = ''
                }
            },
            closeCustomHost() {
                this.$refs["hostForm"].resetFields();
            },
            customHostSubmit(formName) {
                this.$refs[formName].validate(valid => {
                    if (valid) {
                        this.customHostSubmitLoading = true;
                        this.$request({
                            params: {
                                r: 'admin/mall/custom-host',
                                mall_id: this.mallId,
                            },
                            method: 'post',
                            data: this.customHostForm,
                        }).then(e => {
                            this.customHostSubmitLoading = false;
                            if (e.data.code === 0) {
                                this.customHostSubmitLoading = false;
                                this.$message.success(e.data.msg);
                                this.customHostDialogVisible = false;
                                this.loadList({
                                    page: this.mallListPage
                                });
                            } else {
                                this.$message.error(e.data.msg);
                            }
                        }).catch(e => {

                            console.log(e, "失败了？")
                        });
                    }
                })

            },
            handleExceed(files, fileList) {
                this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
            },
            handleAvatarSuccess(res, file) {
                if (res.code == 0) {
                    // let url = URL.createObjectURL(file.raw)
                    let url = res.data.path
                    this.customHostForm.ssl_path = url
                } else {
                    this.$message.error(res.msg);
                }
            },
            expireNotice() {
                this.$request({
                    params: {
                        r: 'admin/expire-notice/certificate-notice',
                    },
                    method: 'get',
                }).then(e => {
                    if (e.data.code === 0) {
                        let data = e.data.data
                        let notice = ''
                        data.forEach(item => {
                            notice += item + '，'
                        })
                        if (notice) {
                            notice = notice.substring(0, notice.length - 1)
                            this.$message({
                                message: '当前 ' + notice + ' SSL证书即将到期，请及时进行更换，以免造成不必要的损失',
                                type: 'warning',
                                duration: 10000,
                            })
                        }
                    }
                })
            },
            serverNotice() {
                this.$request({
                    params: {
                        r: 'admin/expire-notice/server-notice',
                    },
                    method: 'get',
                }).then(e => {
                    if (e.data.code === 0 && e.data.data) {
                        this.$message({
                            message: '当前服务器即将到期，请及时进行续费，以免造成不必要的损失',
                            type: 'warning',
                            duration: 10000,
                        })
                    }
                })
            },
        },
        filters: {
            // 只保留年月日
            filterDate(value) {
                var value = parseInt(value)*1000;
                if (value != 0) {
                    let valueResult = new Date(value).getTime(); //转毫秒
                    let timestamp = Date.parse(new Date()); //当前毫秒时间戳
                    let date = new Date(value);
                    let y = date.getFullYear();
                    let MM = date.getMonth() + 1;
                    MM = MM < 10 ? ('0' + MM) : MM;
                    let d = date.getDate();
                    d = d < 10 ? ('0' + d) : d;
                    if (valueResult * 1 > timestamp * 1) {
                        return y + '-' + MM + '-' + d;
                    } else {
                        return '已过期（' + y + '-' + MM + '-' + d + '）';
                    }
                }
            },
        },
    });
</script>