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. 297
      pages/home/index.vue

297
pages/home/index.vue
Unescape View File

@ -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,22 +121,22 @@
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: [],
@ -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()
@ -242,133 +254,131 @@
}, },
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) { getbgcolor(e) {
this.bgcolor = e; this.bgcolor = e;
}, },
}, },
created: async function() { created: async function () {
// await this.doColorThief(); // await this.doColorThief();
}, },
}; };
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
.content_box { .content_box {
background: #f6f6f6; background: #f6f6f6;
} }
.index { .index {
background-color: #fff; background-color: #fff;
} }
.swiper-item { .swiper-item {
height: 100%; height: 100%;
} }
.fixed-header { .fixed-header {
position: fixed; position: fixed;
z-index: 99; z-index: 99;
// #ifdef H5 // #ifdef H5
@ -383,12 +393,12 @@
background: #fff; background: #fff;
box-shadow: 0 0 20rpx -10rpx #aaa; box-shadow: 0 0 20rpx -10rpx #aaa;
&+.fixed-header-box { & + .fixed-header-box {
height: 98rpx height: 98rpx;
}
} }
}
.head_box { .head_box {
width: 750rpx; width: 750rpx;
// background: #fff; // background: #fff;
transition: all linear 0.3s; transition: all linear 0.3s;
@ -403,17 +413,17 @@
font-weight: 500; font-weight: 500;
color: #fff; color: #fff;
} }
} }
.cu-bar.fixed { .cu-bar.fixed {
position: fixed; position: fixed;
width: 100%; width: 100%;
top: 0; top: 0;
z-index: 1024; z-index: 1024;
// box-shadow: 0 1upx 6upx rgba(0, 0, 0, 0.1); // box-shadow: 0 1upx 6upx rgba(0, 0, 0, 0.1);
} }
.cu-bar { .cu-bar {
box-sizing: border-box; box-sizing: border-box;
.index .header { .index .header {
@ -421,15 +431,14 @@
// width: 100%; // width: 100%;
// padding: 0 30rpx; // padding: 0 30rpx;
// box-sizing: border-box; // 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;
@ -441,17 +450,17 @@
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