mashangyoujiu/Application/Retail/View/Wxconfig/wxconfig.html

<!--[1.8.20]-->
<link rel="stylesheet" type="text/css" href="__PUBLIC__/auth/css/rightsIssuer.css" />
<style type="text/css">
    .clear-authorization .title {
        font-size: 16px;
    }

    .clear-authorization .tips {
        font-size: 12px;
        color: #999;
    }
</style>
<div id="wxConfigApp" v-cloak>
    <div class="Box">
        <div class="issuer">
            <div class="issuer_a">
                <div class="issuer_a_left">
                    <switch name="wxconfig['type']">
                        <case value="0">
                            <div style="margin-bottom: 5px;"
                                @click="selfSet('/index.php/Retail/Wxconfig/authindex',0,1)"
                                class="issuer_a_left_inner">
                                <img src="__PUBLIC__/auth/images/public-wx.png" />
                                <span>微信授权信息</span>
                            </div>
                            <div style="margin-top: 5px;" @click="selfSet('/index.php/Retail/Wxconfig/index')"
                                class="issuer_a_left_inner">
                                <img src="__PUBLIC__/auth/images/public-wx.png" />
                                <span>微信自定义设置</span>
                            </div>
                        </case>
                        <case value="1">
                            <div style="margin-bottom: 56px;" @click="selfSet('/index.php/Retail/Wxconfig/index',1)"
                                class="issuer_a_left_inner">
                                <img src="__PUBLIC__/auth/images/public-wx.png" />
                                <span>微信已设置</span>
                            </div>
                            <if condition="$authArr['index'] eq true">
                                <div class="buttons">
                                    <el-button type="text" size="mini" @click="showTips = true">重置配置</el-button>
                                    <el-button type="text" size="mini" @click="clearAuthorization">清空授权</el-button>
                                </div>
                            </if>
                        </case>
                        <case value="2">
                            <div style="margin-bottom: 56px;" @click="selfSet('/index.php/Retail/Wxconfig/authindex',2)"
                                class="issuer_a_left_inner">
                                <img src="{$wxconfig['head_img']}"
                                    style="width: 52px;height: 52px;border-radius: 50%" />
                                <span>微信已授权</span>
                            </div>
                            <div class="buttons">
                                <el-button type="text" size="mini" @click="showTips = true">重置配置</el-button>
                                <el-button type="text" size="mini" @click="clearAuthorization">清空授权</el-button>
                            </div>
                        </case>
                        <default />
                        <div style="margin-bottom: 5px;" @click="selfSet('/index.php/Retail/Wxconfig/authindex',0,1)"
                            class="issuer_a_left_inner">
                            <img src="__PUBLIC__/auth/images/public-wx.png" />
                            <span>微信授权信息</span>
                        </div>
                        <div style="margin-top: 5px;" @click="selfSet('/index.php/Retail/Wxconfig/index')"
                            class="issuer_a_left_inner">
                            <img src="__PUBLIC__/auth/images/public-wx.png" />
                            <span>微信自定义设置</span>
                        </div>
                    </switch>
                </div>
                <div class="issuer_a_right">
                    <div class="issuer_a_right01">微信授权</div>
                    <p class="issuer_a_right02">为了保证您能正常使用平台所有功能，请使用已认证服务号进行微信公众授权</p>
                    <p class="issuer_a_right02">完美对接微信公众号，搭建属于自己的公众平台，实现线下支付与线上引流相结合</p>
                    <p class="issuer_a_right02">为商户提供统一的公众管理平台，包括自定义菜单、卡券、会员卡、等营销工具</p>
                    <p class="issuer_a_right02">还没有公众号，<a target="_blank"
                            href="https://mp.weixin.qq.com/cgi-bin/readtemplate?t=register/step1_tmpl&lang=zh_CN">立即申请</a>
                    </p>
                </div>
            </div>

            <div class="issuer_b">
                <div class="issuer_b01">公众号管理</div>
                <div class="issuer_b02">
                    <img src="__PUBLIC__/auth/images/public-wxgf.png" />
                    <div class="issuer_b0201">微信官方许可</div>
                    <div class="issuer_b0202">微信官方推出的授权登录模式</div>
                </div>
                <div class="issuer_b02">
                    <img src="__PUBLIC__/auth/images/public-gz.png" />
                    <div class="issuer_b0201">公众号免繁琐设置</div>
                    <div class="issuer_b0202">公众号运营者不再需要理解繁琐参数设置</div>
                </div>
                <div class="issuer_b02">
                    <img src="__PUBLIC__/auth/images/public-anquan.png" />
                    <div class="issuer_b0201">安全可靠的授权</div>
                    <div class="issuer_b0202">机密数据传输，保证公众号安全</div>
                </div>
            </div>
        </div>
    </div>
    <el-dialog title="温馨提示" :modal-append-to-body="false" :visible.sync="showTips" :width="'400px'"
        :close-on-click-modal="false">
        <div style="padding: 0 20px">
            <div id="tips" style="color: #333;">
                重置将会清空已配置公众号信息<br /><br />
                在您重新配置之前，公众号的会员将无法进入公众号<br /><br />
                如果您更换了公众号，会员将无法收到新配置的公众号发布的信息，并且将重新绑定手机号<br /><br />
                请谨慎操作!<br /><br />
                确认重置？
            </div>
        </div>
        <div slot="footer" class="dialog-footer">
            <el-button @click="showTips = false">取 消</el-button>
            <el-button type="primary" @click="reset">确 定</el-button>
        </div>
    </el-dialog>
    <el-dialog title="授权提示" :modal-append-to-body="false" :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>
</div>
<script>
    new Vue({
        el: "#wxConfigApp",
        data: function () {
            return {
                showTips: false,
                showAuthTips: false,
                type: "{$wxconfig['type']}"
            }
        },
        methods: {
            reset: function () {
                var that = this;
                $.ajax({
                    url: '{:U("reset")}',
                    success: function () {
                        that.showTips = false;
                        MenuApp.refreshWindow();
                    }
                })
            },
            refresh: function () {
                this.showAuthTips = false;
                MenuApp.refreshWindow(true);
            },
            selfSet: function (url, type1, type2) {
                var that = this;
                if (type1 == 2) {
                    //第三方授权
                    this.$confirm('您已经授权过公众号，是否要重复授权？', '温馨提示', {
                        confirmButtonText: '是',
                        cancelButtonText: '否',
                        type: 'info'
                    }).then(() => {
                        that.showAuthTips = true;
                        window.open("{:U('authindex')}");
                    }).catch(() => {
                    });
                } else {
                    if (type2) {
                        that.showAuthTips = true;
                        window.open("{:U('authindex')}");
                    } else {
                        top.layer.open({
                            content: url,
                            type: 2,
                            move: false,
                            shade: 0,
                            area: ['calc(100% - 160px)', 'calc(100% - 65px)'],
                            resize: false,
                            offset: 'rb',
                            end: function () {
                                MenuApp.refreshWindow();
                            }
                        })
                    }
                }
            },
            //清空授权
            clearAuthorization() {
                this.$confirm(`<div class="clear-authorization"><p class="title">确认清空公众号的授权记录吗？</p><p class="tips">清空后微信商家券、微信支付代金券将无法核销！</p></div>`, '温馨提示', {
                    type: 'warning',
                    dangerouslyUseHTMLString: true
                }).then(() => {
                    this.loading = true;
                    this.sendRequest('Retail/MerInterface/WxConfigSave', {
                        success: (response) => {
                            this.loading = false;
                            if (response.status == 1) {
                                this.$message.success(response.message)
                                MenuApp.refreshWindow(true)
                            } else {
                                this.$message.error(response.message)
                            }
                        }
                    });
                }).catch(() => {
                })
            }
        }
    })

</script>