yshop3.1正式发布
This commit is contained in:
xuwenbo
173
pages/home/components/Banner.vue
Normal file
173
pages/home/components/Banner.vue
Normal file
@ -0,0 +1,173 @@
|
||||
<template>
|
||||
<view class="banner-swiper-box">
|
||||
<canvas canvas-id="colorThief" class="hide-canvas"></canvas>
|
||||
<swiper class="banner-carousel Shop-selector-rect" circular @change="swiperChange" :autoplay="true">
|
||||
<swiper-item v-for="(item, index) in list" :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>
|
||||
</swiper>
|
||||
<view class="banner-swiper-dots">
|
||||
<text :class="swiperCurrent === index ? 'banner-dot-active' : 'banner-dot'"
|
||||
v-for="(dot, index) in list.length" :key="index"></text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import colorThief from 'miniapp-color-thief';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
swiperCurrent: 0, //轮播下标
|
||||
webviewId: 0,
|
||||
bgcolorAry: [],
|
||||
list: []
|
||||
};
|
||||
},
|
||||
props: {
|
||||
banner: {
|
||||
type: Array,
|
||||
default: []
|
||||
}
|
||||
},
|
||||
created: async function () {
|
||||
await this.doColorThief();
|
||||
|
||||
},
|
||||
async mounted() {
|
||||
|
||||
},
|
||||
computed: {},
|
||||
watch: {
|
||||
banner(next) {
|
||||
this.list = next;
|
||||
this.doColorThief()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async doColorThief() {
|
||||
let that = this;
|
||||
// 获取轮播图
|
||||
let item = this.list[this.swiperCurrent];
|
||||
if(!item){
|
||||
return
|
||||
}
|
||||
// 获取轮播图颜色
|
||||
let bgcolor = this.bgcolorAry[this.swiperCurrent];
|
||||
// 颜色不存在
|
||||
if (!bgcolor) {
|
||||
let ctx = uni.createCanvasContext('colorThief', that.$scope);
|
||||
if (0 === that.webviewId || ctx.webviewId === that.webviewId) {
|
||||
that.webviewId = ctx.webviewId;
|
||||
uni.getImageInfo({
|
||||
src: item.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 newBgcolor = colorThief(res.data)
|
||||
.color()
|
||||
.getHex();
|
||||
that.$set(that.bgcolorAry, that
|
||||
.swiperCurrent,
|
||||
newBgcolor);
|
||||
that.$emit('getbgcolor', newBgcolor);
|
||||
},
|
||||
fail: function (error) {
|
||||
}
|
||||
}, that.$scope);
|
||||
});
|
||||
},
|
||||
fail: function (error) {
|
||||
}
|
||||
});
|
||||
}
|
||||
} else {
|
||||
that.$set(item, 'bgcolor', bgcolor);
|
||||
that.$emit('getbgcolor', bgcolor);
|
||||
}
|
||||
},
|
||||
swiperChange(e) {
|
||||
this.swiperCurrent = e.detail.current;
|
||||
this.doColorThief();
|
||||
},
|
||||
|
||||
// 路由跳转
|
||||
goRoll(item) {
|
||||
if (item.uniapp_url) {
|
||||
this.$yrouter.push(item.uniapp_url)
|
||||
}
|
||||
},
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
// 轮播
|
||||
.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: 5;
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.hide-canvas {
|
||||
position: fixed !important;
|
||||
top: -99999upx;
|
||||
left: -99999upx;
|
||||
z-index: -99999;
|
||||
}
|
||||
</style>
|
||||
216
pages/home/components/FirstNewProduct.vue
Normal file
216
pages/home/components/FirstNewProduct.vue
Normal file
@ -0,0 +1,216 @@
|
||||
<template>
|
||||
<view class="group-goods pa20 mx20 mb10" v-if="detail.length>0">
|
||||
<view class="title-box x-bc" @tap="$yrouter.push({ path: '/pages/shop/HotNewGoods/index',query:{type:3} })">
|
||||
<text class="title">首发新品</text>
|
||||
<view class="group-people x-f">
|
||||
<text class="tip">更多</text>
|
||||
<text class="cuIcon-right"></text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="goods-box swiper-box x-f">
|
||||
<swiper class="carousel" circular @change="swiperChange" :autoplay="true" duration="2000">
|
||||
<swiper-item v-for="(goods, index) in goodsList" :key="index" class="carousel-item">
|
||||
<view class="goods-list-box x-f">
|
||||
<block v-for="mgoods in goods" :key="mgoods.id">
|
||||
<view class="min-goods"
|
||||
@tap="$yrouter.push({ path: '/pages/shop/GoodsCon/index',query:{id:mgoods.id} })">
|
||||
<view class="img-box">
|
||||
<view class="tag">new</view>
|
||||
<image class="img" :src="mgoods.image" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="price-box">
|
||||
<view class="y-f">
|
||||
<text class="seckill-current">￥{{ mgoods.price }}</text>
|
||||
<text class="original">销量{{ mgoods.sales }}{{mgoods.unitName}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="title">
|
||||
<slot name="titleText"></slot>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
<view class="swiper-dots" v-if="goodsList.length > 1">
|
||||
<text :class="swiperCurrent === index ? 'dot-active' : 'dot'" v-for="(dot, index) in goodsList.length"
|
||||
:key="index"></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import shActivityGoods from '@/components/sh-activity-goods.vue';
|
||||
|
||||
export default {
|
||||
name: "FirstNewProduct",
|
||||
components: {
|
||||
shActivityGoods
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
goodsList: [],
|
||||
swiperCurrent: 0
|
||||
};
|
||||
},
|
||||
props: {
|
||||
detail: Array
|
||||
},
|
||||
computed: {},
|
||||
created() {},
|
||||
watch: {
|
||||
detail(next) {
|
||||
this.goodsList = this.sortData(next, 4);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
swiperChange(e) {
|
||||
this.swiperCurrent = e.detail.current;
|
||||
},
|
||||
// 数据分层
|
||||
sortData(oArr, length) {
|
||||
let arr = [];
|
||||
let minArr = [];
|
||||
oArr.forEach(c => {
|
||||
if (minArr.length === length) {
|
||||
minArr = [];
|
||||
}
|
||||
if (minArr.length === 0) {
|
||||
arr.push(minArr);
|
||||
}
|
||||
minArr.push(c);
|
||||
});
|
||||
|
||||
return arr;
|
||||
},
|
||||
jump(path, query) {
|
||||
this.$yrouter.push({
|
||||
path,
|
||||
query,
|
||||
});
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.group-goods {
|
||||
position: relative;
|
||||
z-index: 9;
|
||||
}
|
||||
|
||||
.swiper-box,
|
||||
.carousel {
|
||||
width: 700rpx;
|
||||
height: 240upx;
|
||||
position: relative;
|
||||
border-radius: 20rpx;
|
||||
|
||||
.carousel-item {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
// padding: 0 28upx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.swiper-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
// border-radius: 10upx;
|
||||
background: #ccc;
|
||||
}
|
||||
}
|
||||
|
||||
.swiper-dots {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
bottom: 0rpx;
|
||||
z-index: 66;
|
||||
|
||||
.dot {
|
||||
width: 45rpx;
|
||||
height: 3rpx;
|
||||
background: #eee;
|
||||
border-radius: 50%;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
.dot-active {
|
||||
width: 45rpx;
|
||||
height: 3rpx;
|
||||
background: #a8700d;
|
||||
border-radius: 50%;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
// 今日必拼+限时抢购
|
||||
.group-goods {
|
||||
background: #fff;
|
||||
border-radius: 20rpx;
|
||||
overflow: hidden;
|
||||
|
||||
.title-box {
|
||||
padding-bottom: 20rpx;
|
||||
|
||||
.title {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.group-people {
|
||||
.time-box {
|
||||
font-size: 26rpx;
|
||||
color: #edbf62;
|
||||
|
||||
.count-text-box {
|
||||
width: 30rpx;
|
||||
height: 34rpx;
|
||||
background: #edbf62;
|
||||
text-align: center;
|
||||
line-height: 34rpx;
|
||||
font-size: 24rpx;
|
||||
border-radius: 6rpx;
|
||||
color: rgba(#fff, 0.9);
|
||||
margin: 0 8rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.head-box {
|
||||
.head-img {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
border-radius: 50%;
|
||||
background: #ccc;
|
||||
}
|
||||
}
|
||||
|
||||
.tip {
|
||||
font-size: 28rpx;
|
||||
padding-left: 30rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.cuIcon-right {
|
||||
font-size: 30rpx;
|
||||
line-height: 28rpx;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.goods-box {
|
||||
.goods-item {
|
||||
margin-right: 22rpx;
|
||||
|
||||
&:nth-child(4n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
219
pages/home/components/HotCommodity.vue
Normal file
219
pages/home/components/HotCommodity.vue
Normal file
@ -0,0 +1,219 @@
|
||||
<template>
|
||||
<view class="group-goods pa20 mx20 mb10" v-if="detail.length>0">
|
||||
<view class="title-box x-bc" @tap="$yrouter.push({ path: '/pages/shop/HotNewGoods/index',query:{type:2} })">
|
||||
<text class="title">热门榜单</text>
|
||||
<view class="group-people x-f">
|
||||
<text class="tip">更多</text>
|
||||
<text class="cuIcon-right"></text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="goods-box swiper-box x-f">
|
||||
<swiper class="carousel" circular @change="swiperChange" :autoplay="true" duration="2000">
|
||||
<swiper-item v-for="(goods, index) in goodsList" :key="index" class="carousel-item">
|
||||
<view class="goods-list-box x-f">
|
||||
<block v-for="mgoods in goods" :key="mgoods.id">
|
||||
<view class="min-goods" @tap="jump('/pages/shop/GoodsCon/index',{id:mgoods.id})">
|
||||
<view class="img-box">
|
||||
<view class="tag">hot</view>
|
||||
<image class="img" :src="mgoods.image" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="price-box">
|
||||
<view class="y-f">
|
||||
<text class="seckill-current">￥{{ mgoods.price }}</text>
|
||||
<text class="original">销量{{ mgoods.sales }}{{mgoods.unitName}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="title">
|
||||
<slot name="titleText"></slot>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
<view class="swiper-dots" v-if="goodsList.length > 1">
|
||||
<text :class="swiperCurrent === index ? 'dot-active' : 'dot'" v-for="(dot, index) in goodsList.length"
|
||||
:key="index"></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import shActivityGoods from '@/components/sh-activity-goods.vue';
|
||||
|
||||
export default {
|
||||
name: "HotCommodity",
|
||||
components: {
|
||||
shActivityGoods
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
goodsList: [],
|
||||
swiperCurrent: 0
|
||||
};
|
||||
},
|
||||
props: {
|
||||
detail: Array
|
||||
},
|
||||
computed: {},
|
||||
created() {},
|
||||
watch: {
|
||||
detail(next) {
|
||||
this.goodsList = this.sortData(next, 4);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
swiperChange(e) {
|
||||
this.swiperCurrent = e.detail.current;
|
||||
},
|
||||
// 数据分层
|
||||
sortData(oArr, length) {
|
||||
let arr = [];
|
||||
let minArr = [];
|
||||
oArr.forEach(c => {
|
||||
if (minArr.length === length) {
|
||||
minArr = [];
|
||||
}
|
||||
if (minArr.length === 0) {
|
||||
arr.push(minArr);
|
||||
}
|
||||
minArr.push(c);
|
||||
});
|
||||
|
||||
return arr;
|
||||
},
|
||||
jump(path, query) {
|
||||
this.$yrouter.push({
|
||||
path,
|
||||
query,
|
||||
});
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.group-goods {
|
||||
position: relative;
|
||||
z-index: 9;
|
||||
}
|
||||
|
||||
.swiper-box,
|
||||
.carousel {
|
||||
width: 700rpx;
|
||||
height: 240upx;
|
||||
position: relative;
|
||||
border-radius: 20rpx;
|
||||
|
||||
.carousel-item {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
// padding: 0 28upx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.swiper-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
// border-radius: 10upx;
|
||||
background: #ccc;
|
||||
}
|
||||
}
|
||||
|
||||
.swiper-dots {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
bottom: 0rpx;
|
||||
z-index: 66;
|
||||
|
||||
.dot {
|
||||
width: 45rpx;
|
||||
height: 3rpx;
|
||||
background: #eee;
|
||||
border-radius: 50%;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
.dot-active {
|
||||
width: 45rpx;
|
||||
height: 3rpx;
|
||||
background: #a8700d;
|
||||
border-radius: 50%;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
// 今日必拼+限时抢购
|
||||
.group-goods {
|
||||
background: #fff;
|
||||
border-radius: 20rpx;
|
||||
overflow: hidden;
|
||||
|
||||
.title-box {
|
||||
padding-bottom: 20rpx;
|
||||
|
||||
.title {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.group-people {
|
||||
.time-box {
|
||||
font-size: 26rpx;
|
||||
color: #edbf62;
|
||||
|
||||
.count-text-box {
|
||||
width: 30rpx;
|
||||
height: 34rpx;
|
||||
background: #edbf62;
|
||||
text-align: center;
|
||||
line-height: 34rpx;
|
||||
font-size: 24rpx;
|
||||
border-radius: 6rpx;
|
||||
color: rgba(#fff, 0.9);
|
||||
margin: 0 8rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.head-box {
|
||||
.head-img {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
border-radius: 50%;
|
||||
background: #ccc;
|
||||
}
|
||||
}
|
||||
|
||||
.tip {
|
||||
font-size: 28rpx;
|
||||
padding-left: 30rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.cuIcon-right {
|
||||
font-size: 30rpx;
|
||||
line-height: 28rpx;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.goods-box {
|
||||
.goods-item {
|
||||
margin-right: 22rpx;
|
||||
|
||||
&:nth-child(4n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.min-goods{
|
||||
margin-right: 22rpx;
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
249
pages/home/components/Live.vue
Normal file
249
pages/home/components/Live.vue
Normal file
@ -0,0 +1,249 @@
|
||||
<template>
|
||||
<view class="live-el mx20 mb10">
|
||||
<view class="head">
|
||||
<text class="head-title">热门直播</text>
|
||||
<view class="head-more" @tap="$yrouter.push('/pages/shop/Live/LiveList/index')">
|
||||
<text>更多</text>
|
||||
<text class="cuIcon-right"></text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="content-one">
|
||||
<view class="content-one__item" v-for="live in detail" :key="live.roomId" @tap="goRoom(live)">
|
||||
<image class="item-cover" :src="live.shareImge" mode="widthFix"></image>
|
||||
<view class="item-status">
|
||||
<image class="status-img" :src="liveStatus[live.liveStatus].img" mode=""></image>
|
||||
<text class="status-text">{{ liveStatus[live.liveStatus].title }}</text>
|
||||
</view>
|
||||
<view class="item-title">{{ live.name }}</view>
|
||||
<image v-if="live.liveStatus == 101" class="like-img" src="http://Shop.7wpp.com/imgs/live/zan.gif"
|
||||
mode=""></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ShopLiveCard from '@/components/ShopLiveCard.vue'
|
||||
|
||||
let HAS_LIVE = false
|
||||
// #ifdef MP-WEIXIN
|
||||
HAS_LIVE = true
|
||||
let livePlayer = null;
|
||||
if (HAS_LIVE) {
|
||||
livePlayer = requirePlugin('live-player-plugin');
|
||||
}
|
||||
// #endif
|
||||
import {
|
||||
yxWechatLive,
|
||||
getLiveReplay
|
||||
} from '@/api/live';
|
||||
|
||||
let timer = null;
|
||||
export default {
|
||||
components: {
|
||||
ShopLiveCard
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
liveList: [],
|
||||
liveStatus: {
|
||||
'101': {
|
||||
img: 'https://wx.yixiang.co/static/images/live.png',
|
||||
title: '直播中'
|
||||
},
|
||||
'102': {
|
||||
img: 'https://wx.yixiang.co/static/images/prevue.png',
|
||||
title: '未开始'
|
||||
},
|
||||
'103': {
|
||||
img: 'https://wx.yixiang.co/static/images/playback.png',
|
||||
title: '已结束'
|
||||
},
|
||||
'104': {
|
||||
img: 'https://wx.yixiang.co/static/images/104.png',
|
||||
title: '禁播'
|
||||
},
|
||||
'105': {
|
||||
img: 'https://wx.yixiang.co/static/images/105.png',
|
||||
title: '暂停中'
|
||||
},
|
||||
'106': {
|
||||
img: 'https://wx.yixiang.co/static/images/106.png',
|
||||
title: '异常'
|
||||
},
|
||||
'107': {
|
||||
img: 'https://wx.yixiang.co/static/images/past.png',
|
||||
title: '已过期'
|
||||
}
|
||||
}
|
||||
};
|
||||
},
|
||||
props: {
|
||||
detail: Array
|
||||
},
|
||||
created() {
|
||||
},
|
||||
mounted() {
|
||||
let that = this;
|
||||
timer = setInterval(() => {
|
||||
that.getLiveStatus();
|
||||
}, 60000);
|
||||
},
|
||||
beforeDestroy() {
|
||||
timer = null;
|
||||
},
|
||||
computed: {},
|
||||
methods: {
|
||||
// 直播列表
|
||||
getLiveList() {
|
||||
// let that = this;
|
||||
// yxWechatLive({
|
||||
// page: 1,
|
||||
// size: 10,
|
||||
// }).then(res => {
|
||||
// console.log(res)
|
||||
// })
|
||||
},
|
||||
// 轮询liveStatus
|
||||
getLiveStatus() {
|
||||
// if (HAS_LIVE) {
|
||||
// let that = this;
|
||||
// let date = '';
|
||||
// if (that.detail.liveStatus == 102) {
|
||||
// date = that.$tools.dateFormat('mm-dd HH:MM', new Date(that.detail.starttime * 1000)).replace('-',
|
||||
// '/');
|
||||
// that.liveStatus['102'].title = '预告 ' + date;
|
||||
// }
|
||||
// livePlayer
|
||||
// .getLiveStatus({
|
||||
// room_id: that.detail.roomId
|
||||
// })
|
||||
// .then(res => {
|
||||
// // 101: 直播中, 102: 未开始, 103: 已结束, 104: 禁播, 105: 暂停中, 106: 异常，107：已过期
|
||||
// that.detail.liveStatus = res.liveStatus;
|
||||
// })
|
||||
// .catch(err => {
|
||||
// console.log('get live status', err);
|
||||
// });
|
||||
// }
|
||||
},
|
||||
goRoom(live) {
|
||||
console.log(live.roomId,9999)
|
||||
wx.navigateTo({
|
||||
url: `plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=${live.roomId}`
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.live-el {
|
||||
background: #fff;
|
||||
border-radius: 20rpx;
|
||||
padding: 30rpx 20rpx 25rpx;
|
||||
|
||||
.head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
&-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
font-family: PingFang SC;
|
||||
color: rgba(51, 51, 51, 1);
|
||||
}
|
||||
|
||||
&-more {
|
||||
font-size: 26rpx;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 500;
|
||||
color: rgba(51, 51, 51, 1);
|
||||
}
|
||||
}
|
||||
|
||||
// 单个大图直播
|
||||
.content-one {
|
||||
.content-one__item {
|
||||
position: relative;
|
||||
height: 280rpx;
|
||||
border-radius: 20rpx;
|
||||
margin-top: 25rpx;
|
||||
overflow: hidden;
|
||||
|
||||
.item-cover {
|
||||
background-color: #eee;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.item-status {
|
||||
position: absolute;
|
||||
top: 20rpx;
|
||||
left: 10rpx;
|
||||
height: 40rpx;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
border-radius: 20rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.status-img {
|
||||
width: 38rpx;
|
||||
height: 38rpx;
|
||||
}
|
||||
|
||||
.status-text {
|
||||
font-size: 22rpx;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 500;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
padding: 0 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.item-title {
|
||||
width: 680rpx;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
line-height: 60rpx;
|
||||
padding: 0 20rpx;
|
||||
font-size: 26rpx;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 500;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
background: linear-gradient(transparent, rgba(#000, 0.5));
|
||||
}
|
||||
|
||||
.like-img {
|
||||
position: absolute;
|
||||
bottom: 20rpx;
|
||||
right: 10rpx;
|
||||
width: 60rpx;
|
||||
height: 130rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 双图直播
|
||||
.content-two {
|
||||
width: 100%;
|
||||
// -moz-column-count: 2;
|
||||
// -webkit-column-count: 2;
|
||||
// column-count: 2;
|
||||
// padding-top: 20rpx;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
&__item {
|
||||
margin-right: 30rpx;
|
||||
margin-top: 20rpx;
|
||||
|
||||
&:nth-child(2n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
215
pages/home/components/ProductsRecommended.vue
Normal file
215
pages/home/components/ProductsRecommended.vue
Normal file
@ -0,0 +1,215 @@
|
||||
<template>
|
||||
<view class="group-goods pa20 mx20 mb10" v-if="detail.length>0">
|
||||
<view class="title-box x-bc" @tap="$yrouter.push({ path: '/pages/shop/HotNewGoods/index',query:{type:1} })">
|
||||
<text class="title">精品推荐</text>
|
||||
<view class="group-people x-f">
|
||||
<text class="tip">更多</text>
|
||||
<text class="cuIcon-right"></text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="goods-box swiper-box x-f">
|
||||
<swiper class="carousel" circular @change="swiperChange" :autoplay="true" duration="2000">
|
||||
<swiper-item v-for="(goods, index) in goodsList" :key="index" class="carousel-item">
|
||||
<view class="goods-list-box x-f">
|
||||
<block v-for="mgoods in goods" :key="mgoods.id">
|
||||
<view class="min-goods" @tap="$yrouter.push({ path: '/pages/shop/GoodsCon/index',query:{id:mgoods.id} })">
|
||||
<view class="img-box">
|
||||
<!-- <view class="tag">{{ mgoods.people}}人团</view> -->
|
||||
<image class="img" :src="mgoods.image" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="price-box">
|
||||
<view class="y-f">
|
||||
<text class="seckill-current">￥{{ mgoods.price }}</text>
|
||||
<text class="original">销量{{ mgoods.sales }}{{mgoods.unitName}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="title">
|
||||
<slot name="titleText"></slot>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
<view class="swiper-dots" v-if="goodsList.length > 1">
|
||||
<text :class="swiperCurrent === index ? 'dot-active' : 'dot'" v-for="(dot, index) in goodsList.length"
|
||||
:key="index"></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import shActivityGoods from '@/components/sh-activity-goods.vue';
|
||||
|
||||
export default {
|
||||
name: "ProductsRecommended",
|
||||
components: {
|
||||
shActivityGoods
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
goodsList: [],
|
||||
swiperCurrent: 0
|
||||
};
|
||||
},
|
||||
props: {
|
||||
detail: Array
|
||||
},
|
||||
computed: {},
|
||||
created() {},
|
||||
watch: {
|
||||
detail(next) {
|
||||
this.goodsList = this.sortData(next, 4);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
swiperChange(e) {
|
||||
this.swiperCurrent = e.detail.current;
|
||||
},
|
||||
// 数据分层
|
||||
sortData(oArr, length) {
|
||||
let arr = [];
|
||||
let minArr = [];
|
||||
oArr.forEach(c => {
|
||||
if (minArr.length === length) {
|
||||
minArr = [];
|
||||
}
|
||||
if (minArr.length === 0) {
|
||||
arr.push(minArr);
|
||||
}
|
||||
minArr.push(c);
|
||||
});
|
||||
|
||||
return arr;
|
||||
},
|
||||
jump(path, query) {
|
||||
this.$yrouter.push({
|
||||
path,
|
||||
query,
|
||||
});
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.group-goods {
|
||||
position: relative;
|
||||
z-index: 9;
|
||||
}
|
||||
|
||||
.swiper-box,
|
||||
.carousel {
|
||||
width: 700rpx;
|
||||
height: 240upx;
|
||||
position: relative;
|
||||
border-radius: 20rpx;
|
||||
|
||||
.carousel-item {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
// padding: 0 28upx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.swiper-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
// border-radius: 10upx;
|
||||
background: #ccc;
|
||||
}
|
||||
}
|
||||
|
||||
.swiper-dots {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
bottom: 0rpx;
|
||||
z-index: 66;
|
||||
|
||||
.dot {
|
||||
width: 45rpx;
|
||||
height: 3rpx;
|
||||
background: #eee;
|
||||
border-radius: 50%;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
.dot-active {
|
||||
width: 45rpx;
|
||||
height: 3rpx;
|
||||
background: #a8700d;
|
||||
border-radius: 50%;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
// 今日必拼+限时抢购
|
||||
.group-goods {
|
||||
background: #fff;
|
||||
border-radius: 20rpx;
|
||||
overflow: hidden;
|
||||
|
||||
.title-box {
|
||||
padding-bottom: 20rpx;
|
||||
|
||||
.title {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.group-people {
|
||||
.time-box {
|
||||
font-size: 26rpx;
|
||||
color: #edbf62;
|
||||
|
||||
.count-text-box {
|
||||
width: 30rpx;
|
||||
height: 34rpx;
|
||||
background: #edbf62;
|
||||
text-align: center;
|
||||
line-height: 34rpx;
|
||||
font-size: 24rpx;
|
||||
border-radius: 6rpx;
|
||||
color: rgba(#fff, 0.9);
|
||||
margin: 0 8rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.head-box {
|
||||
.head-img {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
border-radius: 50%;
|
||||
background: #ccc;
|
||||
}
|
||||
}
|
||||
|
||||
.tip {
|
||||
font-size: 28rpx;
|
||||
padding-left: 30rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.cuIcon-right {
|
||||
font-size: 30rpx;
|
||||
line-height: 28rpx;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.goods-box {
|
||||
.goods-item {
|
||||
margin-right: 22rpx;
|
||||
|
||||
&:nth-child(4n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
216
pages/home/components/PromoteProduct.vue
Normal file
216
pages/home/components/PromoteProduct.vue
Normal file
@ -0,0 +1,216 @@
|
||||
<template>
|
||||
<view class="group-goods pa20 mx20 mb10" v-if="detail.length>0">
|
||||
<view class="title-box x-bc" @tap="$yrouter.push('/pages/shop/GoodsPromotion/index')">
|
||||
<text class="title">促销单品</text>
|
||||
<view class="group-people x-f">
|
||||
<text class="tip">更多</text>
|
||||
<text class="cuIcon-right"></text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="goods-box swiper-box x-f">
|
||||
<swiper class="carousel" circular @change="swiperChange" :autoplay="true" duration="2000">
|
||||
<swiper-item v-for="(goods, index) in goodsList" :key="index" class="carousel-item">
|
||||
<view class="goods-list-box x-f">
|
||||
<block v-for="mgoods in goods" :key="mgoods.id">
|
||||
<view class="min-goods"
|
||||
@tap="$yrouter.push({ path: '/pages/shop/GoodsCon/index', query: { id: item.id } })">
|
||||
<view class="img-box">
|
||||
<view class="tag">促销</view>
|
||||
<image class="img" :src="mgoods.image" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="price-box">
|
||||
<view class="y-f">
|
||||
<text class="seckill-current">日常价：￥{{ mgoods.price }}</text>
|
||||
<text class="original">仅剩：{{ mgoods.stock }}{{ mgoods.unitName }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="title">
|
||||
<slot name="titleText"></slot>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
<view class="swiper-dots" v-if="goodsList.length > 1">
|
||||
<text :class="swiperCurrent === index ? 'dot-active' : 'dot'" v-for="(dot, index) in goodsList.length"
|
||||
:key="index"></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import shActivityGoods from '@/components/sh-activity-goods.vue';
|
||||
|
||||
export default {
|
||||
name: "ProductsRecommended",
|
||||
components: {
|
||||
shActivityGoods
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
goodsList: [],
|
||||
swiperCurrent: 0
|
||||
};
|
||||
},
|
||||
props: {
|
||||
detail: Array
|
||||
},
|
||||
computed: {},
|
||||
created() {},
|
||||
watch: {
|
||||
detail(next) {
|
||||
this.goodsList = this.sortData(next, 4);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
swiperChange(e) {
|
||||
this.swiperCurrent = e.detail.current;
|
||||
},
|
||||
// 数据分层
|
||||
sortData(oArr, length) {
|
||||
let arr = [];
|
||||
let minArr = [];
|
||||
oArr.forEach(c => {
|
||||
if (minArr.length === length) {
|
||||
minArr = [];
|
||||
}
|
||||
if (minArr.length === 0) {
|
||||
arr.push(minArr);
|
||||
}
|
||||
minArr.push(c);
|
||||
});
|
||||
|
||||
return arr;
|
||||
},
|
||||
jump(path, query) {
|
||||
this.$yrouter.push({
|
||||
path,
|
||||
query,
|
||||
});
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.group-goods {
|
||||
position: relative;
|
||||
z-index: 9;
|
||||
}
|
||||
|
||||
.swiper-box,
|
||||
.carousel {
|
||||
width: 700rpx;
|
||||
height: 240upx;
|
||||
position: relative;
|
||||
border-radius: 20rpx;
|
||||
|
||||
.carousel-item {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
// padding: 0 28upx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.swiper-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
// border-radius: 10upx;
|
||||
background: #ccc;
|
||||
}
|
||||
}
|
||||
|
||||
.swiper-dots {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
bottom: 0rpx;
|
||||
z-index: 66;
|
||||
|
||||
.dot {
|
||||
width: 45rpx;
|
||||
height: 3rpx;
|
||||
background: #eee;
|
||||
border-radius: 50%;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
.dot-active {
|
||||
width: 45rpx;
|
||||
height: 3rpx;
|
||||
background: #a8700d;
|
||||
border-radius: 50%;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
// 今日必拼+限时抢购
|
||||
.group-goods {
|
||||
background: #fff;
|
||||
border-radius: 20rpx;
|
||||
overflow: hidden;
|
||||
|
||||
.title-box {
|
||||
padding-bottom: 20rpx;
|
||||
|
||||
.title {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.group-people {
|
||||
.time-box {
|
||||
font-size: 26rpx;
|
||||
color: #edbf62;
|
||||
|
||||
.count-text-box {
|
||||
width: 30rpx;
|
||||
height: 34rpx;
|
||||
background: #edbf62;
|
||||
text-align: center;
|
||||
line-height: 34rpx;
|
||||
font-size: 24rpx;
|
||||
border-radius: 6rpx;
|
||||
color: rgba(#fff, 0.9);
|
||||
margin: 0 8rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.head-box {
|
||||
.head-img {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
border-radius: 50%;
|
||||
background: #ccc;
|
||||
}
|
||||
}
|
||||
|
||||
.tip {
|
||||
font-size: 28rpx;
|
||||
padding-left: 30rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.cuIcon-right {
|
||||
font-size: 30rpx;
|
||||
line-height: 28rpx;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.goods-box {
|
||||
.goods-item {
|
||||
margin-right: 22rpx;
|
||||
|
||||
&:nth-child(4n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,6 +1,19 @@
|
||||
<template>
|
||||
<view class="index">
|
||||
<view class="header fixed-header acea-row row-center-wrapper">
|
||||
<!-- 导航栏 -->
|
||||
<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 Shop-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 @click="goGoodSearch()" class="search acea-row row-middle">
|
||||
<text class="iconfont icon-xiazai5"></text>
|
||||
搜索商品
|
||||
@ -9,138 +22,38 @@
|
||||
<image src="@/static/images/qr.png" />
|
||||
</view>
|
||||
</view>
|
||||
<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>
|
||||
<Banner :banner="banner" @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">
|
||||
<!-- 菜单 -->
|
||||
<Menu :list="menus"></Menu>
|
||||
<!-- 滚动新闻 -->
|
||||
<!-- 广告 -->
|
||||
<Adv />
|
||||
<!-- 热门榜单 -->
|
||||
<HotCommodity :detail="likeInfo"></HotCommodity>
|
||||
<!-- 超值拼团 -->
|
||||
<Groupon :detail="combinationList" />
|
||||
<!-- 首发新品->秒杀 -->
|
||||
<!-- <FirstNewProduct :detail="firstList"></FirstNewProduct> -->
|
||||
<!-- 精品推荐 -->
|
||||
<!-- <ProductsRecommended :detail="bastList"></ProductsRecommended> -->
|
||||
<!-- 促销单品
|
||||
<PromoteProduct :detail="benefit"></PromoteProduct> -->
|
||||
<!-- 直播 -->
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<Live :detail="live"></Live>
|
||||
<!-- #endif -->
|
||||
|
||||
<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>
|
||||
<!-- 为您推荐 -->
|
||||
<PromotionGood :benefit="benefit"></PromotionGood>
|
||||
</view>
|
||||
<!-- <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>
|
||||
<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>
|
||||
<Coupon-window :coupon-list="couponList" v-if="showCoupon" @checked="couponClose" @close="couponClose">
|
||||
</Coupon-window>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
// import { swiper, swiperSlide } from "vue-awesome-swiper";
|
||||
import {
|
||||
mapState,
|
||||
mapMutations,
|
||||
@ -149,7 +62,17 @@
|
||||
import GoodList from '@/components/GoodList';
|
||||
import PromotionGood from '@/components/PromotionGood';
|
||||
import CouponWindow from '@/components/CouponWindow';
|
||||
import uniNoticeBar from '@/components/uni-notice-bar/uni-notice-bar.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 HotCommodity from './components/HotCommodity';
|
||||
import FirstNewProduct from './components/FirstNewProduct';
|
||||
import ProductsRecommended from './components/ProductsRecommended';
|
||||
import Live from './components/Live';
|
||||
|
||||
import {
|
||||
getHomeData,
|
||||
getShare
|
||||
@ -167,18 +90,36 @@
|
||||
components: {
|
||||
// swiper,
|
||||
// swiperSlide,
|
||||
uniNoticeBar,
|
||||
UniNoticeBar,
|
||||
GoodList,
|
||||
PromotionGood,
|
||||
CouponWindow
|
||||
CouponWindow,
|
||||
Menu,
|
||||
Adv,
|
||||
Groupon,
|
||||
Banner,
|
||||
HotCommodity,
|
||||
FirstNewProduct,
|
||||
ProductsRecommended,
|
||||
Live
|
||||
},
|
||||
props: {},
|
||||
data: function() {
|
||||
data: function () {
|
||||
return {
|
||||
CustomBar: this.CustomBar,
|
||||
StatusBar: this.StatusBar,
|
||||
formatMenus: [],
|
||||
categoryCurrent: 0,
|
||||
menuNum: 4,
|
||||
bgcolor: '',
|
||||
bgColor: '',
|
||||
swiperCurrent: 0, //轮播下标
|
||||
webviewId: 0,
|
||||
showCoupon: false,
|
||||
logoUrl: '',
|
||||
banner: [],
|
||||
menus: [],
|
||||
combinationList: [],
|
||||
roll: [],
|
||||
activity: [],
|
||||
activityOne: {},
|
||||
@ -191,6 +132,7 @@
|
||||
bastList: []
|
||||
},
|
||||
likeInfo: [],
|
||||
live: [],
|
||||
lovely: [],
|
||||
benefit: [],
|
||||
couponList: [],
|
||||
@ -246,15 +188,26 @@
|
||||
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({
|
||||
@ -269,15 +222,32 @@
|
||||
that.$set(that, 'firstList', res.data.firstList);
|
||||
that.$set(that, 'bastList', res.data.bastList);
|
||||
that.$set(that, 'likeInfo', res.data.likeInfo);
|
||||
that.$set(that, 'live', res.data.liveList);
|
||||
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: {
|
||||
...mapActions(["getLocation"]),
|
||||
onShareTimeline: function () {
|
||||
return {
|
||||
title: this.miniHomeRemark,
|
||||
imageUrl: this.miniHomeImg,
|
||||
path: "pages/home/index?spread=" + uni.getStorageSync("uid")
|
||||
}
|
||||
},
|
||||
onShareAppMessage: function () {
|
||||
return {
|
||||
title: this.miniHomeRemark,
|
||||
imageUrl: this.miniHomeImg,
|
||||
path: "pages/home/index?spread=" + uni.getStorageSync("uid")
|
||||
}
|
||||
},
|
||||
goRoll(item) {
|
||||
if (item.uniapp_url) {
|
||||
this.$yrouter.push(item.uniapp_url)
|
||||
@ -309,7 +279,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;
|
||||
@ -323,15 +293,10 @@
|
||||
})
|
||||
}
|
||||
},
|
||||
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':
|
||||
// 跳转商品详情
|
||||
@ -370,15 +335,23 @@
|
||||
});
|
||||
break;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
getbgcolor(e) {
|
||||
this.bgcolor = e;
|
||||
},
|
||||
},
|
||||
created: async function () {
|
||||
// await this.doColorThief();
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
.content_box {
|
||||
background: #f6f6f6;
|
||||
}
|
||||
|
||||
.index {
|
||||
background-color: #fff;
|
||||
}
|
||||
@ -390,7 +363,13 @@
|
||||
.fixed-header {
|
||||
position: fixed;
|
||||
z-index: 99;
|
||||
// #ifdef H5
|
||||
top: 88rpx;
|
||||
// #endif
|
||||
|
||||
// #ifndef H5
|
||||
top: 0;
|
||||
// #endif
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: #fff;
|
||||
@ -400,4 +379,65 @@
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
.home_content_box {
|
||||
margin-top: -10rpx;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user