shuliping
/
work-doc


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214
							<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>creat_wxauthorize_uri</title>
    <link
      rel="stylesheet"
      href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
    />
    <script src="https://unpkg.com/vue@2.6.12/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  </head>
  <body>
    <div id="app">
      <el-row>
        <el-col :offset="6" :span="12">
          <h2 style="text-align: center">生成微信网页授权地址</h2>
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="微信授权链接" name="first">
              <el-form ref="form" :model="form" label-width="100px">
                <el-form-item label="main-frame">
                  <el-select
                    v-model="branchIndex"
                    clearable
                    filterable
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in branchList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="接口前缀">
                  <el-select
                    v-model="form.prefix"
                    clearable
                    filterable
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in prefixList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <!-- <el-form-item label="wxAuthUri">
                  <el-input v-model="wxAuthUri" disabled>
                    <template slot="prepend">微信网页授权地址</template>
                  </el-input>
                </el-form-item> -->
                <el-form-item label="appid">
                  <el-input v-model="form.appid" clearable></el-input>
                </el-form-item>
                <el-form-item label="redirect_uri">
                  <el-input v-model="form.redirect_uri" clearable>
                    <template slot="prepend">
                      <el-tooltip
                        class="item"
                        effect="dark"
                        :content="auth2Uri"
                        placement="top-start"
                      >
                        <el-button>auth2Uri</el-button>
                      </el-tooltip></template
                    >
                  </el-input>
                </el-form-item>
                <el-form-item label="response_type">
                  <el-input
                    v-model="form.response_type"
                    disabled
                    clearable
                  ></el-input>
                </el-form-item>
                <el-form-item label="scope">
                  <el-input
                    v-model="form.scope"
                    disabled
                    readonly
                    clearable
                  ></el-input>
                </el-form-item>
                <el-form-item label="state">
                  <el-input v-model="form.state" clearable> </el-input>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="onSubmit"
                    >立即创建</el-button
                  >
                </el-form-item>
              </el-form>
            </el-tab-pane>
            <!-- <el-tab-pane label="微信授权后链接" name="second"> </el-tab-pane> -->
          </el-tabs>
        </el-col>
      </el-row>

      <el-link
        href="https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html"
      ></el-link>
      <el-dialog title="提示" :visible.sync="dialogVisible" center width="50%">
        <span slot="footer" class="dialog-footer">
          <div class="print" style="text-align: left">{{print}}</div>
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="onConfirm">复制</el-button>
        </span>
      </el-dialog>
    </div>

    <script>
      new Vue({
        el: "#app",
        data: {
          message: "Hello Vue.js!",
          activeName: "first",
          branchList: [
            { label: "超级前台", value: 0, key: "main" },
            { label: "华融", value: 1, key: "huarong" },
            { label: "潮宝", value: 2, key: "schaobao" },
            { label: "珠江啤酒", value: 3, key: "zhupi" },
          ],
          prefixList: [
            {
              label: "超级前台",
              value: "https://superdesk.avic-s.com/super_cloud",
              key: "superdesk.avic-s.com",
            },
            {
              label: "广电",
              value: "https://gd.szmgzhly.com/super_cloud",
              key: "gd.szmgzhly.com",
            },
          ],
          branchIndex: 0,
          wxAuthUri: "https://open.weixin.qq.com/connect/oauth2/authorize",
          auth2Uri:
            "https://superdesk.avic-s.com/super_cloud/api/wechat/front/auth2?redirectUrl=",
          form: {
            appid: "wx8f5a07e8746f85e3",
            redirect_uri: "https://superdesk.avic-s.com/super_cloud/wx/main",
            response_type: "code",
            scope: "snsapi_base",
            state: 10,
          },
          dialogVisible: false,
          print: "",
        },
        methods: {
          handleClick(tab, event) {
            console.log(tab, event);
          },
          copyToClipboard(text) {
            try {
              let node = document.createElement("input");
              document.body.appendChild(node);
              node.value = text;
              node.select();
              document.execCommand("copy");
              document.body.removeChild(node); // 执行浏览器复制命令
              console.log("复制成功");
            } catch (e) {
              console.log("复制失败");
            }

            // let node = document.getElementById("print");
            // document.createElement("print");
            // try {
            //   let range = document.createRange();
            //   range.selectNodeContents(node);
            //   let selection = document.getSelection();
            //   selection.removeAllRanges();
            //   selection.addRange(range);
            //   document.execCommand("copy"); // 执行浏览器复制命令
            //   console.log("复制成功");
          },
          onSubmit() {
            // https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html
            const { form, wxAuthUri, auth2Uri } = this;
            const data = Object.assign({}, form);
            const redirect_uri = `${auth2Uri}${data.redirect_uri}`;
            console.log(redirect_uri);

            data.redirect_uri = redirect_uri;
            const query = Object.keys(data)
              .map((key) => key + "=" + encodeURIComponent(data[key]))
              .join("&")
              .concat("#wechat_redirect");

            this.print = `${wxAuthUri}?${query}`;

            this.dialogVisible = true;
            this.onConfirm();
          },
          onConfirm() {
            this.copyToClipboard(this.print);
            this.$message({
              message: "复制成功",
              type: "success",
            });
          },
        },
      });
    </script>
  </body>
</html>