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

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

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

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

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

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

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

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

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

    .display-name{
        display: flex;
        justify-content: space-between;
    }

    .display-border{
        min-width: 120px;
    }

    .install_img{
        position: absolute;
        right: 0px;
        top: 0px;
    }
</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 class="plugin-list">
				<template v-if="item.list || item.list.length > 0">
					<template v-for="plugin in item.list">
						<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
							<div flex="dir:left" class="plugin-item" @click="entryDetail(plugin.name)">
                            <img v-if="plugin.is_install" class="install_img" src="resources/img/install_use.png" alt="">
                            <img v-else class="install_img" src="resources/img/install_buy.png" alt="">
								<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 class="display-border">
									<div class="display-name">{{plugin.title}}</div>
                                    <com-ellipsis :line="1" :text="plugin.brief_introduction"></com-ellipsis>
								</div>
							</div>
						</el-col>
					</template>
				</template>
			</el-row>
		</div>
		
	</template>
</div>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                loading: false,
                list: [],
                addons: [],
                search: {
                    keyword: ''
                }
            };
        },
        created() {
            this.loadData();
        },
        methods: {
            toSearch() {
                this.loadData();
            },
            loadData() {
                this.loading = true;
                request({
                    params: {
                        r: 'mall/addons/market',
                    },
                    data: this.search,
                    method:'post'
                }).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});
            },
        }
    });
</script>