动态修改首页背景

src/App.vue

@@ -15,8 +15,8 @@ export default {
     console.log(extConfig, "-----------extConfig");
     if (JSON.stringify(extConfig) == "{}") {
       let shopItem = {
-        development: { mixid: "ssa", "shopid": 2342}, //五粮液uat
-        // development: { mixid: "antgood", "shopid": 67},
+        // development: { mixid: "ssa", "shopid": 2342}, //五粮液uat
+        development: { mixid: "antgood", "shopid": 67},
         production: { "mixid":"qiyeCT", "shopid": 1045 }, // 道可
         // production: { "mixid":"metasense_doctors", "shopid": 1238 }, // 册为医护端
         // production: { "mixid":"3QqsFT", "shopid": 1337 },

src/components/ThemeDataPlant.vue

 <template>
-  <div
-    ref="ThemeDataPlant"
-    class="ThemeDataPlant"
-    :style="{
-      'position':pageCode == 14?'fixed':'',
-      'background-color': pageSettingData.backgroundColor,
-      'background-image': bacImage,
-      'background-size': pageSettingData.backgroundFit!='equiratioFill'?'100% auto':'cover',
-      'background-repeat':pageSettingData.backgroundFit == 'repeat'? 'repeat': 'no-repeat',
-      'background-position':pageSettingData.backgroundFit == 'equiratioFill'?'center':'',
-      'background-attachment': pageSettingData.backgroundImageLock? 'fixed': 'local'}"
-  >
+  <div ref="ThemeDataPlant" class="ThemeDataPlant" :style="{
+    'position': pageCode == 14 ? 'fixed' : '',
+    'background-color': pageSettingData.backgroundColor,
+    'background-image': bacImage,
+    'background-size': pageSettingData.backgroundFit != 'equiratioFill' ? '100% auto' : 'cover',
+    'background-repeat': pageSettingData.backgroundFit == 'repeat' ? 'repeat' : 'no-repeat',
+    'background-position': pageSettingData.backgroundFit == 'equiratioFill' ? 'center' : '',
+    'background-attachment': pageSettingData.backgroundImageLock ? 'fixed' : 'local',
+  }">
+    <div class="imgRgb" :style="{
+      background: 'linear-gradient(180deg, ' + imgRgb + ' 42.64%, rgba(255,255,255, 0) 100%)',
+    }"></div>
   </div>
 </template>
 
@@ -18,42 +18,52 @@
 export default {
   props: {
     pageCode: {
-      type:Number,
+      type: Number,
       default: 1
     }
   },
-  components : {
+  components: {
     // 'area-navigation' : () => import('~/components/theme/components/other/area-navigation')
   },
   data() {
     return {
       flag: false,
       render: true,
-      pageInfo:{},
-      pageData:{},
-      pageSettingData:{},
-      bacImage:""
+      pageInfo: {},
+      pageData: {},
+      pageSettingData: {},
+      bacImage: "",
+      imgRgb: "", // 背景主色调
     };
   },
-  created(){
+  created() {
     if (this.mpApp.globalData.pageList) {
-        this.pageInfo = this.mpApp.globalData.pageList.filter((item) => item.pageCode == this.pageCode)[0];
-        this.pageSettingData = JSON.parse(this.pageInfo.pageSettingData);
-        console.log(this.pageInfo.pageSettingData,'kl')
-    }else{
+      this.pageInfo = this.mpApp.globalData.pageList.filter((item) => item.pageCode == this.pageCode)[0];
+      this.pageSettingData = JSON.parse(this.pageInfo.pageSettingData);
+      console.log(this.pageInfo.pageSettingData, 'kl')
+    } else {
       let _this = this
-      this.mpApp.indexBgCallBack = function(data){
+      this.mpApp.indexBgCallBack = function (data) {
         _this.pageInfo = _this.mpApp.globalData.pageList.filter((item) => item.pageCode == _this.pageCode)[0];
         _this.pageSettingData = JSON.parse(_this.pageInfo.pageSettingData);
-        console.log(_this.pageSettingData,'kl1')
+        console.log(_this.pageSettingData, 'kl1')
         _this.bacImage = `url(${_this.pageSettingData.backgroundImage})`
       }
     }
+    this.mpApp.setHomeBgImg = this.setHomeBgImg;
   },
-  mounted(){
+  mounted() {
     this.bacImage = `url(${this.pageSettingData.backgroundImage})`
   },
-  computed:{
+  computed: {
+
+  },
+  methods: {
+    setHomeBgImg({ backgroundImage, imgRgb }) {
+      console.log(imgRgb,'-imgRgb')
+      this.bacImage = backgroundImage;
+      this.imgRgb = imgRgb;
+    }
   }
 
 };
@@ -61,12 +71,23 @@ export default {
 
 <style lang="scss" scoped>
 .ThemeDataPlant {
-  width:100%;
+  width: 100%;
   height: 100%;
   position: absolute;
-  top:0;
+  top: 0;
   z-index: -1;
+
+  .imgRgb {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 1;
+    opacity: 0.5;
+  }
 }
+
 .ThemeDataPlant::before {
   content: " ";
   // position: var(--lock);

src/components/common/CustomNav.vue

+<template>
+  <div class="CustomNav">
+    <div class="navFixedBg" :style="{ 'height': navHeight + 'px' }">
+    </div>
+    <div class="navBg"
+      :style="{ 'height': navHeight + 'px', background: 'rgba(255,255,255,' + (customBgOpacity ? bgOpacity : 1) + ')' }">
+      <div class="content" :style="{ 'top': navTop + 'px', height: navConHeight + 'px' }">
+        {{ title || shopName }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script type="text/ecmascript-6">
+const app = getApp();
+const { log } = app;
+export default {
+  name: "CustomNav",
+  props: {
+    title: {
+      type: String,
+      default: "",
+    },
+    customBgOpacity: {
+      type: Boolean,
+      default: false,
+    }
+  },
+  data() {
+    return {
+      navHeight: 0,
+      navTop: 0,
+      navConHeight: 0,
+      bgOpacity: 0,
+    }
+  },
+  components: {},
+  computed: {
+    shopName() {
+      // let shopName = app.globalData && app.globalData.shopInfo && app.globalData.shopInfo.shopName;
+      let shopName = wx.getStorageSync("shopName");
+      return shopName || "";
+    },
+    listHeight() {
+      return `calc(100vh - ${this.navConHeight}px - ${this.navTop}px - 0.5rem )`
+    },
+    topBgHeight() {
+      return `calc(2rem + ${this.navTop}px)`
+    },
+    topHeight() {
+      return `calc(2rem + ${this.navTop}px)`
+    }
+  },
+  created() { },
+  onLoad() {
+    this.getNavbarInfo();
+  },
+  onShow() {
+
+  },
+  onReady() {
+
+  },
+  onHide() {
+
+  },
+  onUnload() {
+
+  },
+  onPageScroll(el) {
+    this.getScroll(el);
+  },
+  mounted() { },
+  methods: {
+    getScroll(el) {
+      let opacity = (el.scrollTop / 100).toFixed(1) - 0;
+      this.bgOpacity = opacity > 1 ? 1 : opacity;
+    },
+    getNavbarInfo() {
+      let menuInfo = wx.getMenuButtonBoundingClientRect();
+      console.log(menuInfo, '-menuInfo')
+      let res = wx.getSystemInfoSync()
+      console.log(res, '-getSystemInfoSync')
+      this.navTop = res.statusBarHeight;
+      this.navHeight = (res.statusBarHeight + menuInfo.height + (menuInfo.top - res.statusBarHeight) * 2)
+      this.navConHeight = (menuInfo.height + (menuInfo.top - res.statusBarHeight) * 2);
+      console.log(this.navTop, this.navHeight, this.navConHeight, '-this.navConHeight')
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.CustomNav {
+  position: relative;
+  z-index: 9999;
+
+  .navFixedBg {
+    width: 100%;
+  }
+
+  .navBg {
+    position: fixed;
+    width: 100%;
+    left: 0;
+    top: 0;
+  }
+
+  .content {
+    position: absolute;
+    left: 0;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: #333;
+  }
+}
+</style>

src/main.js

@@ -102,6 +102,8 @@ mpApp.getFilterGoodsData = function () { }
 mpApp.openSelectGoods = function () { }
 // 打开选择商品规格(2B)弹窗
 mpApp.openTwoBAddCart = function () { }
+// 动态设置首页背景图片
+mpApp.setHomeBgImg = function () {}
 
 /**
  * 组件点击行为收集

src/pages/home/index.vue

 <template>
   <div class="domain" :style="{'--main-color':themeColor['--main-color'],'--minor-color':themeColor['--minor-color']}">
     <pageLoading v-if="pageLoading"></pageLoading>
+    <!-- 自定义导航头 -->
     <div style="position:relative;">
       <div v-if="showSpokesManHome">
         <get-index-homepage class="getIndexHomePage"></get-index-homepage>
       </div>
+      <CustomNav :customBgOpacity="true"></CustomNav>
       <StoreAddr @toUpdate="reloadEnterShopRule" @toPageLoading="toPageLoading" ref="StoreAddr"></StoreAddr>
       <ThemeDataPlant></ThemeDataPlant>
       <div v-for="(item,index) in pageData" :key="index">
@@ -188,6 +190,7 @@ import mpvueCropper from '@/components/mpvue-cropper'
 import tool from '../../utils/tool.js'
 import StoreAddr from "@/components/common/StoreAddr.vue";
 import pageLoading from "@/components/common/pageLoading.vue";
+import CustomNav from "@/components/common/CustomNav.vue";
 const app = getApp();
 const { log } = app;
 export default {
@@ -255,7 +258,8 @@ export default {
     TwoBAddCart,
     brandList,
     StoreAddr,
-    pageLoading
+    pageLoading,
+    CustomNav
 },
   computed: {
     applySucessEntryFlag() {

src/pages/home/main.json

@@ -31,6 +31,7 @@
     "set-my-homepage":"/static/nativeComponents/SetMyHomePage/index",
     "apply-sucess-entry":"/static/nativeComponents/ApplySucessEntry/index"
   },
+  "navigationStyle":"custom",
   "enablePullDownRefresh":true,
   "backgroundColor":"#f5f5f5"
 }

static/nativeComponents/Banner/index.js

-const app = getApp()
+const app = getApp();
 Component({
   properties: {
     // 这里定义了innerText属性，属性值可以在组件使用时指定
@@ -19,32 +19,78 @@ Component({
     indicatorDots: false,
     vertical: false,
     autoplay: true,
-    interval: 2000,
+    interval: 3000,
     duration: 500,
     activeIndex: 0,
     bannerHeight: 0,
     firstLoad: false,
-    newArr: [],
+    newArr: []
   },
   ready() {
-    console.log('----------------------30')
-    this.setData({'newArr':this.newList()})
-    console.log(this.data.newArr,this.newList(),'--------32')
+    console.log(app.setHomeBgImg, "----------------------30");
+    this.setData({ newArr: this.newList() });
+    this.bannerChange({
+      detail: {
+        current: 0
+      }
+    });
+    console.log(this.data.newArr, this.newList(), "--------32");
   },
   methods: {
-    newList(){
-      return this.data.datas.componentData.imgList.filter(item=>item.visible==undefined || item.visible==1) || []
+    newList() {
+      return (
+        this.data.datas.componentData.imgList.filter(
+          item => item.visible == undefined || item.visible == 1
+        ) || []
+      );
     },
     customMethod() {
       console.log("hello world! I am learning 微信小程序");
     },
-    bannerChange(val) {
+    async bannerChange(val) {
+      let { newArr } = this.data;
+      let { changeHomePageFlag } = this.data.datas.componentData;
+      let _this = this;
+      // 如果开启了修改首页背景图
+      let imageUrl = `url(${
+        newArr[val.detail.current].imageUrl
+      }?x-oss-process=image/blur,r_50,s_50)`;
+      if (changeHomePageFlag && app.setHomeBgImg) {
+        if (newArr[val.detail.current].imgRgb) {
+          app.setHomeBgImg({
+            backgroundImage: imageUrl,
+            imgRgb: newArr[val.detail.current].imgRgb
+          });
+        } else {
+          await wx.request({
+            url: `${
+              newArr[val.detail.current].imageUrl
+            }?x-oss-process=image/average-hue`,
+            data: {},
+            header: { "content-type": "application/json" },
+            method: "GET",
+            dataType: "json",
+            responseType: "text",
+            success: result => {
+              let imgRgb = `#${result.data.RGB.split("x")[1]}`;
+              app.setHomeBgImg({
+                backgroundImage: imageUrl,
+                imgRgb
+              });
+              newArr[val.detail.current].imgRgb = imgRgb;
+              _this.setData({ newArr });
+            },
+            fail: () => {},
+            complete: () => {}
+          });
+        }
+      }
       this.setData({ activeIndex: val.detail.current });
     },
     onClick(data) {
       let item = data.currentTarget.dataset.item;
       console.log(data.currentTarget.dataset.item, "iiii");
-      app.trackCpn(data, this.data.datas.componentName, item)
+      app.trackCpn(data, this.data.datas.componentName, item);
       app.$themeToLink(item.link);
     },
     loadImg(e) {
@@ -53,7 +99,10 @@ Component({
         return;
       }
       firstLoad = true;
-      let winWid = wx.getSystemInfoSync().windowWidth - this.data.datas.componentData.paddingList[2].value - this.data.datas.componentData.paddingList[3].value; //获取当前屏幕的宽度
+      let winWid =
+        wx.getSystemInfoSync().windowWidth -
+        this.data.datas.componentData.paddingList[2].value -
+        this.data.datas.componentData.paddingList[3].value; //获取当前屏幕的宽度
       let imgh = e.detail.height; //图片高度
       let imgw = e.detail.width;
       let swiperH = winWid * imgh / imgw + "px";