制作临境模板基本完成，可使用

李帅
Commit 94391f60efa5064f78cf3b8e208723322ad79008 94391f60 1 parent 9b0f13bc
Showing 4 changed files with 65 additions and 16 deletions
app/Admin/Controllers/VideoTempController.php
database/migrations/2022_01_25_140917_create_video_temp_table.php
resources/lang/zh_CN/video-temp.php
resources/views/admin/form/phone.blade.php
--- a/app/Admin/Controllers/VideoTempController.php
View file @94391f6
+++ b/app/Admin/Controllers/VideoTempController.php
View file @94391f6
@@ -87,9 +87,10 @@ class VideoTempController extends AdminController
                 $form->showFooter();
                 // 设置字段宽度
                 $form->width(8, 3);
-                $form->column(12, function (Form\BlockForm $form) {
+
                 $form->text('title');
-                    $form->radio('type')->options(['视频', '图文音频'])->default(0);
+                $form->radio('type')->addElementClass('type')
+                    ->options([1=>'图文音频',2=>'视频'])->default(1);
                 $form->radio('bg_type')
                     ->options([1=>'视频', 2=>'图片'])
                     ->when(1,function (Form\BlockForm $form){
@@ -97,29 +98,38 @@ class VideoTempController extends AdminController
                             ->accept('mp4')
                             ->autoUpload()
                             ->uniqueName()
-                                ->addElementClass('bg_url');
+                            ->addElementClass('bg_video_url');
                     })
                     ->when(2,function (Form\BlockForm $form){
                         $form->multipleImage('bg_url')
                             ->limit(5)
                             ->uniqueName()
-                                ->addElementClass('multi_bg_url');
+                            ->addElementClass('bg_img_url');
                     })
                     ->default(1);
                 $form->radio('bg_music')
                     ->options(['无', '有'])
                     ->when(1,function (Form\BlockForm $form){
-                            $form->text('bgm_url');
+                        $form->file('bgm_url')
+                            ->accept('mp3,aac,wav')
+                            ->autoUpload()
+                            ->uniqueName()
+                            ->addElementClass('bgm_url');
                     })
                     ->default(0);
                 $form->number('top');
                 $form->number('left');
                 $form->number('font_size');
+                $form->color('text_color')->addElementClass('text_color');
+                $form->color('text_bg_color')->addElementClass('text_bg_color');
+                $form->number('opacity')->min(0)->max(100)
+                    ->addElementClass('opacity')->default(90)
+                    ->help('范围为0-100，100表示不透明，0表示完全透明');
+
                 $form->number('sn');
                 $form->radio('state')->options(['不显示', '显示'])->default(0);
             });
-            });
             $form->block(4, function (Form\BlockForm $form) {
                 $form->html(view('admin.form.phone'));
--- a/database/migrations/2022_01_25_140917_create_video_temp_table.php
View file @94391f6
+++ b/database/migrations/2022_01_25_140917_create_video_temp_table.php
View file @94391f6
@@ -21,6 +21,11 @@ class CreateVideoTempTable extends Migration
             $table->string('bg_url')->nullable()->comment('背景动画化地址');
             $table->unsignedTinyInteger('bg_music')->comment('0=没有,1=有');
             $table->string('bgm_url')->nullable()->comment('背景音乐地址');
+
+            $table->string('text_color')->nullable()->comment('文字颜色');
+            $table->string('text_bg_color')->nullable()->comment('文字背景色');
+            $table->double('opacity')->nullable()->comment('透明度');
+
             $table->unsignedTinyInteger('sn')->default('99')->comment('序号');
             $table->unsignedSmallInteger('top')->default('0')->comment('距离容器上边距');
             $table->unsignedSmallInteger('left')->default('0')->comment('距离容器左边距');
--- a/resources/lang/zh_CN/video-temp.php
View file @94391f6
+++ b/resources/lang/zh_CN/video-temp.php
View file @94391f6
@@ -16,6 +16,9 @@ return [
         'top' => '距离容器上边距',
         'left' => '距离容器左边距',
         'font_size' => '字号',
+        'text_color' => '文字颜色',
+        'text_bg_color' => '文字背景色',
+        'opacity' => '透明度',
     ],
     'options' => [
     ],
--- a/resources/views/admin/form/phone.blade.php
View file @94391f6
+++ b/resources/views/admin/form/phone.blade.php
View file @94391f6
@@ -5,12 +5,12 @@
         border-radius: 40px;
         margin-right: 24px;
         padding: 37px 20px;
-        min-height: 679px;
+        min-height: 779px;
     }
     .phone-content {
         border: 1px solid rgb(220, 223, 230);
-        height: 605px;
+        height: 705px;
         overflow: hidden;
         position: relative;
         background: rgb(245, 245, 245);
@@ -54,12 +54,20 @@
         font-size: 12px;
         margin: 0;
     }
+
+    .bg-box {
+        height: 625px;
+    }
 </style>
 <div class="box-card">
     <div class="phone-content">
         <div class="text">模板</div>
         <img src="{{asset('storage/image/mobile-head.png')}}" alt="" width="338" height="80">
-
+        <div class="bg-box">
+            <img width="338" height="625" class="bg_img" style="display: none">
+            <video width="338" height="625" id="bg_video" style="display: none"></video>
+            <audio id="bg_audio" ></audio>
+        </div>
         <div class="poem-block">
             <p class="poem-title">题破山寺后禅院</p>
             <p class="poem-author">-- 常建</p>
@@ -74,22 +82,45 @@
 <button type="button" class="btn btn-primary sync"><i class="feather icon-repeat"></i> 同步基本设置</button>
 <script>
     Dcat.ready(function () {
-        $(document).off('click', '.sync').on('click', '.sync', function () {
+        var asset = "{{asset('/storage/')}}";
+        $(document).off('click', '.sync').on('click', '.sync', function () {
             let ori_top = 80;
             let top = parseInt($('.field_top').val()) + ori_top;
             let left = $('.field_left').val();
             let font = $('.field_font_size').val();
             let content_size = 12 + parseInt(font);
             let title_size = 14 + parseInt(font);
+            let text_color = $('.text_color').val() || 'whitesmoke';
+            let text_bg_color = $('.text_bg_color').val() || '#5c6bc6';
+            let opacity = parseInt($('.opacity').val()) / 100;
-            $('.poem-block').css('top', top + 'px').css('left', left + 'px');
+            $('.poem-block').css('top', top + 'px').css('left', left + 'px')
-            $('.poem-title').css('font-size', title_size + 'px');
+                .css('background-color', text_bg_color).css('opacity', opacity);
-            $('.poem-content').css('font-size', content_size + 'px');
+            $('.poem-title').css('font-size', title_size + 'px').css('color', text_color);
+            $('.poem-content').css('font-size', content_size + 'px').css('color', text_color);
-            console.log(top)
+
-            console.log(left)
+            let bg_img_url = $('.bg_img_url').find("input[type='hidden'][name='bg_url']").val();
-            console.log(font)
+            if (bg_img_url !== '') {
+                $('.bg_img').attr('src', asset + '/' + bg_img_url).css('display', 'block');
+            }
+
+            let bg_video_url = $('.bg_video_url').find("input[type='hidden'][name='bg_url']").val();
+            if (bg_video_url !== ''){
+                $('#bg_video').attr('src', asset + '/' + bg_video_url).css('display', 'block');
+                let bg_video = document.getElementById('bg_video');
+                bg_video.autoplay = true;
+                bg_video.loop = true;
+            }
+
+            let bgm_url = $('.bgm_url').find("input[type='hidden'][name='bgm_url']").val();
+            if (bgm_url !== ''){
+                $('#bg_audio').attr('src', asset + '/' + bgm_url);
+                let bg_audio = document.getElementById('bg_audio');
+                bg_audio.autoplay = true;
+                bg_audio.loop = true;
+            }
         })
     })