Skip to content

M
mayi-mp-shop
Commit a7506ca8 by 李嘉林
Options

动态修改首页背景

parent 8880dee3
Showing with 239 additions and 43 deletions
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 0 → 100644
<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";
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment