Loki
/
fish-uniapp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

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

master
Gao xiaosong 4 years ago
parent
9465fc89da
commit
acf6b7af07
1 changed files with 434 additions and 425 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 859
      pages/home/index.vue

859
pages/home/index.vue
Unescape View File

@ -1,457 +1,466 @@
<template> <template>
<view class="index"> <view class="index">
<!-- 导航栏 --> <!-- 导航栏 -->
<!-- <view class="head_box " :style="{ background: bgcolor }" :class="{ active: bgcolor }">--> <!-- <view class="head_box " :style="{ background: bgcolor }" :class="{ active: bgcolor }">-->
<!-- <view class="cu-custom" :style="[{height:CustomBar+ 'px',}]">--> <!-- <view class="cu-custom" :style="[{height:CustomBar+ 'px',}]">-->
<!-- <view class="cu-bar fixed" :style="customStyle" :class="[bgcolor]">--> <!-- <view class="cu-bar fixed" :style="customStyle" :class="[bgcolor]">-->
<!-- <view class="action">--> <!-- <view class="action">-->
<!-- <text class="nav-title Shop-selector-rect">{{ 'yshop商城' }}</text>--> <!-- <text class="nav-title Shop-selector-rect">{{ 'yshop商城' }}</text>-->
<!-- </view>--> <!-- </view>-->
<!-- <view class="content" :style="[{top:StatusBar + 'px'}]">--> <!-- <view class="content" :style="[{top:StatusBar + 'px'}]">-->
<!-- </view>--> <!-- </view>-->
<!-- </view>--> <!-- </view>-->
<!-- </view>--> <!-- </view>-->
<!-- </view>--> <!-- </view>-->
<view class="head_box " :style="{ background: bgcolor }" :class="{ active: bgcolor }"> <view
<cu-custom :isBack="true" :bgColor="bgcolor"> class="head_box"
<block slot="backText"> :style="{ background: bgcolor }"
<text class="nav-title shopro-selector-rect">{{ 'YSHOP商城' }}</text> :class="{ active: bgcolor }"
</block> >
</cu-custom> <cu-custom :isBack="true" :bgColor="bgcolor">
</view> <block slot="backText">
<view class="header header-search acea-row row-center-wrapper" :style="{ background: bgcolor }"> <text class="nav-title shopro-selector-rect">{{ "YSHOP商城" }}</text>
<view @click="goGoodSearch()" class="search acea-row row-middle"> </block>
<text class="iconfont icon-xiazai5"></text> </cu-custom>
搜索商品 </view>
</view> <view
<view class="qr" @click="startQr()"> class="header header-search acea-row row-center-wrapper"
<image src="@/static/images/qr.png" /> :style="{ background: bgcolor }"
</view> >
</view> <view @click="goGoodSearch()" class="search acea-row row-middle">
<Banner :detail="banner" v-if="banner.length>0" @getbgcolor="getbgcolor"></Banner> <text class="iconfont icon-xiazai5"></text>
<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>
<!-- 菜单 --> <view class="qr" @click="startQr()">
<Menu :list="menus"></Menu> <image src="@/static/images/qr.png" />
<!-- 滚动新闻 --> </view>
<!-- 广告 --> </view>
<Adv /> <Banner
<!-- 热门榜单 --> :detail="banner"
<HotCommodity :detail="likeInfo"></HotCommodity> v-if="banner.length > 0"
<!-- 超值拼团 --> @getbgcolor="getbgcolor"
<Groupon :detail="combinationList" /> ></Banner>
<!-- 首发新品->秒杀 --> <uni-notice-bar
<!-- <FirstNewProduct :detail="firstList"></FirstNewProduct> --> scrollable="true"
<!-- 精品推荐 --> @click="goRoll(singNew)"
<!-- <ProductsRecommended :detail="bastList"></ProductsRecommended> --> single="true"
<!-- 促销单品 :speed="10"
showIcon="true"
:text="singNew.info"
></uni-notice-bar>
<view class="content_box home_content_box">
<!-- 菜单 -->
<Menu :list="menus"></Menu>
<!-- 滚动新闻 -->
<!-- 广告 -->
<Adv />
<!-- 热门榜单 -->
<HotCommodity :detail="likeInfo"></HotCommodity>
<!-- 超值拼团 -->
<Groupon :detail="combinationList" />
<!-- 首发新品->秒杀 -->
<!-- <FirstNewProduct :detail="firstList"></FirstNewProduct> -->
<!-- 精品推荐 -->
<!-- <ProductsRecommended :detail="bastList"></ProductsRecommended> -->
<!-- 促销单品
<PromoteProduct :detail="benefit"></PromoteProduct> --> <PromoteProduct :detail="benefit"></PromoteProduct> -->
<!-- 直播 --> <!-- 直播 -->
<!-- #ifdef MP-WEIXIN --> <!-- #ifdef MP-WEIXIN -->
<Live :detail="live"></Live> <Live :detail="live"></Live>
<!-- #endif --> <!-- #endif -->
<!-- 为您推荐 --> <!-- 为您推荐 -->
<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-window> :coupon-list="couponList"
</view> v-if="showCoupon"
@checked="couponClose"
@close="couponClose"
>
</Coupon-window>
</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,
UniNoticeBar, UniNoticeBar,
GoodList, GoodList,
PromotionGood, PromotionGood,
CouponWindow, CouponWindow,
Menu, Menu,
Adv, Adv,
Groupon, Groupon,
Banner, Banner,
HotCommodity, HotCommodity,
FirstNewProduct, FirstNewProduct,
ProductsRecommended, ProductsRecommended,
Live Live,
}, },
props: {}, props: {},
data: function() { data: function () {
return { return {
CustomBar: this.CustomBar, CustomBar: this.CustomBar,
StatusBar: this.StatusBar, StatusBar: this.StatusBar,
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: [],
roll: [], roll: [],
activity: [], activity: [],
activityOne: {}, activityOne: {},
bastList: [], bastList: [],
firstList: [], firstList: [],
info: { info: {
fastList: [], fastList: [],
bastBanner: [], bastBanner: [],
bastList: [] bastList: [],
}, },
likeInfo: [], likeInfo: [],
live: [], live: [],
lovely: [], lovely: [],
benefit: [], benefit: [],
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: {
singNew() { singNew() {
return this.roll.length > 0 ? this.roll[0] : "你还没添加通知哦！"; return this.roll.length > 0 ? this.roll[0] : "你还没添加通知哦！";
}, },
customStyle() { customStyle() {
var bgImage = this.bgImage; var bgImage = this.bgImage;
// var style = `height:${this.CustomBar}px;padding-top:${0}px;background: ${this.bgcolor}`; // var style = `height:${this.CustomBar}px;padding-top:${0}px;background: ${this.bgcolor}`;
var style = `height:${this.CustomBar}px;padding-top:${this.StatusBar}px;background: ${this.bgcolor}`; var style = `height:${this.CustomBar}px;padding-top:${this.StatusBar}px;background: ${this.bgcolor}`;
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 = item.color || ""));
res.data.banner.map(item => item.bgcolor = '') 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() });
}); },
}, methods: {
methods: { ...mapActions(["getLocation"]),
...mapActions(["getLocation"]), onShareTimeline: function () {
onShareTimeline: 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") };
} },
}, 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) {
}); this.bgcolor = e;
}, },
getbgcolor(e) { },
this.bgcolor = e; created: async function () {
}, // await this.doColorThief();
}, },
created: async function() { };
// await this.doColorThief();
},
};
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
.content_box { .content_box {
background: #f6f6f6; background: #f6f6f6;
} }
.index {
background-color: #fff;
}
.swiper-item { .index {
height: 100%; background-color: #fff;
} }
.fixed-header { .swiper-item {
position: fixed; height: 100%;
z-index: 99; }
// #ifdef H5
top: 88rpx;
// #endif
// #ifndef H5 .fixed-header {
top: 0; position: fixed;
// #endif z-index: 99;
left: 0; // #ifdef H5
right: 0; top: 88rpx;
background: #fff; // #endif
box-shadow: 0 0 20rpx -10rpx #aaa;
&+.fixed-header-box { // #ifndef H5
height: 98rpx top: 0;
} // #endif
} left: 0;
right: 0;
background: #fff;
box-shadow: 0 0 20rpx -10rpx #aaa;
.head_box { & + .fixed-header-box {
width: 750rpx; height: 98rpx;
// background: #fff; }
transition: all linear 0.3s; }
/deep/.cuIcon-back { .head_box {
display: none; width: 750rpx;
} // background: #fff;
transition: all linear 0.3s;
.nav-title { /deep/.cuIcon-back {
font-size: 38rpx; display: none;
font-family: PingFang SC; }
font-weight: 500;
color: #fff;
}
}
.cu-bar.fixed { .nav-title {
position: fixed; font-size: 38rpx;
width: 100%; font-family: PingFang SC;
top: 0; font-weight: 500;
z-index: 1024; color: #fff;
// box-shadow: 0 1upx 6upx rgba(0, 0, 0, 0.1); }
} }
.cu-bar { .cu-bar.fixed {
box-sizing: border-box; position: fixed;
width: 100%;
top: 0;
z-index: 1024;
// box-shadow: 0 1upx 6upx rgba(0, 0, 0, 0.1);
}
.index .header { .cu-bar {
height: 64rpx; box-sizing: border-box;
// width: 100%;
// padding: 0 30rpx;
// box-sizing: border-box;
} .index .header {
} height: 64rpx;
// width: 100%;
// padding: 0 30rpx;
// box-sizing: border-box;
}
}
.header-search { .header-search {
transition: all linear 0.3s; transition: all linear 0.3s;
} }
.cu-bar .action { .cu-bar .action {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: flex; display: flex;
align-items: center; align-items: center;
height: 100%; height: 100%;
max-height: 100%; max-height: 100%;
&:first-child { &:first-child {
margin-left: 15px; margin-left: 15px;
font-size: 15px; font-size: 15px;
} }
} }
.home_content_box { .home_content_box {
margin-top: -10rpx; margin-top: -10rpx;
} }
.head_box { .head_box {
} }
.nav-title { .nav-title {
margin-left: 20rpx; margin-left: 20rpx;
line-height: 40px; line-height: 40px;
} }
</style> </style>

Write Preview
Loading…
Cancel
Save