OnePoem / OnePoem-Server

Go to a project
Toggle navigation Toggle navigation pinning
李帅
8e0e15d0 1 parent cbcdd6c1

1.新增字体管理。

Inline Side-by-side
Showing 4 changed files with 166 additions and 94 deletions
......@@ -6,10 +6,12 @@ use App\Models\VideoTemp;
use App\Models\Component;
use Dcat\Admin\Form;
use Dcat\Admin\Grid;
use Dcat\Admin\Layout\Content;
use Dcat\Admin\Show;
use Dcat\Admin\Http\Controllers\AdminController;
use Dcat\Admin\Widgets\Table;
use Illuminate\Support\Facades\DB;
use Illuminate\Support\Str;
class VideoTempController extends AdminController
{
......@@ -29,10 +31,20 @@ class VideoTempController extends AdminController
$grid->column('id',__('ID'))->sortable();
$grid->column('title');
$grid->column('bg_music')->bool();
$grid->column('bgm_url')->display(function ($url){
if ($this->bg_music == 0)
return '暂无';
elseif (Str::of($url)->contains('.mp3'))
return "<a target='_blank' href='". $url ."'>查看</a>";
else
return "<a target='_blank' href='". $url ."'>下载后查看</a>";
});
$grid->column('','组件信息')
->display('展开')
->expand(function (){
$th = ['id','模板id','名称','位置','字号','字体颜色','背景色','透明度','创建时间','修改时间'];
$th = ['id','模板id','名称','位置','字号','字体颜色','背景色','背景厚度','透明度','避免剪切','创建时间','修改时间'];
return Table::make($th, $this->components->toArray())->withBorder();
});
// $grid->column('type');
......@@ -85,11 +97,11 @@ class VideoTempController extends AdminController
*
* @return Form
*/
protected function form2()
protected function form()
{
return Form::make(new VideoTemp(), function (Form $form) {
$form->display('id');
$form->block(8, function (Form\BlockForm $form) {
$form->block(7, function (Form\BlockForm $form) {
// 设置标题
$form->title('基本设置');
// 显示底部提交按钮
......@@ -98,24 +110,7 @@ class VideoTempController extends AdminController
$form->width(8, 3);
$form->text('title');
$form->radio('type')->addElementClass('type')
->options([1=>'图文音频',2=>'视频'])->default(1);
$form->radio('bg_type')
->options([1=>'视频', 2=>'图片'])
->when(1,function (Form\BlockForm $form){
$form->file('bg_url')
->accept('mp4')
->autoUpload()
->uniqueName()
->addElementClass('bg_video_url');
})
->when(2,function (Form\BlockForm $form){
$form->multipleImage('bg_url')
->limit(5)
->uniqueName()
->addElementClass('bg_img_url');
})
->default(1);
$form->radio('bg_music')
->options(['无', '有'])
->when(1,function (Form\BlockForm $form){
......@@ -126,22 +121,29 @@ class VideoTempController extends AdminController
->addElementClass('bgm_url');
})
->default(0);
$form->number('top');
$form->number('left');
$form->number('font_size');
$form->color('text_color')->default('#f5f5f5')
->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->checkbox('components','组件')
->when('every_poem', $this->buildCheckBoxOption('every_poem',$form))
->when('one_poem', $this->buildCheckBoxOption('one_poem',$form))
->when('weather', $this->buildCheckBoxOption('weather',$form))
->when('date', $this->buildCheckBoxOption('date',$form))
->when('feel', $this->buildCheckBoxOption('feel',$form))
->default(['one_poem','weather','date'])
->options([
'every_poem' => '每日一言组件',
'one_poem' => '一言组件',
'weather' => '天气组件',
'date' => '日期组件',
'feel' => '临境有感组件',
]);
$form->hidden('state')
->saving(function ($v) {
return $v;
});
});
$form->block(4, function (Form\BlockForm $form) {
$form->block(5, function (Form\BlockForm $form) {
$form->html(view('admin.form.phone'));
});
......@@ -150,16 +152,24 @@ class VideoTempController extends AdminController
});
}
/**
* Make a form builder.
*
* @return Form
*/
protected function form()
public function edit($id, Content $content)
{
return Form::make(new VideoTemp(), function (Form $form) {
return $content
->translation($this->translation())
->title($this->title())
->description($this->description()['edit'] ?? trans('admin.edit'))
->body($this->form2()->edit($id));
}
public function form2()
{
return Form::make(VideoTemp::with('components'), function (Form $form) {
// dd($form->model()->toArray());
$form->display('id');
$form->block(8, function (Form\BlockForm $form) {
$form->block(7, function (Form\BlockForm $form) {
// 设置标题
$form->title('基本设置');
// 显示底部提交按钮
......@@ -169,47 +179,23 @@ class VideoTempController extends AdminController
$form->text('title');
$form->checkbox('components','组件')
->when('every_poem', function (Form\BlockForm $form) {
$form->select('pos_every_poem', '每日位置')->options(VideoTemp::POSITION_OPTIONS);
$form->number('font_size_every_poem','容器宽度')->default(6)->help('范围为1-9，默认容器外边距为1/20');
$form->text('text_color_every_poem','字体颜色')->default('white');
$form->text('text_bg_color_every_poem','背景颜色');
$form->rate('opacity_every_poem','透明度')->default(50)->help('范围为0-100，100表示不透明，0表示完全透明');
$form->divider();
})
->when('one_poem', function (Form\BlockForm $form) {
$form->select('pos_one_poem', '一言位置')->options(VideoTemp::POSITION_OPTIONS);
$form->number('font_size_one_poem','容器宽度')->default(6)->help('范围为1-9，默认容器外边距为1/20');
$form->text('text_color_one_poem','字体颜色')->default('white');
$form->text('text_bg_color_one_poem','背景颜色');
$form->rate('opacity_one_poem','透明度')->default(50)->help('范围为0-100，100表示不透明，0表示完全透明');
$form->divider();
})
->when('weather', function (Form\BlockForm $form) {
$form->select('pos_weather', '天气位置')->options(VideoTemp::POSITION_OPTIONS);
$form->number('font_size_weather','容器宽度')->default(6)->help('范围为1-9，默认容器外边距为1/20');
$form->text('text_color_weather','字体颜色')->default('white');
$form->text('text_bg_color_weather','背景颜色');
$form->rate('opacity_weather','透明度')->default(50)->help('范围为0-100，100表示不透明，0表示完全透明');
$form->divider();
})
->when('date', function (Form\BlockForm $form) {
$form->select('pos_date', '日期位置')->options(VideoTemp::POSITION_OPTIONS);
$form->number('font_size_date','容器宽度')->default(6)->help('范围为1-9，默认容器外边距为1/20');
$form->text('text_color_date','字体颜色')->default('white');
$form->text('text_bg_color_date','背景颜色');
$form->rate('opacity_date','透明度')->default(50)->help('范围为0-100，100表示不透明，0表示完全透明');
$form->divider();
})
->when('feel', function (Form\BlockForm $form) {
$form->select('pos_feel', '有感位置')->options(VideoTemp::POSITION_OPTIONS);
$form->number('font_size_feel','容器宽度')->default(6)->help('范围为1-9，默认容器外边距为1/20');
$form->text('text_color_feel','字体颜色')->default('white');
$form->text('text_bg_color_feel','背景颜色');
$form->rate('opacity_feel','透明度')->default(50)->help('范围为0-100，100表示不透明，0表示完全透明');
$form->divider();
$form->radio('bg_music')
->options(['无', '有'])
->when(1,function (Form\BlockForm $form){
$form->file('bgm_url')
->accept('mp3,aac,wav')
->autoUpload()
->uniqueName()
->addElementClass('bgm_url');
})
->default(0);
$form->checkbox('components','组件')
// ->when('every_poem', $this->buildCheckBoxOption('every_poem',$form))
// ->when('one_poem', $this->buildCheckBoxOption('one_poem',$form))
// ->when('weather', $this->buildCheckBoxOption('weather',$form))
// ->when('date', $this->buildCheckBoxOption('date',$form))
// ->when('feel', $this->buildCheckBoxOption('feel',$form))
->default(['one_poem','weather','date'])
->options([
'every_poem' => '每日一言组件',
......@@ -217,8 +203,14 @@ class VideoTempController extends AdminController
'weather' => '天气组件',
'date' => '日期组件',
'feel' => '临境有感组件',
]);
])
->customFormat(function ($v) {
if (! $v) {
return [];
}
return array_column($v, 'id');
});;
$form->hidden('state')
->saving(function ($v) {
......@@ -226,15 +218,16 @@ class VideoTempController extends AdminController
});
});
// $form->block(4, function (Form\BlockForm $form) {
// $form->html(view('admin.form.phone'));
// });
$form->block(5, function (Form\BlockForm $form) {
$form->html(view('admin.form.phone'));
});
$form->display('created_at');
$form->display('updated_at');
});
}
public function store()
{
$all = \request()->all();
......@@ -246,6 +239,7 @@ class VideoTempController extends AdminController
'state' => 1,
]);
foreach ($all['components'] as $component) {
if ($component !== null){
Component::query()->create([
'temp_id' => $vide_temp->id,
......@@ -254,7 +248,9 @@ class VideoTempController extends AdminController
'font_size' => $all['font_size_' . $component],
'text_color' => $all['text_color_' . $component],
'text_bg_color' => $all['text_bg_color_' . $component],
'text_bg_box' => $all['text_bg_box_' . $component],
'opacity' => $all['opacity_' . $component],
'fix_bounds' => $all['fix_bounds_' . $component],
]);
}
}
......@@ -266,4 +262,40 @@ class VideoTempController extends AdminController
return $this->form()->response()->refresh()->success(trans('admin.save_succeeded'));
}
public function buildCheckBoxOption($prefix, Form\BlockForm $form)
{
return function ()use ($prefix, $form) {
switch ($prefix) {
case 'every_poem':
$label = '每日一言位置';
break;
case 'one_poem':
$label = '一言位置';
break;
case 'weather':
$label = '天气位置';
break;
case 'date':
$label = '日期位置';
break;
case 'feel':
$label = '有感位置';
break;
default:
$label = '组件位置';
}
$form->divider();
$form->select('pos_' . $prefix, $label)->options(VideoTemp::POSITION_OPTIONS);
$form->number('text_bg_box_' . $prefix, '背景厚度')->default(0)
->addElementClass('text_bg_box_' . $prefix)->help('设置背景块边缘厚度（用于在背景块边缘用背景色填充一圈),默认为0');
$form->color('text_bg_color_' . $prefix, '背景色')->default('#5c6bc6')->addElementClass('text_bg_color_' . $prefix);
$form->number('font_size_' . $prefix, '字号')->min(12);
$form->color('text_color_' . $prefix, '字体颜色')->default('#f5f5f5')->addElementClass('text_color_' . $prefix);
$form->number('opacity_' . $prefix, '透明度')->min(0)->max(100)
->addElementClass('opacity_' . $prefix)->default(100)
->help('范围为0-100，100表示不透明，0表示完全透明');
$form->switch('fix_bounds_' . $prefix, '避免剪切');
};
}
}
......
......@@ -33,6 +33,7 @@ class VideoTemp extends Model
public function componentsTable()
{
return $this->hasMany('App\Models\Component','temp_id')->select(['id','temp_id','name','position','font_size']);
return $this->hasMany('App\Models\Component', 'temp_id')
->select(['id', 'temp_id', 'name', 'position', 'font_size', 'text_color', 'text_bg_color', 'text_bg_box','opacity','fix_bounds']);
}
}
......
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
class AlterComponentsTable extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::table('components', function (Blueprint $table) {
$table->string('text_bg_box')->after('text_bg_color')->comment('背景厚度');
$table->string('fix_bounds')->after('opacity')->comment('超出避免剪切');
});
Schema::table('video_temp', function (Blueprint $table) {
$table->unsignedTinyInteger('bg_music')->after('title')->comment('0=没有,1=有');
$table->string('bgm_url')->nullable()->after('bg_music')->comment('背景音乐地址');
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
//
Schema::dropColumns('components', ['text_bg_box', 'fix_bounds']);
Schema::dropColumns('video_temp', ['bg_music', 'bgm_url']);
}
}
<style>
.box-card {
width: 380px;
width: 402px;
border: 1px solid rgb(220, 223, 230);
border-radius: 40px;
margin-right: 24px;
padding: 37px 20px;
min-height: 779px;
min-height: 795px;
}
.phone-content {
border: 1px solid rgb(220, 223, 230);
height: 705px;
width: 362px;
height: 720px;
overflow: hidden;
position: relative;
background: rgb(245, 245, 245);
......@@ -56,16 +56,16 @@
}
.bg-box {
height: 625px;
height: 640px;
}
</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">
<img src="{{asset('storage/image/mobile-head.png')}}" alt="" width="360" 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>
<img width="360" height="625" class="bg_img" style="display: none">
<video width="360" height="625" id="bg_video" style="display: none"></video>
<audio id="bg_audio" ></audio>
</div>
<div class="poem-block">
......