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

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

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

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

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

    .channel-item .name {
        color: #909399;
    }

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

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

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

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

    .channel-item .detail-option:hover {
        color: #fff;
        background: #909399;
    }

    .channel-item .name {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 12px;
    }

    .channel-item .item-status {
        position: absolute;
        z-index: 10;
        top: 0;
        right: 0;
        width: 64px;
        height: 20px;
        background: #E8EAEC;
        opacity: 1;
        border-radius: 0px 5px 0px 5px;
        font-size: 11px;
        line-height: 20px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #9398A4;
        text-align: center;
    }

    .gray {
        -webkit-filter: grayscale(100%);
        -moz-filter: grayscale(100%);
        -ms-filter: grayscale(100%);
        -o-filter: grayscale(100%);

        filter: grayscale(100%);

        filter: gray;
    }

    .child-btn .el-button {
        height: 20px;
        line-height: 0px;
        width: auto;
        margin-top: 15px;
    }

    .juxing {
        width: 110px;
        height: 24px;
        background: url("/resources/img/mall/channel/juxing.png") no-repeat left top;
        background-size: cover;
        position: relative;
        left: -21px;
        top: -21px;
        text-align: center;
        line-height: 24px;
        color: #fff;
    }

    .list-title span {
        font-weight: bold;
        color: #0A54EA;
        display: inline-block;
        height: 15px;
        width: 5px;
        background-color: #0A54EA;
    }

    .question_icon {
        position: absolute;
        top: 6px;
        right: 6px;
        width: 20px;
        height: 20px;
        z-index: 10;
    }

    .question_icon i {
        font-size: 17px;
        color: #BFBFBF;
    }
</style>
<div id="app" v-cloak>

    <template>
        <div>
            <h3 class="list-title">
                <span></span> &nbsp;&nbsp;&nbsp;&nbsp;渠道管理
            </h3>
            <el-row class="channel-list" v-loading="loading">
                <!-- 微信小程序开始 -->
                <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
                    <div flex="dir:left box:first" class="channel-item">

                        <div style="padding-right: 12px;">
                            <img style="width: 80px;height: 80px;display: block;" src="/resources/img/mall/channel/xiaochengxu.png">
                        </div>
                        <div>
                            <div class="display-name">微信小程序</div>
                            <div flex="box:last">
                                <div class="name">一键生成，连接微信触手可及</div>
                            </div>
                            <div class="child-btn">
                                <!--                                    <el-button type="primary" round @click="developing" style="color: #6577B9; background-color: #6577B9; color: #FFFFFF;">配置微信小程序</el-button>-->
                                <el-button type="primary" round @click="jump(form.mini.backend_url)" style="color: #6577B9; background-color: #6577B9; color: #FFFFFF;">配置微信小程序</el-button>
                                <el-button round @click="developing" style="color: #6577B9; border-color: #6577B9;">发布审核</el-button>
                            </div>
                        </div>
                        <div class="question_icon" @click.stop="courseurl(form.mini_app)">
                            <el-tooltip class="" effect="dark" :content="prompt" placement="bottom">
                                <i class="el-icon-question"></i>
                            </el-tooltip>
                        </div>
                    </div>
                </el-col>
                <!-- 微信小程序结束 -->

                <!-- 公众号开始 -->
                <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
                    <div flex="dir:left box:first" class="channel-item">

                        <div style="padding-right: 12px;">
                            <img style="width: 80px;height: 80px;display: block;" src="/resources/img/mall/channel/wechat.png">
                        </div>
                        <div>
                            <div class="display-name">微信公众号</div>
                            <div flex="box:last">
                                <div class="name">借助海量流量，玩转微信生态</div>
                            </div>
                            <div class="child-btn">
                                <el-button type="primary" round @click="jump(form.wechat.backend_url)" style="color: #2BAD37; background-color: #2BAD37; color: #FFFFFF;">配置微信公众号</el-button>
                            </div>
                        </div>
                        <div class="question_icon" @click.stop="courseurl(form.wx_url)">
                            <el-tooltip class="" effect="dark" :content="prompt" placement="bottom">
                                <i class="el-icon-question"></i>
                            </el-tooltip>
                        </div>
                    </div>
                </el-col>
                <!-- 公众号结束 -->

                <!-- 网页H5开始 -->
                <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
                    <div flex="dir:left box:first" class="channel-item">
                        <div style="padding-right: 12px;">
                            <img style="width: 80px;height: 80px;display: block;" src="/resources/img/mall/channel/h5.png">
                        </div>
                        <div>
                            <div class="display-name">手机浏览器H5</div>
                            <div flex="box:last">
                                <div class="name">WAP网页商城，广泛覆盖移动市场</div>
                            </div>
                            <div class="child-btn">
                                <el-button type="primary" round @click="jumpOutside(form.h5.url)" style="color: #5BAEDA; background-color: #5BAEDA; color: #FFFFFF;">立即访问</el-button>
                                <el-button round class="copy_btn" @click="copyLink(form.h5.url)" style="color: #5BAEDA; border-color: #5BAEDA;">复制链接</el-button>
                            </div>
                        </div>
                    </div>
                </el-col>
                <!-- 网页H5结束 -->

                <!-- 手机APP开始 -->
                <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
                    <div flex="dir:left box:first" class="channel-item">

                        <div style="padding-right: 12px;">
                            <img style="width: 80px;height: 80px;display: block;" src="/resources/img/mall/channel/app.png">
                        </div>
                        <div>
                            <div class="display-name">手机APP</div>
                            <div flex="box:last">
                                <div class="name">原生混合开发安卓IOSAPP，防止微信封号</div>
                            </div>
                            <div class="child-btn">
                                <el-button type="primary" round @click="jump(form.app_url.backend_url)" style="color: #17489C; background-color: #17489C; color: #FFFFFF;">上传app安装包</el-button>
                                <!-- <el-button round @click="showDialog" style="color: #17489C; border-color: #17489C;">复制链接</el-button> -->
                            </div>
                        </div>
                        <!-- <div class="question_icon" @click.stop="courseurl(form.app_url)">
                            <el-tooltip class="" effect="dark" :content="prompt" placement="bottom">
                                <i class="el-icon-question"></i>
                            </el-tooltip>
                        </div> -->
                    </div>
                </el-col>
                <!-- 手机APP结束 -->

                <!-- 支付宝小程序开始 -->
                <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
                    <div flex="dir:left box:first" class="channel-item">
                        <div>
                            <div>
                                <img class="" style="width: 80px;height: 80px;display: block;" src="/resources/img/mall/channel/alipay.png">
                            </div>
                        </div>
                        <div style="padding-left:16px;">
                            <div class="display-name">支付宝小程序</div>
                            <div flex="box:last">
                                <div class="name">借助海量流量，玩转阿里生态</div>
                            </div>

                            <div class="child-btn">
                                <el-button type="primary" round @click="jump(form.alipay_mini.backend_url)" style="color: #5BAEDA; background-color: #5BAEDA; color: #FFFFFF;">配置支付宝小程序</el-button>

                            </div>
                        </div>
                    </div>
                </el-col>
                <!-- 支付宝结束 -->

            </el-row>
        </div>

        <div>
            <h3 class="list-title">
                <span></span> &nbsp;&nbsp;&nbsp;&nbsp;即将上线 敬请期待
            </h3>
            <el-row class="channel-list" v-loading="loading">
                <!-- 支付宝开始 -->
                <!--                <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">-->
                <!--                    <div flex="dir:left box:first" class="channel-item">-->
                <!--                        <div>-->
                <!--                            <div class="juxing">即将上线</div>-->
                <!--                            <img class="gray" style="width: 80px;height: 80px;display: block;" src="/resources/img/mall/channel/alipay.png">-->
                <!--                        </div>-->
                <!---->
                <!--                        <div>-->
                <!--                            <div style="margin-top: 45px;color: #D1D1D1;font-size: 26px;" class="display-name">支付宝小程序</div>-->
                <!--                        </div>-->
                <!--                    </div>-->
                <!--                </el-col>-->
                <!-- 支付宝结束 -->

                <!-- 百度小程序开始 -->
                <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
                    <div flex="dir:left box:first" class="channel-item">
                        <div>
                            <div class="juxing">即将上线</div>
                            <img class="gray" style="width: 80px;height: 80px;display: block;" src="/resources/img/mall/channel/baidu.png">
                        </div>

                        <div>
                            <div style="margin-top: 45px;color: #D1D1D1;font-size: 26px;" class="display-name">百度小程序</div>
                        </div>
                    </div>
                </el-col>
                <!-- 百度小程序结束 -->
            </el-row>
        </div>

    </template>

    <!-- 手机APP配置弹窗 -->
    <el-dialog class="app-dialog" title="配置APP" :visible.sync="dialogVisible" width="40%" top="30vh" center :close-on-click-modal="false">

        <el-form class="app-form" v-model="form.app_url" label-width="130px">
            <el-form-item label="苹果APP下载链接" prop="ios_download_url">
                <el-input size="small" v-model="form.app.ios_download_url" placeholder="配置IOS APP" style="width: 75%;"></el-input>
                <el-button round class="copy_btn" @click="copyLink(form.app.ios_download_url)" style="height: 32px; line-height: 6px; margin-left: 10px">复制链接</el-button>
            </el-form-item>

            <el-form-item label="安卓APP下载链接" prop="android_download_url">
                <el-input size="small" v-model="form.app.android_download_url" placeholder="配置Android APP" style="width: 75%;"></el-input>
                <el-button round class="copy_btn" @click="copyLink(form.app.android_download_url)" style="height: 32px; line-height: 6px; margin-left: 10px">复制链接</el-button>
            </el-form-item>
        </el-form>

        <span slot="footer" class="dialog-footer">
            <el-button @click="cancelSelect">取 消</el-button>
            <el-button type="primary" @click="saveConfig">提 交</el-button>
        </span>
    </el-dialog>
    <!-- 手机APP配置弹窗 -->

</div>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                loading: false,
                prompt: '对接教程',
                form: {
                    wechat: null,
                    h5: null,
                    wx_url: null,
                    app_url: null,
                    mini_app: null,
                    app: {
                        ios_download_url: null,
                        android_download_url: null,
                    },
                    alipay_mini: {
                        backend_url: ''
                    },
                },
                dialogVisible: false,
            };
        },
        created() {
            this.loadData(1);
        },
        methods: {
            saveConfig() {
                this.dialogVisible = false;
                let para = Object.assign({}, this.form);
                console.log(para);
                request({
                    params: {
                        r: 'mall/channel/index',
                    },
                    method: 'post',
                    data: para,
                }).then(e => {
                    if (e.data.code === 0) {
                        this.$message.success(e.data.msg);
                    } else {
                        this.$message.error(e.data.msg);
                        this.dialogVisible = true;
                    }
                }).catch(e => {
                    this.listLoading = true;
                });
            },
            courseurl(url) {
                if (url) {
                    window.open(url, '_blank')
                } else {
                    this.$message.warning('未设置教程链接');
                }
            },
            cancelSelect() {
                this.dialogVisible = false;
            },
            showDialog() {
                this.dialogVisible = true;
            },
            jump(url, target = false) {
                navigateTo({
                    r: url
                }, target);
            },
            jumpOutside(url, target = "_blank") {
                window.open(url, target);
            },
            copyLink(url) { //复制链接
                var clipboard = new ClipboardJS('.copy_btn', {
                    text: function() {
                        return url;
                    }
                });

                clipboard.on('success', (e) => {
                    this.$message.success('复制成功!');
                    clipboard.destroy()
                });
                clipboard.on('error', (e) => {
                    this.$message.error('复制失败!');
                    this.clipboard.destroy()
                });
            },
            developing() {
                this.$alert('此功能正在开发中', '提示', {
                    confirmButtonText: '确定'
                });
            },
            loadData(page) {
                this.loading = true;
                request({
                    params: {
                        r: 'mall/channel/index',
                    },
                }).then(e => {
                    this.loading = false;
                    if (e.data.code === 0) {
                        if (!isEmpty(e.data.data)) this.form = e.data.data;
                    } else {
                        this.$message.error(e.data.msg);
                    }
                });
            }
        }
    });
</script>