Browse Source

uniapp端首页标题栏、搜过索背景色不能调用后端提交的背景色的问题

master
Gao xiaosong 5 years ago
parent
commit
acf6b7af07
  1. 229
      pages/home/index.vue

229
pages/home/index.vue

@ -14,14 +14,21 @@
<!-- </view>--> <!-- </view>-->
<!-- </view>--> <!-- </view>-->
<view class="head_box " :style="{ background: bgcolor }" :class="{ active: bgcolor }"> <view
class="head_box"
:style="{ background: bgcolor }"
:class="{ active: bgcolor }"
>
<cu-custom :isBack="true" :bgColor="bgcolor"> <cu-custom :isBack="true" :bgColor="bgcolor">
<block slot="backText"> <block slot="backText">
<text class="nav-title shopro-selector-rect">{{ 'YSHOP商城' }}</text> <text class="nav-title shopro-selector-rect">{{ "YSHOP商城" }}</text>
</block> </block>
</cu-custom> </cu-custom>
</view> </view>
<view class="header header-search acea-row row-center-wrapper" :style="{ background: bgcolor }"> <view
class="header header-search acea-row row-center-wrapper"
:style="{ background: bgcolor }"
>
<view @click="goGoodSearch()" class="search acea-row row-middle"> <view @click="goGoodSearch()" class="search acea-row row-middle">
<text class="iconfont icon-xiazai5"></text> <text class="iconfont icon-xiazai5"></text>
搜索商品 搜索商品
@ -30,8 +37,19 @@
<image src="@/static/images/qr.png" /> <image src="@/static/images/qr.png" />
</view> </view>
</view> </view>
<Banner :detail="banner" v-if="banner.length>0" @getbgcolor="getbgcolor"></Banner> <Banner
<uni-notice-bar scrollable="true" @click="goRoll(singNew)" single="true" :speed="10" showIcon="true" :text="singNew.info"></uni-notice-bar> :detail="banner"
v-if="banner.length > 0"
@getbgcolor="getbgcolor"
></Banner>
<uni-notice-bar
scrollable="true"
@click="goRoll(singNew)"
single="true"
:speed="10"
showIcon="true"
:text="singNew.info"
></uni-notice-bar>
<view class="content_box home_content_box"> <view class="content_box home_content_box">
<!-- 菜单 --> <!-- 菜单 -->
<Menu :list="menus"></Menu> <Menu :list="menus"></Menu>
@ -56,44 +74,39 @@
<!-- 为您推荐 --> <!-- 为您推荐 -->
<PromotionGood :benefit="benefit"></PromotionGood> <PromotionGood :benefit="benefit"></PromotionGood>
</view> </view>
<Coupon-window :coupon-list="couponList" v-if="showCoupon" @checked="couponClose" @close="couponClose"> <Coupon-window
:coupon-list="couponList"
v-if="showCoupon"
@checked="couponClose"
@close="couponClose"
>
</Coupon-window> </Coupon-window>
</view> </view>
</template> </template>
<script> <script>
import { import { mapState, mapMutations, mapActions } from "vuex";
mapState, import GoodList from "@/components/GoodList";
mapMutations, import PromotionGood from "@/components/PromotionGood";
mapActions import CouponWindow from "@/components/CouponWindow";
} from 'vuex'; import Menu from "@/components/Menu";
import GoodList from '@/components/GoodList'; import UniNoticeBar from "@/components/uni-notice-bar/uni-notice-bar";
import PromotionGood from '@/components/PromotionGood'; import Adv from "@/components/sh-adv";
import CouponWindow from '@/components/CouponWindow'; import Groupon from "@/components/sh-groupon.vue";
import Menu from '@/components/Menu';
import UniNoticeBar from '@/components/uni-notice-bar/uni-notice-bar'
import Adv from '@/components/sh-adv'
import Groupon from '@/components/sh-groupon.vue'
import Banner from './components/Banner'; import Banner from "./components/Banner";
import HotCommodity from './components/HotCommodity'; import HotCommodity from "./components/HotCommodity";
import FirstNewProduct from './components/FirstNewProduct'; import FirstNewProduct from "./components/FirstNewProduct";
import ProductsRecommended from './components/ProductsRecommended'; import ProductsRecommended from "./components/ProductsRecommended";
import Live from './components/Live'; import Live from "./components/Live";
import { import { getHomeData, getShare } from "@/api/public";
getHomeData, import cookie from "@/utils/store/cookie";
getShare import { isWeixin, handleUrlParam } from "@/utils/index";
} from '@/api/public';
import cookie from '@/utils/store/cookie';
import {
isWeixin,
handleUrlParam
} from '@/utils/index';
const HAS_COUPON_WINDOW = 'has_coupon_window'; const HAS_COUPON_WINDOW = "has_coupon_window";
export default { export default {
name: 'Index', name: "Index",
components: { components: {
// swiper, // swiper,
// swiperSlide, // swiperSlide,
@ -108,7 +121,7 @@
HotCommodity, HotCommodity,
FirstNewProduct, FirstNewProduct,
ProductsRecommended, ProductsRecommended,
Live Live,
}, },
props: {}, props: {},
data: function () { data: function () {
@ -118,12 +131,12 @@
formatMenus: [], formatMenus: [],
categoryCurrent: 0, categoryCurrent: 0,
menuNum: 4, menuNum: 4,
bgcolor: '', bgcolor: "",
bgColor: '', bgColor: "",
swiperCurrent: 0, // swiperCurrent: 0, //
webviewId: 0, webviewId: 0,
showCoupon: false, showCoupon: false,
logoUrl: '', logoUrl: "",
banner: [], banner: [],
menus: [], menus: [],
combinationList: [], combinationList: [],
@ -136,7 +149,7 @@
fastList: [], fastList: [],
bastBanner: [], bastBanner: [],
bastList: [] bastList: [],
}, },
likeInfo: [], likeInfo: [],
live: [], live: [],
@ -145,58 +158,58 @@
couponList: [], couponList: [],
swiperOption: { swiperOption: {
pagination: { pagination: {
el: '.swiper-pagination', el: ".swiper-pagination",
clickable: true clickable: true,
}, },
autoplay: { autoplay: {
disableOnInteraction: false, disableOnInteraction: false,
delay: 2000 delay: 2000,
}, },
loop: true, loop: true,
speed: 1000, speed: 1000,
observer: true, observer: true,
observeParents: true observeParents: true,
}, },
swiperRoll: { swiperRoll: {
direction: 'vertical', direction: "vertical",
autoplay: { autoplay: {
disableOnInteraction: false, disableOnInteraction: false,
delay: 2000 delay: 2000,
}, },
loop: true, loop: true,
speed: 1000, speed: 1000,
observer: true, observer: true,
observeParents: true observeParents: true,
}, },
swiperScroll: { swiperScroll: {
freeMode: true, freeMode: true,
freeModeMomentum: false, freeModeMomentum: false,
slidesPerView: 'auto', slidesPerView: "auto",
observer: true, observer: true,
observeParents: true observeParents: true,
}, },
swiperBoutique: { swiperBoutique: {
pagination: { pagination: {
el: '.swiper-pagination', el: ".swiper-pagination",
clickable: true clickable: true,
}, },
autoplay: { autoplay: {
disableOnInteraction: false, disableOnInteraction: false,
delay: 2000 delay: 2000,
}, },
loop: true, loop: true,
speed: 1000, speed: 1000,
observer: true, observer: true,
observeParents: true observeParents: true,
}, },
swiperProducts: { swiperProducts: {
freeMode: true, freeMode: true,
freeModeMomentum: false, freeModeMomentum: false,
slidesPerView: 'auto', slidesPerView: "auto",
observer: true, observer: true,
observeParents: true observeParents: true,
}, },
bgImage: '' bgImage: "",
}; };
}, },
computed: { computed: {
@ -210,31 +223,30 @@
if (this.bgImage) { if (this.bgImage) {
style = `${style}background-image:url(${bgImage});`; style = `${style}background-image:url(${bgImage});`;
} }
return style return style;
}, },
}, },
onLoad: function () { onLoad: function () {
this.getLocation() this.getLocation();
let that = this; let that = this;
uni.showLoading({ uni.showLoading({
title: '加载中' title: "加载中",
}); });
getHomeData().then(res => { getHomeData().then((res) => {
that.logoUrl = res.data.logoUrl; that.logoUrl = res.data.logoUrl;
res.data.banner.map(item => item.bgcolor = '') res.data.banner.map((item) => (item.bgcolor = item.color || ""));
that.$set(that, 'banner', res.data.banner); that.$set(that, "banner", res.data.banner);
that.$set(that, 'menus', res.data.menus); that.$set(that, "menus", res.data.menus);
that.$set(that, 'roll', res.data.roll); that.$set(that, "roll", res.data.roll);
that.$set(that, 'info', res.data.info); that.$set(that, "info", res.data.info);
that.$set(that, 'firstList', res.data.firstList); that.$set(that, "firstList", res.data.firstList);
that.$set(that, 'bastList', res.data.bastList); that.$set(that, "bastList", res.data.bastList);
that.$set(that, 'likeInfo', res.data.likeInfo); that.$set(that, "likeInfo", res.data.likeInfo);
that.$set(that, 'live', res.data.liveList); that.$set(that, "live", res.data.liveList);
that.$set(that, 'lovely', res.data.lovely); that.$set(that, "lovely", res.data.lovely);
that.$set(that, 'benefit', res.data.benefit); that.$set(that, "benefit", res.data.benefit);
that.$set(that, 'couponList', res.data.couponList); that.$set(that, "couponList", res.data.couponList);
that.$set(that, 'combinationList', res.data.combinationList); that.$set(that, "combinationList", res.data.combinationList);
uni.hideLoading(); uni.hideLoading();
that.setOpenShare(); that.setOpenShare();
// that.doColorThief() // that.doColorThief()
@ -246,104 +258,102 @@
return { return {
title: this.miniHomeRemark, title: this.miniHomeRemark,
imageUrl: this.miniHomeImg, imageUrl: this.miniHomeImg,
path: "pages/home/index?spread=" + uni.getStorageSync("uid") path: "pages/home/index?spread=" + uni.getStorageSync("uid"),
} };
}, },
onShareAppMessage: function () { onShareAppMessage: function () {
return { return {
title: this.miniHomeRemark, title: this.miniHomeRemark,
imageUrl: this.miniHomeImg, imageUrl: this.miniHomeImg,
path: "pages/home/index?spread=" + uni.getStorageSync("uid") path: "pages/home/index?spread=" + uni.getStorageSync("uid"),
} };
}, },
goRoll(item) { goRoll(item) {
if (item.uniapp_url) { if (item.uniapp_url) {
this.$yrouter.push(item.uniapp_url) this.$yrouter.push(item.uniapp_url);
} }
}, },
goGoodSearch() { goGoodSearch() {
// this.$yrouter.push('/pages/shop/GoodsEvaluate/index'); // this.$yrouter.push('/pages/shop/GoodsEvaluate/index');
this.$yrouter.push('/pages/shop/GoodSearch/index'); this.$yrouter.push("/pages/shop/GoodSearch/index");
}, },
goWxappUrl(item) { goWxappUrl(item) {
this.$yrouter.push(item.uniapp_url); this.$yrouter.push(item.uniapp_url);
}, },
goHotNewGoods(type) { goHotNewGoods(type) {
this.$yrouter.push({ this.$yrouter.push({
path: '/pages/shop/HotNewGoods/index', path: "/pages/shop/HotNewGoods/index",
query: { query: {
type type,
} },
}); });
}, },
goGoodsCon(item) { goGoodsCon(item) {
this.$yrouter.push({ this.$yrouter.push({
path: '/pages/shop/GoodsCon/index', path: "/pages/shop/GoodsCon/index",
query: { query: {
id: item.id id: item.id,
} },
}); });
}, },
goGoodsPromotion() { goGoodsPromotion() {
this.$yrouter.push('/pages/shop/GoodsPromotion/index'); this.$yrouter.push("/pages/shop/GoodsPromotion/index");
}, },
setOpenShare: function () { setOpenShare: function () {
if (this.$deviceType == 'weixin') { if (this.$deviceType == "weixin") {
getShare().then(res => { getShare().then((res) => {
var data = res.data.data; var data = res.data.data;
var configAppMessage = { var configAppMessage = {
desc: data.synopsis, desc: data.synopsis,
title: data.title, title: data.title,
link: location.href, link: location.href,
imgUrl: data.img imgUrl: data.img,
}; };
this.openShareAll(configAppMessage); this.openShareAll(configAppMessage);
}) });
} }
}, },
startQr: function () { startQr: function () {
uni.scanCode({ uni.scanCode({
success: (res) => { success: (res) => {
let option = handleUrlParam(res.result) let option = handleUrlParam(res.result);
switch (option.pageType) { switch (option.pageType) {
case 'good': case "good":
// //
this.$yrouter.push({ this.$yrouter.push({
path: '/pages/shop/GoodsCon/index', path: "/pages/shop/GoodsCon/index",
query: { query: {
q: res.result q: res.result,
} },
}); });
break; break;
case 'group': case "group":
// //
this.$yrouter.push({ this.$yrouter.push({
path: '/pages/activity/GroupRule/index', path: "/pages/activity/GroupRule/index",
query: { query: {
q: res.result q: res.result,
} },
}); });
break; break;
case 'dargain': case "dargain":
// //
this.$yrouter.push({ this.$yrouter.push({
path: '/pages/activity/DargainDetails/index', path: "/pages/activity/DargainDetails/index",
query: { query: {
q: res.result q: res.result,
} },
}); });
break; break;
default: default:
// //
this.$yrouter.push({ this.$yrouter.push({
path: '/pages/Loading/index', path: "/pages/Loading/index",
query: { query: {},
}
}); });
break; break;
} }
} },
}); });
}, },
getbgcolor(e) { getbgcolor(e) {
@ -384,7 +394,7 @@
box-shadow: 0 0 20rpx -10rpx #aaa; box-shadow: 0 0 20rpx -10rpx #aaa;
& + .fixed-header-box { & + .fixed-header-box {
height: 98rpx height: 98rpx;
} }
} }
@ -421,7 +431,6 @@
// width: 100%; // width: 100%;
// padding: 0 30rpx; // padding: 0 30rpx;
// box-sizing: border-box; // box-sizing: border-box;
} }
} }

Loading…
Cancel
Save