505 lines
16 KiB
Vue
505 lines
16 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>
|
|
|
|
<!-- VIP换购 -->
|
|
<view class="new-box" style="margin-top: 30rpx;" v-if="vips.length>0">
|
|
<view class="title">VIP换购 <view class="more"><text class="title-des"> | 千款商品任意换购</text> <text
|
|
class="more-txt" @click="$Router.push({name: 'VipList'})">更多 ></text></view>
|
|
</view>
|
|
<view class="news">
|
|
<view class="news-item" v-for="(item, index) in vips" :key="index"
|
|
@click="$Router.push({ name: 'StoreGoods', params: {id: item.goods_id}})">
|
|
<view class="news-cover">
|
|
<image :src="item.cover" mode="aspectFill"></image>
|
|
<view class="tags"> VIP </view>
|
|
</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: [],
|
|
vips:[]
|
|
};
|
|
},
|
|
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
|
|
this.vips = res.vips
|
|
uni.stopPullDownRefresh()
|
|
})
|
|
},
|
|
goBook(item) {
|
|
console.log(item)
|
|
if (item.url) {
|
|
if (item.url.openType === 'navigateTo') {
|
|
if (item.url.params != '') {
|
|
uni.navigateTo({
|
|
url: item.url.path + '?' + item.url.params,
|
|
})
|
|
} else {
|
|
uni.navigateTo({
|
|
url: item.url.path,
|
|
})
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
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;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
box-sizing: border-box;
|
|
|
|
.title-des {
|
|
font-size: 24rpx !important;
|
|
padding-left: 10rpx;
|
|
color: $text-gray-m;
|
|
font-weight: normal;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|
|
}
|
|
|
|
.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%;
|
|
}
|
|
|
|
.tags {
|
|
position: absolute;
|
|
top: 6rpx;
|
|
left: -54rpx;
|
|
background: #d81e06;
|
|
color: #fff;
|
|
width: 100%;
|
|
font-size: 24rpx;
|
|
padding: 4rpx 0;
|
|
text-align: center;
|
|
transform: rotate(-45deg);
|
|
font-weight: bold;
|
|
letter-spacing:2rpx;
|
|
}
|
|
}
|
|
|
|
.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>
|