feat: 调用生成支付按钮，调整 HTML 预览

src/stores/OrderStore.js

@@ -1,9 +1,10 @@
 import { create } from 'zustand'
+import { devtools } from 'zustand/middleware'
 import { fetchJSON, postForm } from '@/utils/request'
 import { API_HOST } from '@/config'
 import { isNotEmpty, prepareUrl } from '@/utils/commons'
 
-export const useOrderStore = create((set, get) => ({
+export const useOrderStore = create(devtools((set, get) => ({
 
   orderList: [],
   orderDetail: {},
@@ -52,7 +53,6 @@ export const useOrderStore = create((set, get) => ({
 
   },
 
-
   appendOrderComment: async (opi_sn, coli_sn, comment) => {
     const { fetchOrderDetail } = get()
     const formData = new FormData()
@@ -70,6 +70,33 @@ export const useOrderStore = create((set, get) => ({
       })
   },
 
+  generatePayment: async () => {
+    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('opisn', 29)
+    formData.append('wxzh', 'cht')
+    formData.append('fq', 0)
+    formData.append('onlyusa', 0)
+    formData.append('useyhm', 0)
+
+    return postForm(`${API_HOST}/generate_payment_links`, formData)
+      .then(json => {
+        if (json.errcode === 0) {
+          console.info(json)
+          return json.result
+        } else {
+          throw new Error(json?.errmsg + ': ' + json.errcode)
+        }
+      })
+  },
+
   setOrderPropValue: async (colisn, propName, value) => {
 
     if (propName === 'orderlabel') {
@@ -98,7 +125,7 @@ export const useOrderStore = create((set, get) => ({
       })
   },
 
-}))
+}), { name: 'orderStore' }))
 
 export const OrderLabelDefaultOptions = [
   { value: 240003, label: '重点', emoji: '❣️' },

src/views/accounts/GeneratePayment.jsx

@@ -2,6 +2,7 @@ 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,
@@ -17,11 +18,22 @@ function 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 => {
+        setGeneratedObject(result)
+      })
+      .catch(ex => console.info(ex))
+  }
+
   useEffect(() => {
     const primaryEmail = getPrimaryEmail()
     console.info('primaryEmail: %o', primaryEmail)
@@ -85,12 +97,8 @@ function GeneratePayment() {
               <Input />
             </Form.Item>
           </Form>
-
           <Flex gap='middle' justify='center'>
-            <Button onClick={() => {}}>生成</Button>
-            <Button type='primary' onClick={() => {}}>
-              复制
-            </Button>
+            <Button type='primary' onClick={() => {handleGenerate()}}>生成</Button>
           </Flex>
         </Col>
 
@@ -101,17 +109,24 @@ function GeneratePayment() {
           <InfoCircleOutlined />
           </Tooltip>
           </Flex>
-          <pre >
+          <HtmlPreview
+              value={generatedObject.payhtml}
+              // loading={isHtmlLoading}
+              // onEdit={() => handelSnippetEdit()}
+              onCopied={() => messageApi.success('已复制')}
+              // onDelete={() => handelSnippetDelete()}
+            />
+          {/* <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>
+          </pre> */}
           <Flex gap='small'>
           <span>支付链接</span><Tooltip placement="topLeft" title="发送 WhatsApp 使用">
           <InfoCircleOutlined />
           </Tooltip>
           </Flex>
-          <Input readOnly value={'https://www.chinahighlights.com/slink/d02824bb8bdabb5apay'}/>
+          <Input readOnly value={generatedObject.paylink}/>
           </Flex>
         </Col>
         {contextHolder}

src/views/accounts/HtmlPreview.jsx

@@ -19,29 +19,33 @@ const HtmlPreview = (props) => {
         }
         whenFalse={<Empty className='p-6' description={false} />}
       />
-      <Divider />
-      <Flex gap='middle' justify='flex-end' wrap className='p-6'>
-        <Button
-          onClick={onEdit}>
-          编辑
-        </Button>
-        <Button
-          onClick={() => {
-            const range = document.createRange()
-            range.selectNode(document.getElementById('__preHtml__'))
-            window.getSelection().removeAllRanges()
-            window.getSelection().addRange(range)
-            document.execCommand('copy')
-            // window.getSelection().removeAllRanges()
-            onCopied()
-          }}>
-          复制
-        </Button>
-        <Button
-          danger
-          onClick={onDelete}>
-          删除
-        </Button>
+      <Divider className='mt-2 mb-0' />
+      <Flex gap='middle' justify='flex-end' wrap className='p-2'>
+        <Conditional
+          condition={onEdit}
+          whenTrue={<Button onClick={onEdit}>编辑</Button>}
+        />
+        <Conditional
+          condition={onCopied}
+          whenTrue={
+            <Button
+              onClick={() => {
+                const range = document.createRange()
+                range.selectNode(document.getElementById('__preHtml__'))
+                window.getSelection().removeAllRanges()
+                window.getSelection().addRange(range)
+                document.execCommand('copy')
+                // window.getSelection().removeAllRanges()
+                onCopied()
+              }}>
+              复制
+            </Button>
+          }
+        />
+        <Conditional
+          condition={onDelete}
+          whenTrue={<Button onClick={onDelete}>删除</Button>}
+        />
       </Flex>
     </div>
   )