perf: 根据参数生成付款按钮、链接

11 months ago · 10b51274a2
parent 379c64dade
commit 10b51274a2
4 changed files with 116 additions and 80 deletions
--- a/src/stores/OrderStore.js
+++ b/src/stores/OrderStore.js
@ -70,17 +70,17 @@ export const useOrderStore = create(devtools((set, get) => ({
      })
  },

-  generatePayment: async () => {
+  generatePayment: async (formValues) => {
    const formData = new FormData()
-    formData.append('descriptions', 'Tracking Code:123\r\nTravel Advisor:qqs\r\nContent:大法师')
-    formData.append('currency', 'USD')
-    formData.append('lgc', 'US')
-    formData.append('amount', 1000)
-    formData.append('coli_id', 'System18108')
-    formData.append('wlemail', 'Charles@hainatravel.com')
-    formData.append('paytype', 'SYT')
-    formData.append('ordertype', '227001')
+    formData.append('descriptions', formValues.description)
+    formData.append('currency', formValues.currency)
+    formData.append('lgc', formValues.langauge)
+    formData.append('amount', formValues.amount)
+    formData.append('coli_id', formValues.orderNumber)
+    formData.append('wlemail', formValues.notifyEmail)
+    formData.append('ordertype', formValues.orderType)
    formData.append('opisn', 29)
+    formData.append('paytype', 'SYT')
    formData.append('wxzh', 'cht')
    formData.append('fq', 0)
    formData.append('onlyusa', 0)
--- a/src/views/DesktopApp.jsx
+++ b/src/views/DesktopApp.jsx
@ -42,7 +42,7 @@ function DesktopApp() {
  const totalNotify = useConversationStore((state) => state.totalNotify)

  const [
-    openDrawer,
+    openSnippetDrawer ,
    closeDrawer,
    drawerOpen,
  ] = useSnippetStore((state) => [
@ -53,7 +53,7 @@ function DesktopApp() {

  const onClick = ({ key }) => {
    if (key === 'snippet-list') {
-      openDrawer()
+      openSnippetDrawer()
    }
  }

--- a/src/views/accounts/GeneratePayment.jsx
+++ b/src/views/accounts/GeneratePayment.jsx
@ -2,36 +2,29 @@ import { App, Radio, Row, Col, Tooltip, Flex, Form, Input, Button, InputNumber,
 import { useState, useEffect } from 'react'
 import HtmlPreview from './HtmlPreview'
 import useAuthStore from '@/stores/AuthStore'
-import {useOrderStore} from '@/stores/OrderStore'
-import {
-  HomeOutlined,
-  LoadingOutlined,
-  InfoCircleOutlined,
-  QuestionOutlined,
-  QuestionCircleOutlined,
-} from '@ant-design/icons'
+import { useOrderStore } from '@/stores/OrderStore'
+import { HomeOutlined, LoadingOutlined, InfoCircleOutlined, QuestionOutlined, QuestionCircleOutlined } from '@ant-design/icons'

 function GeneratePayment() {
  const [messageApi, contextHolder] = message.useMessage()

-  const [searchform] = Form.useForm()
+  const [generateForm] = Form.useForm()

-  const [getPrimaryEmail] = useAuthStore(s => [s.getPrimaryEmail])
-
-  const [generatePayment] = useOrderStore(s => [s.generatePayment])
+  const [getPrimaryEmail] = useAuthStore((s) => [s.getPrimaryEmail])
+  const [generatePayment] = useOrderStore((s) => [s.generatePayment])

  const [isHtmlLoading, setHtmlLoading] = useState(false)
  const [generatedObject, setGeneratedObject] = useState('')

-  const handleSearchFinish = (values) => {
-  }
-
  const handleGenerate = () => {
-    generatePayment()
-      .then(result => {
+    setHtmlLoading(true)
+    console.info(generateForm.getFieldsValue())
+    generatePayment(generateForm.getFieldsValue())
+      .then((result) => {
        setGeneratedObject(result)
      })
-      .catch(ex => console.info(ex))
+      .catch((ex) => console.info(ex))
+      .finally(() => setHtmlLoading(false))
  }

  useEffect(() => {
@ -48,47 +41,90 @@ function GeneratePayment() {
              span: 4,
            }}
            layout={'horizontal'}
-            form={searchform}
-            onFinish={handleSearchFinish}
+            form={generateForm}
            initialValues={{
              notifyEmail: getPrimaryEmail(),
-              description: 'Tracking Code:   Travel Advisor: Content:',
+              description: 'Tracking Code:\r\nTravel Advisor: \r\nContent:\r\n',
              orderNumber: 'lyj202411141004001',
-              langauge: '英语',
-              orderType: '线路订单',
+              langauge: 'US',
+              orderType: '227001',
              currency: 'USD',
+              amount: 1
            }}>
-            <Form.Item label='订单类型' name='orderType'>
+            <Form.Item label='订单类型' name='orderType'
+              rules={[
+                {
+                  required: true,
+                  message: '订单类型必选',
+                },
+              ]}
+            >
              <Radio.Group>
-                <Radio.Button value="线路订单">线路订单</Radio.Button>
-                <Radio.Button value="商务订单">商务订单</Radio.Button>
+                <Radio.Button value='227001'>线路订单</Radio.Button>
+                <Radio.Button value='227002'>商务订单</Radio.Button>
              </Radio.Group>
            </Form.Item>
-            <Form.Item label='语种' name='langauge'>
+            <Form.Item label='语种' name='langauge'
+              rules={[
+                {
+                  required: true,
+                  message: '语种必选',
+                },
+              ]}
+            >
              <Select
                options={[
-                  { value: '英语', label: '英语' },
-                  { value: '意语', label: '意语' },
-                  { value: '法语', label: '法语' },
+                  { value: 'US', label: '英语' },
+                  { value: 'de_de', label: '德语' },
+                  { value: 'fr_fr', label: '法语' },
+                  { value: 'es_es', label: '西语' },
+                  { value: 'ja_JP', label: '日语' },
+                  { value: 'ru_ru', label: '俄语' },
+                  { value: 'it_it', label: '意大利语' },
                ]}
              />
            </Form.Item>
-            <Form.Item label='订单号' name='orderNumber'>
+            <Form.Item label='订单号' name='orderNumber'
+              rules={[
+                {
+                  required: true,
+                  message: '订单号必填',
+                },
+              ]}
+            >
              <Input />
            </Form.Item>
-            <Form.Item label='金额' name='amount'>
-              <InputNumber addonBefore={(
-                <Form.Item name="currency" noStyle>
+            <Form.Item label='金额' name='amount'
+              rules={[
+                {
+                  required: true,
+                  message: '金额填',
+                },
+              ]}
+            >
+              <InputNumber
+                addonBefore={
+                  <Form.Item name='currency' noStyle>
                    <Select
                      style={{
-                      width: 70,
+                        width: 90,
                      }}
+                      options={[
+                        {value: 'USD', label: '美元'},
+                        {value: 'CNY', label: '人民币'},
+                        {value: 'EUR', label: '欧元'},
+                        {value: 'JPY', label: '日元'},
+                        {value: 'AUD', label: '澳元'},
+                        {value: 'CAD', label: '加元'},
+                        {value: 'HKD', label: '港币'},
+                      ]}
                    >
-                    <Select.Option value="USD">USD</Select.Option>
-                    <Select.Option value="CNY">CNY</Select.Option>
                    </Select>
                  </Form.Item>
-              )} className='w-full' />
+                }
+                min={1}
+                className='w-full'
+              />
            </Form.Item>
            <Form.Item label='描述' name='description'>
              <Input.TextArea rows={4} />
@ -98,35 +134,38 @@ function GeneratePayment() {
            </Form.Item>
          </Form>
          <Flex gap='middle' justify='center'>
-            <Button type='primary' onClick={() => {handleGenerate()}}>生成</Button>
+            <Button
+              type='primary'
+              loading={isHtmlLoading}
+              onClick={() => {
+                handleGenerate()
+              }}>
+              生成
+            </Button>
          </Flex>
        </Col>

        <Col span={6}>
          <Flex gap='small' vertical>
            <Flex gap='small'>
-          <span>支付按钮</span><Tooltip placement="topLeft" title="发送邮件使用">
+              <span>支付按钮</span>
+              <Tooltip placement='topLeft' title='发送邮件使用'>
                <InfoCircleOutlined />
              </Tooltip>
            </Flex>
-          <HtmlPreview
-              value={generatedObject.payhtml}
-              // loading={isHtmlLoading}
-              // onEdit={() => handelSnippetEdit()}
-              onCopied={() => messageApi.success('已复制')}
-              // onDelete={() => handelSnippetDelete()}
-            />
+            <HtmlPreview value={generatedObject.payhtml} loading={isHtmlLoading} onCopied={() => messageApi.success('已复制')} />
            {/* <pre >
          <a href="https://www.chinahighlights.com/slink/d02824bb8bdabb5apay" target="_blank" rel="noreferrer">
          <img src="https://data.chinahighlights.com/pic/pay-button.png" alt="Pay now" draggable="false"  />
          </a>
          </pre> */}
            <Flex gap='small'>
-          <span>支付链接</span><Tooltip placement="topLeft" title="发送 WhatsApp 使用">
+              <span>支付链接</span>
+              <Tooltip placement='topLeft' title='发送 WhatsApp 使用'>
                <InfoCircleOutlined />
              </Tooltip>
            </Flex>
-          <Input readOnly value={generatedObject.paylink}/>
+            <Input readOnly value={generatedObject.paylink} />
          </Flex>
        </Col>
        {contextHolder}
--- a/src/views/dingding/AuthCode.jsx
+++ b/src/views/dingding/AuthCode.jsx
@ -1,9 +1,6 @@
 import { Flex, Result, Input, Button } from 'antd'
 import { useState, useEffect } from 'react'
-import { useNavigate } from 'react-router-dom'
-import { isNotEmpty } from '@/utils/commons'
 import * as dd from 'dingtalk-jsapi'
-import { handleNotification } from '@/channel/whatsappUtils'

 // 获取微应用免登授权码
 // https://open.dingtalk.com/document/orgapp/jsapi-request-auth-code