396 lines
10 KiB
Vue
396 lines
10 KiB
Vue
<template>
|
|
<view class="content">
|
|
<!-- swiper -->
|
|
<view class="swiper">
|
|
<view class="swiper-box">
|
|
<swiper autoplay @change="swiperCount = $event.detail.current">
|
|
<swiper-item v-for="(item, index) in banners" :key="index" @click="goBook(item)">
|
|
<image :src="item.cover" mode="aspectFill"></image>
|
|
</swiper-item>
|
|
</swiper>
|
|
<view class="swiper-pages">
|
|
<block v-for="(item, index) in banners" :key="index">
|
|
<text class="pages-item" :class="{'show':swiperCount === index}"></text>
|
|
</block>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 健康产品分类 -->
|
|
<u-scroll-list class="classify-box" indicatorColor="#ddd" indicatorActiveColor="#34CE98">
|
|
<view v-for="(item, index) in goodTabs" :key="index" class="classify-item" @click="$Router.push({name: 'StoreList', params: {id: item.category_id, title: item.name}})">
|
|
<view class="classify-item-nav">
|
|
<image class="classify-item-cover" :src="item.cover"></image>
|
|
<view class="classify-item-title">{{item.name}}</view>
|
|
</view>
|
|
</view>
|
|
</u-scroll-list>
|
|
|
|
<!-- 每日上新 -->
|
|
<view class="new-box">
|
|
<view class="title">上新精选<text class="title-des"> | 精品上新新品推荐</text></view>
|
|
<view class="news">
|
|
<view class="news-item" v-for="(item, index) in newGood" :key="index" @click="$Router.push({ name: 'StoreGoods', params: {id: item.goods_id}})">
|
|
<view class="news-cover">
|
|
<image :src="item.cover" mode="aspectFill"></image>
|
|
</view>
|
|
<view class="news-title nowrap">{{item.name}}</view>
|
|
<view class="news-price nowrap">{{item.price.price_min}} <text>DT积分</text></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 线下商家 -->
|
|
<view class="offline-box">
|
|
<view class="title">推荐店铺 <view class="more"><text class="title-des"> | 您身边的优质体验店</text> <text class="more-txt" @click="$Router.push({name: 'ShopList'})">更多></text></view></view>
|
|
<view class="card-box">
|
|
<block v-for="(item, index) in shops" :key="index">
|
|
<view class="card-box-item" style="{'backgrond': #FFF}" v-if="index < 4" @click="$Router.push({name: 'ShopDetail', params: {ShopId: item.shop_id}})">
|
|
<view class="card-title">{{item.name}}</view>
|
|
<view class="card-subtitle"> 优质店铺 </view>
|
|
<view class="card-btn">前往体验</view>
|
|
<image class="card-cover" :src="item.cover" mode="aspectFill" />
|
|
</view>
|
|
</block>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 推荐品类 -->
|
|
<!-- <view class="card-box">
|
|
<block v-for="(item, index) in meals" :key="index">
|
|
<view class="card-box-item" :style="{'backgrond': item.color}" @click="$Router.push({name: 'StoreMeals', params: {id: item.meal_id}})">
|
|
<view class="card-title">{{item.title}}</view>
|
|
<view class="card-subtitle">{{item.subtitle}}</view>
|
|
<image class="card-cover" :src="item.cover" mode="aspectFill"></image>
|
|
</view>
|
|
</block>
|
|
</view> -->
|
|
|
|
<!-- goods -->
|
|
<view class="goods-box">
|
|
<oct-goods
|
|
:lists="goodsArr"
|
|
priceType="DT"
|
|
color="#e6576b"
|
|
@onGoods="$Router.push({ name: 'StoreGoods', params: {id: $event.goods_id}})"
|
|
/>
|
|
<!-- <u-loadmore status="loading" /> -->
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { mall } from "@/apis/interfaces/store"
|
|
export default {
|
|
data() {
|
|
return {
|
|
swiperCount : 0,
|
|
banners : [],
|
|
goodTabs : [],
|
|
newGood : [],
|
|
goodsArr : [],
|
|
meals : [],
|
|
shops : [],
|
|
};
|
|
},
|
|
mounted(){
|
|
this.getMall()
|
|
},
|
|
methods:{
|
|
getMall(){
|
|
mall().then(res => {
|
|
this.banners = res.banners
|
|
this.goodsArr = res.goods
|
|
this.newGood = res.news
|
|
this.goodTabs = res.categories
|
|
this.meals = res.meals
|
|
this.shops = res.shops
|
|
uni.stopPullDownRefresh()
|
|
})
|
|
},
|
|
goBook(item){
|
|
if(item.url){
|
|
if(item.url.openType === 'navigateTo'){
|
|
let url = item.url.path
|
|
if(item.url.params != ''){
|
|
url = url + '?' + item.url.params
|
|
}
|
|
uni.navigateTo({
|
|
url
|
|
})
|
|
}
|
|
}
|
|
}
|
|
},
|
|
onPullDownRefresh() {
|
|
this.getMall()
|
|
},
|
|
onNavigationBarButtonTap() {
|
|
this.$Router.push({name: 'StoreSearch'})
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.content{
|
|
background: $window-color;
|
|
}
|
|
// 商城列表
|
|
.goods-box{
|
|
padding-bottom: $padding;
|
|
&>.title{
|
|
padding: $padding $padding 0;
|
|
font-size: $title-size-lg;
|
|
color: $text-color;
|
|
font-weight: bold;
|
|
margin-bottom: -$margin/2;
|
|
|
|
}
|
|
}
|
|
// 商城分类
|
|
.classify-box{
|
|
.classify-item{
|
|
padding: 0 10rpx;
|
|
&:last-child{
|
|
padding-right: $padding;
|
|
}
|
|
&:first-child{
|
|
padding-left: $padding;
|
|
}
|
|
&-nav{
|
|
text-align: center;
|
|
width: 138rpx;
|
|
}
|
|
&-cover{
|
|
width: 86rpx;
|
|
height: 86rpx;
|
|
border-radius: 50%;
|
|
vertical-align: top;
|
|
margin-bottom: $margin/2;
|
|
}
|
|
&-title{
|
|
line-height: 40rpx;
|
|
font-size: $title-size-sm;
|
|
color: $text-color;
|
|
}
|
|
}
|
|
}
|
|
// 卡片推荐
|
|
.card-box{
|
|
padding: $padding $padding - 10;
|
|
padding-bottom: 0;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
&-item{
|
|
margin: 0 10rpx;
|
|
width: calc(50% - 20rpx);
|
|
padding: $padding;
|
|
border-radius: $radius;
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
.card-title{
|
|
font-size: $title-size-lg;
|
|
font-weight: bold;
|
|
color: $text-color;
|
|
line-height: 40rpx;
|
|
width: calc(100% - 80rpx);
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
.card-subtitle{
|
|
font-size: 22rpx;
|
|
color: $text-gray;
|
|
// line-height: 40rpx;
|
|
min-height: 20rpx;
|
|
@extend .nowrap;
|
|
}
|
|
.card-cover{
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
right: $margin;
|
|
top: $margin;
|
|
}
|
|
}
|
|
&-item:nth-child(1){
|
|
background: #fef2ae;
|
|
}
|
|
&-item:nth-child(2){
|
|
background: #c9ead9;
|
|
}
|
|
}
|
|
// 上新精选
|
|
.new-box{
|
|
padding: 0 $margin;
|
|
border-radius: $radius;
|
|
// padding: $padding - 10;
|
|
.title{
|
|
font-size: $title-size-lg;
|
|
color: $text-color;
|
|
font-weight: bold;
|
|
padding-bottom: 10rpx;
|
|
.title-des{
|
|
font-size: 24rpx !important;
|
|
padding-left: 10rpx;
|
|
color: $text-gray-m;
|
|
font-weight: normal;
|
|
}
|
|
}
|
|
.news{
|
|
margin: $margin/2 -10rpx 0;
|
|
display: flex;
|
|
.news-item{
|
|
margin: 0 10rpx;
|
|
width: calc(25% - 20rpx);
|
|
.news-cover{
|
|
position: relative;
|
|
width: 100%;
|
|
padding-top: 100%;
|
|
background-color: white;
|
|
border-radius: $radius-lg;
|
|
overflow: hidden;
|
|
image{
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
.news-title{
|
|
margin-top: $margin/2;
|
|
font-size: $title-size-sm;
|
|
text-align: center;
|
|
color: $text-color;
|
|
line-height: 40rpx;
|
|
}
|
|
.news-price{
|
|
text-align: center;
|
|
font-size: $title-size-sm;
|
|
font-weight: bold;
|
|
color: $text-price;
|
|
line-height: 40rpx;
|
|
text{
|
|
margin-left: 6rpx;
|
|
font-size: 70%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.offline-box{
|
|
.title{
|
|
font-size: $title-size-lg;
|
|
color: $text-color;
|
|
font-weight: bold;
|
|
margin-top: $margin;
|
|
margin-left: $margin;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
box-sizing: border-box;
|
|
.more{
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
box-sizing: border-box;
|
|
padding-right: $padding;
|
|
.more-txt{
|
|
font-size: 24rpx;
|
|
color: $text-gray;
|
|
font-weight: normal;
|
|
}
|
|
}
|
|
}
|
|
.card-btn{
|
|
font-size: 22rpx;
|
|
color: #fff;
|
|
padding: 4rpx 20rpx;
|
|
border-radius: 20rpx;
|
|
background-color: $text-price;
|
|
display: inline-block;
|
|
}
|
|
|
|
.card-box {
|
|
// &-item{
|
|
// background: #fff !important;
|
|
// }
|
|
&-item:nth-child(1){
|
|
background: #fef2ae;
|
|
background: rgba($color: #fef2ae, $alpha:.5);
|
|
}
|
|
&-item:nth-child(2){
|
|
background: #c9ead9;
|
|
background: rgba($color: #c9ead9, $alpha:.5);
|
|
}
|
|
&-item:nth-child(3){
|
|
margin-top: $padding - 8;
|
|
background: #bde0ff;
|
|
background: rgba($color: #bde0ff, $alpha:.5);
|
|
}
|
|
&-item:nth-child(4){
|
|
margin-top: $padding - 8;
|
|
background: rgba($color: #ffd9e1, $alpha:.5);
|
|
}
|
|
}
|
|
.card-cover{
|
|
width: 100rpx;
|
|
height: 100rpx;
|
|
position: absolute;
|
|
right: $margin;
|
|
top: $margin;
|
|
}
|
|
.title-des{
|
|
font-size: 24rpx;
|
|
padding-left: 10rpx;
|
|
color: $text-gray-m;
|
|
font-weight: normal;
|
|
}
|
|
}
|
|
// swiper
|
|
.swiper{
|
|
background: linear-gradient(#FFF, #F3F6FB);
|
|
padding: $padding;
|
|
.swiper-box{
|
|
position: relative;
|
|
padding-top: 40%;
|
|
swiper,
|
|
image{
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
image{
|
|
border-radius: $radius;
|
|
}
|
|
}
|
|
.swiper-pages{
|
|
position: absolute;
|
|
z-index: 9;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: $margin - 10;
|
|
height: 7rpx;
|
|
text-align: center;
|
|
.pages-item{
|
|
vertical-align: top;
|
|
display: inline-block;
|
|
height: 7rpx;
|
|
width: 25rpx;
|
|
margin: 0 5rpx;
|
|
background: rgba($color: #fff, $alpha: .5);
|
|
&.show{
|
|
background: white;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|