stage：签约账本样式优化

src/views/business/companyInfo/merchant.vue

@@ -2,20 +2,10 @@
   <div class="app-container">
     <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="80px">
       <el-form-item label="企业名称" prop="companyName">
-        <el-input
-          v-model="queryParams.companyName"
-          placeholder="请输入企业名称"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
+        <el-input v-model="queryParams.companyName" placeholder="请输入企业名称" clearable @keyup.enter.native="handleQuery" />
       </el-form-item>
       <el-form-item label="信用代码" prop="companyCode">
-        <el-input
-          v-model="queryParams.companyCode"
-          placeholder="请输入信用代码"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
+        <el-input v-model="queryParams.companyCode" placeholder="请输入信用代码" clearable @keyup.enter.native="handleQuery" />
       </el-form-item>
       <el-form-item>
         <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
@@ -25,33 +15,16 @@
 
     <el-row :gutter="10" class="mb8">
       <el-col :span="1.5">
-        <el-button
-          type="primary"
-          icon="el-icon-plus"
-          size="mini"
-          @click="handleAdd"
-          v-hasPermi="['business:companyInfo:add']"
-        >新增</el-button>
+        <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd"
+          v-hasPermi="['business:companyInfo:add']">新增</el-button>
       </el-col>
       <el-col :span="1.5">
-        <el-button
-          type="success"
-          icon="el-icon-edit"
-          size="mini"
-          :disabled="single"
-          @click="handleUpdate"
-          v-hasPermi="['business:companyInfo:edit']"
-        >修改</el-button>
+        <el-button type="success" icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate"
+          v-hasPermi="['business:companyInfo:edit']">修改</el-button>
       </el-col>
       <el-col :span="1.5">
-        <el-button
-          type="danger"
-          icon="el-icon-delete"
-          size="mini"
-          :disabled="multiple"
-          @click="handleDelete"
-          v-hasPermi="['business:companyInfo:remove']"
-        >删除</el-button>
+        <el-button type="danger" icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete"
+          v-hasPermi="['business:companyInfo:remove']">删除</el-button>
       </el-col>
       <!--      <el-col :span="1.5">-->
       <!--        <el-button-->
@@ -71,58 +44,28 @@
       <el-table-column label="信用代码" align="center" prop="companyCode" />
       <el-table-column label="法人姓名" align="center" prop="legalName" />
       <el-table-column label="法人电话" align="center" prop="legalPhone" />
-      <el-table-column label="归属部门" align="center" prop="deptName" v-if="tableFiledDeptName"/>
+      <el-table-column label="归属部门" align="center" prop="deptName" v-if="tableFiledDeptName" />
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template slot-scope="scope">
-          <el-button
-            v-if="scope.row.signetId == null"
-            size="mini"
-            type="text"
-            icon="el-icon-info"
-            @click="makeSealPre(scope.row)"
-          >生成电子签章
+          <el-button v-if="scope.row.signetId == null" size="mini" type="text" icon="el-icon-info"
+            @click="makeSealPre(scope.row)">生成电子签章
           </el-button>
-          <el-button
-            v-if="scope.row.signetId != null"
-            size="mini"
-            type="text"
-            icon="el-icon-edit"
-            @click="viewSealInfo(scope.row)"
-          >查看电子签章
+          <el-button v-if="scope.row.signetId != null" size="mini" type="text" icon="el-icon-edit"
+            @click="viewSealInfo(scope.row)">查看电子签章
           </el-button>
 
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-edit"
-            @click="handleUpdate(scope.row)"
-            v-hasPermi="['business:companyInfo:edit']"
-          >修改</el-button>
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-delete"
-            @click="handleDelete(scope.row)"
-            v-hasPermi="['business:companyInfo:remove']"
-          >删除</el-button>
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-platform-eleme"
-            @click="goPayChannel(scope.row)"
-            v-hasPermi="['business:companyPayChannel:station']"
-          >支付通道</el-button>
+          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
+            v-hasPermi="['business:companyInfo:edit']">修改</el-button>
+          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
+            v-hasPermi="['business:companyInfo:remove']">删除</el-button>
+          <el-button size="mini" type="text" icon="el-icon-platform-eleme" @click="goPayChannel(scope.row)"
+            v-hasPermi="['business:companyPayChannel:station']">支付通道</el-button>
         </template>
       </el-table-column>
     </el-table>
 
-    <pagination
-      v-show="total>0"
-      :total="total"
-      :page.sync="queryParams.pageNum"
-      :limit.sync="queryParams.pageSize"
-      @pagination="getList"
-    />
+    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
+      @pagination="getList" />
 
     <!-- 添加或修改付款主体信息对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
@@ -151,7 +94,7 @@
 <script>
 import { listCompanyInfo, getCompanyInfo, delCompanyInfo, addCompanyInfo, updateCompanyInfo } from "@/api/business/companyInfo";
 import { deptTreeSelect } from '@/api/system/user';
-import {makeSealPreCheck} from "@/api/business/sealCompanyInfo";
+import { makeSealPreCheck } from "@/api/business/sealCompanyInfo";
 import auth from '@/plugins/auth'
 
 export default {
@@ -260,7 +203,7 @@ export default {
     // 多选框选中数据
     handleSelectionChange(selection) {
       this.ids = selection.map(item => item.id)
-      this.single = selection.length!==1
+      this.single = selection.length !== 1
       this.multiple = !selection.length
     },
     /** 新增按钮操作 */
@@ -295,12 +238,12 @@ export default {
     /** 删除按钮操作 */
     handleDelete(row) {
       const ids = row.id || this.ids;
-      this.$modal.confirm('是否确认删除付款主体信息编号为"' + ids + '"的数据项？').then(function() {
+      this.$modal.confirm('是否确认删除付款主体信息编号为"' + ids + '"的数据项？').then(function () {
         return delCompanyInfo(ids);
       }).then(() => {
         this.getList();
         this.$modal.msgSuccess("删除成功");
-      }).catch(() => {});
+      }).catch(() => { });
     },
     /** 导出按钮操作 */
     handleExport() {
@@ -312,13 +255,13 @@ export default {
     makeSealPre(row) {
       const type = "hr";
       //是否确认生成电子签章 ，如果确认，调用接口生成电子签章，然后跳转到电子签章页面
-      this.$modal.confirm('是否确认为【'+row.companyName+'】企业生成电子签章？').then(() => {
-        makeSealPreCheck(row.id,type).then(response => {
+      this.$modal.confirm('是否确认为【' + row.companyName + '】企业生成电子签章？').then(() => {
+        makeSealPreCheck(row.id, type).then(response => {
           console.log(response.code == 200)
           if (response.code == 200) {
             //校验完成 前往生成电子签章页面 sealCompanyInfo/index
-            this.$router.push({ path: '/seal/sealCompanyInfo', query: { bussinessId: row.id, bussinessType: type, showFlag:1 } })
-          }else {
+            this.$router.push({ path: '/seal/sealCompanyInfo', query: { bussinessId: row.id, bussinessType: type, showFlag: 1 } })
+          } else {
             this.$modal.msgError(response.msg)
           }
         })
@@ -327,15 +270,17 @@ export default {
     /** 查看电子签章 */
     viewSealInfo(row) {
       const type = "hr";
-      this.$router.push({ path: '/seal/sealCompanyInfo', query: { bussinessId: row.id, bussinessType: type, showFlag:0 } })
+      this.$router.push({ path: '/seal/sealCompanyInfo', query: { bussinessId: row.id, bussinessType: type, showFlag: 0 } })
     },
     goPayChannel(row) {
-      this.$router.push({ path: '/business/companyPayChannel',
+      this.$router.push({
+        path: '/business/companyPayChannel',
         query: {
-        companyId: row.id,
-        unitType: 1,
-        companyName: row.companyName
-      } })
+          companyId: row.id,
+          unitType: 1,
+          companyName: row.companyName
+        }
+      })
     }
   }
 };

src/views/business/companyPayChannel/index.vue

@@ -2,12 +2,7 @@
   <div class="app-container">
     <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="80px">
       <el-form-item label="通道名称" prop="channelName">
-        <el-input
-          v-model="queryParams.channelName"
-          placeholder="请输入通道名称"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
+        <el-input v-model="queryParams.channelName" placeholder="请输入通道名称" clearable @keyup.enter.native="handleQuery" />
       </el-form-item>
       <el-form-item>
         <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
@@ -17,22 +12,12 @@
 
     <el-row :gutter="10" class="mb8">
       <el-col :span="1.5">
-        <el-button
-          type="primary"
-          icon="el-icon-plus"
-          size="mini"
-          @click="handleAdd"
-          v-hasPermi="['business:companyPayChannel:add']"
-        >新增</el-button>
+        <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd"
+          v-hasPermi="['business:companyPayChannel:add']">新增</el-button>
       </el-col>
       <el-col :span="1.5">
-        <el-button
-          type="warning"
-          icon="el-icon-download"
-          size="mini"
-          @click="handleExport"
-          v-hasPermi="['business:companyPayChannel:export']"
-        >导出</el-button>
+        <el-button type="warning" icon="el-icon-download" size="mini" @click="handleExport"
+          v-hasPermi="['business:companyPayChannel:export']">导出</el-button>
       </el-col>
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
@@ -50,12 +35,8 @@
       <el-table-column label="通道名称" align="center" prop="channelName" />
       <el-table-column label="使用状态" align="center" prop="status">
         <template slot-scope="scope">
-          <el-switch
-            v-model="scope.row.status"
-            :active-value="1"
-            :inactive-value="2"
-            @change="handleStatusChange(scope.row)"
-          ></el-switch>
+          <el-switch v-model="scope.row.status" :active-value="1" :inactive-value="2"
+            @change="handleStatusChange(scope.row)"></el-switch>
         </template>
       </el-table-column>
       <el-table-column label="开通状态" align="center" prop="isEnter">
@@ -63,33 +44,28 @@
           <dict-tag :options="dict.type.pay_channel_use_status" :value="scope.row.isEnter" />
         </template>
       </el-table-column>
-<!--      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">-->
-<!--        <template slot-scope="scope">-->
-<!--          <el-button-->
-<!--            size="mini"-->
-<!--            type="text"-->
-<!--            icon="el-icon-edit"-->
-<!--            @click="handleUpdate(scope.row)"-->
-<!--            v-hasPermi="['business:companyPayChannel:edit']"-->
-<!--          >修改</el-button>-->
-<!--          <el-button-->
-<!--            size="mini"-->
-<!--            type="text"-->
-<!--            icon="el-icon-delete"-->
-<!--            @click="handleDelete(scope.row)"-->
-<!--            v-hasPermi="['business:companyPayChannel:remove']"-->
-<!--          >删除</el-button>-->
-<!--        </template>-->
-<!--      </el-table-column>-->
+      <!--      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">-->
+      <!--        <template slot-scope="scope">-->
+      <!--          <el-button-->
+      <!--            size="mini"-->
+      <!--            type="text"-->
+      <!--            icon="el-icon-edit"-->
+      <!--            @click="handleUpdate(scope.row)"-->
+      <!--            v-hasPermi="['business:companyPayChannel:edit']"-->
+      <!--          >修改</el-button>-->
+      <!--          <el-button-->
+      <!--            size="mini"-->
+      <!--            type="text"-->
+      <!--            icon="el-icon-delete"-->
+      <!--            @click="handleDelete(scope.row)"-->
+      <!--            v-hasPermi="['business:companyPayChannel:remove']"-->
+      <!--          >删除</el-button>-->
+      <!--        </template>-->
+      <!--      </el-table-column>-->
     </el-table>
 
-    <pagination
-      v-show="total>0"
-      :total="total"
-      :page.sync="queryParams.pageNum"
-      :limit.sync="queryParams.pageSize"
-      @pagination="getList"
-    />
+    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
+      @pagination="getList" />
 
     <!-- 添加或修改企业支付通道对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
@@ -105,7 +81,8 @@
         </el-form-item>
         <el-form-item label="支付通道" prop="channelCode">
           <el-select v-model="form.channelCode" placeholder="请选择支付通道">
-            <el-option v-for="(item, index) in sysPayChannelList" :disabled="item.disabled" :label="item.channelName" :value="item.channelCode" />
+            <el-option v-for="(item, index) in sysPayChannelList" :key="index" :disabled="item.disabled"
+              :label="item.channelName" :value="item.channelCode" />
           </el-select>
         </el-form-item>
       </el-form>
@@ -249,7 +226,7 @@ export default {
     // 多选框选中数据
     handleSelectionChange(selection) {
       this.ids = selection.map(item => item.id)
-      this.single = selection.length!==1
+      this.single = selection.length !== 1
       this.multiple = !selection.length
     },
     /** 新增按钮操作 */
@@ -295,12 +272,12 @@ export default {
     /** 删除按钮操作 */
     handleDelete(row) {
       const ids = row.id || this.ids;
-      this.$modal.confirm('是否确认删除企业支付通道编号为"' + ids + '"的数据项？').then(function() {
+      this.$modal.confirm('是否确认删除企业支付通道编号为"' + ids + '"的数据项？').then(function () {
         return delCompanyPayChannel(ids);
       }).then(() => {
         this.getList();
         this.$modal.msgSuccess("删除成功");
-      }).catch(() => {});
+      }).catch(() => { });
     },
     /** 导出按钮操作 */
     handleExport() {
@@ -312,7 +289,7 @@ export default {
     handleStatusChange(row) {
       const _this = this;
       let text = row.status === 1 ? "启用" : "停用";
-      _this.$modal.confirm('确认要"' + text + '""' + row.channelName + '"支付通道吗？').then(function() {
+      _this.$modal.confirm('确认要"' + text + '""' + row.channelName + '"支付通道吗？').then(function () {
         const updateForm = {
           id: row.id,
           status: row.status
@@ -324,7 +301,7 @@ export default {
         }).catch(() => {
           row.status = row.status === 2 ? 1 : 2;
         });
-      }).catch(function() {
+      }).catch(function () {
         row.status = row.status === 2 ? 1 : 2;
       });
     },

src/views/business/taxUnit/channel.vue

@@ -67,6 +67,41 @@
         <el-button @click="bindAcc.codePanel = false">关 闭</el-button>
       </div>
     </el-dialog>
+    <!-- 扫码签约新弹窗 -->
+    <el-dialog title="扫码签约" class="payThoroughfareDialogStyle" :visible.sync="openPayThoroughfareDialog" width="55%">
+      <div class="thoroughfareMain">
+        <div class="thoroughfareIntroduce">支付宝安全发是由支付宝提供的人力资源发薪通道，需要使用企业支付宝扫码授权，方可使用，具体授权步骤如下图所示:</div>
+        <!-- 开通主体信息部分 -->
+        <div class="thoroughfareConter">
+          <div class="thoroughfareInfo">
+            <div class="stapStyle">【步骤一】</div>
+            <div class="stapInfoStyle">
+              <span>使用</span>
+              <span class="stapInfoBlueStyle">{{ thoroughfareData }}</span>
+              <span>的企业支付宝扫描右侧二维码</span>
+            </div>
+            <div class="stapStyle">【步骤二】</div>
+            <div class="stapInfoStyle">
+              <span>在手机上确认</span>
+              <span class="stapInfoBlueStyle">同意协议并开通</span>
+              <span>此支付宝记账本</span>
+            </div>
+            <div class="stapStyle">【步骤三】</div>
+            <div class="stapInfoStyle">
+              <span>操作完成后大约5-10分钟可点击搜索查看结果</span>
+            </div>
+          </div>
+          <div class="thoroughfareDivider"></div>
+          <div class="thoroughfareQRcode">
+            <img class="QRcodeImg" :src="thoroughfareUrl" alt="">
+            <span class="QRcodeText">扫码签约</span>
+          </div>
+        </div>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button class="cancelButton" type="primary" @click="openPayThoroughfareDialog = false">取 消</el-button>
+      </span>
+    </el-dialog>
   </div>
 </template>
 
@@ -123,6 +158,10 @@ export default {
         companyName: '',
         codeUrl: '',
       },
+      // 开通通道参数
+      openPayThoroughfareDialog: false,
+      thoroughfareUrl: '',
+      thoroughfareData: {}
     };
   },
   created() {
@@ -226,9 +265,13 @@ export default {
       }
       this.$modal.loading()
       signChannel(singForm).then(resp => {
-        this.bindAcc.codePanel = true
-        this.bindAcc.codeUrl = resp.data
-        this.bindAcc.companyName = row.companyName
+        this.thoroughfareData = row.companyName
+        this.thoroughfareUrl = resp.data
+        this.openPayThoroughfareDialog = true
+        console.log('当前通道信息', resp);
+        // this.bindAcc.codePanel = true
+        // this.bindAcc.codeUrl = resp.data
+        // this.bindAcc.companyName = row.companyName
       }).finally(() => {
         this.$modal.closeLoading()
       })
@@ -243,3 +286,105 @@ export default {
   }
 };
 </script>
+<style lang="scss">
+.payThoroughfareDialogStyle {
+  .el-dialog {
+    margin-top: 18vh !important;
+    border-radius: 6px !important;
+  }
+
+  .el-dialog__header {
+    display: none;
+  }
+
+  .el-dialog__body {
+    padding: 56px 38px 8px !important;
+  }
+
+  .thoroughfareMain {
+    background-color: #F7F8FA;
+    border-radius: 6px;
+    padding: 20px 32px 28px 30px;
+
+    .thoroughfareIntroduce {
+      font-weight: 400;
+      font-size: 16px;
+      color: #333333;
+      line-height: 24px;
+      letter-spacing: 1.5px;
+      padding-left: 8px;
+    }
+
+    .thoroughfareConter {
+      width: 100%;
+      margin-top: 20px;
+      padding-left: 12px;
+      // height: 400px;
+      // background-color: #8df;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+
+      .thoroughfareInfo {
+        width: 60%;
+        font-size: 14px;
+
+        .stapStyle {
+          font-size: 16px;
+          color: #409EFF;
+          margin-bottom: 12px;
+        }
+
+
+
+        .stapInfoStyle {
+          font-size: 14px;
+          color: #333333;
+          margin-bottom: 32px;
+          margin-left: 6px;
+
+          .stapInfoBlueStyle {
+            color: #409EFF;
+          }
+        }
+
+        .stapInfoStyle:last-child {
+          margin-bottom: 0px !important;
+        }
+      }
+
+      .thoroughfareDivider {
+        width: 1px;
+        background-color: #E8E8E8;
+        height: 200px;
+      }
+
+      .thoroughfareQRcode {
+        width: 26%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+
+        .QRcodeImg {
+          width: 100%;
+        }
+
+        .QRcodeText {
+          color: #333;
+          font-size: 14px;
+        }
+      }
+    }
+  }
+
+  .dialog-footer {
+
+    // margin-top: -20px !important;
+    .el-button {
+      padding: 9px 26px;
+      font-size: 14px;
+    }
+  }
+}
+</style>
\ No newline at end of file