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

<?php
/**
 * @link:http://www.gdqijianshi.com/
 * @copyright: Copyright (c) 2020 广东七件事集团
 * Created by PhpStorm
 * Author: ganxiaohao
 * Date: 2020-05-26
 * Time: 14:11
 */
?>
<style>
    .plugin-icon {
        display: block;
        width: 130px;
        height: 130px;
        margin-right: 20px;
        border-radius: 3px;
    }

    .local-tag {
        background: #E6A23C;
        color: #fff;
        padding: 0 4px;
        height: 19px;
        line-height: 19px;
        font-size: 12px;
    }

    .header-box {
        padding: 20px;
        background-color: #fff;
        margin-bottom: 10px;
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
    }

    .el-card, .el-message {
        border-radius: 0;
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
    }
    .el-card__header {
        padding: 18px 20px 0 20px;
    }
    .el-radio {
        margin-right: 0px;
    }
</style>
<div id="app" v-cloak>
    <div slot="header" class="header-box">
        <el-breadcrumb separator="/">
            <el-breadcrumb-item><span style="color: #409EFF;cursor: pointer"
                                      @click="$navigate({r:'mall/addons/index'})">我的应用</span></el-breadcrumb-item>
            <el-breadcrumb-item>应用详情</el-breadcrumb-item>
        </el-breadcrumb>
    </div>

    <el-card shadow="never" v-loading="loading" style="border:0">
        <template v-if="plugin">
            <div slot="header" class="form-body">
                <div  flex="dir:left box:first cross:center">
                    <!-- 应用图标 -->
                    <div>
                        <img :src="plugin.cover ? plugin.cover : plugin.default_cover" class="plugin-icon">
                    </div>

                    <!-- 应用内容 -->
                    <div>
                        <p style="margin-bottom: 10px; font-size: 16px; font-weight: bold;">{{plugin.title}}</p>
                        <p style="margin-bottom: 10px">
                            <span style="color: #909399; font-size: 12px;">{{ plugin.brief_introduction }}</span>
                        </p>
                        <p style="margin-bottom: 10px">
                            价格：<span style="color: #FF1C1C; font-size: 12px;">{{ default_price == 0 ? '免费' : '￥' + default_price }}</span>
                        </p>
                        <p>
                            周期：
                            <el-radio v-model="setting_index" size="mini"
                                      v-for="(item, index) in price_setting_arr"
                                      :key="index"
                                      :label="index"
                                      border
                                      @change="handle('price', item, index)">
                                {{ item.unit == 0 ? '永久' : item.duration }}
                                {{ item.unit == 0 ? '' : unit_arr[item.unit] }}
                            </el-radio>
                        </p>
                        <p v-if="plugin.expire_time" style="margin-top: 8px; font-size: 12px;">
                            <span style="color: #909399;">期限：{{ plugin.expire_time == -1 ? '永久有效' : formatDate(plugin.expire_time) }}</span>
                            <span v-if="plugin.expire_time > 0 && plugin.expire_time <= plugin.now_time" style="color: #f56c6c;"> 已过期</span>
                        </p>
                    </div>
                </div>

                <div style="padding-left: 146px; margin-top: 20px;">
                    <el-button type="primary" size="small" v-if="plugin.allow_install == 1" :loading="installLoading" @click="handle('install', plugin)">安装</el-button>
                    <el-button type="warning" size="small" v-if="plugin.allow_uninstall == 1" :loading="uninstallLoading" @click="handle('uninstall', plugin)">卸载</el-button>
                    <el-button type="primary" size="small" v-if="plugin.expire_time != -1" @click="handle('buy', plugin)">{{ plugin.is_renew == 1 ? '续费' : '立即购买' }}</el-button>
                </div>
            </div>

            <div style="font-size: 16px; margin-bottom: 20px;">应用详情</div>
            <div v-html="plugin.description"></div>

        </template>
    </el-card>
</div>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                loading: true,
                plugin: null,
                installLoading: false,
                uninstallLoading: false,
                default_price: '0',
                price_setting_arr: [],
                setting_index: 0,
                unit_arr: {
                    1: '个月',
                    2: '年',
                },
            };
        },
        created() {
            this.loadData();
        },
        methods: {
            loadData() {
                this.loading = true;
                this.$request({
                    params: {
                        r: 'mall/addons/detail',
                        name: getQuery('name'),
                    },
                }).then(e => {
                    this.loading = false;
                    if (e.data.code === 0) {
                        this.plugin = e.data.data;
                        this.price_setting_arr = e.data.data.price_setting;
                        this.default_price = this.price_setting_arr[0]['money'];
                        this.plugin.default_cover = _diy_img_prefix+'/static/addons/icon/'+this.plugin.name+'.png';
                    }
                }).catch(e => {
                });
            },
            // 操作处理
            handle(type, data = null, extra_data = null) {
                let id = data ? parseInt(data.id) : '';
                switch (type) {
                    case 'price':// 改变价格
                        this.default_price = data.money;
                        this.setting_index = extra_data;
                        break;
                    case 'buy':// 续费或购买
                        params = {
                            r: '/mall/addons/confirm-order'
                        };
                        params = Object.assign(params, {
                            name: data.name,
                            setting_index: this.setting_index,
                        });
                        navigateTo(params);
                        break;
                    case 'install':// 安装应用
                        this.installLoading = true;
                        params = {
                            name: data.name,
                        };
                        this.send(params, 'mall/addons/install', (resp) => {
                            if (resp.code == 0) this.loadData();
                        });
                        this.installLoading = false;
                        break;
                    case 'uninstall':// 卸载应用
                        this.uninstallLoading = true;
                        params = {
                            name: data.name,
                        };
                        this.$confirm('即将卸载该应用, 是否继续?', '警告', {
                            type: 'warning'
                        }).then(() => {
                            this.send(params, 'mall/addons/uninstall', (resp) => {
                                if (resp.code == 0) this.loadData();
                            });
                        })
                        this.uninstallLoading = false;
                        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);
                });
            },
            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;
            },
        }
    });
</script>