scrm-vue/src/scrm_pages/weixinmp/authorization.vue

<template>
  <div class="main-contain">
    <div class="position">
      <bread-crumb :crumbs="crumbs"></bread-crumb>
      <el-button  style="float:right;" type="primary" size="small" :disabled="resetSubmit" icon="el-icon-refresh" @click="resetPage">刷新</el-button>
    </div>
    <div class="app-container" id="winxin-auth-box">
      <div class="filter-container" style="margin-top: 10px;margin-left: 5px ">
        <div v-if="authData.authorizer_status==1">
          <div class="bind-title-box">
            <span class="bind-title">您已绑定公众号，如需更换绑定公众号，请点击下面按钮</span>
          </div>
          <el-button type="warning" @click="getAuthUrl" >更换绑定公众号</el-button>
          <div class="bind-massage-box">
            <span>
              授权公众号：{{authData.authorizer_nick_name}}
              <!--授权方公众号类型，0代表订阅号，1代表由历史老帐号升级后的订阅号，2代表服务号-->
              <!-- authorizer_service_type_info -->
            </span>
          </div>
        </div>
        <div v-else>
          <div class="bind-title-box">
            <span class="bind-title">您尚未绑定公众号</span>
          </div>
          <el-button type="warning" @click="getAuthUrl" >已有公众号，立刻绑定</el-button>
          <div class="bind-massage-box">
            <span>
              如果还没有公众号，需要先在微信公众号平台进行申请。 去
              <a href="https://mp.weixin.qq.com/" title="申请微信公众号">申请>></a>
            </span>
          </div>
        </div>

      </div>
      <div style="height:20px">&nbsp;</div>
      <div class="dataTitle title-15">授权公众号后可以使用什么功能？</div>
      <div class="dataBody">
        <p>1.微信公众号的菜单设置</p>
        <p>2.微网站分享功能</p>
      </div>

      <div style="height:20px">&nbsp;</div>
      <div class="dataTitle title-7">授权有风险吗？</div>
      <div class="dataBody">
        <p>没有，酷医云使用了微信平台提供的官方授权接口，是非常安全的。</p>
      </div>

      <div style="height:20px">&nbsp;</div>
      <div class="dataTitle title-23">我的公众号已经授权了其它的第三方平台，怎么办？</div>
      <div class="dataBody">
        <p>没问题，秀米的授权不会影响任何第三方平台，也不影响现有的任何自定义菜单、开发模式、自定义回复等功能。</p>
      </div>

      <div style="height:20px">&nbsp;</div>
      <div class="dataTitle title-12">如何取消给酷医云的授权？</div>
      <div class="dataBody">
        <p>公众号取消授权，进入微信后台，点击“设置-公众号设置-授权管理”，就可以看到酷医云的授权，并且解除授权了。</p>
      </div>
    </div>
    <el-dialog
      title="授权二维码"
      :visible.sync="centerDialogVisible"
      width="30%"
      center>
      <div style="text-align:center;">
        <div><span>请用微信扫描下方二维码</span></div>
        <div id="mpwechat-auth-qrcode" ref="qrcode" ></div>
        <div><span>在手机完成授权后，点击右上角的刷新按钮</span></div>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import BreadCrumb from "../components/bread-crumb";
import QRCode from 'qrcodejs2'  // 引入qrcode
import {GetAuthorizationInfo,GetAuthUrl} from "@/api/mpwechat/mpwechat";
export default {
  name: "authorization",
  components: {
    BreadCrumb,
    QRCode,
  },
  data() {
    return {
      crumbs: [
        { path: false, name: "系统设置" },
        { path: false, name: "公众号授权" }
      ],
      showAuthButton:true,
      centerDialogVisible:false,
      resetSubmit:false,
      authData: {
        id: 0,
        user_org_id: 0,
        authorizer_appid: "",
        authorizer_access_token: "",
        authorizer_refresh_token: "",
        authorizer_jsapi_ticket: "",
        authorizer_funcscope_category: "",
        authorizer_nick_name: "",
        authorizer_head_img: "",
        authorizer_service_type_info: 0,
        authorizer_verify_type_info: 0,
        authorizer_user_name: "",
        authorizer_principal_name: "",
        authorizer_business_info: "",
        authorizer_qrcode_url: "",
        created_time: "",
        updated_time: "",
        authorizer_status: 1
      }
    };
  },
  methods: {
    getAuthUrl:function(){
      // this.showAuthButton = false;
      GetAuthUrl().then(response=>{
        var res =  response.data;
        if (res.state===1) {
          var url = res.data.url;
          this.centerDialogVisible = true;
          this.$nextTick (function () {
            this.qrcode(url);
          })
        }else {
          this.$message.error(res.msg);
        }
      }).catch(e=>{
        
        // this.showAuthButton = true;
      });
    },
    qrcode(url) {
      document.getElementById('mpwechat-auth-qrcode').innerHTML = ''
      let qrcode = new QRCode('mpwechat-auth-qrcode', {
        width: 150,  
        height: 150,
        text: url,
        colorDark : "#000",
        colorLight : "#fff",
      })
    },
    resetPage(){
      this.GetAuthorizationInfo();
    },
    GetAuthorizationInfo:function(){
      GetAuthorizationInfo().then(response=>{
        var res =  response.data;
        if(res.state===1) {
          if(res.data.authorization) {
            this.authData = res.data.authorization;
          }
        }else {
          this.$message.error(res.msg);
        }
      }).catch(e=>{});
    },
  },
  created() {
    this.GetAuthorizationInfo();
  },
  computed:{
    mpTypeName:function(){
      return 'xx';
    }
  },
};
</script>

<style scoped>
#winxin-auth-box .bind-title-box {
  margin-bottom: 20px;
}

#winxin-auth-box .bind-title {
  color: #000;
  font-size: 24px;
}

#winxin-auth-box .bind-massage-box {
  margin-top: 10px;
  color: #303133;
  font-size: 14px;
}
#winxin-auth-box .bind-massage-box a,#winxin-auth-box .bind-massage-box a:visited,#winxin-auth-box .bind-massage-box a:active {
  color: #409eff;
}
#winxin-auth-box .bind-massage-box a:hover {
  color: #409eff;
  text-decoration: underline;
}

#winxin-auth-box .dataTitle {
  color: #303133;
  font-size: 14px;
  border-bottom: 1px #409eff solid;
  height: 36px;
  line-height: 36px;
  margin: 0 0 20px 0;
  position: relative;
}

#winxin-auth-box .dataTitle::before {
  position: absolute;
  left: 0;
  bottom: -1px;
  content: "";
  height: 3px;
  background: #409eff;
}

#winxin-auth-box .title-15::before {
  width: 200px;
}
#winxin-auth-box .title-12::before {
  width: 158px;
}
#winxin-auth-box .title-7::before {
  width: 88px;
}
#winxin-auth-box .title-23::before {
  width: 312px;
}
#winxin-auth-box .dataBody {
  color: #303133;
  font-size: 14px;
  line-height: 18px;
}
#mpwechat-auth-qrcode{
  width: 150px;
  margin: 5px auto;
}
/*.app-container .cell.clearfix .time ul li {*/
/*float: left;*/
/*list-style: none;*/
/*cursor: pointer;*/
/*padding: 6px 20px;*/
/*color: #606266;*/
/*border-radius: 4px;*/
/*margin: 0 8px 0 0;*/
/*font-size: 14px;*/
/*text-align: center;*/
/*}*/
</style>