新增悬浮按钮

components/diy/diy.vue

@@ -5,6 +5,7 @@
             <view v-for="(item, index) in value.diy_data" :key="index">
                 <componentDiySearch></componentDiySearch>
                 <componentDiyAuxiliaryLine v-if="item.key == 'row-line'" :value="item.com_data"></componentDiyAuxiliaryLine>
+                <componentFloatWindow v-if="item.key == 'float-window'" :value="item.com_data"></componentFloatWindow>
             </view>
         </view>
         <componentDiyFooter :value="value.footer.com_data"></componentDiyFooter>
@@ -16,6 +17,7 @@
     import componentDiyFooter from '@/components/diy/footer';
     import componentDiySearch from '@/components/diy/search';
     import componentDiyAuxiliaryLine from '@/components/diy/auxiliary-line';
+    import componentFloatWindow from '@/components/diy/float-window';
     export default {
         name: 'diy',
         props: {
@@ -29,6 +31,7 @@
             componentDiyFooter,
             componentDiySearch,
             componentDiyAuxiliaryLine,
+            componentFloatWindow,
         },
         data() {
             return {};

components/diy/float-window.vue

@@ -2,12 +2,11 @@
     <view v-if="form.button_img.length > 0" class="pa" :style="style">
         <view class="flex-row align-c jc-c suspension">
             <view class="spread flex-row align-c jc-c">
-                {{ new_style.float_style }}
                 <block v-if="new_style.float_style == 'diffuse'">
-                    <view class="ring"></view>
-                    <view class="ring"></view>
+                    <view class="ring" :style="`background-color: ${ color }`"></view>
+                    <view class="ring" :style="`background-color: ${ color }`"></view>
                 </block>
-                <image :src="form.button_img[0].url" :class="{'shadow': new_style.float_style == 'shadow'}"></image>
+                <image :src="form.button_img[0].url" class="img" :style="color" fit="cover"></image>
             </view>
         </view>
     </view>
@@ -34,8 +33,8 @@
         created() {
             this.form = this.value.content;
             this.new_style = this.value.style;
-            const { float_style_color, display_location, offset_number } = this.value.style;
-            this.color = float_style_color;
+            const { float_style, float_style_color, display_location, offset_number } = this.value.style;
+            this.color = float_style == 'shadow' ? `box-shadow: 0 5px 20px ${ float_style_color }` : float_style_color;
             let location = `right: 10px;`;
             if (display_location == 'left') {
                 location = `left: 10px;`;
@@ -49,17 +48,10 @@
 </script>
 
 <style scoped lang="scss">
-:deep(.el-image) {
-    width: 4.5rem;
-    height: 4.5rem;
+.img {
+    width: 100rpx;
+    height: 100rpx;
     border-radius: 50%;
-    .image-slot img {
-        width: 3rem;
-        height: 3rem
-    }
-}
-.shadow {
-    box-shadow: 0 5px 20px v-bind(color);
 }
 /**
 * 呼吸灯
@@ -67,16 +59,16 @@
 .spread {
     position: relative;
     z-index: 1;
-    width: 6rem;
-    height: 6rem;
+    width: 100rpx;
+    height: 100rpx;
+    border-radius: 50%;
 }
 .spread .ring {
     /* 速度为1.5 * 层数 = 实际运行速度，速度修改则 animation-delay 属性也修改相同速度 */
     animation: pulsing 1.5s ease-out infinite;
-    background-color: v-bind(color);
     border-radius: 100%;
-    width: 5rem;
-    height: 5rem;
+    width: 100rpx;
+    height: 100rpx;
     position: absolute;
 }
 /* 速度为1*层数 */

pages/diy/init_data.js

@@ -293,6 +293,43 @@ const initData = {
                 }
             }
         }
+    },{
+        "name": "悬浮按钮",
+        "show_tabs": "0",
+        "is_enable": "1",
+        "id": "wgqned1dfip",
+        "key": "float-window",
+        "com_data": {
+            "content": {
+                "button_jump": "link",
+                "button_img": [
+                    {
+                        "id": 2781,
+                        "category_id": 75,
+                        "title": "1713931511719969.png",
+                        "original": "背景1 4@2x.png",
+                        "size": "161.39KB",
+                        "ext": ".png",
+                        "type": "image",
+                        "url": "http://shopxo.com/public/static/upload/images/plugins_magic/2024/04/24/1713931511719969.png",
+                        "hash": "7a06b18f74cf937f7ad2ea95ee47a6cbee7a08897c29b79ee494f6505c6e73fe",
+                        "add_time": "2024-04-24 12:05:11",
+                        "category_name": "plugins_magic",
+                        "type_name": "图片"
+                    }
+                ],
+                "button_link": {
+                    "name": "我的积分",
+                    "page": "/pages/user-integral/user-integral"
+                }
+            },
+            "style": {
+                "display_location": "right",
+                "offset_number": 120,
+                "float_style": "shadow",
+                "float_style_color": "#32373a1a"
+            }
+        }
     }]
 };
 export default initData;