perf(前端): 移动端支付链接

src/views/Conversations/Online/Components/GeneratePaymentDrawer.jsx

@@ -0,0 +1,14 @@
+import { createContext, useEffect, useState } from 'react'
+import { Drawer } from 'antd'
+import { useOrderStore } from '@/stores/OrderStore'
+import GeneratePayment from '@/views/accounts/GeneratePayment'
+
+const GeneratePaymentDrawer = ({ ...props }) => {
+  const [openPaymentDrawer, closePaymentDrawer, paymentDrawerOpen] = useOrderStore((state) => [state.openDrawer, state.closeDrawer, state.drawerOpen])
+  return (
+    <Drawer title='支付链接' placement={'top'} size={'large'} onClose={() => closePaymentDrawer()} open={paymentDrawerOpen}>
+      <GeneratePayment></GeneratePayment>
+    </Drawer>
+  )
+}
+export default GeneratePaymentDrawer

src/views/Conversations/Online/Input/EmailEditorPopup.jsx

@@ -17,6 +17,7 @@ import { sentMsgTypeMapped,   } from '@/channel/bubbleMsgUtils';
 import { EmailBuilder, useEmailDetail, useEmailSignature } from '@/hooks/useEmail';
 import useSnippetStore from '@/stores/SnippetStore'
 import { useOrderStore } from '@/stores/OrderStore'
+import PaymentlinkBtn from './PaymentlinkBtn';
 
 // 禁止上传的附件类型
 // .application, .exe, .app
@@ -551,9 +552,7 @@ const EmailEditorPopup = ({ open, setOpen, fromEmail, fromUser, fromOrder, oid,
                   <Button type={'link'} onClick={() => openDrawerSnippet()}>
                     图文集
                   </Button>
-                  <Button type={'link'} onClick={() => openPaymentDrawer()}>
-                    支付链接
-                  </Button>
+                  <PaymentlinkBtn type={'link'} />
                   {/* 更多工具 */}
                   {/* <Popover
                     content={

src/views/Conversations/Online/Input/PaymentlinkBtn.jsx

@@ -1,15 +1,28 @@
 import { createContext, useEffect, useState } from 'react'
 import { useOrderStore } from '@/stores/OrderStore'
 import { Tooltip, Button } from 'antd'
+import GeneratePaymentDrawer from '../Components/GeneratePaymentDrawer'
 
-const PaymentlinkBtn = ({ ...props }) => {
+const PaymentlinkBtn = ({ type, ...props }) => {
   const [openPaymentDrawer] = useOrderStore((state) => [state.openDrawer])
 
   return (
-    <Tooltip title='支付链接' >
-      {/* <Button type='text' onClick={() => openPaymentDrawer()} icon={<DollarOutlined className='text-orange-500' />} size={'middle'} /> */}
-      <Button type='text' onClick={() => openPaymentDrawer()}  size={'middle'} className='px-1' >💲</Button>
-    </Tooltip>
+    <>
+      <GeneratePaymentDrawer />
+      <Tooltip title='支付链接'>
+        {/* <Button type='text' onClick={() => openPaymentDrawer()} icon={<DollarOutlined className='text-orange-500' />} size={'middle'} /> */}
+
+        {type === 'link' ? (
+          <Button type={'link'} onClick={() => openPaymentDrawer()}>
+            支付链接
+          </Button>
+        ) : (
+          <Button type='text' onClick={() => openPaymentDrawer()} size={'middle'} className='px-1'>
+            💲
+          </Button>
+        )}
+      </Tooltip>
+    </>
   )
 }
 export default PaymentlinkBtn

src/views/accounts/GeneratePayment.jsx

@@ -5,11 +5,13 @@ import useAuthStore from '@/stores/AuthStore'
 import useConversationStore from '@/stores/ConversationStore'
 import { useOrderStore } from '@/stores/OrderStore'
 import { InfoCircleOutlined } from '@ant-design/icons'
+import useStyleStore from '@/stores/StyleStore';
 
 function GeneratePayment() {
 
   const { notification } = App.useApp()
   const [messageApi, contextHolder] = message.useMessage()
+  const [mobile, setMobile] = useStyleStore((state) => [state.mobile, state.setMobile]);
 
   const [generateForm] = Form.useForm()
 
@@ -71,8 +73,8 @@ function GeneratePayment() {
 
   return (
     <>
-      <Row gutter={16}>
-        <Col span={6} offset={6}>
+      <Flex gap={16} justify={mobile ? 'normal' : 'center'} vertical={mobile ? true : false}>
+        <div className='basis-1/4'>
           <Form
             labelCol={{
               span: 4,
@@ -173,16 +175,13 @@ function GeneratePayment() {
             </Form.Item>
           </Form>
           <Flex gap='middle' justify='center'>
-            <Button
-              type='primary'
-              loading={isHtmlLoading}
-              onClick={handleGenerate}>
+            <Button type='primary' loading={isHtmlLoading} onClick={handleGenerate}>
               生成
             </Button>
           </Flex>
-        </Col>
+        </div>
 
-        <Col span={6}>
+        <div className='basis-1/4'>
           <Flex gap='small' vertical>
             <Flex gap='small'>
               <Tooltip placement='topLeft' title='发送邮件使用'>
@@ -196,12 +195,20 @@ function GeneratePayment() {
                 <InfoCircleOutlined />
               </Tooltip>
               <span>支付链接</span>
+            <Button
+              size='small'
+              onClick={() => {
+                navigator.clipboard.writeText(generatedObject.paylink)
+                messageApi.success('复制成功😀')
+              }}>
+              复制链接
+            </Button>
             </Flex>
             <Typography.Text>{generatedObject.paylink}</Typography.Text>
           </Flex>
-        </Col>
+        </div>
         {contextHolder}
-      </Row>
+      </Flex>
     </>
   )
 }