Merge pull request #53 from DevDengChao/fix/wx-pay-channels

fix: 修复无法配置微信原生支付与网站支付的问题

Author: YunaiV

src/utils/constants.ts

@@ -109,6 +109,14 @@ export const PayChannelEnum = {
     code: 'wx_app',
     name: '微信 APP 支付'
   },
+  WX_NATIVE: {
+    code: 'wx_native',
+    name: '微信 Native 支付'
+  },
+  WX_WAP: {
+    code: 'wx_wap',
+    name: '微信 WAP 网站支付'
+  },
   WX_BAR: {
     code: 'wx_bar',
     name: '微信条码支付'

src/views/pay/app/components/channel/WeixinChannelForm.vue

@@ -80,7 +80,8 @@
               :http-request="keyContentUpload"
             >
               <el-button type="primary">
-                <Icon icon="ep:upload" class="mr-5px" /> 点击上传
+                <Icon icon="ep:upload" class="mr-5px" />
+                点击上传
               </el-button>
             </el-upload>
           </el-form-item>
@@ -120,7 +121,8 @@
               :http-request="privateKeyContentUpload"
             >
               <el-button type="primary">
-                <Icon icon="ep:upload" class="mr-5px" /> 点击上传
+                <Icon icon="ep:upload" class="mr-5px" />
+                点击上传
               </el-button>
             </el-upload>
           </el-form-item>
@@ -148,7 +150,8 @@
               :http-request="privateCertContentUpload"
             >
               <el-button type="primary">
-                <Icon icon="ep:upload" class="mr-5px" /> 点击上传
+                <Icon icon="ep:upload" class="mr-5px" />
+                点击上传
               </el-button>
             </el-upload>
           </el-form-item>
@@ -310,7 +313,7 @@ const pemFileBeforeUpload = (file) => {
 /**
  * 读取 apiclient_key.pem 到 privateKeyContent 字段
  */
-const privateKeyContentUpload = (event) => {
+const privateKeyContentUpload = async (event) => {
   const readFile = new FileReader()
   readFile.onload = (e: any) => {
     formData.value.config.privateKeyContent = e.target.result
@@ -321,7 +324,7 @@ const privateKeyContentUpload = (event) => {
 /**
  * 读取 apiclient_cert.pem 到 privateCertContent 字段
  */
-const privateCertContentUpload = (event) => {
+const privateCertContentUpload = async (event) => {
   const readFile = new FileReader()
   readFile.onload = (e: any) => {
     formData.value.config.privateCertContent = e.target.result
@@ -332,7 +335,7 @@ const privateCertContentUpload = (event) => {
 /**
  * 读取 apiclient_cert.p12 到 keyContent 字段
  */
-const keyContentUpload = (event) => {
+const keyContentUpload = async (event) => {
   const readFile = new FileReader()
   readFile.onload = (e: any) => {
     formData.value.config.keyContent = e.target.result.split(',')[1]

src/views/pay/app/index.vue

@@ -45,10 +45,17 @@
         />
       </el-form-item>
       <el-form-item>
-        <el-button @click="handleQuery"> <Icon icon="ep:search" class="mr-5px" />搜索 </el-button>
-        <el-button @click="resetQuery"> <Icon icon="ep:refresh" class="mr-5px" />重置 </el-button>
+        <el-button @click="handleQuery">
+          <Icon icon="ep:search" class="mr-5px" />
+          搜索
+        </el-button>
+        <el-button @click="resetQuery">
+          <Icon icon="ep:refresh" class="mr-5px" />
+          重置
+        </el-button>
         <el-button type="primary" plain @click="openForm('create')" v-hasPermi="['pay:app:create']">
-          <Icon icon="ep:plus" class="mr-5px" /> 新增
+          <Icon icon="ep:plus" class="mr-5px" />
+          新增
         </el-button>
       </el-form-item>
     </el-form>
@@ -70,183 +77,53 @@
         </template>
       </el-table-column>
       <el-table-column label="支付宝配置" align="center">
-        <el-table-column :label="PayChannelEnum.ALIPAY_APP.name" align="center">
-          <template #default="scope">
-            <el-button
-              type="success"
-              v-if="isChannelExists(scope.row.channelCodes, PayChannelEnum.ALIPAY_APP.code)"
-              @click="openChannelForm(scope.row, PayChannelEnum.ALIPAY_APP.code)"
-              circle
-            >
-              <Icon icon="ep:check" />
-            </el-button>
-            <el-button
-              v-else
-              type="danger"
-              circle
-              @click="openChannelForm(scope.row, PayChannelEnum.ALIPAY_APP.code)"
-            >
-              <Icon icon="ep:close" />
-            </el-button>
-          </template>
-        </el-table-column>
-        <el-table-column :label="PayChannelEnum.ALIPAY_PC.name" align="center">
-          <template #default="scope">
-            <el-button
-              type="success"
-              circle
-              v-if="isChannelExists(scope.row.channelCodes, PayChannelEnum.ALIPAY_PC.code)"
-              @click="openChannelForm(scope.row, PayChannelEnum.ALIPAY_PC.code)"
-            >
-              <Icon icon="ep:check" />
-            </el-button>
-            <el-button
-              v-else
-              type="danger"
-              circle
-              @click="openChannelForm(scope.row, PayChannelEnum.ALIPAY_PC.code)"
-            >
-              <Icon icon="ep:close" />
-            </el-button>
-          </template>
-        </el-table-column>
-        <el-table-column :label="PayChannelEnum.ALIPAY_WAP.name" align="center">
-          <template #default="scope">
-            <el-button
-              type="success"
-              circle
-              v-if="isChannelExists(scope.row.channelCodes, PayChannelEnum.ALIPAY_WAP.code)"
-              @click="openChannelForm(scope.row, PayChannelEnum.ALIPAY_WAP.code)"
-            >
-              <Icon icon="ep:check" />
-            </el-button>
-            <el-button
-              v-else
-              type="danger"
-              circle
-              @click="openChannelForm(scope.row, PayChannelEnum.ALIPAY_WAP.code)"
-            >
-              <Icon icon="ep:close" />
-            </el-button>
-          </template>
-        </el-table-column>
-        <el-table-column :label="PayChannelEnum.ALIPAY_QR.name" align="center">
-          <template #default="scope">
-            <el-button
-              type="success"
-              circle
-              v-if="isChannelExists(scope.row.channelCodes, PayChannelEnum.ALIPAY_QR.code)"
-              @click="openChannelForm(scope.row, PayChannelEnum.ALIPAY_QR.code)"
-            >
-              <Icon icon="ep:check" />
-            </el-button>
-            <el-button
-              v-else
-              type="danger"
-              circle
-              @click="openChannelForm(scope.row, PayChannelEnum.ALIPAY_QR.code)"
-            >
-              <Icon icon="ep:close" />
-            </el-button>
-          </template>
-        </el-table-column>
-        <el-table-column :label="PayChannelEnum.ALIPAY_BAR.name" align="center">
+        <el-table-column
+          :label="channel.name"
+          align="center"
+          v-for="channel in alipayChannels"
+          :key="channel.code"
+        >
           <template #default="scope">
             <el-button
               type="success"
+              v-if="isChannelExists(scope.row.channelCodes, channel.code)"
+              @click="openChannelForm(scope.row, channel.code)"
               circle
-              v-if="isChannelExists(scope.row.channelCodes, PayChannelEnum.ALIPAY_BAR.code)"
-              @click="openChannelForm(scope.row, PayChannelEnum.ALIPAY_BAR.code)"
             >
               <Icon icon="ep:check" />
             </el-button>
             <el-button
               v-else
               type="danger"
               circle
-              @click="openChannelForm(scope.row, PayChannelEnum.ALIPAY_BAR.code)"
+              @click="openChannelForm(scope.row, channel.code)"
             >
               <Icon icon="ep:close" />
             </el-button>
           </template>
         </el-table-column>
       </el-table-column>
       <el-table-column label="微信配置" align="center">
-        <el-table-column :label="PayChannelEnum.WX_LITE.name" align="center">
-          <template #default="scope">
-            <el-button
-              type="success"
-              circle
-              v-if="isChannelExists(scope.row.channelCodes, PayChannelEnum.WX_LITE.code)"
-              @click="openChannelForm(scope.row, PayChannelEnum.WX_LITE.code)"
-            >
-              <Icon icon="ep:check" />
-            </el-button>
-            <el-button
-              v-else
-              type="danger"
-              circle
-              @click="openChannelForm(scope.row, PayChannelEnum.WX_LITE.code)"
-            >
-              <Icon icon="ep:close" />
-            </el-button>
-          </template>
-        </el-table-column>
-        <el-table-column :label="PayChannelEnum.WX_PUB.name" align="center">
-          <template #default="scope">
-            <el-button
-              type="success"
-              circle
-              v-if="isChannelExists(scope.row.channelCodes, PayChannelEnum.WX_PUB.code)"
-              @click="openChannelForm(scope.row, PayChannelEnum.WX_PUB.code)"
-            >
-              <Icon icon="ep:check" />
-            </el-button>
-            <el-button
-              v-else
-              type="danger"
-              circle
-              @click="openChannelForm(scope.row, PayChannelEnum.WX_PUB.code)"
-            >
-              <Icon icon="ep:close" />
-            </el-button>
-          </template>
-        </el-table-column>
-        <el-table-column :label="PayChannelEnum.WX_APP.name" align="center">
-          <template #default="scope">
-            <el-button
-              type="success"
-              circle
-              v-if="isChannelExists(scope.row.channelCodes, PayChannelEnum.WX_APP.code)"
-              @click="openChannelForm(scope.row, PayChannelEnum.WX_APP.code)"
-            >
-              <Icon icon="ep:check" />
-            </el-button>
-            <el-button
-              v-else
-              type="danger"
-              circle
-              @click="openChannelForm(scope.row, PayChannelEnum.WX_APP.code)"
-            >
-              <Icon icon="ep:close" />
-            </el-button>
-          </template>
-        </el-table-column>
-        <el-table-column :label="PayChannelEnum.WX_BAR.name" align="center">
+        <el-table-column
+          :label="channel.name"
+          align="center"
+          v-for="channel in wxChannels"
+          :key="channel.code"
+        >
           <template #default="scope">
             <el-button
               type="success"
+              v-if="isChannelExists(scope.row.channelCodes, channel.code)"
+              @click="openChannelForm(scope.row, channel.code)"
               circle
-              v-if="isChannelExists(scope.row.channelCodes, PayChannelEnum.WX_BAR.code)"
-              @click="openChannelForm(scope.row, PayChannelEnum.WX_BAR.code)"
             >
               <Icon icon="ep:check" />
             </el-button>
             <el-button
               v-else
               type="danger"
               circle
-              @click="openChannelForm(scope.row, PayChannelEnum.WX_BAR.code)"
+              @click="openChannelForm(scope.row, channel.code)"
             >
               <Icon icon="ep:close" />
             </el-button>
@@ -338,12 +215,11 @@
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import * as AppApi from '@/api/pay/app'
 import AppForm from './components/AppForm.vue'
-import { PayChannelEnum } from '@/utils/constants'
+import { CommonStatusEnum, PayChannelEnum } from '@/utils/constants'
 import AlipayChannelForm from './components/channel/AlipayChannelForm.vue'
 import WeixinChannelForm from './components/channel/WeixinChannelForm.vue'
 import MockChannelForm from './components/channel/MockChannelForm.vue'
 import WalletChannelForm from './components/channel/WalletChannelForm.vue'
-import { CommonStatusEnum } from '@/utils/constants'
 
 defineOptions({ name: 'PayApp' })
 
@@ -365,6 +241,23 @@ const queryParams = reactive({
 })
 const queryFormRef = ref() // 搜索的表单
 
+const alipayChannels = [
+  PayChannelEnum.ALIPAY_APP,
+  PayChannelEnum.ALIPAY_PC,
+  PayChannelEnum.ALIPAY_WAP,
+  PayChannelEnum.ALIPAY_QR,
+  PayChannelEnum.ALIPAY_BAR
+]
+
+const wxChannels = [
+  PayChannelEnum.WX_LITE,
+  PayChannelEnum.WX_PUB,
+  PayChannelEnum.WX_APP,
+  PayChannelEnum.WX_NATIVE,
+  PayChannelEnum.WX_WAP,
+  PayChannelEnum.WX_BAR,
+]
+
 /** 查询列表 */
 const getList = async () => {
   loading.value = true