From 1cf41fb1a88dd4ee8b6124b5ebf11190e4e2bdf0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8E=E8=82=96=E7=A3=8A?= <18851179580@163.com>
Date: Wed, 2 Jul 2025 11:16:04 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E8=A7=86=E9=A2=91=E5=92=8C?=
 =?UTF-8?q?=E5=9B=BE=E7=89=87=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../video-player/video-player.vue             |  0
 pages/diy/components/diy/video.vue            |  2 +-
 .../components/form-input/form-input.vue      | 37 +++++---
 .../components/form-input/image.vue           | 71 +++++++++++++++
 .../form-input/modules/image-empty.vue        | 86 +++++++++++++++++++
 .../components/form-input/video.vue           | 78 +++++++++++++++++
 6 files changed, 259 insertions(+), 15 deletions(-)
 rename {pages/diy/components/diy/modules => components}/video-player/video-player.vue (100%)
 create mode 100644 pages/form-input/components/form-input/image.vue
 create mode 100644 pages/form-input/components/form-input/modules/image-empty.vue
 create mode 100644 pages/form-input/components/form-input/video.vue

diff --git a/pages/diy/components/diy/modules/video-player/video-player.vue b/components/video-player/video-player.vue
similarity index 100%
rename from pages/diy/components/diy/modules/video-player/video-player.vue
rename to components/video-player/video-player.vue
diff --git a/pages/diy/components/diy/video.vue b/pages/diy/components/diy/video.vue
index 0319b5ec..c54cd00e 100644
--- a/pages/diy/components/diy/video.vue
+++ b/pages/diy/components/diy/video.vue
@@ -16,7 +16,7 @@
 
 <script>
     import { common_styles_computer, common_img_computer } from '@/common/js/common/common.js';
-    import VideoPlayer from '@/pages/diy/components/diy/modules/video-player/video-player.vue';
+    import VideoPlayer from '@/components/video-player/video-player.vue';
     export default {
         components: {
             VideoPlayer,
diff --git a/pages/form-input/components/form-input/form-input.vue b/pages/form-input/components/form-input/form-input.vue
index 4382e04b..48c77bb6 100644
--- a/pages/form-input/components/form-input/form-input.vue
+++ b/pages/form-input/components/form-input/form-input.vue
@@ -20,43 +20,49 @@
                         </view>
                         <view class="flex-1 wh-auto flex-col gap-5">
                             <view v-if="['single-text', 'radio-btns', 'select'].includes(item.key) && item.com_data.type == 'single-text'" :style="item.com_data.common_style">
-                                <componentInput :propValue="item.com_data" :propKey="propKey" :propDataIndex="index" :propStyle="component_style" @dataCheck="data_check" @dataChange="data_change"></componentInput>
+                                <component-input :propValue="item.com_data" :propKey="propKey" :propDataIndex="index" :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;'">
-                                <componentTextarea :propValue="item.com_data" :propKey="propKey" :propDataIndex="index" :propStyle="component_style" @dataCheck="data_check" @dataChange="data_change"></componentTextarea>
+                                <component-textarea :propValue="item.com_data" :propKey="propKey" :propDataIndex="index" :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'">
-                                <componentCheckbox :propValue="item.com_data" :propKey="propKey" :propDataIndex="index" :propMobile="mobile" :propStyle="component_style" @dataCheck="data_check" @dataChange="data_change" @data_option_change="data_option_change"></componentCheckbox>
+                                <component-checkbox :propValue="item.com_data" :propKey="propKey" :propDataIndex="index" :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'">
-                                <componentRadio :propValue="item.com_data" :propKey="propKey" :propDataIndex="index" :propMobile="mobile" :propStyle="component_style" @dataCheck="data_check" @dataChange="data_change"></componentRadio>
+                                <component-radio :propValue="item.com_data" :propKey="propKey" :propDataIndex="index" :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">
-                                <componentSelect :propValue="item.com_data" :propKey="propKey" :propDataIndex="index" :propMobile="mobile" :propDirection="flex_direction" :propStyle="component_style" @dataCheck="data_check" @dataChange="data_change"></componentSelect>
+                                <component-select :propValue="item.com_data" :propKey="propKey" :propDataIndex="index" :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">
-                                <componentSelectMulti :propValue="item.com_data" :propKey="propKey" :propDataIndex="index" :propMobile="mobile" :propDirection="flex_direction" :propStyle="component_style" @dataCheck="data_check" @dataChange="data_change" @data_option_change="data_option_change"></componentSelectMulti>
+                                <component-select-multi :propValue="item.com_data" :propKey="propKey" :propDataIndex="index" :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">
-                               <componentNumber :propValue="item.com_data" :propKey="propKey" :propDataIndex="index" :propMobile="mobile" :propStyle="component_style" @dataCheck="data_check" @dataChange="data_change"></componentNumber>
+                               <component-number :propValue="item.com_data" :propKey="propKey" :propDataIndex="index" :propMobile="mobile" :propStyle="component_style" @dataCheck="data_check" @dataChange="data_change"></component-number>
                             </view>
                             <view v-else-if="item.key == 'date'" :style="item.com_data.common_style">
-                               <componentDate :propValue="item.com_data" :propKey="propKey" :propDataIndex="index" :propMobile="mobile" :propStyle="component_style" @dataCheck="data_check" @dataChange="data_change"></componentDate>
+                               <component-date :propValue="item.com_data" :propKey="propKey" :propDataIndex="index" :propMobile="mobile" :propStyle="component_style" @dataCheck="data_check" @dataChange="data_change"></component-date>
                             </view>
                             <view v-else-if="item.key == 'date-group'" :style="item.com_data.common_style">
-                               <componentDateGroup :propValue="item.com_data" :propKey="propKey" :propDataIndex="index" :propMobile="mobile" :propStyle="component_style" @dataCheck="data_check" @dataChange="data_change"></componentDateGroup>
+                               <component-date-group :propValue="item.com_data" :propKey="propKey" :propDataIndex="index" :propMobile="mobile" :propStyle="component_style" @dataCheck="data_check" @dataChange="data_change"></component-date-group>
                             </view>
                             <view v-else-if="item.key == 'address'">
-                               <componentAddress :propValue="item.com_data" :propKey="propKey" :propDataIndex="index" :propMobile="mobile" :propStyle="component_style" :propDirection="flex_direction" @dataCheck="data_check" @dataChange="data_change" @openRagion="open_ragion" @dataAddressChange="dataAddressChange"></componentAddress>
+                               <component-address :propValue="item.com_data" :propKey="propKey" :propDataIndex="index" :propMobile="mobile" :propStyle="component_style" :propDirection="flex_direction" @dataCheck="data_check" @dataChange="data_change" @openRagion="open_ragion" @dataAddressChange="dataAddressChange"></component-address>
                             </view>
                             <view v-else-if="item.key == 'phone'">
-                               <componentPhone :propValue="item.com_data" :propKey="propKey" :propDataIndex="index" :propMobile="mobile" :propStyle="component_style" :propDirection="flex_direction" @dataCheck="data_check" @dataChange="data_change" @dataCodeCheck="data_code_check" @dataCodeChage="data_code_chage"></componentPhone>
+                               <component-phone :propValue="item.com_data" :propKey="propKey" :propDataIndex="index" :propMobile="mobile" :propStyle="component_style" :propDirection="flex_direction" @dataCheck="data_check" @dataChange="data_change" @dataCodeCheck="data_code_check" @dataCodeChage="data_code_chage"></component-phone>
                             </view>
                             <view v-else-if="item.key == 'pwd'" :style="item.com_data.common_style">
-                               <componentPwd :propValue="item.com_data" :propKey="propKey" :propDataIndex="index" :propMobile="mobile" :propStyle="component_style" :propDirection="flex_direction" @dataCheck="data_check" @dataChange="data_change"></componentPwd>
+                               <component-pwd :propValue="item.com_data" :propKey="propKey" :propDataIndex="index" :propMobile="mobile" :propStyle="component_style" :propDirection="flex_direction" @dataCheck="data_check" @dataChange="data_change"></component-pwd>
                             </view>
                             <view v-else-if="item.key == 'score'">
-                               <componentScore :propValue="item.com_data" :propKey="propKey" :propDataIndex="index" :propMobile="mobile" :propStyle="component_style" :propDirection="flex_direction" @dataCheck="data_check" @dataChange="data_change"></componentScore>
+                               <component-score :propValue="item.com_data" :propKey="propKey" :propDataIndex="index" :propMobile="mobile" :propStyle="component_style" :propDirection="flex_direction" @dataCheck="data_check" @dataChange="data_change"></component-score>
+                            </view>
+                            <view v-else-if="item.key == 'img'">
+                               <component-image :propValue="item.com_data" :propKey="propKey" :propDataIndex="index" :propMobile="mobile" :propStyle="component_style" :propDirection="flex_direction"></component-image>
+                            </view>
+                            <view v-else-if="item.key == 'video'">
+                               <component-video :propValue="item.com_data" :propKey="propKey" :propDataIndex="index" :propMobile="mobile" :propStyle="component_style" :propDirection="flex_direction"></component-video>
                             </view>
                             <view v-if="!isEmpty(item.com_data.common_config.error_text)" class="field-invalid-info">{{ item.com_data.common_config.error_text }}</view>
                         </view>
@@ -100,6 +106,8 @@ import componentSelectMulti from '@/pages/form-input/components/form-input/selec
 import componentPhone from '@/pages/form-input/components/form-input/phone.vue';
 import componentPwd from '@/pages/form-input/components/form-input/pwd.vue';
 import componentScore from '@/pages/form-input/components/form-input/score.vue';
+import componentImage from '@/pages/form-input/components/form-input/image.vue';
+import componentVideo from '@/pages/form-input/components/form-input/video.vue';
 import componentRegionPicker from '@/pages/common/components/region-picker/region-picker';
 export default {
     name: 'formInput',
@@ -118,7 +126,8 @@ export default {
         componentPhone,
         componentPwd,
         componentScore,
-
+        componentImage,
+        componentVideo
     },
     props: {
         propValue: {
diff --git a/pages/form-input/components/form-input/image.vue b/pages/form-input/components/form-input/image.vue
new file mode 100644
index 00000000..be81c19b
--- /dev/null
+++ b/pages/form-input/components/form-input/image.vue
@@ -0,0 +1,71 @@
+<template>
+    <view class="form-input-image"> 
+        <image-empty :propImageSrc="com_data.img_src[0]" :propStyle="img_style" propErrorStyle="width: 100rpx;height: 100rpx;"></image-empty>
+    </view>
+</template>
+
+<script> 
+    import { isEmpty } from '@/common/js/common/common.js';
+    import imageEmpty from '@/pages/form-input/components/form-input/modules/image-empty.vue';
+    export default {
+        components: {
+            imageEmpty
+        },
+        props: {
+            propValue: {
+                type: Object,
+                default: () => ({}),
+            },
+            propKey: {
+                type: [String, Number],
+                default: 0,
+            },
+            propDataIndex: {
+                type: Number,
+                default: 0,
+            },
+            propStyle: {
+                type: String,
+                default: '',
+            },
+            propIsCustom: {
+                type: Boolean,
+                default: false,
+            }
+        },
+        data() {
+            return {
+                com_data: {},
+                img_style: 'width: 100%;height:100%;',
+            };
+        },
+        watch: {
+            propKey(val) {
+                // 初始化
+                this.init();
+            },
+        },
+        mounted() {
+            this.init();
+        },
+        methods: {
+            isEmpty,
+            init() {
+                const com_data = this.propValue;
+                let img_style = `width: 100%;height:100%;`;
+                if (!this.propIsCustom && !isEmpty(com_data)) {
+                    const { img_width, img_scale_type } = com_data;
+                    const height = img_scale_type === '1' ? img_width : img_scale_type == '0' ? (img_width * 9) / 16 : (img_width * 3) / 4;
+                    img_style = `width: ${ img_width * 2 }rpx;height:${ height * 2 }rpx;`
+                }
+                this.setData({
+                    com_data: com_data,
+                    img_style: img_style,
+                });
+            }
+        }
+    }
+</script>
+
+<style lang="scss" scoped>
+</style>
\ No newline at end of file
diff --git a/pages/form-input/components/form-input/modules/image-empty.vue b/pages/form-input/components/form-input/modules/image-empty.vue
new file mode 100644
index 00000000..1d489e09
--- /dev/null
+++ b/pages/form-input/components/form-input/modules/image-empty.vue
@@ -0,0 +1,86 @@
+<template>
+    <view :class="['oh img_wh', propClass]" :style="empty_outer_style + propStyle">
+        <image :src="img_url" :mode="propImgFit" :style="empty_style + 'display: block;'" @error="error_change"/>
+    </view>
+</template>
+
+<script>
+    import { is_obj, isEmpty } from '@/common/js/common/common.js';
+    export default {
+        props: {
+            propImageSrc: {
+                type: [Object, String],
+                default: () => {},
+            },
+            propErrorStyle: {
+                type: String,
+                default: () => '',
+            },
+            propImgFit: {
+                type: String,
+                default: () => 'aspectFill',
+            },
+            propStyle: {
+                type: String,
+                default: () => '',
+            },
+            propClass: {
+                type: String,
+                default: () => '',
+            },
+        },
+        data() {
+            return {
+                empty_outer_style: '',
+                empty_style: 'width: 100%; height: 100%;', // 有图片的时候显示为100%
+                img_url: '',
+                default_image: '/static/images/common/image-empty.png',
+            };
+        },
+        watch: {
+            propImageSrc(val) {
+                this.init();
+            }
+        },
+        mounted() {
+            this.init();
+        },
+        methods: {
+            init() {
+                let img_url = this.propImageSrc;
+                if (is_obj(this.propImageSrc)) {
+                    img_url = !isEmpty(this.propImageSrc) ? this.propImageSrc.url : '';
+                }
+                // 没有图片的时候根据默认值来算
+                if (img_url == undefined || img_url == null || img_url == '') {
+                    this.setData({
+                        empty_outer_style: 'background: #f4fcff;display:flex;align-items: center;justify-content: center;',
+                        empty_style: `${this.propErrorStyle}`,
+                    });
+                    img_url = this.default_image;
+                } else {
+                    this.setData({
+                        empty_outer_style: '',
+                        empty_style: 'width: 100%; height: 100%;', // 有图片的时候显示为100%
+                    });
+                }
+                this.setData({
+                    img_url: img_url,
+                });
+            },
+            error_change() {
+                this.setData({
+                    empty_outer_style: 'background: #f4fcff;display:flex;align-items: center;justify-content: center;',
+                    empty_style: `${this.propErrorStyle}`,
+                    img_url: this.default_image,
+                });
+            }
+        },
+    };
+</script>
+<style lang="scss" scoped>
+    .img_wh {
+        width: 100%;
+        height: 100%;
+    }
+</style>
diff --git a/pages/form-input/components/form-input/video.vue b/pages/form-input/components/form-input/video.vue
new file mode 100644
index 00000000..5edd0316
--- /dev/null
+++ b/pages/form-input/components/form-input/video.vue
@@ -0,0 +1,78 @@
+<template>
+    <!-- 视频 -->
+    <view class="video pr" :style="video_style">
+        <!-- #ifndef APP -->
+        <video :src="video" class="wh-auto ht-auto" :poster="video_img" objectFit="cover" style="object-fit: cover"></video>
+        <!-- #endif-->
+        <!-- #ifdef APP -->
+        <video-player ref="domVideoPlayer" :poster="video_img" :src="video" objectFit="cover" controls />
+        <!-- #endif-->
+    </view>
+</template>
+
+<script>
+    import { isEmpty } from '@/common/js/common/common.js';
+    import VideoPlayer from '@/components/video-player/video-player.vue';
+    export default {
+        components: {
+            VideoPlayer,
+        },
+        props: {
+            propValue: {
+                type: Object,
+                default: () => ({}),
+            },
+            propKey: {
+                type: [String, Number],
+                default: 0,
+            },
+            propDataIndex: {
+                type: Number,
+                default: 0,
+            },
+            propStyle: {
+                type: String,
+                default: '',
+            },
+            propIsCustom: {
+                type: Boolean,
+                default: false,
+            }
+        },
+        data() {
+            return {
+                video_style: 'width: 100%;height:100%;',
+                video_img: '',
+                video: '',
+            };
+        },
+        watch: {
+            propKey(val) {
+                // 初始化
+                this.init();
+            },
+        },
+        mounted() {
+            this.init();
+        },
+        methods: {
+            isEmpty,
+            // 初始化数据
+            init() {
+                const com_data = this.propValue;
+                let video_style = `width: 100%;height:100%;`;
+                if (!this.propIsCustom && !isEmpty(com_data)) {
+                    const { video_width, video_scale_type } = form.value;
+                    const height = video_scale_type === '1' ? video_width : video_scale_type == '0' ? (video_width * 9) / 16 : (video_width * 3) / 4;
+                    video_style = `width: ${ video_width * 2 }rpx;height:${ height * 2 }rpx;`
+                }
+                this.setData({
+                    com_data: com_data,
+                    video_style: video_style,
+                });
+            }
+        },
+    };
+</script>
+
+<style></style>