From 6a0da4284dca11e98c0b386e4c5f56bc019eaaa8 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, 11 Sep 2024 18:51:34 +0800
Subject: [PATCH 1/2] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=90=9C=E7=B4=A2?=
 =?UTF-8?q?=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/diy/diy.vue          |   2 +-
 components/diy/float-window.vue |   1 -
 components/diy/search.vue       | 136 ++++++++++++++++++++++++++++++--
 3 files changed, 132 insertions(+), 7 deletions(-)

diff --git a/components/diy/diy.vue b/components/diy/diy.vue
index 231dfd8a..32840bd6 100644
--- a/components/diy/diy.vue
+++ b/components/diy/diy.vue
@@ -4,7 +4,7 @@
         <view v-if="value.diy_data.length > 0" :style="diy_content_style">
             <view v-for="(item, index) in value.diy_data" :key="index">
                 <!-- 基础组件 -->
-                <!-- <componentDiySearch></componentDiySearch> -->
+                <componentDiySearch v-if="item.key == 'search'" :value="item.com_data"></componentDiySearch>
                 <componentCarousel v-if="item.key == 'carousel'" :value="item.com_data"></componentCarousel>
                 <componentDiyUserInfo v-if="item.key == 'user-info'" :value="item.com_data"></componentDiyUserInfo>
                 <componentDiyVideo v-else-if="item.key == 'video'" :value="item.com_data"></componentDiyVideo>
diff --git a/components/diy/float-window.vue b/components/diy/float-window.vue
index 13d4ecae..2fd00999 100644
--- a/components/diy/float-window.vue
+++ b/components/diy/float-window.vue
@@ -43,7 +43,6 @@ export default {
         }
         const { windowHeight } = uni.getSystemInfoSync();
         this.style = `bottom: ${((offset_number / windowHeight) * 100).toFixed(4) + '%'};` + location;
-        
     },
     methods: {
         url_open() {
diff --git a/components/diy/search.vue b/components/diy/search.vue
index d05c242a..d4645d66 100644
--- a/components/diy/search.vue
+++ b/components/diy/search.vue
@@ -1,14 +1,140 @@
 <template>
-    <view> 这是search </view>
+    <view :style="style_container">
+        <view :style="style" class="flex-row align-c">
+            <view class="search wh-auto pr">
+                <view class="box oh flex-row align-c gap-10 bg-white" :style="box_style">
+                    <template v-if="form.is_icon_show == '1'">
+                        <template v-if="form.icon_img.length > 0">
+                            <view class="img-box">
+                                <image :src="form.icon_img[0].url" class="img" mode="aspectFill"></image>
+                            </view>
+                        </template>
+                        <template v-else>
+                            <iconfont :name="!is_obj_empty(form.icon_class) ? 'icon-' + form.icon_class : 'icon-index-search'" size="'28rpx'" :color="new_style.icon_color"></iconfont>
+                        </template>
+                    </template>
+                    <span v-if="form.is_tips_show == '1'" :class="[isPageSettings ? 'text-size-xs text-line-1' : 'text-size-md text-line-1']" :style="`color: ${ new_style.tips_color }`">{{ form.tips }}</span>
+                </view>
+                <view v-if="form.is_search_show == '1'" class="pa search-botton h flex-row align-c jc-c" :style="search_button">
+                    <template v-if="form.search_type === 'text'">
+                        <view :class="['padding-vertical-xs text-size-xs', isPageSettings ? 'padding-horizontal' : 'padding-horizontal-lg']">{{ form.search_tips }}</view>
+                    </template>
+                    <template v-else-if="!is_obj_empty(form.search_botton_img) && form.search_botton_img.length > 0">
+                        <image :src="form.search_botton_img[0].url" class="img" :style="search_button_radius" mode="aspectFill"></image>
+                    </template>
+                    <template v-else>
+                        <view :class="['padding-vertical-xs text-size-xs', isPageSettings ? 'padding-horizontal' : 'padding-horizontal-lg']">
+                            <iconfont :name="!is_obj_empty(form.search_botton_icon) ? 'icon-' + form.search_botton_icon : ''" size="'28rpx'"></iconfont>
+                        </view>
+                    </template>
+                </view>
+            </view>
+        </view>
+    </view>
 </template>
 
 <script>
+    import { background_computer, common_styles_computer, gradient_computer, radius_computer, is_obj_empty } from '@/common/js/common/common.js';
     export default {
-        data() {
-            return {};
+        props: {
+            value: {
+                type: Object,
+                default: () => {
+                    return {};
+                },
+            },
+            isPageSettings: {
+                type: Boolean,
+                default: false,
+            },
+        },
+        data() {
+            return {
+                form: {},
+                new_style: {},
+                style: '',
+                style_container: '',
+                search_button_radius: '',
+                box_style: '',
+                search_button: '',
+            };
+        },
+        created() {
+            this.form = this.value.content;
+            this.new_style = this.value.style;
+            this.init();
+        },
+        methods: {
+            is_obj_empty,
+            init() {
+                const { search_button_radius, common_style } = this.new_style;
+                // 内部样式
+                this.style = this.get_style();
+                // 全局样式
+                this.style_container = this.isPageSettings ? '' : common_styles_computer(common_style);
+                // 按钮圆角
+                this.search_button_radius = radius_computer(search_button_radius);
+                // 搜索框设置
+                this.box_style = this.get_box_style();
+                // 搜索按钮显示
+                this.search_button = this.get_search_button();
+            },
+            get_style() {
+                let common_styles = '';
+                if (this.new_style.text_style == 'italic') {
+                    common_styles += `font-style: italic`;
+                } else if (this.new_style.text_style == '500') {
+                    common_styles += `font-weight: 500`;
+                }
+                return common_styles;
+            },
+            get_box_style() {
+                let style = `border: 1px solid ${ this.new_style.search_border }; ${ radius_computer(this.new_style.search_border_radius) };`;
+                if (this.form.is_center == '1') {
+                    style += `justify-content: center;`;
+                }
+                return style;
+            },
+            get_search_button() {
+                let style = this.search_button_radius;
+                const { search_botton_color_list, search_botton_direction, search_botton_background_img_style, search_botton_background_img  } = this.new_style;
+                if (this.form.search_type != 'img') {
+                    const data = {
+                        color_list: search_botton_color_list,
+                        direction: search_botton_direction,
+                        background_img: search_botton_background_img,
+                        background_img_style: search_botton_background_img_style,
+                    }
+                    style += gradient_computer(data) + background_computer(data) + `color: ${ this.new_style.button_inner_color };`;
+                }
+                console.log(style);
+                return style;
+            }
         },
-        methods: {},
     };
 </script>
 
-<style></style>
+<style lang="scss" scoped>
+.search {
+    height: 64rpx;
+    .box {
+        padding: 12rpx 30rpx;
+    }
+    .img-box {
+        height: 100%;
+        min-width: 4rpx;
+        max-width: 12rpx;
+    }
+    .search-botton {
+        height: 56rpx;
+        top: 4rpx;
+        right: 4rpx;
+        .img {
+            height: 56rpx;
+            min-width: 6rpx;
+            max-width: 20rpx;
+        }
+    }
+    
+}
+</style>

From 6f3b3174adb43e026c77edd97e5e90ba9bfa935e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8E=E8=82=96=E7=A3=8A?= <18851179580@163.com>
Date: Thu, 12 Sep 2024 11:18:01 +0800
Subject: [PATCH 2/2] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E8=A7=86=E9=A2=91?=
 =?UTF-8?q?=E6=92=AD=E6=94=BE=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/diy/carousel.vue | 75 ++++++++++++++++++++++++++++++++++---
 1 file changed, 70 insertions(+), 5 deletions(-)

diff --git a/components/diy/carousel.vue b/components/diy/carousel.vue
index f12831b1..54dd1040 100644
--- a/components/diy/carousel.vue
+++ b/components/diy/carousel.vue
@@ -4,18 +4,41 @@
             <block v-if="form.carousel_type == 'card'">
                 <swiper-item v-for="(item, index) in new_list" :key="index" class="flex-row align-c">
                     <view class="swiper-item" :style="img_style" :class="['scale-defalt', { 'scale-1': animationData === index }]">
-                        <image :src="item.carousel_img[0].url" class="img ht-auto" :style="img_style" :mode="img_fit"></image>
+                        <block v-if="!is_obj_empty(item.carousel_img)">
+                            <image :src="item.carousel_img[0].url" class="img ht-auto" :style="img_style" :mode="img_fit"></image>
+                        </block>
+                    </view>
+                    <view v-if="new_style.video_is_show == '1' && item.carousel_video.length > 0" :class="{'x-middle': new_style.video_location == 'center', 'right-0': new_style.video_location == 'flex-end' }" class="video-class flex-row pa gap-10 align-c oh" :style="video_style" @click="video_play(item.carousel_video)">
+                        <block v-if="new_style.video_type == 'img'">
+                            <image :src="new_style.video_img[0].url" class="video_img" mode="aspectFill"></image>
+                        </block>
+                        <block v-else>
+                            <iconfont :name="!is_obj_empty(new_style.video_icon_class) ? 'icon-' + new_style.video_icon_class : 'icon-bofang'" size="'28rpx'" :color="new_style.video_icon_color"></iconfont>
+                        </block>
+                        <span v-if="!is_obj_empty(item.video_title)" :style="`color:${new_style.video_title_color};font-size: ${new_style.video_title_size}px;`">{{ item.video_title }}</span>
                     </view>
                 </swiper-item>
             </block>
             <block v-else>
                 <swiper-item v-for="(item, index) in new_list" :key="index">
-                    <view class="item-image flex-row jc-c align-c w h" :style="img_style">
-                        <image :src="item.carousel_img[0].url" class="img" :style="img_style" :mode="img_fit"></image>
+                    <view class="item-image flex-row jc-c align-c wh-auto ht-auto pr" :style="img_style">
+                        <block v-if="!is_obj_empty(item.carousel_img)">
+                            <image :src="item.carousel_img[0].url" class="img" :style="img_style" :mode="img_fit"></image>
+                        </block>
+                    </view>
+                    <view v-if="new_style.video_is_show == '1' && item.carousel_video.length > 0" :class="{'x-middle': new_style.video_location == 'center', 'right-0': new_style.video_location == 'flex-end' }" class="video-class flex-row pa gap-10 align-c oh" :style="video_style" @click="video_play(item.carousel_video)">
+                        <block v-if="new_style.video_type == 'img'">
+                            <image :src="new_style.video_img[0].url" class="video_img" mode="aspectFill"></image>
+                        </block>
+                        <block v-else>
+                            <iconfont :name="!is_obj_empty(new_style.video_icon_class) ? 'icon-' + new_style.video_icon_class : 'icon-bofang'" size="'28rpx'" :color="new_style.video_icon_color"></iconfont>
+                        </block>
+                        <span v-if="!is_obj_empty(item.video_title)" :style="`color:${new_style.video_title_color};font-size: ${new_style.video_title_size}px;`">{{ item.video_title }}</span>
                     </view>
                 </swiper-item>
             </block>
         </swiper>
+        <video :src="video_src" id="carousel_video" :autoplay="true" show-fullscreen-btn class="video_class"></video>
         <view v-if="new_style.is_show == '1'" :class="{'dot-center': new_style.indicator_location == 'center', 'dot-right': new_style.indicator_location == 'flex-end' }" class="dot flex-row pa" :style="dot_style">
             <template v-if="new_style.indicator_style == 'num'">
                 <view :style="indicator_style" class="dot-item">
@@ -25,13 +48,13 @@
             <template v-else>
                 <view v-for="(item, index2) in form.carousel_list" :key="index2" :style="indicator_style + (actived_index == index2 ? 'background:' + new_style.actived_color : '')" class="dot-item" />
             </template>
-        </view>
+        </view>
     </view>
 </template>
 
 <script>
     const app = getApp();
-    import { common_styles_computer, radius_computer, is_obj_empty } from '@/common/js/common/common.js';
+    import { common_styles_computer, radius_computer, is_obj_empty, gradient_computer, padding_computer } from '@/common/js/common/common.js';
     export default {
         props: {
             value: {
@@ -58,6 +81,8 @@
                 interval_types: '',
                 img_fit: '',
                 dot_style: '',
+                video_style: '',
+                video_src: '',
                 // 样式二的处理
                 animation: '',
                 animationData: 0,
@@ -83,6 +108,7 @@
             }
         },
         methods: {
+            is_obj_empty,
             init() {
                 const { common_style, actived_color } = this.new_style;
                 // 用于样式显示
@@ -102,6 +128,8 @@
                     fit = 'aspectFit';
                 }
                 this.img_fit = fit;
+                // 视频播放按钮显示逻辑
+                this.video_style = this.get_video_style();
             },
             get_indicator_style() {
                 const { indicator_radius, indicator_style, indicator_size, color } = this.new_style;
@@ -157,6 +185,25 @@
                 } else {
                     this.actived_index = e.target.current;
                 }
+            },
+            get_video_style() {
+                const { video_bottom, video_radius, video_color_list, video_direction, video_title_color, video_padding} = this.new_style;
+                let style = `bottom: ${video_bottom}px;`;
+                if (!is_obj_empty(video_radius)) {
+                    style += radius_computer(video_radius)
+                }
+                const data = {
+                    color_list: video_color_list,
+                    direction: video_direction,
+                }
+                style += gradient_computer(data) + padding_computer(video_padding) + `color: ${video_title_color};`;
+                return style;
+            },
+            video_play(list) {
+                this.video_src = list[0].url;
+                let videoContext = uni.createVideoContext('carousel_video');
+                videoContext.requestFullScreen();
+                videoContext.play();
             }
         },
     };
@@ -185,6 +232,7 @@
     	display: flex;
     	flex-wrap: wrap;
     	justify-content: center;
+        align-items: center;
     	margin-left: auto;
     	margin-right: auto;
     	height: 90%;
@@ -205,5 +253,22 @@
     
     .img {
         width: 100%;
+    }
+    .video_img {
+        max-width: 6rem;
+        height: 1.4rem;
+    }
+    .video-class {
+        max-width: 100%;
+    }
+    .x-middle {
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+    }
+    .video_class {
+        position: absolute;
+        height: 0px;
+        width: 0px;
     }
 </style>
\ No newline at end of file