@jx3box/jx3box-common-ui 6.5.4 → 6.5.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jx3box/jx3box-common-ui",
-  "version": "6.5.4",
+  "version": "6.5.5",
   "description": "JX3BOX UI",
   "main": "index.js",
   "scripts": {

package/service/cms.js

@@ -7,10 +7,15 @@ function getPostAuthors(post_id) {
 function uploadImage(formData){
     return $cms().post(`/api/cms/upload/avatar`, formData);
 }
-
+//获取装扮
+function getDecoration(params) {
+    return $cms().get(`/api/cms/user/decoration`,{
+        params
+    });
+}
 // 通用上传
 function upload(formData){
     return $cms().post(`/api/cms/upload`, formData);
 }
 
-export { getPostAuthors, uploadImage, upload };
+export { getPostAuthors, uploadImage, upload,getDecoration };

package/src/LeftSidebar.vue

@@ -1,12 +1,13 @@
 <template>
   <aside
-    class="c-sidebar-left c-sidebar"
+    class="c-sidebar-left c-sidebar m-theme"
     :class="{
             isclose: !isOpen,
             isopen: isOpen,
             'without-bread': withoutBread,
         }"
     v-if="!isApp"
+    :style="decoration"
   >
     <div class="c-sidebar-left-inner">
       <slot></slot>
@@ -36,6 +37,8 @@
 <script>
 import Bus from "../service/bus";
 import { isApp } from "../assets/js/app.js";
+import {getDecoration} from "../service/cms"
+import { __imgPath } from "@jx3box/jx3box-common/data/jx3box.json";
 export default {
   name: "LeftSidebar",
   props: ["open", "withoutBread"],
@@ -43,6 +46,7 @@ export default {
     return {
       isOpen: true,
       isApp: isApp(),
+      decoration:{}
     };
   },
   computed: {
@@ -60,6 +64,44 @@ export default {
       let status = !this.isOpen;
       Bus.$emit("toggleLeftSide", status);
     },
+    showDecoration:function(val,type){
+        return __imgPath + `decoration/images/${val}/${type}.png`;
+    },
+    getDecoration(){
+      let decoration_sidebar=sessionStorage.getItem('decoration_sidebar')
+      if(decoration_sidebar == 'no'){
+        return;
+      }
+      //已有缓存，读取解析
+      if(decoration_sidebar){
+        this.setDecoration(JSON.parse(decoration_sidebar))
+        return;
+      }
+      getDecoration({using:1,type:'sidebar'}).then(data=>{
+        let res=data.data.data
+        if(res.length==0){
+          //空 则为无主题，不再加载接口，界面设No
+          sessionStorage.setItem('decoration_sidebar','no')
+          return;
+        }
+        let decoration=res.filter(val => {
+          return val.type === 'sidebar'
+        })
+        console.log(decoration)
+        if(decoration.length>0){
+          sessionStorage.setItem('decoration_sidebar',JSON.stringify(decoration[0]))
+          this.setDecoration(decoration[0])
+        }else{
+          //空 则为无主题，不再加载接口，界面设No
+          sessionStorage.setItem('decoration_sidebar','no')
+        }
+      })
+    },
+    setDecoration(decoration_sidebar){
+        this.decoration={
+          'background-image':'url('+this.showDecoration(decoration_sidebar.val,decoration_sidebar.type)+')'
+        }
+    }
   },
   mounted: function () {
     Bus.$on("toggleLeftSide", (data) => {
@@ -76,10 +118,18 @@ export default {
   },
   created: function () {
     this.isOpen = this.open === undefined ? true : this.open;
+    this.getDecoration()
   },
 };
 </script>
 
 <style lang="less">
 @import "../assets/css/left-sidebar.less";
+// 虚拟装扮主题
+.m-theme{
+  // background: url(../assets/testbg.png) no-repeat;
+  background-repeat: no-repeat;
+  background-size: contain;
+  background-position: top right;
+}
 </style>