cxc/yshopb2c-uniapp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

撤回提交->目前存在很多问题

Browse Source
This commit is contained in:
xuwenbo
2020-09-04 17:44:22 +08:00
parent 3289e30dad
commit 5800da20d2
29 changed files with 1032 additions and 3450 deletions
Download Patch File Download Diff File Expand all files Collapse all files

392
pages/home/index.vue
View File

@ -1,20 +1,6 @@
<template>
<view class="index">
<!-- 导航栏 -->
<view class="head_box " :style="{ background: bgcolor }" :class="{ active: bgcolor }">
<view class="cu-custom" :style="[{height:CustomBar+ 'px',}]">
<view class="cu-bar fixed" :style="customStyle"
:class="[bgcolor]">
<view class="action">
<text class="nav-title shopro-selector-rect">{{ 'yshop商城' }}</text>
</view>
<view class="content" :style="[{top:StatusBar + 'px'}]">
</view>
</view>
</view>
</view>
<view class="header header-search acea-row row-center-wrapper" :style="{ background: bgcolor }">
<view class="header fixed-header acea-row row-center-wrapper">
<view @click="goGoodSearch()" class="search acea-row row-middle">
<text class="iconfont icon-xiazai5"></text>
搜索商品
@ -23,34 +9,138 @@
<image src="@/static/images/qr.png" />
</view>
</view>
<view class="banner-swiper-box mb10" v-if="banner.length>0">
<canvas canvas-id="colorThief" class="hide-canvas"></canvas>
<swiper class="banner-carousel shopro-selector-rect" circular @change="swiperChange" :autoplay="true">
<swiper-item v-for="(item, index) in banner" :key="index" class="carousel-item "
@tap="routerTo(item.path)">
<image class="swiper-image " :src="item.pic" @click="goRoll(item)" mode="widthFix" lazy-load>
</image>
</swiper-item>
<view class="fixed-header-box"></view>
<view class="slider-banner banner">
<swiper indicatorDots="true" v-if="banner.length > 0" autoplay circular>
<block v-for="(item, bannerIndex) in banner" :key="bannerIndex">
<swiper-item>
<view @click="goRoll(item)" class="swiper-item">
<image :src="item.pic" />
</view>
</swiper-item>
</block>
</swiper>
<view class="banner-swiper-dots">
<text :class="swiperCurrent === index ? 'banner-dot-active' : 'banner-dot'"
v-for="(dot, index) in banner.length" :key="index"></text>
</view>
<view class="nav acea-row">
<view @click="goWxappUrl(item)" class="item" v-for="(item, menusIndex) in menus" :key="menusIndex">
<view class="pictrue">
<image :src="item.pic" />
</view>
<view>{{ item.name }}</view>
</view>
</view>
<view class="content_box">
<Menu :list="menus"></Menu>
<Adv />
<Groupon :detail="combinationList" />
<PromotionGood :benefit="benefit"></PromotionGood>
<!-- <view class="news acea-row ">
<view class="pictrue" v-if="$VUE_APP_RESOURCES_URL">
<image src="@/static/images/news.png" />
</view>
<view class="swiper-no-swiping new-banner">
<swiper class="swiper-wrapper" v-if="roll.length > 0" :indicator-dots="false" autoplay circular vertical>
<block v-for="(item, rollIndex) in roll" :key="rollIndex">
<swiper-item class="swiper-slide">
<view @click="goRoll(item)" class="swiper-item acea-row row-between-wrapper">
<view class="text acea-row row-between-wrapper">
<view class="label" v-if="item.show === '是'">最新</view>
<view class="newsTitle line1">{{ item.info }}</view>
</view>
<view class="iconfont icon-xiangyou"></view>
</view>
</swiper-item>
</block>
</swiper>
</view>
</view> -->
<!-- <view class="wrapper hot" v-if="likeInfo.length > 0"> -->
<uni-notice-bar scrollable="true" @click="goRoll(singNew)" single="true" :speed="10" showIcon="true" :text="singNew.info"></uni-notice-bar>
<view class="wrapper hot" v-if="bastList.length > 0">
<image class="bg" src="../../static/images/index-bg.png" mode="widthFix"></image>
<view class="title no-border acea-row row-between-wrapper">
<div class="text line1">
<span class="iconfont icon-remen"></span>
<span class="label">热门榜单</span>
</div>
<view @click="goHotNewGoods(2)" class="more">
更多
<text class="iconfont icon-jiantou"></text>
</view>
</view>
<view class="newProducts">
<scroll-view :show-scrollbar="false" scroll-y="false" scroll-x="true">
<view class="newProductsScroll">
<view @click="goGoodsCon(item)" class="newProductsItem" v-for="(item, likeInfoIndex) in likeInfo" :key="likeInfoIndex">
<view class="img-box">
<image :src="item.image" />
</view>
<view class="pro-info line1"><text>{{ item.storeName }}</text></view>
<view class="money font-color-red"><text>￥{{ item.price }}</text></view>
</view>
</view>
</scroll-view>
</view>
</view>
<Coupon-window :coupon-list="couponList" v-if="showCoupon" @checked="couponClose" @close="couponClose">
</Coupon-window>
<view class="wrapper" v-if="bastList.length > 0">
<view class="title no-border acea-row row-between-wrapper">
<view class="text">
<div class="name line1">
<span class="iconfont icon-jingpintuijian"></span>
<span class="label">精品推荐</span>
</div>
</view>
<view @click="goHotNewGoods(1)" class="more">
更多
<text class="iconfont icon-jiantou"></text>
</view>
</view>
<Good-list :good-list="bastList" :is-sort="false"></Good-list>
</view>
<view class="wrapper" v-if="firstList.length > 0">
<view class="title acea-row row-between-wrapper">
<view class="text">
<view class="name line1">
<span class="iconfont icon-xinpin"></span>
<span class="label">首发新品</span>
</view>
</view>
<view @click="goHotNewGoods(3)" class="more">
更多
<text class="iconfont icon-jiantou"></text>
</view>
</view>
<view class="newProducts">
<scroll-view :show-scrollbar="false" scroll-y="false" scroll-x="true">
<view class="newProductsScroll">
<view @click="goGoodsCon(item)" class="newProductsItem" v-for="(item, firstListIndex) in firstList" :key="firstListIndex">
<view class="img-box">
<image :src="item.image" />
</view>
<view class="pro-info line1">{{ item.storeName }}</view>
<view class="money font-color-red">￥{{ item.price }}</view>
</view>
</view>
</scroll-view>
</view>
</view>
<view class="wrapper" v-if="benefit.length > 0">
<view class="title acea-row row-center">
<view class="text text-center">
<div class="name line1 new-name">
<span class="iconfont icon-shoucang"></span>
<span class="txt">猜你喜欢</span>
</div>
</view>
<!-- <view @click="goGoodsPromotion(4)" class="more">
更多
<text class="iconfont icon-jiantou"></text>
</view> -->
</view>
</view>
<PromotionGood :benefit="benefit"></PromotionGood>
<Coupon-window :coupon-list="couponList" v-if="showCoupon" @checked="couponClose" @close="couponClose"></Coupon-window>
</view>
</template>
<script>
import colorThief from 'miniapp-color-thief';
// import { swiper, swiperSlide } from "vue-awesome-swiper";
import {
mapState,
mapMutations,
@ -59,10 +149,7 @@
import GoodList from '@/components/GoodList';
import PromotionGood from '@/components/PromotionGood';
import CouponWindow from '@/components/CouponWindow';
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 uniNoticeBar from '@/components/uni-notice-bar/uni-notice-bar.vue'
import {
getHomeData,
getShare
@ -80,32 +167,18 @@
components: {
// swiper,
// swiperSlide,
UniNoticeBar,
uniNoticeBar,
GoodList,
PromotionGood,
CouponWindow,
Menu,
Adv,
Groupon
CouponWindow
},
props: {},
data: function () {
data: function() {
return {
CustomBar: this.CustomBar,
StatusBar: this.StatusBar,
formatMenus: [],
bgcolorAry: [],
categoryCurrent: 0,
menuNum: 5,
bgcolor: '',
bgColor: '',
swiperCurrent: 0, //轮播下标
webviewId: 0,
showCoupon: false,
logoUrl: '',
banner: [],
menus: [],
combinationList: [],
roll: [],
activity: [],
activityOne: {},
@ -173,26 +246,15 @@
slidesPerView: 'auto',
observer: true,
observeParents: true
},
bgImage:''
}
};
},
computed: {
singNew() {
return this.roll.length > 0 ? this.roll[0] : "你还没添加通知哦！";
},
customStyle() {
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:${this.StatusBar}px;background: ${this.bgcolor}`;
if (this.bgImage) {
style = `${style}background-image:url(${bgImage});`;
}
return style
},
}
},
onShow: function () {
onShow: function() {
this.getLocation()
let that = this;
uni.showLoading({
@ -210,10 +272,8 @@
that.$set(that, 'lovely', res.data.lovely);
that.$set(that, 'benefit', res.data.benefit);
that.$set(that, 'couponList', res.data.couponList);
that.$set(that, 'combinationList', res.data.combinationList);
uni.hideLoading();
that.setOpenShare();
that.doColorThief()
});
},
methods: {
@ -249,7 +309,7 @@
goGoodsPromotion() {
this.$yrouter.push('/pages/shop/GoodsPromotion/index');
},
setOpenShare: function () {
setOpenShare: function() {
if (this.$deviceType == 'weixin') {
getShare().then(res => {
var data = res.data.data;
@ -263,10 +323,15 @@
})
}
},
startQr: function () {
startQr: function() {
uni.scanCode({
success: (res) => {
let option = handleUrlParam(res.result)
console.log(option)
// {productId: "19", spread: "21", codeType: "routine"}
// {productId: "19", spread: "21", pageType: "good", codeType: "routine"}
switch (option.pageType) {
case 'good':
// 跳转商品详情
@ -309,63 +374,11 @@
}
});
},
async doColorThief() {
let that = this;
let bannerItem = this.banner[this.swiperCurrent]
let bgcolorItem = this.bgcolorAry[this.swiperCurrent]
if (!bgcolorItem) {
let ctx = uni.createCanvasContext('colorThief', that);
if (0 === that.webviewId || ctx.webviewId === that.webviewId) {
that.webviewId = ctx.webviewId;
uni.getImageInfo({
src: bannerItem.pic,
success: function (image) {
ctx.drawImage(image.path, 0, 0, image.width, image.height);
ctx.draw(true, function (e) {
uni.canvasGetImageData({
canvasId: 'colorThief',
x: 0,
y: 0,
width: parseInt(image.width),
height: parseInt(image.height),
success(res) {
let bgcolor = colorThief(res.data).color()
.getHex();
that.bgcolorAry[that.swiperCurrent] = bgcolor
that.getbgcolor(bgcolor)
}
}, );
});
}
});
}
} else {
this.getbgcolor(bgcolorItem)
}
},
swiperChange(e) {
this.swiperCurrent = e.detail.current;
this.doColorThief();
let bgcolor = this.bgcolorAry[this.swiperCurrent];
this.getbgcolor(bgcolor)
},
getbgcolor(e) {
this.bgcolor = e;
},
},
created: async function () {
await this.doColorThief();
},
}
}
};
</script>
<style scoped lang="less">
.content_box {
background: #f6f6f6;
}
.index {
background-color: #fff;
}
@ -377,13 +390,7 @@
.fixed-header {
position: fixed;
z-index: 99;
// #ifdef H5
top: 88rpx;
// #endif
// #ifndef H5
top: 0;
// #endif
left: 0;
right: 0;
background: #fff;
@ -393,119 +400,4 @@
height: 98rpx
}
}
.head_box {
position: relative;
z-index: 10;
width: 100%;
// background: #fff;
transition: all linear 0.3s;
/deep/.cuIcon-back {
display: none;
}
.nav-title {
font-size: 38rpx;
font-family: PingFang SC;
font-weight: 500;
color: #fff;
}
}
.hide-canvas {
position: fixed !important;
top: -99999upx;
left: -99999upx;
z-index: -99999;
}
// 轮播
.banner-swiper-box {
background: #fff;
}
.banner-swiper-box,
.banner-carousel {
width: 750rpx;
height: 350upx;
position: relative;
.carousel-item {
width: 100%;
height: 100%;
// padding: 0 28upx;
overflow: hidden;
}
.swiper-image {
width: 100%;
height: 100%;
// border-radius: 10upx;
// background: #ccc;
}
}
.banner-swiper-dots {
display: flex;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 20rpx;
z-index: 66;
.banner-dot {
width: 14rpx;
height: 14rpx;
background: rgba(255, 255, 255, 1);
border-radius: 50%;
margin-right: 10rpx;
}
.banner-dot-active {
width: 14rpx;
height: 14rpx;
background: #a8700d;
border-radius: 50%;
margin-right: 10rpx;
}
}
.cu-bar.fixed {
position: fixed;
width: 100%;
top: 0;
z-index: 1024;
// box-shadow: 0 1upx 6upx rgba(0, 0, 0, 0.1);
}
.cu-bar {
box-sizing: border-box;
.index .header {
height: 64rpx;
// width: 100%;
// padding: 0 30rpx;
// box-sizing: border-box;
}
}
.header-search {
transition: all linear 0.3s;
}
.cu-bar .action {
display: -webkit-box;
display: -webkit-flex;
display: flex;
align-items: center;
height: 100%;
max-height: 100%;
&:first-child {
margin-left: 15px;
font-size: 15px;
}
}
</style>