390 lines
8.7 KiB
Vue
390 lines
8.7 KiB
Vue
<template>
|
|
<view class="index-home p-t-10">
|
|
|
|
<ad-swipers :pid="7" height="312rpx" padding="0 30rpx" radius="20rpx"></ad-swipers>
|
|
|
|
<bubble-tips top="280rpx" :discharge="isDischarge"></bubble-tips>
|
|
|
|
<view class="content">
|
|
<!-- #ifdef MP-WEIXIN -->
|
|
<view class="live m-t-20" v-if="appConfig.index_setting.live_room && liveList.length">
|
|
<view class="live-header flex row-between">
|
|
<view class="xxl bold">直播间</view>
|
|
<router-link to="/bundle_b/pages/live_room/live_room">
|
|
<view class="sm">更多 <u-icon name="arrow-right"></u-icon>
|
|
</view>
|
|
</router-link>
|
|
</view>
|
|
<view class="live-lists">
|
|
<scroll-view scroll-x="true">
|
|
<view class="inline">
|
|
<view class="flex p-l-20">
|
|
<view v-for="item in liveList" class="m-r-20" style="width: 286rpx;" :key="item.id">
|
|
<live-item :data="item"></live-item>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</view>
|
|
<!-- #endif -->
|
|
<!-- 秒杀 -->
|
|
<!-- <view class="seckill m-t-20" v-if="seckillGoods.length">
|
|
<home-seckill :list="seckillGoods"></home-seckill>
|
|
</view> -->
|
|
|
|
<view class="container flex m-t-20">
|
|
<view class="section hot-sale">
|
|
<router-link to="/pages/active_list/active_list?type=year">
|
|
<view class="header row-center bold xxl">
|
|
年货超值购
|
|
</view>
|
|
</router-link>
|
|
<view class="content">
|
|
<swiper class="swiper" :autoplay="true" :interval="3000" style="height: 500rpx;">
|
|
<swiper-item v-for="(item, index) in yearGoods.lists" :key="index">
|
|
<router-link :to="{path: '/pages/goods_details/goods_details', query: {id: item.goods_id || item.id}}">
|
|
<view style="border-radius: 20rpx;">
|
|
<view class="paixu-block">
|
|
<u-image mode="aspectFill" width="100%" height="360rpx"
|
|
border-radius="20" :src="item.image">
|
|
</u-image>
|
|
<!-- <image v-if="index < 3" class="paixu" :src="aliOSS + 'uniapp/No.' + index + '.png'"></image> -->
|
|
</view>
|
|
|
|
<view class="line-2 p-t-20">
|
|
<text v-if="item.presale == 1" class="$u-type-error">【预售】</text>
|
|
{{item.name}}
|
|
</view>
|
|
<price-format :color="colorConfig.primary" class="m-r-10" :first-size="34" :second-size="26"
|
|
:subscript-size="26" :price="item.activity_price || item.min_price"
|
|
:weight="500"></price-format>
|
|
<price-format v-if="p_id == 0" class="muted" :firstSize="24" :secondSize="24"
|
|
:subscript-size="24" line-through
|
|
:price="item.market_price || item.price"></price-format>
|
|
</view>
|
|
</router-link>
|
|
</swiper-item>
|
|
</swiper>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="m-l-20" style="width: 54%;">
|
|
<view class="section special-price">
|
|
<router-link to="/bundle_b/pages/panic_buying/index">
|
|
<view class="header row-between">
|
|
<u-image :src="aliOSS + 'uniapp/tttj.png'" height="80" width="120" mode="aspectFit"></u-image>
|
|
<u-icon name="arrow-right" size="28" color="#ccc"></u-icon>
|
|
</view>
|
|
</router-link>
|
|
<view class="content">
|
|
<panic-buying v-if="appConfig.group_buy_status" :list="panicList"></panic-buying>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="section shop-news">
|
|
<router-link to="/bundle_b/pages/mall_news/index">
|
|
<view class="header row-between">
|
|
<view class="flex row-center">
|
|
<text class="bold m-r-5 lg">商城</text>
|
|
<u-image :src="aliOSS + 'uniapp/kx.png'" height="80" width="80" mode="aspectFit"></u-image>
|
|
</view>
|
|
<u-icon name="arrow-right" size="28" color="#ccc"></u-icon>
|
|
</view>
|
|
</router-link>
|
|
|
|
<view class="content">
|
|
<mall-news :list="mallNews"></mall-news>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="m-t-20" v-if="appConfig.index_setting.shop_show && shopLists.length">
|
|
<shop-recommend type="shop-recommends" title="店铺推荐" :list="shopLists"></shop-recommend>
|
|
</view>
|
|
|
|
<view class="m-t-20" v-if="appConfig.index_setting.shop_show && shopRecommend.length"
|
|
v-for="(item, index) in shopRecommend" :key="index">
|
|
<shop-item :item="item" :price-type="priceType"></shop-item>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
arraySlice,
|
|
menuJump
|
|
} from '@/utils/tools'
|
|
import {
|
|
mapGetters
|
|
} from 'vuex'
|
|
export default {
|
|
props: {
|
|
navList: {
|
|
type: Array,
|
|
default: () => ([])
|
|
},
|
|
list: {
|
|
type: Array,
|
|
default: () => ([])
|
|
},
|
|
homeData: {
|
|
type: Object,
|
|
default: () => ({})
|
|
},
|
|
liveList: {
|
|
type: Array,
|
|
default: () => ([])
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
newNavList: [],
|
|
navSwiperH: '',
|
|
currentSwiper: 0,
|
|
isDischarge: false,
|
|
goodsList: [],
|
|
width: '400rpx'
|
|
}
|
|
},
|
|
mounted() {
|
|
this.isDischarge = false;
|
|
},
|
|
destroyed() {
|
|
this.isDischarge = true;
|
|
},
|
|
methods: {
|
|
swiperChange(e) {
|
|
this.currentSwiper = e.detail.current
|
|
},
|
|
menuJump(item) {
|
|
menuJump(item)
|
|
}
|
|
},
|
|
watch: {
|
|
navList(val) {
|
|
if (val.length <= 5) {
|
|
this.navSwiperH = 200
|
|
} else {
|
|
this.navSwiperH = 374
|
|
}
|
|
this.newNavList = arraySlice(val)
|
|
},
|
|
list(val) {
|
|
this.goodsList = val
|
|
}
|
|
},
|
|
computed: {
|
|
...mapGetters(['appConfig']),
|
|
newsList() {
|
|
return this.homeData.headlines || []
|
|
},
|
|
nearbyShop() {
|
|
return this.homeData.nearby_shops || []
|
|
},
|
|
hotGoods() {
|
|
return this.homeData.hots || []
|
|
},
|
|
hotListGoods() {
|
|
return this.homeData.hot_list || []
|
|
},
|
|
yearGoods() {
|
|
return this.homeData.year_goods || []
|
|
},
|
|
newGoods() {
|
|
return this.homeData.news || []
|
|
},
|
|
communityArticle() {
|
|
return this.homeData.community_article || []
|
|
},
|
|
activityList() {
|
|
return this.homeData.activity_area || []
|
|
},
|
|
shopRecommend() {
|
|
return this.homeData.shop_recommend || []
|
|
},
|
|
shopLists() {
|
|
return this.homeData.shop_lists || []
|
|
},
|
|
seckillGoods() {
|
|
return this.homeData.seckill_goods || []
|
|
},
|
|
mallNews() {
|
|
return this.homeData.mall_news || []
|
|
},
|
|
activityArea() {
|
|
return this.homeData.activity_area || []
|
|
},
|
|
priceType() {
|
|
return this.homeData.set_price_type || 0
|
|
},
|
|
panicList() {
|
|
return this.homeData.groupbuy_goods || []
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.index-home {
|
|
.content {
|
|
padding: 0 30rpx 20rpx;
|
|
|
|
.nav {
|
|
position: relative;
|
|
border-radius: 20rpx;
|
|
|
|
.nav-item {
|
|
width: 20%;
|
|
|
|
.nav-icon {
|
|
width: 82rpx;
|
|
height: 82rpx;
|
|
}
|
|
}
|
|
|
|
.dots {
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
bottom: 20rpx;
|
|
display: flex;
|
|
|
|
.dot {
|
|
width: 10rpx;
|
|
height: 6rpx;
|
|
border-radius: 6rpx;
|
|
margin-right: 10rpx;
|
|
background-color: rgba(255, 44, 60, 0.4);
|
|
|
|
&.active {
|
|
width: 20rpx;
|
|
background-color: $-color-primary;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.information {
|
|
height: 76rpx;
|
|
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.06);
|
|
padding: 0 20rpx;
|
|
border-radius: 20rpx;
|
|
|
|
.news {
|
|
position: relative;
|
|
|
|
.shade {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 100;
|
|
}
|
|
}
|
|
|
|
.icon-toutiao {
|
|
width: 114rpx;
|
|
height: 34rpx;
|
|
}
|
|
|
|
.gap-line {
|
|
height: 28rpx;
|
|
width: 1px;
|
|
background-color: #DCDDDC;
|
|
margin: 0 30rpx;
|
|
}
|
|
}
|
|
|
|
|
|
.title-iamge {
|
|
width: 200rpx;
|
|
height: 100rpx;
|
|
}
|
|
|
|
.activity-zone {
|
|
background-image: url(#{$aliOSS-path}uniapp/bg_activity_home.png);
|
|
background-size: 100% auto;
|
|
padding: 0 15rpx;
|
|
border-radius: 14rpx;
|
|
|
|
.item {
|
|
border-radius: 14rpx;
|
|
width: 324rpx;
|
|
padding: 20rpx 16rpx;
|
|
|
|
.desc {
|
|
width: 160rpx;
|
|
}
|
|
|
|
.btn {
|
|
display: inline-block;
|
|
padding: 2rpx 20rpx;
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
.live {
|
|
background: linear-gradient(180deg, rgba(255, 233, 233, 1) 0%, rgba(255, 255, 255, 1) 74%);
|
|
padding-bottom: 28rpx;
|
|
border-radius: 14rpx;
|
|
|
|
.live-header {
|
|
padding: 28rpx 24rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.container {
|
|
align-items: flex-start;
|
|
height: 600rpx;
|
|
overflow: hidden;
|
|
|
|
.hot-sale {
|
|
width: 46%;
|
|
height: 600rpx;
|
|
}
|
|
|
|
.paixu-block {
|
|
position: relative;
|
|
|
|
.paixu {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 10rpx;
|
|
width: 48rpx;
|
|
height: 60rpx;
|
|
}
|
|
}
|
|
|
|
.section {
|
|
margin-bottom: 20rpx;
|
|
background-color: #fff;
|
|
padding: 10px;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.header {
|
|
display: flex;
|
|
align-items: center;
|
|
height: 60rpx;
|
|
}
|
|
|
|
.content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 0;
|
|
}
|
|
|
|
.item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
margin-bottom: 10px;
|
|
}
|
|
}
|
|
}
|
|
|
|
</style> |