From 423527559bdd1350e27703a55a67f0d8deb05090 Mon Sep 17 00:00:00 2001
From: "DESKTOP-PJ5G56S\\Administrator" <13478707150@163.com>
Date: Tue, 8 Jul 2025 22:07:26 +0800
Subject: [PATCH] [feature] form ;layout => vertical

---
 src/pages/feeconfirm/components/Alipay/index.jsx   | 17 ----
 src/pages/feeconfirm/components/FormBar/index.jsx  | 95 +++-------------------
 src/pages/feeconfirm/components/Wxpay/index.jsx    | 19 +----
 src/pages/feedback/index.jsx                       |  2 +-
 .../paymentmethod/components/Alipay/index.jsx      |  3 -
 .../paymentmethod/components/BankPay/index.jsx     |  6 +-
 src/pages/paymentmethod/components/Wxpay/index.jsx |  6 +-
 src/pages/paymentmethod/index.jsx                  |  2 +-
 src/pages/shopinfo/components/FormBar/index.jsx    | 36 +++-----
 .../shopinfo/components/FormBar/index.module.less  |  1 -
 src/pages/viplevelup/components/Alipay/index.jsx   |  4 +-
 src/pages/viplevelup/components/Wxpay/index.jsx    |  1 -
 src/pages/viplevelup/index.jsx                     |  5 +-
 13 files changed, 34 insertions(+), 163 deletions(-)

diff --git a/src/pages/feeconfirm/components/Alipay/index.jsx b/src/pages/feeconfirm/components/Alipay/index.jsx
index 1fc9aa1..73ccbf0 100644
--- a/src/pages/feeconfirm/components/Alipay/index.jsx
+++ b/src/pages/feeconfirm/components/Alipay/index.jsx
@@ -1,7 +1,6 @@
 import { View } from '@tarojs/components';
 import { Form } from 'antd-mobile';
 import FormLabel from '/components/FormLabel';
-import FormImage from '/components/FormImage';
 
 import styles from './index.module.less';
 
@@ -12,31 +11,15 @@ export default function Alipay({ namePrefix }) {
       <Form.Item
         name={`${namePrefix}-alipay`}
         label='支付宝账号'
-        childElementPosition='right'
       >
         <FormLabel />
       </Form.Item>
       <Form.Item
         name={`${namePrefix}-alipayName`}
         label='支付宝姓名'
-        childElementPosition='right'
       >
         <FormLabel />
       </Form.Item>
-      {/* <Form.Item
-        name={`${namePrefix}-alipayImage`}
-        label='收款码'
-        childElementPosition='right'
-      >
-        <FormImage readonly width={72} height={72} />
-      </Form.Item> */}
-      {/* <Form.Item
-        name='password'
-        label='支付密码'
-        rules={[{ required: true, message: '请输入支付密码' }]}
-      >
-        <Input type='password' placeholder='请输入支付密码' />
-      </Form.Item> */}
     </View >
   )
 }
diff --git a/src/pages/feeconfirm/components/FormBar/index.jsx b/src/pages/feeconfirm/components/FormBar/index.jsx
index d8a9251..abfcb52 100644
--- a/src/pages/feeconfirm/components/FormBar/index.jsx
+++ b/src/pages/feeconfirm/components/FormBar/index.jsx
@@ -1,34 +1,19 @@
 import { View } from '@tarojs/components';
-import { Button, CapsuleTabs, Form, Modal, Toast } from 'antd-mobile';
+import { Button, Form, Modal, Toast } from 'antd-mobile';
 
 import FormImage from '/components/FormImage';
 import FormLabel from '/components/FormLabel';
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useEffect } from 'react';
 import { getOrderInfoAction } from '/request/actions';
 import { getUrlParam } from '/utils';
 import Taro from '@tarojs/taro';
 
-// import Alipay from '../Alipay';
-// import Wxpay from '../Wxpay';
-// import BankPay from '../BankPay';
-
-// import aliSrc from '/assets/icons/ali.svg';
-// import wxSrc from '/assets/icons/wx.svg';
-// import bankSrc from '/assets/icons/bank.svg';
 import { orderConfirmAction } from '../../../../request/actions';
 
 import styles from './index.module.less';
 
-// const TabItem = ({ src, text }) => (
-//   <View className={styles['tabitem']}>
-//     <img src={src} />
-//     {text}
-//   </View>
-// );
-
 export default function FormBar() {
   const [form] = Form.useForm();
-  // const [showFee, updateShowFee] = useState(false);
 
   useEffect(() => {
     getOrderInfoAction({
@@ -80,96 +65,36 @@ export default function FormBar() {
     })
   };
 
-  // const way = Form.useWatch('way', form);
-  // const feeway = Form.useWatch('feeway', form);
-
-  // const detailRenderer = useMemo(() => {
-  //   return {
-  //     alipay: <Alipay namePrefix='pay' />,
-  //     wx: <Wxpay namePrefix='pay' />,
-  //     bank: <BankPay namePrefix='pay' />
-  //   }[way];
-  // }, [way]);
-
-  // const feeDetailRenderer = useMemo(() => {
-  //   return {
-  //     alipay: <Alipay namePrefix='fee' />,
-  //     wx: <Wxpay namePrefix='fee' />,
-  //     bank: <BankPay namePrefix='fee' />
-  //   }[feeway];
-  // }, [feeway]);
-
   const payImage = Form.useWatch('payImage', form);
   const feeImage = Form.useWatch('feeImage', form);
 
   return (
     <View className={styles.container}>
-      <Form form={form} className={styles.form} layout='horizontal' >
+      <Form form={form} className={styles.form} layout='vertical' >
         <View className={styles.title}>
           收款信息
         </View>
-        <Form.Item name='orderId' label='订单编号' childElementPosition='right'>
+        <Form.Item name='orderId' label='订单编号' >
           <FormLabel />
         </Form.Item>
-        <Form.Item name='orderDate' label='订单日期' childElementPosition='right'>
+        <Form.Item name='orderDate' label='订单日期' >
           <FormLabel />
         </Form.Item>
-        <Form.Item name='orderPrice' label='订单金额' childElementPosition='right'>
+        <Form.Item name='orderPrice' label='订单金额' >
           <FormLabel render={val => `￥${val || 0}`} />
         </Form.Item>
-        <Form.Item name='feePrice' label='服务费金额' childElementPosition='right'>
+        <Form.Item name='feePrice' label='服务费金额' >
           <FormLabel render={val => `￥${val || 0}`} />
         </Form.Item>
-        <Form.Item name='payUserTelephone' label='付款账号' childElementPosition='right'>
+        <Form.Item name='payUserTelephone' label='付款账号' >
           <FormLabel />
         </Form.Item>
-        <Form.Item style={!payImage ? { display: 'none' } : {}} name='payImage' label='付款凭证' childElementPosition='right'>
+        <Form.Item style={!payImage ? { display: 'none' } : {}} name='payImage' label='付款凭证' >
           <FormImage readonly />
         </Form.Item>
-        <Form.Item style={!feeImage ? { display: 'none' } : {}} name='feeImage' label='服务费凭证' childElementPosition='right'>
+        <Form.Item style={!feeImage ? { display: 'none' } : {}} name='feeImage' label='服务费凭证' >
           <FormImage readonly />
         </Form.Item>
-        {/* <Form.Item
-          name='way'
-          label='提现方式'
-          valuePropName='activeKey'
-          initialValue='alipay'
-          childElementPosition='right'
-        >
-          <CapsuleTabs style={{ padding: 0 }}>
-            <CapsuleTabs.Tab title={<TabItem text='支付宝' src={aliSrc} />} key='alipay' />
-            <CapsuleTabs.Tab title={<TabItem text='微信' src={wxSrc} />} key='wx' />
-            <CapsuleTabs.Tab title={<TabItem text='银行卡' src={bankSrc} />} key='bank' />
-          </CapsuleTabs>
-        </Form.Item>
-        {detailRenderer}
-        {showFee && (
-          <React.Fragment>
-            <View className={styles.title}>
-              服务费收款信息
-            </View>
-            <Form.Item name='feePrice' label='服务费' childElementPosition='right'>
-              <FormLabel render={val => `￥${val || 0}`} />
-            </Form.Item>
-            <Form.Item name='feeImage' label='服务费付款凭证' childElementPosition='right'>
-              <FormImage readonly />
-            </Form.Item>
-            <Form.Item
-              name='feeway'
-              label='提现方式'
-              valuePropName='activeKey'
-              initialValue='alipay'
-              childElementPosition='right'
-            >
-              <CapsuleTabs style={{ padding: 0 }}>
-                <CapsuleTabs.Tab title={<TabItem text='支付宝' src={aliSrc} />} key='alipay' />
-                <CapsuleTabs.Tab title={<TabItem text='微信' src={wxSrc} />} key='wx' />
-                <CapsuleTabs.Tab title={<TabItem text='银行卡' src={bankSrc} />} key='bank' />
-              </CapsuleTabs>
-            </Form.Item>
-            {feeDetailRenderer}
-          </React.Fragment>
-        )} */}
       </Form >
       <Button color='primary' shape='rounded' className={styles.submit} onClick={handleSubmit}>
         确认收款
diff --git a/src/pages/feeconfirm/components/Wxpay/index.jsx b/src/pages/feeconfirm/components/Wxpay/index.jsx
index 5edc347..a22a314 100644
--- a/src/pages/feeconfirm/components/Wxpay/index.jsx
+++ b/src/pages/feeconfirm/components/Wxpay/index.jsx
@@ -1,7 +1,6 @@
 import { View } from '@tarojs/components';
 import { Form } from 'antd-mobile';
 import FormLabel from '/components/FormLabel';
-import FormImage from '/components/FormImage';
 
 import styles from './index.module.less';
 
@@ -12,31 +11,17 @@ export default function Wxpay({ namePrefix }) {
       <Form.Item
         name={`${namePrefix}-weixin`}
         label='微信账号'
-        childElementPosition='right'
+        
       >
         <FormLabel />
       </Form.Item>
       <Form.Item
         name={`${namePrefix}-weixinName`}
         label='微信姓名'
-        childElementPosition='right'
+        
       >
         <FormLabel />
       </Form.Item>
-      {/* <Form.Item
-        name={`${namePrefix}-weixinImage`}
-        label='收款码'
-        childElementPosition='right'
-      >
-        <FormImage readonly width={72} height={72} />
-      </Form.Item> */}
-      {/* <Form.Item
-        name='password'
-        label='支付密码'
-        rules={[{ required: true, message: '请输入支付密码' }]}
-      >
-        <Input type='password' placeholder='请输入支付密码' />
-      </Form.Item> */}
     </View >
   )
 }
diff --git a/src/pages/feedback/index.jsx b/src/pages/feedback/index.jsx
index e4cc23c..0d80cc2 100644
--- a/src/pages/feedback/index.jsx
+++ b/src/pages/feedback/index.jsx
@@ -32,7 +32,7 @@ export default function Feedback() {
       <NavBar onBack={handleBack} style={{ padding: 0 }}>
         反馈
       </NavBar>
-      <Form form={form} className={styles.form} layout='horizontal'>
+      <Form form={form} className={styles.form}>
         <Form.Item name='contents' rules={[{ required: true, message: '请填写反馈内容' }]}>
           <TextArea placeholder='请输入反馈' autoFocus autoSize={{ minRows: 12 }} />
         </Form.Item>
diff --git a/src/pages/paymentmethod/components/Alipay/index.jsx b/src/pages/paymentmethod/components/Alipay/index.jsx
index 14692ea..87379a1 100644
--- a/src/pages/paymentmethod/components/Alipay/index.jsx
+++ b/src/pages/paymentmethod/components/Alipay/index.jsx
@@ -12,7 +12,6 @@ export default function Alipay() {
       <Form.Item
         name='alipay'
         label='支付宝账号'
-        childElementPosition='right'
         className={styles.margin}
         rules={[{ required: true, message: '请输入支付宝账号' }]}
       >
@@ -20,7 +19,6 @@ export default function Alipay() {
       </Form.Item>
       <Form.Item name='alipayName'
         label='支付宝姓名'
-        childElementPosition='right'
         rules={[{ required: true, message: '请输入支付宝账号' }]}
       >
         <Input placeholder='支付宝姓名' />
@@ -28,7 +26,6 @@ export default function Alipay() {
       <Form.Item
         name='alipayImage'
         label='支付宝收款码'
-        childElementPosition='right'
         rules={[{ required: true, message: '请上传支付宝收款码' }]}
       >
         <FormImage />
diff --git a/src/pages/paymentmethod/components/BankPay/index.jsx b/src/pages/paymentmethod/components/BankPay/index.jsx
index dc2ee80..1d3cf95 100644
--- a/src/pages/paymentmethod/components/BankPay/index.jsx
+++ b/src/pages/paymentmethod/components/BankPay/index.jsx
@@ -11,7 +11,7 @@ export default function BankPay() {
       <Form.Item
         name='payeeBank'
         label='开户行'
-        childElementPosition='right'
+        
         className={styles.margin}
         rules={[{ required: true, message: '请输入开户行' }]}
       >
@@ -20,7 +20,7 @@ export default function BankPay() {
       <Form.Item
         name='payeeAccount'
         label='银行卡号'
-        childElementPosition='right'
+        
         rules={[{ required: true, message: '请输入银行卡号' }]}
       >
         <Input placeholder='银行卡号' />
@@ -28,7 +28,7 @@ export default function BankPay() {
       <Form.Item
         name='payeeName'
         label='开户人'
-        childElementPosition='right'
+        
         rules={[{required: true, message: '请输入开户人'}]}
       >
         <Input placeholder='开户人' />
diff --git a/src/pages/paymentmethod/components/Wxpay/index.jsx b/src/pages/paymentmethod/components/Wxpay/index.jsx
index cb8dfc7..4be536a 100644
--- a/src/pages/paymentmethod/components/Wxpay/index.jsx
+++ b/src/pages/paymentmethod/components/Wxpay/index.jsx
@@ -12,7 +12,7 @@ export default function Wxpay() {
       <Form.Item
         name='weixin'
         label='微信账号'
-        childElementPosition='right'
+        
         className={styles.margin}
         rules={[{ required: true, message: '请输入微信账号' }]}
       >
@@ -21,7 +21,7 @@ export default function Wxpay() {
       <Form.Item
         name='weixinName'
         label='微信姓名'
-        childElementPosition='right'
+        
         rules={[{ required: true, message: '请输入微信姓名' }]}
       >
         <Input placeholder='微信姓名' />
@@ -29,7 +29,7 @@ export default function Wxpay() {
       <Form.Item
         name='weixinImage'
         label='微信收款码'
-        childElementPosition='right'
+        
         rules={[{ required: true, message: '请上传微信收款码' }]}
       >
         <FormImage />
diff --git a/src/pages/paymentmethod/index.jsx b/src/pages/paymentmethod/index.jsx
index f49d600..8014a02 100644
--- a/src/pages/paymentmethod/index.jsx
+++ b/src/pages/paymentmethod/index.jsx
@@ -44,7 +44,7 @@ export default function Payforget() {
         支付方式
       </NavBar>
       <View className={styles.wrapper}>
-        <Form form={form} className={styles.form} layout='horizontal'>
+        <Form form={form} className={styles.form} layout='vertical'>
           <Form.Item name='shopLogo' hidden />
           <Form.Item name='licenseImage' hidden />
           <Form.Item name='shopName' hidden />
diff --git a/src/pages/shopinfo/components/FormBar/index.jsx b/src/pages/shopinfo/components/FormBar/index.jsx
index 2f7d760..e500e87 100644
--- a/src/pages/shopinfo/components/FormBar/index.jsx
+++ b/src/pages/shopinfo/components/FormBar/index.jsx
@@ -31,48 +31,32 @@ export default function FormBar() {
 
   return (
     <View className={styles.container}>
-      <Form form={form} className={styles.form} layout='horizontal'>
-        {/* <Form.Item name='shopLogo' label='店铺Logo' childElementPosition='right' rules={[{required: true, message: '请上传店铺logo'}]}>
-          <FormImage />
-        </Form.Item>
-        <Form.Item name='licenseImage' label='营业执照' childElementPosition='right' rules={[{required: true, message: '请上传营业执照'}]}>
-          <FormImage />
-        </Form.Item>
-        <Form.Item name='shopName' label='店铺名称' childElementPosition='right' rules={[{required: true, message: '请输入店铺名称'}]}>
-          <Input placeholder='店铺名称' />
-        </Form.Item>
-        <Form.Item name='contacts' label='店铺地址' childElementPosition='right' rules={[{required: true, message: '请输入店铺地址'}]}>
-          <Input placeholder='店铺地址' />
-        </Form.Item>
-        <Form.Item name='telephone' label='手机号码' childElementPosition='right' rules={[{required: true, message: '请输入手机号码'}]}>
-          <Input placeholder='手机号码' />
-        </Form.Item> */}
-
-        <Form.Item name='weixin' label='微信账号' childElementPosition='right' className={styles.margin} rules={[{required: true, message: '请输入微信账号'}]}>
+      <Form form={form} className={styles.form} layout='vertical' mode='card'>
+        <Form.Item name='weixin' label='微信账号' className={styles.margin} rules={[{ required: true, message: '请输入微信账号' }]}>
           <Input placeholder='微信账号' />
         </Form.Item>
-        <Form.Item name='weixinName' label='微信姓名' childElementPosition='right' rules={[{required: true, message: '请输入微信姓名'}]}>
+        <Form.Item name='weixinName' label='微信姓名' rules={[{ required: true, message: '请输入微信姓名' }]}>
           <Input placeholder='微信姓名' />
         </Form.Item>
-        <Form.Item name='weixinImage' label='微信收款码' childElementPosition='right' rules={[{required: true, message: '请上传微信收款码'}]}>
+        <Form.Item name='weixinImage' label='微信收款码' rules={[{ required: true, message: '请上传微信收款码' }]}>
           <FormImage />
         </Form.Item>
-        <Form.Item name='alipay' label='支付宝账号' childElementPosition='right' className={styles.margin} rules={[{required: true, message: '请输入支付宝账号'}]}>
+        <Form.Item name='alipay' label='支付宝账号' className={styles.margin} rules={[{ required: true, message: '请输入支付宝账号' }]}>
           <Input placeholder='支付宝账号' />
         </Form.Item>
-        <Form.Item name='alipayName' label='支付宝姓名' childElementPosition='right' rules={[{required: true, message: '请输入支付宝姓名'}]}>
+        <Form.Item name='alipayName' label='支付宝姓名' rules={[{ required: true, message: '请输入支付宝姓名' }]}>
           <Input placeholder='支付宝姓名' />
         </Form.Item>
-        <Form.Item name='alipayImage' label='支付宝收款码' childElementPosition='right' rules={[{required: true, message: '请上传支付宝收款码'}]}>
+        <Form.Item name='alipayImage' label='支付宝收款码' rules={[{ required: true, message: '请上传支付宝收款码' }]}>
           <FormImage />
         </Form.Item>
-        <Form.Item name='payeeBank' label='开户行' childElementPosition='right' className={styles.margin} rules={[{required: true, message: '请输入开户行'}]}>
+        <Form.Item name='payeeBank' label='开户行' className={styles.margin} rules={[{ required: true, message: '请输入开户行' }]}>
           <Input placeholder='开户行' />
         </Form.Item>
-        <Form.Item name='payeeAccount' label='银行卡号' childElementPosition='right' rules={[{required: true, message: '请输入银行卡号'}]}>
+        <Form.Item name='payeeAccount' label='银行卡号' rules={[{ required: true, message: '请输入银行卡号' }]}>
           <Input placeholder='银行卡号' />
         </Form.Item>
-        <Form.Item name='payeeName' label='开户人' childElementPosition='right' rules={[{required: true, message: '请输入开户人'}]}>
+        <Form.Item name='payeeName' label='开户人' rules={[{ required: true, message: '请输入开户人' }]}>
           <Input placeholder='开户人' />
         </Form.Item>
       </Form >
diff --git a/src/pages/shopinfo/components/FormBar/index.module.less b/src/pages/shopinfo/components/FormBar/index.module.less
index bc4b9d0..67e47b6 100644
--- a/src/pages/shopinfo/components/FormBar/index.module.less
+++ b/src/pages/shopinfo/components/FormBar/index.module.less
@@ -18,7 +18,6 @@
   }
 
   .margin {
-    margin-top: 32px;
   }
 
   .submit {
diff --git a/src/pages/viplevelup/components/Alipay/index.jsx b/src/pages/viplevelup/components/Alipay/index.jsx
index 5310bfe..10c489f 100644
--- a/src/pages/viplevelup/components/Alipay/index.jsx
+++ b/src/pages/viplevelup/components/Alipay/index.jsx
@@ -16,7 +16,8 @@ export default function Alipay() {
       >
         <FormLabel />
       </Form.Item>
-      <Form.Item name='alipayName'
+      <Form.Item
+        name='alipayName'
         label='支付宝姓名'
       >
         <FormLabel />
@@ -24,7 +25,6 @@ export default function Alipay() {
       <Form.Item
         name='alipayImage'
         label='支付宝收款码'
-        childElementPosition='right'
       >
         <FormImage readonly />
       </Form.Item>
diff --git a/src/pages/viplevelup/components/Wxpay/index.jsx b/src/pages/viplevelup/components/Wxpay/index.jsx
index ff37225..e07131e 100644
--- a/src/pages/viplevelup/components/Wxpay/index.jsx
+++ b/src/pages/viplevelup/components/Wxpay/index.jsx
@@ -25,7 +25,6 @@ export default function Wxpay() {
       <Form.Item
         name='weixinImage'
         label='微信收款码'
-        childElementPosition='right'
       >
         <FormImage readonly />
       </Form.Item>
diff --git a/src/pages/viplevelup/index.jsx b/src/pages/viplevelup/index.jsx
index 2b10161..b75d5ee 100644
--- a/src/pages/viplevelup/index.jsx
+++ b/src/pages/viplevelup/index.jsx
@@ -53,7 +53,7 @@ export default function Payforget() {
         会员升级
       </NavBar>
       <View className={styles.wrapper}>
-        <Form form={form} className={styles.form} layout='horizontal'>
+        <Form form={form} className={styles.form} layout='vertical'>
           <Form.Item name='promoteOrderId' hidden />
           <Space>
             <View className={styles.title}>升级费用</View>
@@ -68,8 +68,7 @@ export default function Payforget() {
           <Form.Item
             name='payImage'
             label='付款凭证'
-            childElementPosition='right'
-            layout='horizontal'
+            layout='vertical'
             rules={[{ required: true, message: '请上传付款凭证' }]}
           >
             <FormImage />