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

<style>
    .list-title {
        font-weight: 400;
        font-size: 18px;
    }

    .plugin-list {
        margin: 0 0 0 -20px;
    }

    .plugin-item {
		position: relative;
        border: 1px solid #ebebeb;
        background: #fff;
        padding: 20px;
        margin: 0 0 20px 20px;
        transition: 250ms;
        height: 97px;
    }

    .plugin-item .display-name {
        margin-bottom: 10px;
        transition: 250ms;
		font-weight: bold;
    }

    .plugin-item .el-tooltip {
        color: #BFBFBF;
    }

    .plugin-item:hover {
        cursor: pointer;
        border-color: #bfddff;
    }

    .plugin-item:hover .display-name {
        color: #409EFF;
		font-weight: bold;
    }

    .plugin-item .plugin-option-btn {
        height: 25px;
        width: 25px;
        font-size: 12px;
        padding: 0;
    }

    .plugin-item .detail-option.detail-option {
        color: #909399;
        background: #F2F6FC;
    }

    .plugin-item .detail-option:hover {
        color: #fff;
        background: #909399;
    }
	.plugin-item .name{
		white-space:nowrap;
		overflow:hidden;
		text-overflow:ellipsis;
		font-size: 12px;
	}

	.plugin-item .item-status{
		position: absolute;
		z-index: 10;
		top: 0;
		right: 0;
		width: 64px;
		height: 20px;
		opacity: 1;
		border-radius: 0px 0px 0px 5px;
		font-size: 11px;
		line-height: 20px;
		font-family: Microsoft YaHei;
		font-weight: 400;
		text-align: center;
	}
    .plugin-item .status0{
        background-color: #E8EAEC;
        color: #9398A4;
    }
    .plugin-item .status2{
        background-color: #fef0f0;
        color: #f56c6c;
    }
    .question_icon{
        position: absolute;
        top: 6px;
        right: 6px;
        width: 20px;
        height: 20px;
        z-index: 10;
    }
    .question_icon i{
        font-size: 17px;
        color: #BFBFBF;
    }
    .icon-item + .icon-item {
        margin-left: 5px;
    }
</style>
<div id="app" v-cloak>
	<template>
        <el-card shadow="never" style="border:0;min-width: 1000px;" body-style="background-color: #f3f3f3;padding: 10px 0 0;">
            <div slot="header">
                <div class="input-item" style="width: 300px;">
                    <el-input @keyup.enter.native="getList" size="small" placeholder="请输入搜索应用名称" v-model="search.keyword"
                              clearable @clear="toSearch">
                        <el-button slot="append" icon="el-icon-search" @click="toSearch"></el-button>
                    </el-input>
                </div>
            </div>
        </el-card>
		<div v-for="(item,its) in addons" :key="its">
			<h3 class="list-title">
				{{item.title}}
			</h3>
			<el-row v-if="item.list" class="plugin-list" v-loading="loading">
				<template v-for="(plugin,index) in item.list">
					<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
						<div flex="dir:left box:first" class="plugin-item" @click="entryPlugin(plugin)">
                            <div class="question_icon" >
                                <!-- 应用置顶 -->
                                <el-tooltip class="icon-item" effect="dark" content="应用置顶" placement="bottom" v-if="plugin.is_top == 0">
                                    <i class="el-icon-top" @click.stop="toTop(plugin.name)"></i>
                                </el-tooltip>
                                <!-- 取消应用置顶 -->
                                <el-tooltip class="icon-item" effect="dark" content="取消应用置顶" placement="bottom" v-if="plugin.is_top == 1">
                                    <i class="el-icon-bottom" @click.stop="toBottom(plugin.name)"></i>
                                </el-tooltip>
                                <!-- 教程 -->
                                <el-tooltip class="icon-item" effect="dark"  :content="prompt" placement="bottom"  v-if="plugin.name">
                                    <i @click.stop="courseurl(plugin.course_url)" class="el-icon-question"></i>
                                </el-tooltip>
                            </div>

							<div style="padding-right: 12px;">
								<!--<img style="width: 50px;height: 50px;display: block;" :src="plugin.cover">-->
								<el-image style="width: 50px;height: 50px;border-radius: 5px;" :src="plugin.cover">
                                    <div slot="error" class="image-slot">
                                        <com-image :src="plugin.default_cover"></com-image>
                                    </div>
                                </el-image>
							</div>
							<div style="width: 53%">
								<div class="display-name">{{plugin.title}}</div>
								<div flex="box:last" >
                                    <com-ellipsis :line="1" :text="plugin.brief_introduction"></com-ellipsis>
									<div v-if="plugin.name">
										<el-button class="plugin-option-btn detail-option"
												   type="text"
												   icon="el-icon-more"
												   circle
												   @click.stop="entryDetail(plugin.name)">
                                        </el-button>
									</div>
								</div>
							</div>
                            <div v-if="plugin.status == 0" class="item-status status0">未安装</div>
                            <div v-if="plugin.status == 2" class="item-status status2">已过期</div>
						</div>
					</el-col>
				</template>
			</el-row>

		</div>

	</template>


</div>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                loading: false,
                prompt: '使用教程',
                addons: [],
                search: {
                    keyword: null
                }
            };
        },
        created() {
            this.getList();
        },
        methods: {
            toSearch() {
                this.getList();
            },
            getList() {
                this.loading = true;
                let params = {
                    r: 'mall/addons/index',
                };
                params = Object.assign(params, this.search);
                request({
                    params: params,
                    method: 'get',
                }).then(e => {
                    this.loading = false;
                    if (e.data.code === 0) {
                        this.handleData(e.data.data)
                        this.addons = e.data.data
                    } else {
                        this.$message.error(e.data.msg);
                    }
                }).catch(e => {

                });
            },
            handleData(data){
                if(data){
                    for(let cate in data){
                        if(data[cate].list){
                            for(let item in data[cate].list){
                                data[cate].list[item].default_cover = _diy_img_prefix+'/static/addons/icon/'+data[cate].list[item].name+'.png'
                            }
                        }
                    }
                }
            },
            entryDetail(addonsName) {
                navigateTo({r: 'mall/addons/detail', name: addonsName});
            },
            courseurl(url){
                if(url){
                    window.open(url, '_blank');
                }else{
                    this.$message.warning('未设置教程链接');
                }
            },
            entryPlugin(addon) {
                if(addon.name){
                    var name = addon.name.replace(/([A-Z])/g,"-$1").toLowerCase();
                    name = name.substr(1, name.length);
                    if (addon.url) {
                        navigateTo({r: addon.url});
                    } else {
                        navigateTo({r: name + '/default/index'});
                    }
                }else{
                    window.open(addon.url, "_blank");
                }

            },
            /**
             * 设置应用置顶
             */
            toTop (name) {
                this.$confirm('是否把该应用进行置顶?', '提示', {type: 'notice'}).then(() => {
                    request({
                        params: {
                            r: 'mall/addons/to-top',
                        },
                        method: 'post',
                        data: {
                            name: name,
                        }
                    }).then(e => {
                        if (e.data.code == 0) {
                            this.$message.success('设置成功')
                            localStorage.setItem('mall_header_data', '');
                            setTimeout(() => {
                                location.reload()
                            }, 1500)
                        } else {
                            this.$message.warning(e.data.msg)
                        }
                    }).catch(e => {
                        this.$message.warning('设置置顶失败')
                    })
                })
            },
            /**
             * 取消应用置顶
             */
            toBottom (name) {
                this.$confirm('是否把该应用取消置顶?', '提示', {type: 'notice'}).then(() => {
                    request({
                        params: {
                            r: 'mall/addons/to-bottom',
                        },
                        method: 'post',
                        data: {
                            name: name,
                        }
                    }).then(e => {
                        if (e.data.code == 0) {
                            this.$message.success('设置成功')
                            localStorage.setItem('mall_header_data', '');
                            setTimeout(() => {
                                location.reload()
                            }, 1500)
                        } else {
                            this.$message.warning(e.data.msg)
                        }
                    }).catch(e => {
                        this.$message.warning('设置置顶失败')
                    })
                })
            }
        }
    });
</script>