From f7e5086381cfd7cf97fc7ae83e2c16ed5bf189af Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8E=E8=82=96=E7=A3=8A?= <18851179580@163.com>
Date: Fri, 4 Jul 2025 11:40:21 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=A8=AA=E5=90=91=E6=97=B6?=
 =?UTF-8?q?=E7=9A=84=E6=98=BE=E7=A4=BA=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/form-input/address.vue         | 16 ++++++---
 .../components/form-input/attachments.vue     |  2 +-
 .../components/form-input/date-group.vue      | 34 +++++++++----------
 .../components/form-input/form-input.vue      | 19 ++++++-----
 .../components/form-input/modules/uploads.vue |  2 +-
 .../components/form-input/phone.vue           | 29 +++++++++++-----
 6 files changed, 61 insertions(+), 41 deletions(-)

diff --git a/pages/form-input/components/form-input/address.vue b/pages/form-input/components/form-input/address.vue
index 8e4e0762..33fcbd10 100644
--- a/pages/form-input/components/form-input/address.vue
+++ b/pages/form-input/components/form-input/address.vue
@@ -1,5 +1,5 @@
 <template>
-    <view class="flex-col gap-10">
+    <view :class="'flex-col' + (propDirection == 'row' ? '' : 'gap-10')">
         <view class="flex-row align-c" :style="com_data.common_style + propStyle" @tap="open_ragion">
             <text v-if="province_name" class="flex-1">{{ province_name }}{{ city_name ? ' / ' + city_name : '' }}{{ county_name ? ' / ' + county_name : '' }}</text>
             <text v-else class="placeholder flex-1">{{ placeholder }}</text>
@@ -10,8 +10,9 @@
                 <iconfont name="icon-arrow-bottom" size="24rpx" color="#666" propContainerDisplay="flex" ></iconfont>
             </template>
         </view>
+        <view v-if="propDirection == 'row' && address_type == 'detailed'" class="border-line"></view>
         <view v-if="address_type == 'detailed'" class="flex-row">
-            <textarea :value="detailed_value" class="uni-input flex-1 ht-auto" :style="com_data.common_style + propStyle + 'padding: 18rpx 22rpx;min-height:100rpx;'" placeholder="请输入详细地址" @input="input_value_event" />
+            <textarea :value="detailed_value" class="uni-input flex-1 ht-auto" :style="com_data.common_style + propStyle + 'min-height:100rpx;' + (propDirection == 'row' ? '' : 'padding: 18rpx 22rpx;')" placeholder="请输入详细地址" @input="input_value_event" />
         </view>
     </view>
 </template>
@@ -59,8 +60,11 @@
             };
         },
         watch: {
-            propValue(val) {
-                this.init();
+            propValue: {
+                handler(newVal) {
+                    this.init();
+                },
+                deep: true
             },
             propKey(val) {
                 // 初始化
@@ -124,4 +128,8 @@
     color: #606266;
     opacity: 0.6;
 }
+.border-line {
+    border-top: 2rpx solid #eee;
+    margin: 10rpx 0;
+}
 </style>
\ No newline at end of file
diff --git a/pages/form-input/components/form-input/attachments.vue b/pages/form-input/components/form-input/attachments.vue
index d1a3710d..fb79dda6 100644
--- a/pages/form-input/components/form-input/attachments.vue
+++ b/pages/form-input/components/form-input/attachments.vue
@@ -1,6 +1,6 @@
 <template>
     <!-- 视频 -->
-    <view>
+    <view class="margin-vertical-xs">
        <template v-if="file.length > 0">
             <view class="flex-row gap-20 align-c">
                 <view class="file-title text-line-1" :style="propStyle + 'width:auto;height:100%'">
diff --git a/pages/form-input/components/form-input/date-group.vue b/pages/form-input/components/form-input/date-group.vue
index ed26c6f3..546fe28d 100644
--- a/pages/form-input/components/form-input/date-group.vue
+++ b/pages/form-input/components/form-input/date-group.vue
@@ -1,5 +1,20 @@
 <template>
-    <view class="flex-row align-c wh-auto pr" :style="propStyle">
+    <view class="flex-row align-c wh-auto pr " :style="propStyle">
+        <view class="bg-white wh-auto ht-auto flex-row align-c gap-5 oh">
+            <template v-if="isEmpty(form_value)">
+                <view class="datetime-placeholder flex-1 flex-row align-c ht-auto gap-5 oh">
+                    <view class="flex-1 flex-row align-c jc-c" :data-index="0" @tap="data_time_change">{{ com_data.start_placeholder }}</view>-
+                    <view class="flex-1 flex-row align-c jc-c" :data-index="1" @tap="data_time_change">{{ com_data.end_placeholder }}</view>
+                </view>
+            </template>
+            <template v-else>
+                <view class="datetime-value flex-1 flex-row align-c ht-auto gap-5 oh">
+                    <view class="flex-1 flex-row align-c jc-c ht-auto nowrap text-line-1" :data-index="0" @tap="data_time_change">{{ form_value[0] || '' }}</view>-
+                    <view class="flex-1 flex-row align-c jc-c ht-auto nowrap text-line-1" :data-index="1" @tap="data_time_change">{{ form_value[1] || '' }}</view>
+                </view>
+            </template>
+            <iconfont :name="'icon-'+ com_data.icon_name" class="ml-5" size="28rpx" color="#333333" />
+        </view>
         <template v-if="['option1', 'option2'].includes(date_type)">
             <myDatetime ref="option4" dataType="time" :shownum="date_type == 'option1' ? 2 : 3" @timeSubmit="data_change"></myDatetime>
         </template>
@@ -8,24 +23,9 @@
         </template>
         <template v-else>
             <view class="datetime-picker">
-                <uni-datetime-picker ref="option4" :value="form_value" :border="false" :type="date_type == 'option4' ? 'daterange' : 'datetimerange'" :hideSecond="date_type !== 'option4'" @change="data_date_change" />
+                <uni-datetime-picker ref="option4" :value="form_value" :border="false" :type="date_type == 'option4' ? 'daterange' : 'datetimerange'" :hideSecond="date_type !== 'option6'" @change="data_date_change" />
             </view>
         </template>
-        <view class="bg-white wh-auto ht-auto flex-row align-c">
-            <template v-if="isEmpty(form_value)">
-                <view class="datetime-placeholder flex-1 flex-row align-c ht-auto">
-                    <view class="flex-1 flex-row align-c jc-c" :data-index="0" @tap="data_time_change">{{ com_data.start_placeholder }}</view>-
-                    <view class="flex-1 flex-row align-c jc-c" :data-index="1" @tap="data_time_change">{{ com_data.end_placeholder }}</view>
-                </view>
-            </template>
-            <template v-else>
-                <view class="datetime-value flex-1 flex-row align-c ht-auto">
-                    <view class="flex-1 flex-row align-c jc-c ht-auto" :data-index="0" @tap="data_time_change">{{ form_value[0] || '' }}</view>-
-                    <view class="flex-1 flex-row align-c jc-c ht-auto" :data-index="1" @tap="data_time_change">{{ form_value[1] || '' }}</view>
-                </view>
-            </template>
-            <iconfont :name="'icon-'+ com_data.icon_name" class="ml-5" size="28rpx" color="#333333" />
-        </view>
     </view>
 </template>
 
diff --git a/pages/form-input/components/form-input/form-input.vue b/pages/form-input/components/form-input/form-input.vue
index 5bf6c68f..3c12c3fb 100644
--- a/pages/form-input/components/form-input/form-input.vue
+++ b/pages/form-input/components/form-input/form-input.vue
@@ -6,12 +6,12 @@
                     <image :src="img_url" mode="aspectFit" />
                 </template>
             </view>
-            <view v-if="is_show_heading_title == '1'" class="head-title flex-row" :style="heading_title_style">{{ form_name }}</view>
-            <view class="data-list">
-                <view v-for="(item, index) in filteredDiyData" :key="index" :class="(flex_direction == 'row' ? 'row-item' : 'column-item mb-10') + (item.com_data.common_config.is_error == '1' ? ' item_error' : '')">
+            <view v-if="is_show_heading_title == '1'" class="head-title flex-row bg-white" :style="heading_title_style">{{ form_name }}</view>
+            <view class="data-list bg-white">
+                <view v-for="(item, index) in filteredDiyData" :key="index" :class="(flex_direction == 'row' ? 'row-item' : 'column-item mb-10') + (item.com_data.common_config.is_error == '1' ? ' item_error' : '')" :style="( item.key == 'auxiliary-line' ? 'border-bottom: 0rpx' : '')">
                     <!-- 左右模式 -->
                     <!-- <template v-if="flex_direction == 'row'"> -->
-                    <view :class="'wh-auto ht-auto ' + (flex_direction == 'row' ? 'flex-row align-b gap-10' : 'flex-col gap-10')">
+                    <view :class="'wh-auto ht-auto ' + (flex_direction == 'row' ? (['video', 'img'].includes(item.key) ? 'flex-row align-s gap-10' : 'flex-row align-b gap-10')  : 'flex-col gap-10')">
                         <view v-if="!['rich-text', 'auxiliary-line', 'upload-attachments'].includes(item.key)" class="field-label flex-row align-c gap-10" :style="field_label_style">
                             <view class="flex-row align-c" :style="title_style">{{ item.com_data.title }}<view v-if="item.com_data.is_required == '1'" class="required">*</view></view>
                             <view v-if="item.com_data.common_config.help_is_show == '1' && !isEmpty(item.com_data.common_config.help_explain)" :data-value="item.com_data.common_config.help_explain" @tap="help_icon_event">
@@ -36,23 +36,23 @@
                             </view>
                         </view>
                         <!-- #endif -->
-                        <view class="flex-1 wh-auto flex-col gap-5">
+                        <view class="flex-1 wh-auto flex-col gap-5 oh">
                             <view v-if="['single-text', 'radio-btns', 'select'].includes(item.key) && item.com_data.type == 'single-text'" :style="item.com_data.common_style">
                                 <component-input :propValue="item.com_data" :propKey="propKey" :propDataId="item.id" :propStyle="component_style" @dataCheck="data_check" @dataChange="data_change"></component-input>
                             </view>
                             <view v-else-if="item.key == 'multi-text'" :style="item.com_data.common_style + 'padding: 18rpx 22rpx;'">
                                 <component-textarea :propValue="item.com_data" :propKey="propKey" :propDataId="item.id" :propStyle="component_style" @dataCheck="data_check" @dataChange="data_change"></component-textarea>
                             </view>
-                            <view v-else-if="['select-multi', 'checkbox'].includes(item.key) && item.com_data.type == 'checkbox'">
+                            <view v-else-if="['select-multi', 'checkbox'].includes(item.key) && item.com_data.type == 'checkbox' && flex_direction !== 'row'">
                                 <component-checkbox :propValue="item.com_data" :propKey="propKey" :propDataId="item.id" :propMobile="mobile" :propStyle="component_style" @dataCheck="data_check" @dataChange="data_change" @data_option_change="data_option_change"></component-checkbox>
                             </view>
-                            <view v-else-if="['single-text', 'radio-btns', 'select'].includes(item.key) && item.com_data.type == 'radio-btns'">
+                            <view v-else-if="['single-text', 'radio-btns', 'select'].includes(item.key) && item.com_data.type == 'radio-btns' && flex_direction !== 'row'">
                                 <component-radio :propValue="item.com_data" :propKey="propKey" :propDataId="item.id" :propMobile="mobile" :propStyle="component_style" @dataCheck="data_check" @dataChange="data_change"></component-radio>
                             </view>
-                            <view v-else-if="['single-text', 'radio-btns', 'select'].includes(item.key) && item.com_data.type == 'select'" :style="item.com_data.common_style">
+                            <view v-else-if="(['single-text', 'radio-btns', 'select'].includes(item.key) && item.com_data.type == 'select') || (['single-text', 'radio-btns', 'select'].includes(item.key) && item.com_data.type == 'radio-btns' && flex_direction == 'row')" :style="item.com_data.common_style">
                                 <component-select :propValue="item.com_data" :propKey="propKey" :propDataId="item.id" :propMobile="mobile" :propDirection="flex_direction" :propStyle="component_style" @dataCheck="data_check" @dataChange="data_change"></component-select>
                             </view>
-                            <view v-else-if="['select-multi', 'checkbox'].includes(item.key) && item.com_data.type == 'select-multi'" :style="item.com_data.common_style">
+                            <view v-else-if="(['select-multi', 'checkbox'].includes(item.key) && item.com_data.type == 'select-multi') || (['select-multi', 'checkbox'].includes(item.key) && item.com_data.type == 'checkbox' && flex_direction == 'row')" :style="item.com_data.common_style">
                                 <component-select-multi :propValue="item.com_data" :propKey="propKey" :propDataId="item.id" :propMobile="mobile" :propDirection="flex_direction" :propStyle="component_style" @dataCheck="data_check" @dataChange="data_change" @data_option_change="data_option_change"></component-select-multi>
                             </view>
                             <view v-else-if="item.key == 'number'" :style="item.com_data.common_style">
@@ -442,6 +442,7 @@ export default {
     .row-item {
         padding: 10rpx 15rpx;
         border-bottom: 2rpx solid #eee;
+        overflow: hidden;
     }
     .row-item:last-child {
         border-bottom: none;
diff --git a/pages/form-input/components/form-input/modules/uploads.vue b/pages/form-input/components/form-input/modules/uploads.vue
index 5b015d59..91da3e3d 100644
--- a/pages/form-input/components/form-input/modules/uploads.vue
+++ b/pages/form-input/components/form-input/modules/uploads.vue
@@ -26,7 +26,7 @@
             </view>
         </template>
         <template v-else>
-            <view v-if="propData.length > 0" class="flex-col gap-5 margin-bottom">
+            <view v-if="propData.length > 0" class="flex-col gap-5 margin-vertical margin-horizontal-xs">
                 <view v-for="(item, index) in propData" :key="index" class="upload-file-content flex-row align-c gap-10">
                     <view v-if="item" class="flex-1 flex-row align-c upload-file-title w h">
                         <span class="text-line-1">{{ new_name(item.name)[0] || '' }}</span><span>.{{ new_name(item.name)[1] || '' }}</span>
diff --git a/pages/form-input/components/form-input/phone.vue b/pages/form-input/components/form-input/phone.vue
index eb2f4b18..5638cbb6 100644
--- a/pages/form-input/components/form-input/phone.vue
+++ b/pages/form-input/components/form-input/phone.vue
@@ -1,12 +1,15 @@
 <template>
-    <view class="flex-col gap-10">
-        <view class="flex-row align-c gap-5" :style="com_data.common_style + propStyle">
-            <iconfont name="icon-phone" size="24rpx" color="#666" propContainerDisplay="flex" ></iconfont>
-            <input :value="form_value" class="uni-input flex-1" :style="propStyle" type="text" :placeholder="placeholder" @blur="data_check" @input="input_value_event" />
-        </view>
-        <view v-if="com_data.is_sms_verification == '1'" class="flex-row gap-10">
-            <input :value="form_value_code" class="uni-input flex-1" :style="com_data.common_style + propStyle" type="text" placeholder="请输入验证码" @blur="data_code_check" @input="input_code_value_event" />
-            <button :class="'uni-button flex-row align-c' + ( verify_submit_disabled ? 'verify_disabled' : '')" :style="propStyle + 'height:auto;'" type="default" :disabled="verify_submit_disabled" @click="verify_send_event">{{ verify_submit_text }}</button>
+    <view>
+        <view :class="'flex-col' + (propDirection == 'row' ? '' : 'gap-10')">
+            <view class="flex-row align-c gap-5" :style="com_data.common_style + propStyle">
+                <iconfont name="icon-phone" size="24rpx" color="#666" propContainerDisplay="flex" ></iconfont>
+                <input :value="form_value" class="uni-input flex-1" :style="propStyle" type="text" :placeholder="placeholder" @blur="data_check" @input="input_value_event" />
+            </view>
+            <view v-if="propDirection == 'row' && com_data.is_sms_verification == '1'" class="verify-submi-border"></view>
+            <view v-if="com_data.is_sms_verification == '1'" class="flex-row gap-10">
+                <input :value="form_value_code" class="uni-input flex-1" :style="com_data.common_style + propStyle" type="text" placeholder="请输入验证码" @blur="data_code_check" @input="input_code_value_event" />
+                <button :class="'uni-button flex-row align-c' + ( verify_submit_disabled ? 'verify_disabled' : '')" :style="propStyle + 'height:auto;'" type="default" :disabled="verify_submit_disabled" @click="verify_send_event">{{ verify_submit_text }}</button>
+            </view>
         </view>
         <!-- 图片验证码弹层 -->
         <component-popup :propShow="popup_image_verify_status" propPosition="bottom" @onclose="popup_image_verify_close_event">
@@ -54,7 +57,11 @@
             propStyle: {
                 type: String,
                 default: '',
-            }
+            },
+            propDirection: {
+                type: String,
+                default: 'row',
+            },
         },
         data() {
             return {
@@ -278,4 +285,8 @@
     top: 0;
     right: 36rpx;
 }
+.verify-submi-border {
+    border-top: 2rpx solid #eee;
+    margin: 10rpx 0;
+}
 </style>
\ No newline at end of file