支付应用：微信支付的添加代码优化

b3b1d974 · YunaiV · 86e0a375 · b3b1d974 · b3b1d974 · b3b1d974
Commit b3b1d974 authored Aug 05, 2023 by YunaiV
Hide whitespace changes
Inline Side-by-side

Showing with 61 additions and 68 deletions

src/views/pay/app/components/channel/AlipayChannelForm.vue
+4 -9

src/views/pay/app/components/channel/WeixinChannelForm.vue
+51 -52

src/views/pay/app/index.vue
+6 -7

No files found.
--- a/src/views/pay/app/components/channel/AlipayChannelForm.vue
+++ b/src/views/pay/app/components/channel/AlipayChannelForm.vue
 <template>
  <div>
-    <Dialog
+    <Dialog v-model="dialogVisible" :title="dialogTitle" @closed="close" width="830px">
-      v-model="dialogVisible"
-      :title="dialogTitle"
-      @closed="close"
-      append-to-body
-      destroy-on-close
-      width="830px"
-    >
      <el-form
        ref="formRef"
        :model="formData"
@@ -164,11 +157,13 @@
    </Dialog>
  </div>
 </template>
-<script lang="ts" setup name="AlipayChannelForm">
+<script lang="ts" setup>
 import { CommonStatusEnum } from '@/utils/constants'
 import { DICT_TYPE, getDictOptions } from '@/utils/dict'
 import * as ChannelApi from '@/api/pay/channel'
+defineOptions({ name: 'AlipayChannelForm' })
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗

--- a/src/views/pay/app/components/weixinChannelForm.vue
+++ b/src/views/pay/app/components/weixinChannelForm.vue
 <template>
  <div>
-    <el-dialog
+    <Dialog v-model="dialogVisible" :title="dialogTitle" @close="close" width="800px">
-      v-model="dialogVisible"
-      :title="title"
-      @close="close"
-      append-to-body
-      destroy-on-close
-      width="800px"
-    >
      <el-form
        ref="formRef"
        :model="formData"
-        :rules="rules"
+        :rules="formRules"
        label-width="120px"
        v-loading="formLoading"
      >
@@ -86,7 +79,9 @@
              :before-upload="p12FileBeforeUpload"
              :http-request="keyContentUpload"
            >
-              <el-button size="small" type="primary" icon="el-icon-upload">点击上传</el-button>
+              <el-button type="primary">
+                <Icon icon="ep:upload" class="mr-5px" /> 点击上传
+              </el-button>
            </el-upload>
          </el-form-item>
        </div>
@@ -124,7 +119,9 @@
              :before-upload="pemFileBeforeUpload"
              :http-request="privateKeyContentUpload"
            >
-              <el-button size="small" type="primary" icon="el-icon-upload">点击上传</el-button>
+              <el-button type="primary">
+                <Icon icon="ep:upload" class="mr-5px" /> 点击上传
+              </el-button>
            </el-upload>
          </el-form-item>
          <el-form-item
@@ -150,7 +147,9 @@
              :before-upload="pemFileBeforeUpload"
              :http-request="privateCertContentUpload"
            >
-              <el-button size="small" type="primary" icon="el-icon-upload">点击上传</el-button>
+              <el-button type="primary">
+                <Icon icon="ep:upload" class="mr-5px" /> 点击上传
+              </el-button>
            </el-upload>
          </el-form-item>
        </div>
@@ -162,19 +161,22 @@
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="submitForm">确定</el-button>
      </template>
-    </el-dialog>
+    </Dialog>
  </div>
 </template>
-<script lang="ts" setup name="WeixinChannelForm">
+<script lang="ts" setup>
-import { createChannel, getChannel, updateChannel } from '@/api/pay/channel'
 import { CommonStatusEnum } from '@/utils/constants'
 import { DICT_TYPE, getDictOptions } from '@/utils/dict'
+import * as ChannelApi from '@/api/pay/channel'
+defineOptions({ name: 'WeixinChannelForm' })
+const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
-const dialogVisible = ref(false)
+const dialogVisible = ref(false) // 弹窗的是否展示
-const formLoading = ref(false)
+const dialogTitle = ref('') // 弹窗的标题
-const title = ref('')
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
 const formData = ref<any>({
  appId: '',
  code: '',
@@ -192,11 +194,7 @@ const formData = ref<any>({
    apiV3Key: ''
  }
 })
-const formRef = ref()
+const formRules = {
-const emit = defineEmits(['success'])
-const rules = {
  feeRate: [{ required: true, message: '请输入渠道费率', trigger: 'blur' }],
  status: [{ required: true, message: '渠道状态不能为空', trigger: 'blur' }],
  'config.mchId': [{ required: true, message: '请传入商户号', trigger: 'blur' }],
@@ -214,53 +212,56 @@ const rules = {
  ],
  'config.apiV3Key': [{ required: true, message: '请上传 api V3 密钥值', trigger: 'blur' }]
 }
+const formRef = ref() // 表单 Ref
+/** 打开弹窗 */
 const open = async (appId, code) => {
  dialogVisible.value = true
  formLoading.value = true
-  reset(appId, code)
+  resetForm(appId, code)
+  // 加载数据
  try {
-    const data = await getChannel(appId, code)
+    const data = await ChannelApi.getChannel(appId, code)
    if (data && data.id) {
      formData.value = data
      formData.value.config = JSON.parse(data.config)
    }
-    title.value = !formData.value.id ? '创建支付渠道' : '编辑支付渠道'
+    dialogTitle.value = !formData.value.id ? '创建支付渠道' : '编辑支付渠道'
  } finally {
    formLoading.value = false
  }
 }
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
-const close = () => {
+/** 提交表单 */
-  dialogVisible.value = false
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
-  reset(undefined, undefined)
-}
 const submitForm = async () => {
+  // 校验表单
+  if (!formRef) return
  const valid = await formRef.value.validate()
-  if (!valid) {
+  if (!valid) return
-    return
+  // 提交请求
-  }
+  formLoading.value = true
-  const data: any = { ...formData.value }
+  try {
-  data.config = JSON.stringify(formData.value.config)
+    const data = { ...formData.value } as unknown as ChannelApi.ChannelVO
-  if (!data.id) {
+    data.config = JSON.stringify(formData.value.config)
-    createChannel(data).then(() => {
+    if (!data.id) {
-      message.alertSuccess('新增成功')
+      await ChannelApi.createChannel(data)
-      emit('success')
+      message.success(t('common.createSuccess'))
-      close()
+    } else {
-    })
+      await ChannelApi.updateChannel(data)
-  } else {
+      message.success(t('common.updateSuccess'))
-    updateChannel(data).then(() => {
+    }
-      message.alertSuccess('修改成功')
+    dialogVisible.value = false
-      emit('success')
+    // 发送操作成功的事件
-      close()
+    emit('success')
-    })
+  } finally {
+    formLoading.value = false
  }
 }
 /** 重置表单 */
-const reset = (appId, code) => {
+const resetForm = (appId, code) => {
  formData.value = {
    appId: appId,
    code: code,
@@ -338,6 +339,4 @@ const keyContentUpload = (event) => {
  }
  readFile.readAsDataURL(event.file) // 读成 base64
 }
-defineExpose({ open })
 </script>
--- a/src/views/pay/app/index.vue
+++ b/src/views/pay/app/index.vue
@@ -305,11 +305,11 @@
 <script lang="ts" setup>
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import download from '@/utils/download'
-import * as PayappApi from '@/api/pay/app'
+import * as AppApi from '@/api/pay/app'
 import AppForm from './components/AppForm.vue'
 import { PayChannelEnum, PayType } from '@/utils/constants'
 import AlipayChannelForm from './components/channel/AlipayChannelForm.vue'
-import WeixinChannelForm from './components/weixinChannelForm.vue'
+import WeixinChannelForm from './components/channel/WeixinChannelForm.vue'
 import MockChannelForm from './components/mockChannelForm.vue'
 import { CommonStatusEnum } from '@/utils/constants'
@@ -333,7 +333,6 @@ const queryParams = reactive({
  remark: undefined,
  payNotifyUrl: undefined,
  refundNotifyUrl: undefined,
-  merchantName: undefined,
  createTime: []
 })
 const queryFormRef = ref() // 搜索的表单
@@ -343,7 +342,7 @@ const exportLoading = ref(false) // 导出的加载中
 const getList = async () => {
  loading.value = true
  try {
-    const data = await PayappApi.getAppPage(queryParams)
+    const data = await AppApi.getAppPage(queryParams)
    list.value = data.list
    total.value = data.total
  } finally {
@@ -368,7 +367,7 @@ const handleStatusChange = async (row: any) => {
  let text = row.status === CommonStatusEnum.ENABLE ? '启用' : '停用'
  try {
    await message.confirm('确认要"' + text + '""' + row.name + '"应用吗?')
-    await PayappApi.changeAppStatus({ id: row.id, status: row.status })
+    await AppApi.changeAppStatus({ id: row.id, status: row.status })
    message.success(text + '成功')
  } catch {
    row.status =
@@ -393,7 +392,7 @@ const handleDelete = async (id: number) => {
    // 删除的二次确认
    await message.delConfirm()
    // 发起删除
-    await PayappApi.deleteApp(id)
+    await AppApi.deleteApp(id)
    message.success(t('common.delSuccess'))
    // 刷新列表
    await getList()
@@ -407,7 +406,7 @@ const handleExport = async () => {
    await message.exportConfirm()
    // 发起导出
    exportLoading.value = true
-    const data = await PayappApi.exportApp(queryParams)
+    const data = await AppApi.exportApp(queryParams)
    download.excel(data, '支付应用信息.xls')
  } finally {
    exportLoading.value = false