mashangyoujiu/Application/Retail/View/XcxConfig/auditing.html

<!--[1.2.54]-->
<style type="text/css">
    .audbox {
        box-sizing: border-box;
        padding-top: 100px;
    }

    .div_a {
        width: 70%;
        height: 8px;
        background: gainsboro;
        border-radius: 10px;
        margin: auto;
        position: relative;
    }

    .div_a_bg {
        width: 66.666%;
        height: 100%;
        background: #1ab394;
        position: absolute;
        left: 0;
        top: 0;
        border-radius: 10px;
    }

    .div_a01 {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        border: 1px solid #1AB394;
        position: absolute;
        left: 16%;
        top: -21px;
        box-sizing: border-box;
        padding: 5px;
    }

    .div_a_inner {
        width: 100%;
        height: 100%;
        color: white;
        font-size: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #1AB394;
        border-radius: 50%;
        font-weight: bold;
    }

    .div_a02 {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        border: 1px solid #1AB394;
        position: absolute;
        left: 47%;
        top: -21px;
        box-sizing: border-box;
        padding: 5px;
    }

    .div_a03 {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        border: 1px solid gainsboro;
        position: absolute;
        left: 80%;
        top: -21px;
        box-sizing: border-box;
        padding: 5px;
    }

    .div_a03_inner {
        width: 100%;
        height: 100%;
        color: white;
        font-size: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: gainsboro;
        border-radius: 50%;
        font-weight: bold;
    }

    .div_a_txt {
        width: 50px;
        height: 50px;
        position: absolute;
        left: -3%;
        top: 42px;
        text-align: center;
        line-height: 50px;
    }

    .div_b {
        width: 100%;
        height: 300px;
        display: flex;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
        padding-top: 90px;
    }

    .p {
        text-align: center;
    }

    .div_c {
        box-sizing: border-box;
        padding: 20px 0;
        display: flex;
        justify-content: center;
    }

    .qrcode {
        display: none;
        box-sizing: border-box;
        padding: 20px 0;
    }

    .imgBox {
        width: 100%;
        height: 150px;
        display: flex;
        justify-content: center;
    }

    .qrcode img {
        display: block;
        width: 150px;
        height: 150px;
    }
</style>
<script src="__PUBLIC__/layui/layui.all.js"></script>

<div id="xcxConfigApp1" v-cloak class="audbox">
    <div class="div_a">
        <div class="div_a_bg"></div>
        <div class="div_a01">
            <div class="div_a_inner">1</div>
            <div class="div_a_txt">申请</div>
        </div>
        <div class="div_a02">
            <div class="div_a_inner">2</div>
            <div class="div_a_txt">审核</div>
        </div>
        <div class="div_a03">
            <div class="div_a03_inner">3</div>
            <div class="div_a_txt">发布</div>
        </div>
    </div>
    <div class="div_b">
        <img src="__PUBLIC__/user/img/sl.png"/>
    </div>
    <p class="p">小程序已经提交到微信官方进行审核，请耐心等待审核结果</p>
    <div class="div_c">
        <button @click="showCode = true" class="layui-btn  layui-btn-normal">预览二维码</button>
        <button @click="cancelExamine" class="layui-btn">撤销审核</button>
        <button @click="reAuth" class="layui-btn" style="background-color: #e0e0e4;color: #999;">重新授权</button>
    </div>
    <div class="qrcode">
        <div class="imgBox">
            <img src="{$url}"/>
        </div>
    </div>
    <el-dialog title="授权提示" :visible.sync="showAuthTips" :width="'400px'" :show-close="false"
               :close-on-click-modal="false">
        <div style="padding: 0 20px">
            是否授权成功，如授权成功则刷新查看
        </div>
        <div slot="footer" class="dialog-footer">
            <el-button size="small" @click="showAuthTips = false">关 闭</el-button>
            <el-button size="small" type="primary" @click="refresh">刷 新</el-button>
        </div>
    </el-dialog>
    <el-dialog title="扫码预览" :visible.sync="showCode" :width="'300px'" :close-on-click-modal="false">
        <div style="text-align: center">
            <img src='{$url}' style='width: 260px;height: auto'>
            <el-button type="primary" size="small"@click="add" style="margin: 0 auto">添加体验者</el-button>
        </div>
        <div slot="footer" class="dialog-footer">
            <el-button size="small" @click="showCode = false">关 闭</el-button>
        </div>
    </el-dialog>
</div>
<script type="text/javascript">
    new Vue({
        el: "#xcxConfigApp1",
        data: function () {
            return {
                showAuthTips: false,
                showCode: false,
                showDetail: false,
            }
        },
        methods: {
            refresh: function () {
                this.showAuthTips = false;
                MenuApp.refreshWindow();
            },
            binding: function () {
                window.open("{:U('authindex')}");
                this.showAuthTips = true;
            },
            add: function () {

            },
            cancelExamine: function () {
                var that = this;
                that.$confirm('确定要撤销审核吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'info'
                }).then(() => {
                    $.ajax({
                        url: "{:U('undocodeaudit')}",
                        success: function (res) {
                            that.$message({
                                message: res.msg, type: success, duration: 1000, onClose: function () {
                                    MenuApp.refreshWindow();
                                }
                            });
                        }
                    })
                }).catch(() => {
                });
            },
            reAuth: function () {
                var that = this;
                that.$confirm('确定要重新授权吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'info'
                }).then(() => {
                    $.ajax({
                        url: "{:U('reset')}",
                        success: function (res) {
                            that.$message({
                                message: res.msg, type: 'success', duration: 1000, onClose: function () {
                                    that.showAuthTips = true;
                                    window.open("{:U('authindex')}");
                                }
                            });
                        }
                    })
                }).catch(() => {
                });
            },
            add:function () {
                var that = this;
                this.$prompt('请输入体验者微信号', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                }).then(({value}) => {
                    $.ajax({
                        url: "{:U('binduser')}?cateid={$cateid}",
                        data: {"id": value},
                        type: "get",
                        success: function (re) {
                            if (re.success) {
                                that.$confirm('绑定成功', '提示', {
                                    confirmButtonText: '关闭',
                                    showCancelButton:false,
                                    type: 'success'
                                }).then(() => {
                                }).catch(() => {
                                });
                            } else {
                                that.$confirm(re.msg, '提示', {
                                    confirmButtonText: '关闭',
                                    showCancelButton:false,
                                    type: 'error'
                                }).then(() => {
                                }).catch(() => {
                                });
                            }
                        }
                    })
                }).catch(() => {

                });
            },
        }
    });
</script>

</html>