提交了课程的新增图标 背景色 和重点

package.json

@@ -17,6 +17,7 @@
     "benz-amr-recorder": "^1.1.3",
     "browser-md5-file": "^1.0.0",
     "co": "^4.6.0",
+    "colorthief": "^2.3.2",
     "core-js": "^3.6.5",
     "cos-js-sdk-v5": "^1.1.5",
     "echarts": "^5.1.2",

src/api/course/index.js

@@ -620,4 +620,15 @@ export function SetImportCourse(data) {
     method: 'post',
     data
   })
+}
+/**
+ * 保存选择 以导入
+ * @param {JSON对象} data 
+ */
+ export function getCourseEmphasisEnumList(data) {
+  return request({
+    url: '/course/GetCourseEmphasisEnumList',
+    method: 'post',
+    data
+  })
 }
\ No newline at end of file

src/components/course/course-form.vue

@@ -20,7 +20,7 @@
             <q-uploader :style="{ backgroundImage: 'url(' + objOption.CoverImg + ')' }"
               style="width: auto; height: 139px" flat hide-upload-btn max-files="1" label="课程封面" accept=".jpg, image/*"
               :factory="uploadFile" auto-upload>
-            </q-uploader>
+            </q-uploader> 
           </div>
           <div class="col-6 q-pr-lg q-pb-lg">
             <q-input v-model="objOption.CourseFeature" filled type="textarea" placeholder="课程特色" />
@@ -104,6 +104,35 @@
               map-options />
           </div>
         </div>
+        <div class="row wrap">
+          <div class="col-6">
+            <q-select filled stack-label option-value="Id"  option-label="Name" v-model="CourseEmphasis" multiple use-chips
+              ref="CourseEmphasis" :options="keynoteList" label="课程重点" class="col-6 q-pr-lg q-pb-lg" emit-value
+              map-options />
+          </div>
+          <div class="col-6 q-pb-lg q-pr-lg">
+            <q-uploader :style="{ backgroundImage: 'url(' + objOption.B2BIcon + ')' }"
+              style="width: auto; height: 139px" flat hide-upload-btn max-files="1" label="图标" accept=".jpg, image/*"
+              :factory="uploadFile2" auto-upload>
+            </q-uploader>
+             <q-input
+                filled
+                label="背景颜色"
+                v-model="objOption.B2BBackground"
+                :rules="['anyColor']"
+                class="my-input"
+              >
+                <template v-slot:append>
+                  <q-icon name="colorize" class="cursor-pointer">
+                    <q-popup-proxy transition-show="scale" transition-hide="scale">
+                      <q-color v-model="objOption.B2BBackground" />
+                    </q-popup-proxy>
+                  </q-icon>
+                </template>
+              </q-input>
+              <img id="background" :src="objOption.B2BIcon" height="100" width="100" crossorigin="anonymous" style="display:none"/>
+          </div>
+        </div>
         <div class="text-caption q-my-md q-px-xs text-grey-6">课程介绍</div>
         <ext-editor :defaultMsg="objOption.CourseIntro" classStr="col-12" @getEditValue="getEditValue"></ext-editor>
         <div class="row wrap">
@@ -138,6 +167,7 @@
 </template>
 
 <script>
+  import ColorThief from "colorthief";
   import {
     queryCourseCategoryTree,
     saveCourseInfo,
@@ -145,6 +175,7 @@
     querySaleplatList,
     getCourseRate,
     getCourseSubject,
+    getCourseEmphasisEnumList
   } from "../../api/course/index";
   import {
     getTeacherDropDownList
@@ -190,7 +221,11 @@
           CategoryList: [],
           CourseRate: "", //课程等级
           CourseSubject: "", //课程科目
+          B2BIcon:'',//图标
+          B2BBackground:'',//背景
+          CourseEmphasis:[],//课程重点   多选  英文逗号分隔
         },
+        CourseEmphasis:[],//数据临时存放
         optionTitle: "",
         defaultArray: [],
         ladderPriceList: [], //阶梯定价数组
@@ -206,6 +241,7 @@
         modifyClassifyList: [], //修改时返回的分类列表
         courseLevelList: [], //课程等级列表
         courseSubjectList: [], //课程科目列表
+        keynoteList:[],//重点枚举列表
       };
     },
     created() {
@@ -213,6 +249,7 @@
       this.getSaleplat();
       this.getGoodsClassify();
       this.getCourseRateList();
+      this.getCourseEmphasisList();//获取课程重点枚举列表
     },
     computed: mapState({
       isHaveCourseHoursEdit(state) {
@@ -265,6 +302,16 @@
           }
         })
       },
+      getCourseEmphasisList(){
+        getCourseEmphasisEnumList({}).then((res) => {
+          if (res.Code == 1) {
+            this.keynoteList = res.Data;
+            this.keynoteList.map((x)=>{
+                this.CourseEmphasis.push(x.Id)
+            })
+          }
+        });
+      },
       //获取教师下拉
       GetTeacherList() {
         getTeacherDropDownList({}).then((res) => {
@@ -297,6 +344,37 @@
           }
         });
       },
+      uploadFile2(files){
+         UploadSelfFile("course", files[0], (res) => {
+          if (res.Code == 1) {
+            this.objOption.B2BIcon = res.FileUrl;
+            this.ImgColor();
+          }
+        });
+      },
+      ImgColor() {//获取图标上传的主色
+           let domImg = document.querySelector('#background');
+              let colorthief = new ColorThief();
+              domImg.addEventListener('load', () => {
+                  // console.log('加载好了并取色', colorthief.getPalette(domImg));//第二个参数可选(1~10)
+                  // console.log('加载好了并取色', colorthief.getColor(domImg));//第二个参数可选(1~10)
+                  let color = colorthief.getColor(domImg)
+                  this.objOption.B2BBackground  =  this.rgb2Hex(color[0],color[1],color[2])
+              })
+      },
+      rgb2Hex(r,g,b){//rhg转化为16进制
+         r = Math.max(Math.min(Number(r), 100), 0) * 2.55
+          g = Math.max(Math.min(Number(g), 100), 0) * 2.55
+          b = Math.max(Math.min(Number(b), 100), 0) * 2.55
+          r = ('0' + (Math.round(r) || 0).toString(16)).slice(-2)
+          g = ('0' + (Math.round(g) || 0).toString(16)).slice(-2)
+          b = ('0' + (Math.round(b) || 0).toString(16)).slice(-2)
+          return '#' + r + g + b
+
+      },
+
+
+
       getCategorytree() {
         this.TreeCategoryList = [];
         var qMsg = {};
@@ -351,6 +429,17 @@
             this.objOption.IsKCourse = res.Data.IsKCourse;
             this.objOption.CourseRate = res.Data.CourseRate;
             this.objOption.CourseSubject = res.Data.CourseSubject;
+            this.objOption.B2BIcon  = res.Data.B2BIcon ;
+            this.objOption.B2BBackground = res.Data.B2BBackground;
+            this.objOption.CourseEmphasis = res.Data.CourseEmphasis;
+            if(this.objOption.CourseEmphasis &&  this.objOption.CourseEmphasis!=''){
+              this.CourseEmphasis=this.objOption.CourseEmphasis.split(",")
+            }else{
+              this.CourseEmphasis=[]
+              this.keynoteList.map((x)=>{
+                this.CourseEmphasis.push(x.Id)
+            })
+            }
             if (res.Data.StepPriceList && res.Data.StepPriceList.length > 0) {
               this.ladderPriceList = res.Data.StepPriceList;
             }
@@ -431,6 +520,11 @@
           this.objOption.StepPriceList = this.ladderPriceList;
           this.objOption.Teacher_Ids = Teacher_Ids;
           this.objOption.Saleplat = salePlat;
+          if(this.CourseEmphasis.length>0){
+              this.objOption.CourseEmphasis  = this.CourseEmphasis.join(',')
+          }else{
+              this.objOption.CourseEmphasis =''
+          }
           saveCourseInfo(this.objOption)
             .then((res) => {
               this.saveCourseLoading = false;