小程序实训bannner

app/assets/javascripts/admins/webapp_banners/index.js

@@ -0,0 +1,25 @@
+$(document).on('turbolinks:load', function() {
+    if ($('.weapp-banner-setting-container').length > 0) {
+        var $form = $('#course_form');
+
+        $('.course.banner-item-bottom').on("change", 'input[type="file"]', function() {
+            var $fileInput = $(this);
+            var file = this.files[0];
+            var imageType = /image.*/;
+            if (file && file.type.match(imageType)) {
+                $form.ajaxSubmit()
+            }
+        });
+
+        var $shixunform = $('#shixun_form');
+
+        $('.shixun.banner-item-bottom').on("change", 'input[type="file"]', function() {
+            var $fileInput = $(this);
+            var file = this.files[0];
+            var imageType = /image.*/;
+            if (file && file.type.match(imageType)) {
+                $shixunform.ajaxSubmit()
+            }
+        });
+    }
+})

app/assets/stylesheets/admins/laboratories.scss

@@ -1,171 +1,154 @@
 .admins-laboratories-index-page {
-  .laboratory-list-table {
+    .laboratory-list-table {
-    .member-container {
+        .member-container {
-      .laboratory-user {
+            .laboratory-user {
-        display: flex;
+                display: flex;
-        justify-content: center;
+                justify-content: center;
-        flex-wrap: wrap;
+                flex-wrap: wrap;
-
+                .laboratory-user-item {
-        .laboratory-user-item {
+                    display: flex;
-          display: flex;
+                    align-items: center;
-          align-items: center;
+                    height: 22px;
-          height: 22px;
+                    line-height: 22px;
-          line-height: 22px;
+                    padding: 2px 5px;
-          padding: 2px 5px;
+                    margin: 2px 2px;
-          margin: 2px 2px;
+                    border: 1px solid #91D5FF;
-          border: 1px solid #91D5FF;
+                    background-color: #E6F7FF;
-          background-color: #E6F7FF;
+                    color: #91D5FF;
-          color: #91D5FF;
+                    border-radius: 4px;
-          border-radius: 4px;
+                }
+            }
         }
-      }
     }
-  }
 }
-.admins-laboratory-settings-show-page, .admins-laboratory-settings-update-page {
-  .edit-laboratory-setting-container {
-    .logo-item {
-      display: flex;
-
-      &-img {
-        display: block;
-        width: 80px;
-        height: 80px;
-        background: #f0f0f0;
-      }
-
-      &-upload {
-        cursor: pointer;
-        position: absolute;
-        top: 0;
-        width: 80px;
-        height: 80px;
-        background: #F5F5F5;
-        border: 1px solid #E5E5E5;
-
-        &::before {
-          content: '';
-          position: absolute;
-          top: 27px;
-          left: 39px;
-          width: 2px;
-          height: 26px;
-          background: #E5E5E5;
-        }
-
-        &::after {
-          content: '';
-          position: absolute;
-          top: 39px;
-          left: 27px;
-          width: 26px;
-          height: 2px;
-          background: #E5E5E5;
-        }
-      }
-
-      &-left {
-        position: relative;
-        width: 80px;
-        height: 80px;
 
-        &.has-img {
+.admins-laboratory-settings-show-page,
-          .logo-item-upload {
+.admins-laboratory-settings-update-page,
-            display: none;
+.weapp-banner-setting-container {
-          }
+    .edit-laboratory-setting-container {
-
+        .logo-item {
-          &:hover {
+            display: flex;
-            .logo-item-upload {
+            &-img {
-              display: block;
+                display: block;
-              background: rgba(145, 145, 145, 0.8);
+                width: 80px;
+                height: 80px;
+                background: #f0f0f0;
+            }
+            &-upload {
+                cursor: pointer;
+                position: absolute;
+                top: 0;
+                width: 80px;
+                height: 80px;
+                background: #F5F5F5;
+                border: 1px solid #E5E5E5;
+                &::before {
+                    content: '';
+                    position: absolute;
+                    top: 27px;
+                    left: 39px;
+                    width: 2px;
+                    height: 26px;
+                    background: #E5E5E5;
+                }
+                &::after {
+                    content: '';
+                    position: absolute;
+                    top: 39px;
+                    left: 27px;
+                    width: 26px;
+                    height: 2px;
+                    background: #E5E5E5;
+                }
+            }
+            &-left {
+                position: relative;
+                width: 80px;
+                height: 80px;
+                &.has-img {
+                    .logo-item-upload {
+                        display: none;
+                    }
+                    &:hover {
+                        .logo-item-upload {
+                            display: block;
+                            background: rgba(145, 145, 145, 0.8);
+                        }
+                    }
+                }
+            }
+            &-right {
+                display: flex;
+                flex-direction: column;
+                justify-content: space-between;
+                color: #777777;
+                font-size: 12px;
+            }
+            &-title {
+                color: #23272B;
+                font-size: 14px;
             }
-          }
-        }
-      }
-
-      &-right {
-        display: flex;
-        flex-direction: column;
-        justify-content: space-between;
-        color: #777777;
-        font-size: 12px;
-      }
-
-      &-title {
-        color: #23272B;
-        font-size: 14px;
-      }
-    }
-
-    .banner-item {
-      margin-bottom: 15px;
-      display: flex;
-      flex-direction: column;
-
-      &-img {
-        display: block;
-        width: 300px;
-        height: 80px;
-        background: #f0f0f0;
-      }
-
-      &-upload {
-        cursor: pointer;
-        position: absolute;
-        top: 0;
-        width: 300px;
-        height: 80px;
-        background: #F5F5F5;
-        border: 1px solid #E5E5E5;
-
-        &::before {
-          content: '';
-          position: absolute;
-          top: 27px;
-          left: 149px;
-          width: 2px;
-          height: 26px;
-          background: #E5E5E5;
-        }
-
-        &::after {
-          content: '';
-          position: absolute;
-          top: 39px;
-          left: 137px;
-          width: 26px;
-          height: 2px;
-          background: #E5E5E5;
         }
-      }
+        .banner-item {
-
+            margin-bottom: 15px;
-      &-top {
+            display: flex;
-        margin-bottom: 10px;
+            flex-direction: column;
-      }
+            &-img {
-
+                display: block;
-      &-bottom {
+                width: 300px;
-        position: relative;
+                height: 80px;
-        width: 300px;
+                background: #f0f0f0;
-        height: 80px;
+            }
-
+            &-upload {
-        &.has-img {
+                cursor: pointer;
-          .banner-item-upload {
+                position: absolute;
-            display: none;
+                top: 0;
-          }
+                width: 300px;
-
+                height: 80px;
-          &:hover {
+                background: #F5F5F5;
-            .banner-item-upload {
+                border: 1px solid #E5E5E5;
-              display: block;
+                &::before {
-              background: rgba(145, 145, 145, 0.8);
+                    content: '';
+                    position: absolute;
+                    top: 27px;
+                    left: 149px;
+                    width: 2px;
+                    height: 26px;
+                    background: #E5E5E5;
+                }
+                &::after {
+                    content: '';
+                    position: absolute;
+                    top: 39px;
+                    left: 137px;
+                    width: 26px;
+                    height: 2px;
+                    background: #E5E5E5;
+                }
+            }
+            &-top {
+                margin-bottom: 10px;
+            }
+            &-bottom {
+                position: relative;
+                width: 300px;
+                height: 80px;
+                &.has-img {
+                    .banner-item-upload {
+                        display: none;
+                    }
+                    &:hover {
+                        .banner-item-upload {
+                            display: block;
+                            background: rgba(145, 145, 145, 0.8);
+                        }
+                    }
+                }
+            }
+            &-title {
+                color: #23272B;
+                font-size: 14px;
             }
-          }
         }
-      }
-
-      &-title {
-        color: #23272B;
-        font-size: 14px;
-      }
     }
-  }
 }

app/controllers/admins/weapp_banners_controller.rb

@@ -1,80 +1,52 @@
 class Admins::WeappBannersController < Admins::BaseController
-  before_action :convert_file!, only: [:create]
 
   def index
-
+    @shixun = WeappSettings::ShixunBanner.first
+    @course = WeappSettings::CourseBanner.first
   end
 
   def create
-    position = WeappSettings::Carousel.count + 1
-
     ActiveRecord::Base.transaction do
-      carousel = WeappSettings::Carousel.create!(create_params.merge(position: position))
+      old_carouse = WeappSettings::CourseBanner.first
 
-      file_path = Util::FileManage.source_disk_filename(carousel)
+      if old_carouse.present?
-      File.delete(file_path) if File.exist?(file_path) # 删除之前的文件
+        old_carouse.destroy!
-      Util.write_file(@file, file_path)
+        file_path = Util::FileManage.source_disk_filename(old_carouse)
-    end
+        File.delete(file_path) if File.exist?(file_path) # 删除之前的文件
+      end
 
-    flash[:success] = '保存成功'
+      @course = WeappSettings::CourseBanner.create!
-    redirect_to admins_weapp_carousels_path
+      save_image_file(params[:course_banner], @course)
+    end
   end
 
-  def update
-    current_carousel.update!(update_params)
-    render_ok
-  end
 
-  def destroy
+  def shixun_banner
     ActiveRecord::Base.transaction do
-      current_carousel.destroy!
+      old_shixun = WeappSettings::ShixunBanner.first
-      # 前移
+
-      WeappSettings::Carousel.where('position > ?', current_carousel.position)
+      if old_shixun.present?
-        .update_all('position = position - 1')
+        old_shixun.destroy!
+        file_path = Util::FileManage.source_disk_filename(old_shixun)
+        File.delete(file_path) if File.exist?(file_path) # 删除之前的文件
+      end
 
-      file_path = Util::FileManage.source_disk_filename(current_carousel)
+      @shixun = WeappSettings::ShixunBanner.create!
-      File.delete(file_path) if File.exist?(file_path)
+      save_image_file(params[:shixun_banner], @shixun)
     end
-    render_delete_success
   end
 
-  def drag
-    move  = WeappSettings::Carousel.find_by(id: params[:move_id])
-    after = WeappSettings::Carousel.find_by(id: params[:after_id])
 
-    Admins::DragWeappCarouselService.call(move, after)
-    render_ok
-  rescue ApplicationService::Error => e
-    render_error(e.message)
-  end
 
-  private
 
-  def current_carousel
+  private
-    @_current_carousel ||= WeappSettings::Carousel.find(params[:id])
-  end
 
-  def create_params
+  def save_image_file(file, model)
-    params.require(:weapp_settings_carousel).permit(:link)
+    return unless file.present? && file.is_a?(ActionDispatch::Http::UploadedFile)
-  end
 
-  def update_params
+    file_path = Util::FileManage.source_disk_filename(model)
-    params.permit(:link, :online)
+    File.delete(file_path) if File.exist?(file_path) # 删除之前的文件
+    Util.write_file(file, file_path)
   end
 
-  def convert_file!
-    max_size = 10 * 1024 * 1024 # 10M
-    file = params.dig('weapp_settings_carousel', 'image')
-    if file.class == ActionDispatch::Http::UploadedFile
-      @file = file
-      render_error('请上传文件') if @file.size.zero?
-      render_error('文件大小超过限制') if @file.size > max_size
-    else
-      file = file.to_s.strip
-      return render_error('请上传正确的图片') if file.blank?
-      @file = Util.convert_base64_image(file, max_size: max_size)
-    end
-  rescue Base64ImageConverter::Error => ex
-    render_error(ex.message)
-  end
 end

app/controllers/weapps/banners_controller.rb

@@ -0,0 +1,12 @@
+class Weapps::BannersController < Weapps::BaseController
+
+  def index
+    shixun = WeappSettings::ShixunBanner.first
+    course = WeappSettings::CourseBanner.first
+
+    render json: {
+      shixun_img: shixun ? Util::FileManage.source_disk_file_url(shixun) : '',
+      course_img: course ? Util::FileManage.source_disk_file_url(course) : ''
+    }
+  end
+end

app/models/weapp_settings/course_banner.rb

@@ -0,0 +1,3 @@
+class WeappSettings::CourseBanner < WeappSetting
+  default_scope { order(position: :asc) }
+end

app/models/weapp_settings/shixun_banner.rb

@@ -0,0 +1,3 @@
+class WeappSettings::ShixunBanner < WeappSetting
+  default_scope { order(position: :asc) }
+end

app/views/admins/weapp_banners/create.js.erb

@@ -0,0 +1 @@
+$("#course_img")[0].innerHTML = "<%= escape_javascript(image_tag Util::FileManage.source_disk_file_url(@course), class: 'banner-item-img course-banner-img') %>"

app/views/admins/weapp_banners/index.html.erb

@@ -3,5 +3,39 @@
 <% end %>
 
 <div class="box weapp-banner-setting-container">
+  <div class="form-group px-2 setting-item edit-laboratory-setting-container">
   
+      <div class="pl-0 py-3 row setting-item-body">
+        <%= form_with(url: '/admins/weapp_banners',  html: { id: 'course_form', enctype: 'multipart/form-data' }) do |f| %>
+        <div class="col-12 col-md-4 banner-item">
+          <div class="banner-item-top">实践课程</div>
+          <div class="course banner-item-bottom <%= @course ? 'has-img' : '' %>">
+            <div id="course_img">
+              <% if @course %>
+                <img class="banner-item-img course-banner-img" src="<%= Util::FileManage.exists?(@course) ? Util::FileManage.source_disk_file_url(@course) : '' %>"/>
+               <% end %>
+            </div>
+            <%= file_field_tag(:course_banner, accept: 'image/*', style: 'display: none', value: '') %>
+            <label for="course_banner" class="banner-item-upload" data-toggle="tooltip" data-title="选择图片"></label>
+          </div>
+        </div>
+       <% end %>
+       
+
+      <%= form_with(url: '/admins/weapp_banners/shixun_banner',  html: { id: 'shixun_form', enctype: 'multipart/form-data' }) do |f| %>
+        <div class="col-12 col-md-4 banner-item">
+          <div class="banner-item-top">实训项目</div>
+          <div class="shixun banner-item-bottom <%= @shixun ? 'has-img' : '' %>">
+           <div id="shixun_img">
+             <% if @shixun %>
+               <img class="banner-item-img shixun-banner-img" src="<%= Util::FileManage.exists?(@shixun) ? Util::FileManage.source_disk_file_url(@shixun) : '' %>"/>
+              <% end %>
+            </div>
+            <%= file_field_tag(:shixun_banner, accept: 'image/*', style: 'display: none', value: '') %>
+            <label for="shixun_banner" class="banner-item-upload" data-toggle="tooltip" data-title="选择图片"></label>
+          </div>
+        </div>
+      <% end %>
+      </div>
+  </div>
 </div>

app/views/admins/weapp_banners/shixun_banner.js.erb

@@ -0,0 +1 @@
+$("#shixun_img")[0].innerHTML = "<%= escape_javascript(image_tag Util::FileManage.source_disk_file_url(@shixun), class: 'banner-item-img course-banner-img') %>"

config/routes.rb

@@ -1028,6 +1028,8 @@ Rails.application.routes.draw do
       resource :check_account, only: [:create]
       resource :unbind_accounts, only: [:show, :destroy]
 
+      resources :banners, only: [:index]
+
       resources :searchs, only: [:index]
       resources :course_stickies, only: [:create] do
         post :cancel_sticky, on: :collection
@@ -1331,7 +1333,11 @@ Rails.application.routes.draw do
     resources :weapp_adverts, only: [:index, :create, :update, :destroy] do
       post :drag, on: :collection
     end
-    resources :weapp_banners, only: [:index, :create, :update, :destroy]
+    resources :weapp_banners, only: [:index, :create] do
+      collection do
+        post :shixun_banner
+      end
+    end
 
 
     resources :subject_settings, only: [:index, :update] do