第三方小程序登录拼接授权链接

jsowell-ui/src/api/pile/merchant.js

@@ -69,3 +69,21 @@ export function getFinancialMerchantList(data) {
         data: data
     })
 }
+
+// 获取预授权码
+export function getPreAuthorization(query) {
+  return request({
+    url: '/agentDev/getPreAuthorizerCode',
+    method: 'get',
+    params: query
+  })
+}
+
+// 拼接授权链接
+export function concatenateAuthLinks(data) {
+  return request({
+      url: '/agentDev/concatenateAuthLinks',
+      method: 'post',
+      data: data
+  })
+}

jsowell-ui/src/views/pile/merchant/index.vue

@@ -1,94 +1,38 @@
 <template>
   <div class="app-container main">
-    <el-form
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="110px"
-      :model="queryParams"
+      @submit.native.prevent>
-      ref="queryForm"
-      size="small"
-      :inline="true"
-      v-show="showSearch"
-      label-width="110px"
-      @submit.native.prevent
-    >
       <el-form-item label="运营商名称" prop="merchantName">
-        <el-input
+        <el-input v-model="queryParams.merchantName" placeholder="请输入运营商名称" clearable
-          v-model="queryParams.merchantName"
+          @keyup.enter.native="handleQuery" />
-          placeholder="请输入运营商名称"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
       </el-form-item>
       <el-form-item>
-        <el-button
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-          type="primary"
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
-          icon="el-icon-search"
-          size="mini"
-          @click="handleQuery"
-          >搜索</el-button
-        >
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
-          >重置</el-button
-        >
       </el-form-item>
     </el-form>
 
     <el-row :gutter="10" class="mb8">
       <el-col :span="1.5">
-        <el-button
+        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
-          type="primary"
+          v-hasPermi="['pile:merchant:add']">新增</el-button>
-          plain
-          icon="el-icon-plus"
-          size="mini"
-          @click="handleAdd"
-          v-hasPermi="['pile:merchant:add']"
-          >新增</el-button
-        >
       </el-col>
       <el-col :span="1.5">
-        <el-button
+        <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate"
-          type="success"
+          v-hasPermi="['pile:merchant:edit']">修改</el-button>
-          plain
-          icon="el-icon-edit"
-          size="mini"
-          :disabled="single"
-          @click="handleUpdate"
-          v-hasPermi="['pile:merchant:edit']"
-          >修改</el-button
-        >
       </el-col>
       <el-col :span="1.5">
-        <el-button
+        <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete"
-          type="danger"
+          v-hasPermi="['pile:merchant:remove']">删除</el-button>
-          plain
-          icon="el-icon-delete"
-          size="mini"
-          :disabled="multiple"
-          @click="handleDelete"
-          v-hasPermi="['pile:merchant:remove']"
-          >删除</el-button
-        >
       </el-col>
       <el-col :span="1.5">
-        <el-button
+        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
-          type="warning"
+          v-hasPermi="['pile:merchant:export']">导出</el-button>
-          plain
-          icon="el-icon-download"
-          size="mini"
-          @click="handleExport"
-          v-hasPermi="['pile:merchant:export']"
-          >导出</el-button
-        >
       </el-col>
-      <right-toolbar
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
-        :showSearch.sync="showSearch"
-        @queryTable="getList"
-      ></right-toolbar>
     </el-row>
 
-    <el-table
+    <el-table v-loading="loading" :data="merchantList" @selection-change="handleSelectionChange">
-      v-loading="loading"
-      :data="merchantList"
-      @selection-change="handleSelectionChange"
-    >
       <el-table-column type="selection" width="55" align="center" />
       <!--<el-table-column label="" align="center" prop="id" />-->
       <el-table-column label="运营商名称" align="center" prop="merchantName">
@@ -103,93 +47,42 @@
       </el-table-column>
       <el-table-column label="地址" align="center" prop="address" />
       <el-table-column label="状态" align="center" prop="status" />
-      <el-table-column
+      <el-table-column label="组织机构代码" align="center" prop="organizationCode" />
-        label="组织机构代码"
-        align="center"
-        prop="organizationCode"
-      />
       <el-table-column label="负责人姓名" align="center" prop="managerName" />
-      <el-table-column
+      <el-table-column label="负责人电话号码" align="center" prop="managerPhone" />
-        label="负责人电话号码"
+      <el-table-column label="客服电话号码" align="center" prop="servicePhone" />
-        align="center"
-        prop="managerPhone"
-      />
-      <el-table-column
-        label="客服电话号码"
-        align="center"
-        prop="servicePhone"
-      />
       <el-table-column label="公司logo" align="center" prop="logoUrl">
         <template slot-scope="scope">
-          <el-image
+          <el-image style="width: 100px; height: 100px" :src="scope.row.logoUrl" :preview-src-list="[scope.row.logoUrl]"
-            style="width: 100px; height: 100px"
+            fit="fill"></el-image>
-            :src="scope.row.logoUrl"
-            :preview-src-list="[scope.row.logoUrl]"
-            fit="fill"
-          ></el-image>
         </template>
       </el-table-column>
-      <el-table-column
+      <el-table-column label="操作" align="center" v-if="checkPermi(['pile:merchant:edit'])"
-        label="操作"
+        class-name="small-padding fixed-width">
-        align="center"
-        v-if="checkPermi(['pile:merchant:edit'])"
-        class-name="small-padding fixed-width"
-      >
         <template slot-scope="scope">
-          <el-button
+          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
-            size="mini"
+            v-hasPermi="['pile:merchant:edit']">修改</el-button>
-            type="text"
+          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
-            icon="el-icon-edit"
+            v-hasPermi="['pile:merchant:remove']">删除</el-button>
-            @click="handleUpdate(scope.row)"
-            v-hasPermi="['pile:merchant:edit']"
-            >修改</el-button
-          >
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-delete"
-            @click="handleDelete(scope.row)"
-            v-hasPermi="['pile:merchant:remove']"
-            >删除</el-button
-          >
         </template>
       </el-table-column>
     </el-table>
 
-    <pagination
+    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
-      v-show="total > 0"
+      @pagination="getList" />
-      :total="total"
-      :page.sync="queryParams.pageNum"
-      :limit.sync="queryParams.pageSize"
-      @pagination="getList"
-    />
 
     <!-- 添加或修改充电桩运营商信息对话框 -->
-    <el-dialog
+    <el-dialog :title="title" :visible.sync="open" width="50%" append-to-body :before-close="closeBefore">
-      :title="title"
-      :visible.sync="open"
-      width="50%"
-      append-to-body
-      :before-close="closeBefore"
-    >
       <el-form ref="form" :model="form" :rules="rules" label-width="200px">
         <el-row>
           <el-col :span="12">
             <el-form-item label="运营商名称" prop="merchantName">
-              <el-input
+              <el-input v-model="form.merchantName" maxlength="40" placeholder="请输入运营商名称" />
-                v-model="form.merchantName"
-                maxlength="40"
-                placeholder="请输入运营商名称"
-              />
             </el-form-item>
           </el-col>
           <el-col :span="12">
             <el-form-item label="组织机构代码" prop="organizationCode">
-              <el-input
+              <el-input v-model="form.organizationCode" placeholder="请输入组织机构代码" maxlength="30" />
-                v-model="form.organizationCode"
-                placeholder="请输入组织机构代码"
-                maxlength="30"
-              />
             </el-form-item>
           </el-col>
         </el-row>
@@ -197,21 +90,12 @@
         <el-row>
           <el-col :span="12">
             <el-form-item label="负责人姓名" prop="managerName">
-              <el-input
+              <el-input v-model="form.managerName" placeholder="请输入负责人姓名" maxlength="10" minlength="1" />
-                v-model="form.managerName"
-                placeholder="请输入负责人姓名"
-                maxlength="10"
-                minlength="1"
-              />
             </el-form-item>
           </el-col>
           <el-col :span="12">
             <el-form-item label="负责人电话号码" prop="managerPhone">
-              <el-input
+              <el-input v-model="form.managerPhone" placeholder="请输入负责人电话号码" maxlength="15" />
-                v-model="form.managerPhone"
-                placeholder="请输入负责人电话号码"
-                maxlength="15"
-              />
             </el-form-item>
           </el-col>
         </el-row>
@@ -219,21 +103,13 @@
           <el-row>
             <el-col :span="12">
               <el-form-item label="地址" prop="address">
-                <el-input
+                <el-input v-model="form.address" maxlength="30" placeholder="请输入地址" />
-                  v-model="form.address"
-                  maxlength="30"
-                  placeholder="请输入地址"
-                />
               </el-form-item>
             </el-col>
 
             <el-col :span="12">
               <el-form-item label="客服电话号码" prop="servicePhone">
-                <el-input
+                <el-input v-model="form.servicePhone" maxlength="15" placeholder="请输入客服电话号码" />
-                  v-model="form.servicePhone"
-                  maxlength="15"
-                  placeholder="请输入客服电话号码"
-                />
               </el-form-item>
             </el-col>
           </el-row>
@@ -241,63 +117,29 @@
         <el-row>
           <el-col :span="12">
             <el-form-item label="运营商等级">
-              <el-select
+              <el-select v-model="form.merchantLevel" placeholder="请选择运营商等级" @change="grade">
-                v-model="form.merchantLevel"
+                <el-option v-for="item in options" :key="item.label" :label="item.label" :value="item.value" />
-                placeholder="请选择运营商等级"
-                @change="grade"
-              >
-                <el-option
-                  v-for="item in options"
-                  :key="item.label"
-                  :label="item.label"
-                  :value="item.value"
-                />
               </el-select>
             </el-form-item>
           </el-col>
           <el-col :span="12">
-            <el-form-item
+            <el-form-item label="上级运营商" prop="parentId" v-if="form.merchantLevel === '2'">
-              label="上级运营商"
-              prop="parentId"
-              v-if="form.merchantLevel === '2'"
-            >
               <el-select v-model="form.parentId" placeholder="请选择上级运营商">
-                <el-option
+                <el-option v-for="item in firstLevelMerchant" :key="item.merchantName" :label="item.merchantName"
-                  v-for="item in firstLevelMerchant"
+                  :value="item.id" />
-                  :key="item.merchantName"
-                  :label="item.merchantName"
-                  :value="item.id"
-                />
               </el-select>
             </el-form-item>
           </el-col>
           <el-col :span="12">
-            <el-form-item
+            <el-form-item label="小程序APPID" prop="appId" v-if="form.merchantLevel === '1'">
-              label="小程序APPID"
+              <el-input v-model="form.appId" maxlength="30" placeholder="请输入小程序APPID" />
-              prop="appId"
-              v-if="form.merchantLevel === '1'"
-            >
-              <el-input
-                v-model="form.appId"
-                maxlength="30"
-                placeholder="请输入小程序APPID"
-              />
             </el-form-item>
           </el-col>
         </el-row>
         <el-form-item label="公司logo" prop="logoUrl">
-          <el-upload
+          <el-upload class="upload-demo" :action="actionUrl" :headers="headers" :on-success="handleSuccess"
-            class="upload-demo"
+            :on-preview="handlePreview" :on-remove="handleRemove" :file-list="fileList" list-type="picture" :limit="1"
-            :action="actionUrl"
+            :on-exceed="handleExceed">
-            :headers="headers"
-            :on-success="handleSuccess"
-            :on-preview="handlePreview"
-            :on-remove="handleRemove"
-            :file-list="fileList"
-            list-type="picture"
-            :limit="1"
-            :on-exceed="handleExceed"
-          >
             <el-button size="small" type="primary">点击上传</el-button>
             <div slot="tip" class="el-upload__tip">
               当前仅支持上传jpg/png格式
@@ -307,27 +149,34 @@
         </el-form-item>
 
         <el-row>
-          <el-divider
+          <el-divider>填入运营商管理员账号和密码，则自动创建一个该运营商的管理员账号</el-divider>
-            >填入运营商管理员账号和密码，则自动创建一个该运营商的管理员账号</el-divider
-          >
           <el-col :span="12">
             <el-form-item label="运营商管理员账号" prop="userName">
-              <el-input
+              <el-input v-model="form.userName" placeholder="请输入运营商管理员账号" />
-                v-model="form.userName"
-                placeholder="请输入运营商管理员账号"
-              />
             </el-form-item>
           </el-col>
           <el-col :span="12">
             <el-form-item label="运营商管理员密码" prop="password">
-              <el-input
+              <el-input v-model="form.password" placeholder="请输入运营商管理员密码" />
-                v-model="form.password"
-                placeholder="请输入运营商管理员密码"
-              />
             </el-form-item>
           </el-col>
         </el-row>
       </el-form>
+      <el-row v-if="form.id == 35">
+        <el-divider>第三方小程序登录拼接授权链接</el-divider>
+        <el-col :span="24">
+          <div class="btn" style=" margin-bottom: 20px;">
+            <el-button size="small" type="primary" @click="fetchPreAuthorization">点击获取预授权码</el-button>
+            <el-input v-model="confer" />
+          </div>
+        </el-col>
+        <el-col :span="24">
+          <div class="btn">
+            <el-button size="small" type="primary" @click="spliceAuthorization">点击拼接授权链接</el-button>
+            <el-input v-model="getUrl" />
+          </div>
+        </el-col>
+      </el-row>
       <div slot="footer" class="dialog-footer">
         <el-button @click="cancel">取 消</el-button>
         <el-button type="primary" @click="submitForm">确 定</el-button>
@@ -344,6 +193,8 @@ import {
   addMerchant,
   updateMerchant,
   queryFirstLevelMerchant,
+  getPreAuthorization,
+  concatenateAuthLinks
 } from "@/api/pile/merchant";
 import { checkPermi } from "@/utils/permission";
 import { getToken } from "@/utils/auth";
@@ -470,6 +321,8 @@ export default {
           },
         ],
       },
+      confer: null,
+      getUrl: null
     };
   },
   created() {
@@ -481,11 +334,12 @@ export default {
     closeBefore() {
       this.open = false;
       this.fileList = [];
+      this.confer = null;
+      this.getUrl = null;
     },
     handleExceed(files, fileList) {
       this.$message.warning(
-        `当前限制选择 1 张图片，本次选择了 ${files.length} 张，共选择了 ${
+        `当前限制选择 1 张图片，本次选择了 ${files.length} 张，共选择了 ${files.length + fileList.length
-          files.length + fileList.length
         } 张`
       );
     },
@@ -533,6 +387,8 @@ export default {
       this.open = false;
       this.fileList = [];
       this.reset();
+      this.confer = null;
+      this.getUrl = null;
     },
     // 表单重置
     reset() {
@@ -631,7 +487,7 @@ export default {
           this.getList();
           this.$modal.msgSuccess("删除成功");
         })
-        .catch(() => {});
+        .catch(() => { });
     },
     /** 导出按钮操作 */
     handleExport() {
@@ -643,6 +499,25 @@ export default {
         `merchant_${new Date().getTime()}.xlsx`
       );
     },
+    //获取预授权码
+    fetchPreAuthorization() {
+      getPreAuthorization().then((response) => {
+        this.confer = response.obj;
+      });
+    },
+    // 拼接授权链接
+    spliceAuthorization() {
+      let obj = {
+        platformAppID: 'wxac3b282a58b9a4a8',
+        preAuthCode: this.confer,
+        redirectUri: 'https://api.jsowellcloud.com/agentDev/getAuthCallback',
+        authType: '2',
+        versionType: '2'
+      }
+      concatenateAuthLinks(obj).then((response) => {
+        this.getUrl = response.obj;
+      });
+    },
   },
 };
 </script>
@@ -650,7 +525,17 @@ export default {
 ::v-deep .el-upload-list--picture .el-upload-list__item {
   width: 40%;
 }
-::v-deep .main .el-select > .el-input {
+
+::v-deep .main .el-select>.el-input {
   width: 280px;
 }
+
+.btn {
+  display: flex;
+  align-items: center;
+
+  button {
+    margin-right: 20px;
+  }
+}
 </style>