qimall/backend/modules/admin/views/addons/pay-setting.php

<?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: 150px;
    }

    .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;
    }
    .use_number {
        margin-top: 10px;
        font-size: 12px !important;
        align-items: center;
        clear: both;
    }
    .price-top {
        border-radius: 5px;
        overflow: hidden;
        border: 1px solid #f1f1f1;
    }

    .price-bottom {
        padding-top: 10px;
    }

    .price-li {
        border-right: 1px solid #f1f1f1;
        padding: 5px;
        flex: 1;
        text-align: center
    }

    .price-li.active {
        background-color: #1A73E8;
        color: #fff;
    }
    .price-li.active-setting{
        background-color: #1A73E8;
        color: #fff;
    }

    .price-li:last-child {
        border-right: 0;
    }
    .template-setting {
        position: absolute;
        right: 35px;
        bottom: 0px;
    }

</style>
<div id="app" v-cloak>
    <el-card shadow="never" body-style="background-color: #f3f3f3;padding: 10px 0 0;">
        <div slot="header">
            <span>应用列表</span>
            &nbsp;
            &nbsp;
            &nbsp;
            &nbsp;

            <el-input @keyup.enter.native="getList"  placeholder="请输入搜索应用名称" v-model="keyword"
                      clearable @clear="toSearch" style="width: 300px">
                <el-button slot="append" icon="el-icon-search" @click="toSearch"></el-button>
            </el-input>
            &nbsp;
            &nbsp;
            <el-button type="danger" @click="clearSearch" v-if="keyword!=''">清除条件</el-button>


        </div>
        <div class="table-body">
            <el-row v-if="list" class="plugin-list" >
                <template v-for="(plugin,index) in list">
                    <el-col :xs="30" :sm="12" :md="8" :lg="6" :xl="5" class="plugin-item">
                        <div flex="dir:left box:first"  @click="entryPlugin(plugin)">
                            <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" style="width: 100%;"></com-ellipsis>
                                </div>
                            </div>
                        </div>
                        <div class="use_number" v-if="plugin.setting">
                            <div class="price-top" flex>
                                <div class="price-li"
                                     v-for="(val, index) in plugin.setting"
                                     :key="plugin.id+'_'+index"
                                     @click="tabClick(index,plugin,val)"
                                     :class="current[plugin.id] == index ? 'active' : ''"
                                >{{ val.unit == 0 ? unit[val.unit] : val.unit == 1 ? val.duration+'个'+unit[val.unit]: val.duration+unit[val.unit]}}</div>
                            </div>
                            <div class="price-bottom" v-if = "setting_arr[plugin.id]">
                                <span class="template-price">{{ setting_arr[plugin.id].money }}元</span> / {{ setting_arr[plugin.id].duration == -1 ? unit[setting_arr[plugin.id].unit] : setting_arr[plugin.id].duration+'个'+ unit[setting_arr[plugin.id].unit] }}
                            </div>
                        </div>

                        <div class="use_number" v-else @click="handle('setting',plugin)">
                            <div class="price-top">
                                <div class="price-li active-setting">未设置付费</div>
                            </div>
                        </div>
                        <el-button class="template-setting" type="text" @click="handle('setting',plugin)">设置</el-button>
                    </el-col>
                </template>
            </el-row>
            <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>
</div>
<script>
    const app = new Vue({
        el: '#app',
        data() {
            return {
                unit:['永久','月','年'],
                current: {},
                setting_arr: {},
                list: [],
                addons_group:{},
                listLoading: false,
                operateLoading: false,
                page: 1,
                pageCount: 0,
                keyword: '',

            };
        },
        methods: {
            tabClick(i,item,val) {
                Object.assign(this.current, {[item.id]:i});
                Object.assign(this.setting_arr, {[item.id]:val});
                this.$forceUpdate();// 强制更新视图
            },
            addons_group_name(name){
                if(this.addons_group[name]){
                    return this.addons_group[name].title
                }else{
                    return  '未分类';
                }
            },
            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/pay-setting',
                            page: self.page,
                            keyword : this.keyword,
                        },
                        method: 'get',
                    }).then(e => {
                        self.listLoading = false;
                        this.handleList(e.data.data.list)
                        self.list = e.data.data.list;
                        if (!isEmpty(self.list)) {
                            let setting = [];
                            self.list.forEach(function (item, index) {
                                if (!isEmpty(item.setting)) {
                                    Object.assign(self.current, {[item.id]:0});
                                    Object.assign(self.setting_arr, {[item.id]: item.setting[0]});
                                }
                            })
                        }
                        self.addons_group = e.data.data.addons_group;
                        console.log(self.list)
                        self.pageCount = e.data.data.page_count;
                    }).catch(e => {
                        console.log(e);
                    });
                }
            },//handle
            handle(type,data){
                switch(type){
                    case 'setting':
                        this.$navigate({
                            r: 'admin/addons/pay-setting-edit',
                            name: data.name
                        });
                        break;
                    default :
                }
                console.log(data.id);

            },
            send(name,type){
                let self = this;
                if(self.operateLoading == false){
                    self.operateLoading = true;
                    request({
                        params: {r: 'admin/addons/index'},
                        method: 'post',
                        data: {name:name,type:type}
                    }).then(e => {
                        self.operateLoading = false
                        if (e.data.code == 0) {
                            this.$message({message: e.data.msg,type: 'success'});
                            self.getList();
                        } else {
                            this.$message({message: e.data.msg,type: 'error'});
                        }
                    }).catch(e => {
                        self.operateLoading = false
                        console.log(e);
                    });
                }
            },
            clearSearch(){
                this.keyword='';
                this.getList();
            },
            toSearch() {
                this.getList();
            },
        },
        mounted: function() {
            localStorage.setItem('admin_addons_menu_id', localStorage.getItem('open_menu_2_id'));
            this.getList();
        }
    });
</script>