Showing
4 changed files
with
167 additions
and
95 deletions
... | @@ -6,10 +6,12 @@ use App\Models\VideoTemp; | ... | @@ -6,10 +6,12 @@ use App\Models\VideoTemp; |
6 | use App\Models\Component; | 6 | use App\Models\Component; |
7 | use Dcat\Admin\Form; | 7 | use Dcat\Admin\Form; |
8 | use Dcat\Admin\Grid; | 8 | use Dcat\Admin\Grid; |
9 | +use Dcat\Admin\Layout\Content; | ||
9 | use Dcat\Admin\Show; | 10 | use Dcat\Admin\Show; |
10 | use Dcat\Admin\Http\Controllers\AdminController; | 11 | use Dcat\Admin\Http\Controllers\AdminController; |
11 | use Dcat\Admin\Widgets\Table; | 12 | use Dcat\Admin\Widgets\Table; |
12 | use Illuminate\Support\Facades\DB; | 13 | use Illuminate\Support\Facades\DB; |
14 | +use Illuminate\Support\Str; | ||
13 | 15 | ||
14 | class VideoTempController extends AdminController | 16 | class VideoTempController extends AdminController |
15 | { | 17 | { |
... | @@ -29,10 +31,20 @@ class VideoTempController extends AdminController | ... | @@ -29,10 +31,20 @@ class VideoTempController extends AdminController |
29 | 31 | ||
30 | $grid->column('id',__('ID'))->sortable(); | 32 | $grid->column('id',__('ID'))->sortable(); |
31 | $grid->column('title'); | 33 | $grid->column('title'); |
34 | + $grid->column('bg_music')->bool(); | ||
35 | + $grid->column('bgm_url')->display(function ($url){ | ||
36 | + if ($this->bg_music == 0) | ||
37 | + return '暂无'; | ||
38 | + elseif (Str::of($url)->contains('.mp3')) | ||
39 | + return "<a target='_blank' href='". $url ."'>查看</a>"; | ||
40 | + else | ||
41 | + return "<a target='_blank' href='". $url ."'>下载后查看</a>"; | ||
42 | + }); | ||
43 | + | ||
32 | $grid->column('','组件信息') | 44 | $grid->column('','组件信息') |
33 | ->display('展开') | 45 | ->display('展开') |
34 | ->expand(function (){ | 46 | ->expand(function (){ |
35 | - $th = ['id','模板id','名称','位置','字号','字体颜色','背景色','透明度','创建时间','修改时间']; | 47 | + $th = ['id','模板id','名称','位置','字号','字体颜色','背景色','背景厚度','透明度','避免剪切','创建时间','修改时间']; |
36 | return Table::make($th, $this->components->toArray())->withBorder(); | 48 | return Table::make($th, $this->components->toArray())->withBorder(); |
37 | }); | 49 | }); |
38 | // $grid->column('type'); | 50 | // $grid->column('type'); |
... | @@ -85,11 +97,11 @@ class VideoTempController extends AdminController | ... | @@ -85,11 +97,11 @@ class VideoTempController extends AdminController |
85 | * | 97 | * |
86 | * @return Form | 98 | * @return Form |
87 | */ | 99 | */ |
88 | - protected function form2() | 100 | + protected function form() |
89 | { | 101 | { |
90 | return Form::make(new VideoTemp(), function (Form $form) { | 102 | return Form::make(new VideoTemp(), function (Form $form) { |
91 | $form->display('id'); | 103 | $form->display('id'); |
92 | - $form->block(8, function (Form\BlockForm $form) { | 104 | + $form->block(7, function (Form\BlockForm $form) { |
93 | // 设置标题 | 105 | // 设置标题 |
94 | $form->title('基本设置'); | 106 | $form->title('基本设置'); |
95 | // 显示底部提交按钮 | 107 | // 显示底部提交按钮 |
... | @@ -98,24 +110,7 @@ class VideoTempController extends AdminController | ... | @@ -98,24 +110,7 @@ class VideoTempController extends AdminController |
98 | $form->width(8, 3); | 110 | $form->width(8, 3); |
99 | 111 | ||
100 | $form->text('title'); | 112 | $form->text('title'); |
101 | - $form->radio('type')->addElementClass('type') | 113 | + |
102 | - ->options([1=>'图文音频',2=>'视频'])->default(1); | ||
103 | - $form->radio('bg_type') | ||
104 | - ->options([1=>'视频', 2=>'图片']) | ||
105 | - ->when(1,function (Form\BlockForm $form){ | ||
106 | - $form->file('bg_url') | ||
107 | - ->accept('mp4') | ||
108 | - ->autoUpload() | ||
109 | - ->uniqueName() | ||
110 | - ->addElementClass('bg_video_url'); | ||
111 | - }) | ||
112 | - ->when(2,function (Form\BlockForm $form){ | ||
113 | - $form->multipleImage('bg_url') | ||
114 | - ->limit(5) | ||
115 | - ->uniqueName() | ||
116 | - ->addElementClass('bg_img_url'); | ||
117 | - }) | ||
118 | - ->default(1); | ||
119 | $form->radio('bg_music') | 114 | $form->radio('bg_music') |
120 | ->options(['无', '有']) | 115 | ->options(['无', '有']) |
121 | ->when(1,function (Form\BlockForm $form){ | 116 | ->when(1,function (Form\BlockForm $form){ |
... | @@ -126,22 +121,29 @@ class VideoTempController extends AdminController | ... | @@ -126,22 +121,29 @@ class VideoTempController extends AdminController |
126 | ->addElementClass('bgm_url'); | 121 | ->addElementClass('bgm_url'); |
127 | }) | 122 | }) |
128 | ->default(0); | 123 | ->default(0); |
129 | - $form->number('top'); | ||
130 | - $form->number('left'); | ||
131 | - $form->number('font_size'); | ||
132 | - $form->color('text_color')->default('#f5f5f5') | ||
133 | - ->addElementClass('text_color'); | ||
134 | - $form->color('text_bg_color')->addElementClass('text_bg_color'); | ||
135 | - $form->number('opacity')->min(0)->max(100) | ||
136 | - ->addElementClass('opacity')->default(90) | ||
137 | - ->help('范围为0-100,100表示不透明,0表示完全透明'); | ||
138 | - | ||
139 | - $form->number('sn'); | ||
140 | - $form->radio('state')->options(['不显示', '显示'])->default(0); | ||
141 | 124 | ||
125 | + $form->checkbox('components','组件') | ||
126 | + ->when('every_poem', $this->buildCheckBoxOption('every_poem',$form)) | ||
127 | + ->when('one_poem', $this->buildCheckBoxOption('one_poem',$form)) | ||
128 | + ->when('weather', $this->buildCheckBoxOption('weather',$form)) | ||
129 | + ->when('date', $this->buildCheckBoxOption('date',$form)) | ||
130 | + ->when('feel', $this->buildCheckBoxOption('feel',$form)) | ||
131 | + ->default(['one_poem','weather','date']) | ||
132 | + ->options([ | ||
133 | + 'every_poem' => '每日一言组件', | ||
134 | + 'one_poem' => '一言组件', | ||
135 | + 'weather' => '天气组件', | ||
136 | + 'date' => '日期组件', | ||
137 | + 'feel' => '临境有感组件', | ||
138 | + ]); | ||
139 | + | ||
140 | + $form->hidden('state') | ||
141 | + ->saving(function ($v) { | ||
142 | + return $v; | ||
143 | + }); | ||
142 | }); | 144 | }); |
143 | 145 | ||
144 | - $form->block(4, function (Form\BlockForm $form) { | 146 | + $form->block(5, function (Form\BlockForm $form) { |
145 | $form->html(view('admin.form.phone')); | 147 | $form->html(view('admin.form.phone')); |
146 | }); | 148 | }); |
147 | 149 | ||
... | @@ -150,16 +152,24 @@ class VideoTempController extends AdminController | ... | @@ -150,16 +152,24 @@ class VideoTempController extends AdminController |
150 | }); | 152 | }); |
151 | } | 153 | } |
152 | 154 | ||
153 | - /** | 155 | + |
154 | - * Make a form builder. | 156 | + public function edit($id, Content $content) |
155 | - * | ||
156 | - * @return Form | ||
157 | - */ | ||
158 | - protected function form() | ||
159 | { | 157 | { |
160 | - return Form::make(new VideoTemp(), function (Form $form) { | 158 | + return $content |
159 | + ->translation($this->translation()) | ||
160 | + ->title($this->title()) | ||
161 | + ->description($this->description()['edit'] ?? trans('admin.edit')) | ||
162 | + ->body($this->form2()->edit($id)); | ||
163 | + } | ||
164 | + | ||
165 | + public function form2() | ||
166 | + { | ||
167 | + return Form::make(VideoTemp::with('components'), function (Form $form) { | ||
168 | + | ||
169 | +// dd($form->model()->toArray()); | ||
170 | + | ||
161 | $form->display('id'); | 171 | $form->display('id'); |
162 | - $form->block(8, function (Form\BlockForm $form) { | 172 | + $form->block(7, function (Form\BlockForm $form) { |
163 | // 设置标题 | 173 | // 设置标题 |
164 | $form->title('基本设置'); | 174 | $form->title('基本设置'); |
165 | // 显示底部提交按钮 | 175 | // 显示底部提交按钮 |
... | @@ -169,47 +179,23 @@ class VideoTempController extends AdminController | ... | @@ -169,47 +179,23 @@ class VideoTempController extends AdminController |
169 | 179 | ||
170 | $form->text('title'); | 180 | $form->text('title'); |
171 | 181 | ||
172 | - $form->checkbox('components','组件') | 182 | + $form->radio('bg_music') |
173 | - ->when('every_poem', function (Form\BlockForm $form) { | 183 | + ->options(['无', '有']) |
174 | - $form->select('pos_every_poem', '每日位置')->options(VideoTemp::POSITION_OPTIONS); | 184 | + ->when(1,function (Form\BlockForm $form){ |
175 | - $form->number('font_size_every_poem','容器宽度')->default(6)->help('范围为1-9,默认容器外边距为1/20'); | 185 | + $form->file('bgm_url') |
176 | - $form->text('text_color_every_poem','字体颜色')->default('white'); | 186 | + ->accept('mp3,aac,wav') |
177 | - $form->text('text_bg_color_every_poem','背景颜色'); | 187 | + ->autoUpload() |
178 | - $form->rate('opacity_every_poem','透明度')->default(50)->help('范围为0-100,100表示不透明,0表示完全透明'); | 188 | + ->uniqueName() |
179 | - $form->divider(); | 189 | + ->addElementClass('bgm_url'); |
180 | - }) | ||
181 | - ->when('one_poem', function (Form\BlockForm $form) { | ||
182 | - $form->select('pos_one_poem', '一言位置')->options(VideoTemp::POSITION_OPTIONS); | ||
183 | - $form->number('font_size_one_poem','容器宽度')->default(6)->help('范围为1-9,默认容器外边距为1/20'); | ||
184 | - $form->text('text_color_one_poem','字体颜色')->default('white'); | ||
185 | - $form->text('text_bg_color_one_poem','背景颜色'); | ||
186 | - $form->rate('opacity_one_poem','透明度')->default(50)->help('范围为0-100,100表示不透明,0表示完全透明'); | ||
187 | - $form->divider(); | ||
188 | - }) | ||
189 | - ->when('weather', function (Form\BlockForm $form) { | ||
190 | - $form->select('pos_weather', '天气位置')->options(VideoTemp::POSITION_OPTIONS); | ||
191 | - $form->number('font_size_weather','容器宽度')->default(6)->help('范围为1-9,默认容器外边距为1/20'); | ||
192 | - $form->text('text_color_weather','字体颜色')->default('white'); | ||
193 | - $form->text('text_bg_color_weather','背景颜色'); | ||
194 | - $form->rate('opacity_weather','透明度')->default(50)->help('范围为0-100,100表示不透明,0表示完全透明'); | ||
195 | - $form->divider(); | ||
196 | - }) | ||
197 | - ->when('date', function (Form\BlockForm $form) { | ||
198 | - $form->select('pos_date', '日期位置')->options(VideoTemp::POSITION_OPTIONS); | ||
199 | - $form->number('font_size_date','容器宽度')->default(6)->help('范围为1-9,默认容器外边距为1/20'); | ||
200 | - $form->text('text_color_date','字体颜色')->default('white'); | ||
201 | - $form->text('text_bg_color_date','背景颜色'); | ||
202 | - $form->rate('opacity_date','透明度')->default(50)->help('范围为0-100,100表示不透明,0表示完全透明'); | ||
203 | - $form->divider(); | ||
204 | - }) | ||
205 | - ->when('feel', function (Form\BlockForm $form) { | ||
206 | - $form->select('pos_feel', '有感位置')->options(VideoTemp::POSITION_OPTIONS); | ||
207 | - $form->number('font_size_feel','容器宽度')->default(6)->help('范围为1-9,默认容器外边距为1/20'); | ||
208 | - $form->text('text_color_feel','字体颜色')->default('white'); | ||
209 | - $form->text('text_bg_color_feel','背景颜色'); | ||
210 | - $form->rate('opacity_feel','透明度')->default(50)->help('范围为0-100,100表示不透明,0表示完全透明'); | ||
211 | - $form->divider(); | ||
212 | }) | 190 | }) |
191 | + ->default(0); | ||
192 | + | ||
193 | + $form->checkbox('components','组件') | ||
194 | +// ->when('every_poem', $this->buildCheckBoxOption('every_poem',$form)) | ||
195 | +// ->when('one_poem', $this->buildCheckBoxOption('one_poem',$form)) | ||
196 | +// ->when('weather', $this->buildCheckBoxOption('weather',$form)) | ||
197 | +// ->when('date', $this->buildCheckBoxOption('date',$form)) | ||
198 | +// ->when('feel', $this->buildCheckBoxOption('feel',$form)) | ||
213 | ->default(['one_poem','weather','date']) | 199 | ->default(['one_poem','weather','date']) |
214 | ->options([ | 200 | ->options([ |
215 | 'every_poem' => '每日一言组件', | 201 | 'every_poem' => '每日一言组件', |
... | @@ -217,8 +203,14 @@ class VideoTempController extends AdminController | ... | @@ -217,8 +203,14 @@ class VideoTempController extends AdminController |
217 | 'weather' => '天气组件', | 203 | 'weather' => '天气组件', |
218 | 'date' => '日期组件', | 204 | 'date' => '日期组件', |
219 | 'feel' => '临境有感组件', | 205 | 'feel' => '临境有感组件', |
220 | - ]); | 206 | + ]) |
207 | + ->customFormat(function ($v) { | ||
208 | + if (! $v) { | ||
209 | + return []; | ||
210 | + } | ||
221 | 211 | ||
212 | + return array_column($v, 'id'); | ||
213 | + });; | ||
222 | 214 | ||
223 | $form->hidden('state') | 215 | $form->hidden('state') |
224 | ->saving(function ($v) { | 216 | ->saving(function ($v) { |
... | @@ -226,15 +218,16 @@ class VideoTempController extends AdminController | ... | @@ -226,15 +218,16 @@ class VideoTempController extends AdminController |
226 | }); | 218 | }); |
227 | }); | 219 | }); |
228 | 220 | ||
229 | -// $form->block(4, function (Form\BlockForm $form) { | 221 | + $form->block(5, function (Form\BlockForm $form) { |
230 | -// $form->html(view('admin.form.phone')); | 222 | + $form->html(view('admin.form.phone')); |
231 | -// }); | 223 | + }); |
232 | 224 | ||
233 | $form->display('created_at'); | 225 | $form->display('created_at'); |
234 | $form->display('updated_at'); | 226 | $form->display('updated_at'); |
235 | }); | 227 | }); |
236 | } | 228 | } |
237 | 229 | ||
230 | + | ||
238 | public function store() | 231 | public function store() |
239 | { | 232 | { |
240 | $all = \request()->all(); | 233 | $all = \request()->all(); |
... | @@ -246,6 +239,7 @@ class VideoTempController extends AdminController | ... | @@ -246,6 +239,7 @@ class VideoTempController extends AdminController |
246 | 'state' => 1, | 239 | 'state' => 1, |
247 | ]); | 240 | ]); |
248 | foreach ($all['components'] as $component) { | 241 | foreach ($all['components'] as $component) { |
242 | + | ||
249 | if ($component !== null){ | 243 | if ($component !== null){ |
250 | Component::query()->create([ | 244 | Component::query()->create([ |
251 | 'temp_id' => $vide_temp->id, | 245 | 'temp_id' => $vide_temp->id, |
... | @@ -254,7 +248,9 @@ class VideoTempController extends AdminController | ... | @@ -254,7 +248,9 @@ class VideoTempController extends AdminController |
254 | 'font_size' => $all['font_size_' . $component], | 248 | 'font_size' => $all['font_size_' . $component], |
255 | 'text_color' => $all['text_color_' . $component], | 249 | 'text_color' => $all['text_color_' . $component], |
256 | 'text_bg_color' => $all['text_bg_color_' . $component], | 250 | 'text_bg_color' => $all['text_bg_color_' . $component], |
251 | + 'text_bg_box' => $all['text_bg_box_' . $component], | ||
257 | 'opacity' => $all['opacity_' . $component], | 252 | 'opacity' => $all['opacity_' . $component], |
253 | + 'fix_bounds' => $all['fix_bounds_' . $component], | ||
258 | ]); | 254 | ]); |
259 | } | 255 | } |
260 | } | 256 | } |
... | @@ -266,4 +262,40 @@ class VideoTempController extends AdminController | ... | @@ -266,4 +262,40 @@ class VideoTempController extends AdminController |
266 | 262 | ||
267 | return $this->form()->response()->refresh()->success(trans('admin.save_succeeded')); | 263 | return $this->form()->response()->refresh()->success(trans('admin.save_succeeded')); |
268 | } | 264 | } |
265 | + | ||
266 | + public function buildCheckBoxOption($prefix, Form\BlockForm $form) | ||
267 | + { | ||
268 | + return function ()use ($prefix, $form) { | ||
269 | + switch ($prefix) { | ||
270 | + case 'every_poem': | ||
271 | + $label = '每日一言位置'; | ||
272 | + break; | ||
273 | + case 'one_poem': | ||
274 | + $label = '一言位置'; | ||
275 | + break; | ||
276 | + case 'weather': | ||
277 | + $label = '天气位置'; | ||
278 | + break; | ||
279 | + case 'date': | ||
280 | + $label = '日期位置'; | ||
281 | + break; | ||
282 | + case 'feel': | ||
283 | + $label = '有感位置'; | ||
284 | + break; | ||
285 | + default: | ||
286 | + $label = '组件位置'; | ||
287 | + } | ||
288 | + $form->divider(); | ||
289 | + $form->select('pos_' . $prefix, $label)->options(VideoTemp::POSITION_OPTIONS); | ||
290 | + $form->number('text_bg_box_' . $prefix, '背景厚度')->default(0) | ||
291 | + ->addElementClass('text_bg_box_' . $prefix)->help('设置背景块边缘厚度(用于在背景块边缘用背景色填充一圈),默认为0'); | ||
292 | + $form->color('text_bg_color_' . $prefix, '背景色')->default('#5c6bc6')->addElementClass('text_bg_color_' . $prefix); | ||
293 | + $form->number('font_size_' . $prefix, '字号')->min(12); | ||
294 | + $form->color('text_color_' . $prefix, '字体颜色')->default('#f5f5f5')->addElementClass('text_color_' . $prefix); | ||
295 | + $form->number('opacity_' . $prefix, '透明度')->min(0)->max(100) | ||
296 | + ->addElementClass('opacity_' . $prefix)->default(100) | ||
297 | + ->help('范围为0-100,100表示不透明,0表示完全透明'); | ||
298 | + $form->switch('fix_bounds_' . $prefix, '避免剪切'); | ||
299 | + }; | ||
300 | + } | ||
269 | } | 301 | } | ... | ... |
... | @@ -33,6 +33,7 @@ class VideoTemp extends Model | ... | @@ -33,6 +33,7 @@ class VideoTemp extends Model |
33 | 33 | ||
34 | public function componentsTable() | 34 | public function componentsTable() |
35 | { | 35 | { |
36 | - return $this->hasMany('App\Models\Component','temp_id')->select(['id','temp_id','name','position','font_size']); | 36 | + return $this->hasMany('App\Models\Component', 'temp_id') |
37 | + ->select(['id', 'temp_id', 'name', 'position', 'font_size', 'text_color', 'text_bg_color', 'text_bg_box','opacity','fix_bounds']); | ||
37 | } | 38 | } |
38 | } | 39 | } | ... | ... |
1 | +<?php | ||
2 | + | ||
3 | +use Illuminate\Database\Migrations\Migration; | ||
4 | +use Illuminate\Database\Schema\Blueprint; | ||
5 | +use Illuminate\Support\Facades\Schema; | ||
6 | + | ||
7 | +class AlterComponentsTable extends Migration | ||
8 | +{ | ||
9 | + /** | ||
10 | + * Run the migrations. | ||
11 | + * | ||
12 | + * @return void | ||
13 | + */ | ||
14 | + public function up() | ||
15 | + { | ||
16 | + | ||
17 | + Schema::table('components', function (Blueprint $table) { | ||
18 | + $table->string('text_bg_box')->after('text_bg_color')->comment('背景厚度'); | ||
19 | + $table->string('fix_bounds')->after('opacity')->comment('超出避免剪切'); | ||
20 | + }); | ||
21 | + | ||
22 | + Schema::table('video_temp', function (Blueprint $table) { | ||
23 | + $table->unsignedTinyInteger('bg_music')->after('title')->comment('0=没有,1=有'); | ||
24 | + $table->string('bgm_url')->nullable()->after('bg_music')->comment('背景音乐地址'); | ||
25 | + }); | ||
26 | + } | ||
27 | + | ||
28 | + /** | ||
29 | + * Reverse the migrations. | ||
30 | + * | ||
31 | + * @return void | ||
32 | + */ | ||
33 | + public function down() | ||
34 | + { | ||
35 | + // | ||
36 | + Schema::dropColumns('components', ['text_bg_box', 'fix_bounds']); | ||
37 | + Schema::dropColumns('video_temp', ['bg_music', 'bgm_url']); | ||
38 | + } | ||
39 | +} |
1 | <style> | 1 | <style> |
2 | .box-card { | 2 | .box-card { |
3 | - width: 380px; | 3 | + width: 402px; |
4 | border: 1px solid rgb(220, 223, 230); | 4 | border: 1px solid rgb(220, 223, 230); |
5 | border-radius: 40px; | 5 | border-radius: 40px; |
6 | - margin-right: 24px; | ||
7 | padding: 37px 20px; | 6 | padding: 37px 20px; |
8 | - min-height: 779px; | 7 | + min-height: 795px; |
9 | } | 8 | } |
10 | 9 | ||
11 | .phone-content { | 10 | .phone-content { |
12 | border: 1px solid rgb(220, 223, 230); | 11 | border: 1px solid rgb(220, 223, 230); |
13 | - height: 705px; | 12 | + width: 362px; |
13 | + height: 720px; | ||
14 | overflow: hidden; | 14 | overflow: hidden; |
15 | position: relative; | 15 | position: relative; |
16 | background: rgb(245, 245, 245); | 16 | background: rgb(245, 245, 245); |
... | @@ -56,16 +56,16 @@ | ... | @@ -56,16 +56,16 @@ |
56 | } | 56 | } |
57 | 57 | ||
58 | .bg-box { | 58 | .bg-box { |
59 | - height: 625px; | 59 | + height: 640px; |
60 | } | 60 | } |
61 | </style> | 61 | </style> |
62 | <div class="box-card"> | 62 | <div class="box-card"> |
63 | <div class="phone-content"> | 63 | <div class="phone-content"> |
64 | <div class="text">模板</div> | 64 | <div class="text">模板</div> |
65 | - <img src="{{asset('storage/image/mobile-head.png')}}" alt="" width="338" height="80"> | 65 | + <img src="{{asset('storage/image/mobile-head.png')}}" alt="" width="360" height="80"> |
66 | <div class="bg-box"> | 66 | <div class="bg-box"> |
67 | - <img width="338" height="625" class="bg_img" style="display: none"> | 67 | + <img width="360" height="625" class="bg_img" style="display: none"> |
68 | - <video width="338" height="625" id="bg_video" style="display: none"></video> | 68 | + <video width="360" height="625" id="bg_video" style="display: none"></video> |
69 | <audio id="bg_audio" ></audio> | 69 | <audio id="bg_audio" ></audio> |
70 | </div> | 70 | </div> |
71 | <div class="poem-block"> | 71 | <div class="poem-block"> | ... | ... |
-
Please register or login to post a comment