修改页面显示效果

pages/form-input/components/form-input/form-input.vue

@@ -148,7 +148,16 @@ export default {
             // 公共配置信息
             const overall_config = data.config?.overall_config || {};
             const mobile = overall_config?.style_settings?.mobile || {};
-            data.config.diy_data.forEach(item => {
+            let diy_data = data.config.diy_data || [];
+            // #ifndef H5 || MP-WEIXIN || MP-QQ
+                // 上传文件只支持H5 微信小程序， qq小程序，其余的需要端需要过滤掉数据
+                diy_data = diy_data.filter(item => item.key !== 'upload-attachments');
+            // #endif
+            // #ifndef APP-PLUS || H5 || MP-WEIXIN || MP-BAIDU
+                // 富文本只支持APP-PLUS || H5 || MP-WEIXIN || MP-BAIDU
+                diy_data = diy_data.filter(item => item.key !== 'rich-text');
+            // #endif
+            diy_data.forEach(item => {
                 // 边框样式处理
                 item.com_data.common_style = this.get_form_border_style(item.com_data.common_config, mobile.flex_direction || 'row', overall_config.type_value);
                 // 子表单需要统一规整一下数据
@@ -176,7 +185,7 @@ export default {
             });
             this.setData({
                 z_index_id: '',
-                data_list: data.config.diy_data,
+                data_list: diy_data,
                 form_name: data.name,
                 mobile: mobile,
                 flex_direction: mobile.flex_direction || 'row',

pages/form-input/components/form-input/input.vue

@@ -1,7 +1,7 @@
 <template>
     <view class="flex-row align-c wh-auto" :style="propStyle">
-        <input :value="form_value" class="uni-input flex-1" :style="propStyle" type="text" :placeholder="placeholder" :maxlength="max_length" @blur="data_check" @input="input_value_event" />
-        <view class="input-limit-num" v-if="com_data.is_limit_num == '1' && !isEmpty(com_data.max_num)">{{ form_value.length }}/{{ com_data.max_num }}</view>
+        <input :value="form_value" class="uni-input flex-1" :style="propStyle" type="text" :placeholder="placeholder" placeholder-style="color: gray;" :maxlength="max_length" @blur="data_check" @input="input_value_event" />
+        <view class="input-limit-num cr-gray" v-if="com_data.is_limit_num == '1' && !isEmpty(com_data.max_num)">{{ form_value.length }}/{{ com_data.max_num }}</view>
     </view>
 </template>
 

pages/form-input/components/form-input/modules/component-show/index.vue

@@ -2,30 +2,12 @@
     <view class="wh-auto ht-auto pr">
         <view v-for="(item, index) in data_list" :key="index" :class="(propIsCustom ? 'pa ' : (propDirection == 'row' ? 'row-item ' : 'column-item mb-10 ')) + (item.com_data.common_config.is_error == '1' ? ' item_error' : '')" :data-id="item.id" :data-location-x="item.location.x" :data-location-y="item.location.y" :style="(item.key == 'auxiliary-line' ? 'border-bottom: 0rpx; ' : '') + (propIsCustom ? ('left:' + item.location.x + 'px;top:' + item.location.y + 'px;width:' + item.com_data.com_width + 'px;height:' + item.com_data.com_height + 'px;z-index:' + (z_index_id == item.id ? '999999' : (item.is_enable == '1' ? (data_list.length - 1 > 0 ? (data_list.length - 1) - index : 0) : -999)) + ';') : '')">
             <view :class="'wh-auto ht-auto ' + (propDirection == 'row' ? (['video', 'img', 'upload-img', 'upload-video', 'multi-text'].includes(item.key) ? 'flex-row align-s gap-10' : 'flex-row align-b gap-10')  : 'flex-col gap-10')">
-                <view v-if="(!propIsCustom && !['rich-text', 'auxiliary-line', 'upload-attachments', 'subform'].includes(item.key)) || (propIsCustom && !['img', 'video', 'auxiliary-line', 'rect', 'round', 'rich-text', 'upload-attachments', 'subform'].includes(item.key))" class="field-label flex-row align-c gap-10" :style="propFieldLabelStyle + (propDirection == 'row' && ['upload-img', 'upload-video'].includes(item.key) ? 'padding-top: 12rpx;line-height: 120rpx;' : '') + (propDirection == 'row' && ['multi-text'].includes(item.key) ? 'padding-top: 18rpx;' : '')">
+                <view v-if="(!propIsCustom && !['auxiliary-line', 'subform'].includes(item.key)) || (propIsCustom && !['img', 'video', 'auxiliary-line', 'rect', 'round', 'subform'].includes(item.key))" class="field-label flex-row align-c gap-10" :style="propFieldLabelStyle + (propDirection == 'row' && ['upload-img', 'upload-video'].includes(item.key) ? 'padding-top: 12rpx;line-height: 120rpx;' : '') + (propDirection == 'row' && ['multi-text'].includes(item.key) ? 'padding-top: 18rpx;' : '')">
                     <view class="flex-row align-c" :style="propTitleStyle">{{ 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">
                         <iconfont name="icon-miaosha-hdgz" :size="propHelpIconStyle" color="#999"></iconfont>
                     </view>
                 </view>
-                <!-- 富文本仅支持H5、APP-PLUS、微信小程序、百度小程序 -->
-                <!-- #ifdef APP-PLUS || H5 || MP-WEIXIN || MP-BAIDU -->
-                <view v-if="item.key == 'rich-text'" class="field-label flex-row align-c gap-10" :style="propFieldLabelStyle">
-                    <view class="flex-row align-c" :style="propTitleStyle">{{ 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">
-                        <iconfont name="icon-miaosha-hdgz" :size="propHelpIconStyle" color="#999"></iconfont>
-                    </view>
-                </view>
-                <!-- #endif -->
-                <!-- 上传文件仅支持H5、微信小程序、QQ小程序 -->
-                <!-- #ifdef H5 || MP-WEIXIN || MP-QQ -->
-                <view v-if="item.key == 'upload-attachments'" class="field-label flex-row align-c gap-10" :style="propFieldLabelStyle">
-                    <view class="flex-row align-c" :style="propTitleStyle">{{ 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">
-                        <iconfont name="icon-miaosha-hdgz" :size="propHelpIconStyle" color="#999"></iconfont>
-                    </view>
-                </view>
-                <!-- #endif -->
                 <view class="flex-1 wh-auto ht-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">

pages/form-input/components/form-input/modules/subform-component-show/index.vue

@@ -2,21 +2,12 @@
     <view class="wh-auto ht-auto pr">
         <view v-for="(item, index) in data_list" :key="index" :class="(propDirection == 'row' ? 'row-item ' : 'column-item mb-10 ') + (item.com_data.common_config.is_error == '1' ? ' item_error' : '')" :data-id="item.id" :data-location-x="item.location.x" :data-location-y="item.location.y" :style="(item.key == 'auxiliary-line' ? 'border-bottom: 0rpx; ' : '')">
             <view :class="'wh-auto ht-auto ' + (propDirection == 'row' ? (['video', 'img', 'upload-img', 'upload-video', 'multi-text'].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', 'subform'].includes(item.key)" class="field-label flex-row align-c gap-10" :style="propFieldLabelStyle + (propDirection == 'row' && ['upload-img', 'upload-video'].includes(item.key) ? 'padding-top: 12rpx;line-height: 120rpx;' : '') + (propDirection == 'row' && ['multi-text'].includes(item.key) ? 'padding-top: 18rpx;' : '')">
+                <view v-if="!['auxiliary-line', 'upload-attachments', 'subform'].includes(item.key)" class="field-label flex-row align-c gap-10" :style="propFieldLabelStyle + (propDirection == 'row' && ['upload-img', 'upload-video'].includes(item.key) ? 'padding-top: 12rpx;line-height: 120rpx;' : '') + (propDirection == 'row' && ['multi-text'].includes(item.key) ? 'padding-top: 18rpx;' : '')">
                     <view class="flex-row align-c" :style="propTitleStyle">{{ 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">
                         <iconfont name="icon-miaosha-hdgz" :size="propHelpIconStyle" color="#999"></iconfont>
                     </view>
                 </view>
-                <!-- 上传文件仅支持H5、微信小程序、QQ小程序 -->
-                <!-- #ifdef H5 || MP-WEIXIN || MP-QQ -->
-                <view v-if="item.key == 'upload-attachments'" class="field-label flex-row align-c gap-10" :style="propFieldLabelStyle">
-                    <view class="flex-row align-c" :style="propTitleStyle">{{ 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">
-                        <iconfont name="icon-miaosha-hdgz" :size="propHelpIconStyle" color="#999"></iconfont>
-                    </view>
-                </view>
-                <!-- #endif -->
                 <view class="flex-1 wh-auto ht-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">

pages/form-input/components/form-input/number.vue

@@ -3,7 +3,7 @@
         <template v-if="com_data.is_display_money == '1'">
             <view class="number-icon padding-right-sm">{{ com_data.money_sign }}</view>
         </template>
-        <input :value="form_value" class="uni-input flex-1" :style="propStyle" type="text" :placeholder="placeholder" @focus="focus_input" @blur="blur_input" @input="input_value_event" />
+        <input :value="form_value" class="uni-input flex-1" :style="propStyle" type="text" :placeholder="placeholder" placeholder-style="color: gray;" @focus="focus_input" @blur="blur_input" @input="input_value_event" />
         <template v-if="com_data.format == 'percentage'">
              <view class="number-icon padding-left">%</view>
         </template>

pages/form-input/components/form-input/phone.vue

@@ -3,11 +3,11 @@
         <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" />
+                <input :value="form_value" class="uni-input flex-1" :style="propStyle" type="text" :placeholder="placeholder" placeholder-style="color: gray;" @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" />
+                <input :value="form_value_code" class="uni-input flex-1" :style="com_data.common_style + propStyle" type="text" placeholder="请输入验证码" placeholder-style="color: gray;" @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>

pages/form-input/components/form-input/pwd.vue

@@ -1,7 +1,7 @@
 <template>
     <view class="flex-row align-c wh-auto gap-10" :style="propStyle">
         <iconfont :name="'icon-' + com_data.icon_name" size="24rpx" color="#666" propContainerDisplay="flex" ></iconfont>
-        <input :value="form_value" class="uni-input flex-1" :style="propStyle" :password="is_show" :type="is_show ? '' : 'text'" :placeholder="placeholder" @blur="data_check" @input="input_value_event" />
+        <input :value="form_value" class="uni-input flex-1" :style="propStyle" :password="is_show" :type="is_show ? '' : 'text'" :placeholder="placeholder" placeholder-style="color: gray;" @blur="data_check" @input="input_value_event" />
         <view @tap="eye_change">
             <iconfont :name="'icon-' + (is_show ? 'eye' : 'eye-close')" size="24rpx" color="#666" propContainerDisplay="flex"></iconfont>
         </view>

pages/form-input/components/form-input/rich-text.vue

@@ -1,5 +1,7 @@
 <template>
-    <sp-editor @init="initEditor" @input="rich_text_event" @upinImage="up_in_image_event"></sp-editor>
+    <view class="sp-editor">
+        <sp-editor @init="initEditor" @input="rich_text_event" @upinImage="up_in_image_event"></sp-editor>
+    </view>
 </template>
 
 <script>
@@ -119,4 +121,8 @@
     };
 </script>
 
-<style></style>
+<style scoped lang="scss">
+.sp-editor {
+    height: 500rpx;
+}
+</style>

pages/form-input/components/form-input/textarea.vue

@@ -1,7 +1,7 @@
 <template>
     <view class="flex-row align-c wh-auto pr" :style="propStyle + 'min-height:200rpx;'">
-        <textarea :value="form_value" class="uni-input wh-auto" :style="propStyle + 'min-height:200rpx;'" :placeholder="placeholder" :maxlength="max_length" @blur="data_check" @input="input_value_event" />
-        <view class="input-limit-num" v-if="com_data.is_limit_num == '1' && !isEmpty(com_data.max_num)">{{ form_value.length }}/{{ com_data.max_num }}</view>
+        <textarea :value="form_value" class="uni-input wh-auto" :style="propStyle + 'min-height:200rpx;'" :placeholder="placeholder" placeholder-style="color: gray;" :maxlength="max_length" @blur="data_check" @input="input_value_event" />
+        <view class="input-limit-num cr-gray" v-if="com_data.is_limit_num == '1' && !isEmpty(com_data.max_num)">{{ form_value.length }}/{{ com_data.max_num }}</view>
     </view>
 </template>