qimall/backend/modules/mall/views/addons/purchased.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: 110px;
    }

    .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-status{
        position: absolute;
        top: 0px;
        right: 0px;
        z-index: 10;
    }
    .status-expire {
        background-color: #f4f4f5;
        color: #909399;
    }
    .status-uninstall {
        background-color: #fdf6ec;
        color: #e6a23c;
    }
    .status-tobeinstall {
        background-color: #f0f9eb;
        color: #67c23a;
    }
    .status-box {
        height: 24px;
        padding: 4px 10px;
        display: inline-block;
        font-size: 12px;
    }
    .question_icon{
        /*position: absolute;*/
        /*top: 6px;*/
        /*right: 6px;*/
        width: 20px;
        height: 20px;
        z-index: 10;
        display: inline;
    }
    .question_icon i{
        font-size: 17px;
        color: #BFBFBF;
    }
    .operate-btn {
        position: relative;
        bottom: 8px;
        left: 10px;
    }
    .expire-txt {
        font-size: 12px;
        color: #A6A6A6;

    }
</style>
<div id="app" v-cloak>
	<template>
		<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="6">
						<div class="plugin-item">
                            <div flex="dir:left box:first">
                                <div style="margin-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 class="question_icon" @click.stop="courseurl(plugin.course_url)">
                                            <el-tooltip class="" effect="dark"  :content="prompt" placement="bottom">
                                                <i class="el-icon-question"></i>
                                            </el-tooltip>
                                        </div>
                                    </div>

                                    <div flex="box:last" style="font-size: 12px;">
                                        <com-ellipsis :line="1" :text="plugin.brief_introduction"></com-ellipsis>
                                        <div>
                                            <el-button plain v-if="plugin.is_renew == -1" size="mini" class="operate-btn" @click="handle('renew', plugin)">续费</el-button>
                                            <el-button plain v-else-if="plugin.addons_status == 1" size="mini" class="operate-btn" @click="handle('set', plugin)">安装</el-button>
                                            <el-button plain v-else-if="plugin.addons_status == 2 || plugin.addons_status == 0" size="mini" class="operate-btn" @click="handle('detail', plugin)">详情</el-button>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="expire-txt" style="height: 30px; line-height: 30px;">
                                <span style="margin-right: 10px;">到期时间：{{ plugin.expire_time == -1 ? '永久有效' : formatDate(plugin.expire_time) }} </span>
                                <el-button style="font-size: 12px; color: #f56c6c;" type="text" v-if="plugin.expire_time > 0 && plugin.expire_time <= now_time" @click="handle('renew', plugin)">已过期 立即续费>></el-button>
                                <el-button style="font-size: 12px; color: #f56c6c;" type="text" v-else-if="plugin.soon_expire == 1" @click="handle('renew', plugin)">即将过期 立即续费>></el-button>
                            </div>

                            <div v-if="plugin.addons_status == -1" class="item-status status-expire">已过期</div>
                            <div v-if="plugin.addons_status == 0" class="item-status status-uninstall">已卸载</div>
                            <div v-if="plugin.addons_status == 1" class="item-status status-tobeinstall">待安装</div>
						</div>
					</el-col>
				</template>
			</el-row>
		</div>

        <el-dialog
                title="应用安装"
                :visible.sync="dialogVisible"
                width="30%"
                style="margin-top:25vh;"
                :close-on-click-modal="false"
                v-loading="dialogLoading">
                <span>是否继续安装此应用</span>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="handle('install', plugin_info)">确 定</el-button>
                </span>
        </el-dialog>
	</template>
</div>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                loading: false,
                dialogVisible: false,
                dialogLoading: false,
                prompt: '使用教程',
                addons: [],
                now_time: 0,
                plugin_info: {},
            };
        },
        created() {
            this.getList();
        },
        methods: {
            getList() {
                this.loading = true;
                request({
                    params: {
                        r: 'mall/addons/purchased',
                    },
                    method: 'post',
                    data: {}
                }).then(e => {
                    this.loading = false;
                    if (e.data.code === 0) {
                        this.handleData(e.data.data.addons_list)
                        this.addons = e.data.data.addons_list
                        this.now_time = e.data.data.now_time
                    } 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('未设置教程链接');
                }
            },
            formatDate: function (value) {
                let date = new Date(value * 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;
                return y + '-' + MM + '-' + d;
            },
            entryPlugin(addon) {
                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'});
                }
            },
            // 操作处理
            handle(type, data = null) {
                let id = data ? parseInt(data.id) : '';
                switch (type) {
                    case 'renew':// 编辑
                        this.entryDetail(data.name);
                        break;
                    case 'set':// 设置应用值
                        this.plugin_info = data;
                        this.dialogVisible = true;
                        break;
                    case 'install':// 安装应用
                        this.dialogLoading = true;
                        params = {
                            name: data.name,
                        };
                        this.send(params, 'mall/addons/install', (resp) => {
                            if (resp.code == 0) {
                                this.getList();
                            }
                        });
                        this.dialogVisible = false;
                        this.dialogLoading = false;
                        break;
                    case 'detail':// 编辑
                        params = {
                            r: 'mall/addons/detail'
                        };
                        params = Object.assign(params, {
                            name: data.name
                        });
                        navigateTo(params);
                        break;
                }
            },
            send(params,url,callback) {
                let self = this;
                request({
                    params: {
                        r: url,
                    },
                    method: 'post',
                    data: params
                }).then(e => {
                    if (e.data.code == 0) {
                        self.$message.success(e.data.msg);
                    } else {
                        self.$message.error(e.data.msg);
                    }
                    if (callback) callback(e.data);
                }).catch(e => {
                    console.log(e);
                });
            },
        }
    });
</script>