qimall/addons/WechatVideoShop/backend/views/sharer/index.php

<?php

?>

<div id="app" v-cloak>
    <el-card shadow="never" style="border:0;min-width: 1200px;" body-style="background-color: #f3f3f3;padding: 10px 0 0;">
        <div slot="header">
            <span>引流获客</span>
        </div>
        <div class="bootstrap-container">
            <div>分销员/导购员推广直播间</div>
            <div class="text-vertical-center" style="padding-top:20px;">
                <div>将视频号小店的分销员与七件事的分销员/导购员结合，裂变更多消费者进入直播间，轻松提升单场交易额。</div>
                <div class="text-vertical-center">
                    <div class="text-padding">
                        <a href="javascript:;" @click="$navigate({r: 'wechat-video-shop/sharer/manual'})">操作手册</a>
                    </div>
                    <div class="text-padding">
                        <el-button @click="openDialogVisible = true" type="primary" size="small">
                            去开通
                        </el-button>
                    </div>
                    <div class="text-padding">
                        <el-button type="primary" size="small" @click="$navigate({r: 'wechat-video-shop/sharer/list'})">进入分销员导购员管理</el-button>
                    </div>
                </div>
            </div>
        </div>
    </el-card>
    <el-dialog
            title="开通分销员/导购员推广直播间功能"
            :visible.sync="openDialogVisible"
            :close-on-click-modal="false"
            width="50%">
        <div>
<!--            <el-image :src="diy_img_prefix+'/static/addons/WechatVideoShop/open/1.png'"></el-image>-->
            <el-steps direction="vertical" :active="3">
                <el-step title="微信小程序/公众号管理员扫码登录微信公众平台，设置微信开放平台帐号">
                    <template #description>
                        <div style="padding: 30px">
                            <el-image :src="diy_img_prefix+'/static/addons/WechatVideoShop/images/2.png'"></el-image>
                            <el-image :src="diy_img_prefix+'/static/addons/WechatVideoShop/images/3.png'"></el-image>
                        </div>
                    </template>
                </el-step>
                <el-step title="微信开放平台帐号实名认证">
                    <template #description>
                        <div style="padding: 30px">
                            <el-image :src="diy_img_prefix+'/static/addons/WechatVideoShop/images/4.png'"></el-image>
                            <el-image :src="diy_img_prefix+'/static/addons/WechatVideoShop/images/5.png'"></el-image>
                        </div>
                    </template>
                </el-step>
                <el-step title="将视频号小店和开放平台帐号绑定">
                    <template #description>
                        <div style="padding: 30px">
                            <el-image :src="diy_img_prefix+'/static/addons/WechatVideoShop/images/6.png'"></el-image>
                            <el-image :src="diy_img_prefix+'/static/addons/WechatVideoShop/images/7.png'"></el-image>
                        </div>
                    </template>
                </el-step>
            </el-steps>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button @click="openDialogVisible = false">取消</el-button>
            <el-button type="primary" @click="openDialogVisible = false">已绑定，下一步</el-button>
            <a style="margin-left: 10px" target="_blank" href="https://mp.weixin.qq.com/"><el-button>未绑定，去绑定</el-button></a>
        </span>
    </el-dialog>
</div>

<script>
    const app = new Vue({
        el: '#app',
        data: {
            openDialogVisible: false,
            diy_img_prefix: '<?= Yii::getAlias('@attachurl') ?>',
        },
        mounted() {},
        methods: {
        },
    });
</script>

<style>
    .bootstrap-container {
        padding: 40px;
        background-color: #fff;
        font-size: 15px;
    }

    .text-vertical-center {
        display: flex;
        align-items: center
    }

    .text-padding {
        padding: 0 10px
    }
</style>