349 lines
8.9 KiB
Vue
349 lines
8.9 KiB
Vue
<template>
|
||
<view class="content">
|
||
<!-- swiper -->
|
||
<view class="swiper">
|
||
<view class="swiper-box">
|
||
<swiper autoplay @change="swiperCount = $event.detail.current">
|
||
<swiper-item>
|
||
<image src="https://yanxuan.nosdn.127.net/static-union/163971170765382b.jpg" mode="aspectFill"></image>
|
||
</swiper-item>
|
||
<swiper-item>
|
||
<image src="https://yanxuan.nosdn.127.net/948240ec17accbb8bb2184bde9b62e8f.jpg" mode="aspectFill"></image>
|
||
</swiper-item>
|
||
</swiper>
|
||
<view class="swiper-pages">
|
||
<text class="pages-item" :class="{'show':swiperCount === 0}"></text>
|
||
<text class="pages-item" :class="{'show':swiperCount === 1}"></text>
|
||
</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">
|
||
<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">上新精选</view>
|
||
<view class="news">
|
||
<view class="news-item" v-for="(item, index) in newGood" :key="index">
|
||
<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}}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 推荐品类 -->
|
||
<view class="card-box">
|
||
<view class="card-box-item">
|
||
<view class="card-title">宝贝爱吃</view>
|
||
<view class="card-subtitle">精选食谱 三餐美味</view>
|
||
<image class="card-cover" src="@/static/store/store_icon_00.png" mode="aspectFill"></image>
|
||
</view>
|
||
<view class="card-box-item">
|
||
<view class="card-title">轻卡小食</view>
|
||
<view class="card-subtitle">火热商品 一目了然</view>
|
||
<image class="card-cover" src="@/static/store/store_icon_01.png" mode="aspectFill"></image>
|
||
</view>
|
||
</view>
|
||
<!-- goods -->
|
||
<view class="goods-box">
|
||
<!-- <u-divider text="猜你喜欢"></u-divider> -->
|
||
<!-- <view class="title">猜你喜欢</view> -->
|
||
<oct-goods
|
||
:lists="goodsArr"
|
||
color="#e6576b"
|
||
@onGoods="onGoods"
|
||
/>
|
||
<u-loadmore status="loading" />
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
swiperCount: 0,
|
||
goodTabs: [
|
||
{ name: "减脂小白", cover: "https://yanxuan.nosdn.127.net/c6fd8835a6400b7da7a016ad85506b69.png"},
|
||
{ name: "10斤挑战", cover: "https://yanxuan.nosdn.127.net/fede8b110c502ec5799702d5ec824792.png"},
|
||
{ name: "控卡主食", cover: "https://yanxuan.nosdn.127.net/896a3beac514ae8f40aafe028e5fec56.png"},
|
||
{ name: "轻卡小食", cover: "https://yanxuan.nosdn.127.net/37520d1204a0c55474021b43dac2a69e.png"},
|
||
{ name: "肠胃呵护", cover: "https://yanxuan.nosdn.127.net/6c3bd9d885c818b1f73e497335a68b47.png"},
|
||
{ name: "燃力嗨吃", cover: "https://yanxuan.nosdn.127.net/559d2a240ec20b096590a902217009ff.png"},
|
||
{ name: "10斤挑战", cover: "https://yanxuan.nosdn.127.net/5c088559ebcc3f0ffcda663f04dfbeb2.png"},
|
||
],
|
||
newGood : [
|
||
{
|
||
cover : "https://yanxuan-item.nosdn.127.net/0aabfb9974965f4983fcc71344022dc7.png",
|
||
name : "蜂蜜山楂条",
|
||
description : "酸甜软糯，松脆不粘牙",
|
||
price : {
|
||
price_min: 13
|
||
}
|
||
},{
|
||
cover : "https://yanxuan-item.nosdn.127.net/1b9003483b0c429403477cad336aa9d7.png",
|
||
name : "卤汁牛肉",
|
||
description : "松软蛋糕，浓醇奶香",
|
||
price : {
|
||
price_min: 39
|
||
}
|
||
},{
|
||
cover : "https://yanxuan-item.nosdn.127.net/ca123e1f1fac9af57df06a14d91e6417.png",
|
||
name : "东北开口松子",
|
||
description : "醇正松香，壳薄肉厚",
|
||
price : {
|
||
price_min: 42.8
|
||
}
|
||
},{
|
||
cover : "https://yanxuan-item.nosdn.127.net/b2aac81d1116fb3e4d2a747896064bdd.png",
|
||
name : "蓝莓果干",
|
||
description : "苹果汁浸泡，无蔗糖添加",
|
||
price : {
|
||
price_min: 19
|
||
}
|
||
}
|
||
],
|
||
goodsArr: [
|
||
{
|
||
goods_id : "",
|
||
cover : "https://yanxuan-item.nosdn.127.net/6d48e6ea51a06b1356ccda21497fdb14.png",
|
||
name : "茅台王子酒 金王子 53度 500毫升",
|
||
description : "酱香突出，优雅细腻",
|
||
price : {
|
||
price_min: 275
|
||
}
|
||
},{
|
||
goods_id : "",
|
||
cover : "https://yanxuan-item.nosdn.127.net/87357968bc1d8d8334557148d15296da.png",
|
||
name : "飞天53%vol 500ml贵州茅台酒（带杯）",
|
||
description : "茅台飘香，正品溯源",
|
||
price : {
|
||
price_min: 1499
|
||
}
|
||
},{
|
||
goods_id : "",
|
||
cover : "https://yanxuan-item.nosdn.127.net/57a95961e03552e8583d670431d68b92.png",
|
||
name : "赖茅酒 传承蓝 53度 500毫升*6瓶",
|
||
description : "传统酱香典范",
|
||
price : {
|
||
price_min: 2928
|
||
}
|
||
},{
|
||
goods_id : "",
|
||
cover : "https://yanxuan-item.nosdn.127.net/e83ebcf07e511c3ef24e2f2845ad0a28.jpg",
|
||
name : "开盖即食，冰糖银耳莲子羹 280克*9杯",
|
||
description : "开盖即食，清甜软糯",
|
||
price : {
|
||
price_min: 50
|
||
}
|
||
},{
|
||
goods_id : "",
|
||
cover : "https://yanxuan-item.nosdn.127.net/5a7e0c73b731f5c18941697dc7e1b522.jpg",
|
||
name : "奶油鸡蛋卷 150克（5袋）",
|
||
description : "香浓蛋味 入口即化",
|
||
price : {
|
||
price_min: 13.9
|
||
}
|
||
},{
|
||
goods_id : "",
|
||
cover : "https://balenciaga.dam.kering.com/m/611d17da66cdafac/Large-6801252104T1169_D.jpg",
|
||
name : "Hacker graffiti medium tote bag in canvas jacquard",
|
||
description : "Coming soon",
|
||
price : {
|
||
price_min: 13.9
|
||
}
|
||
}
|
||
]
|
||
};
|
||
},
|
||
methods:{
|
||
onGoods(val){
|
||
console.log(val)
|
||
uni.navigateTo({
|
||
url: "./goods"
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</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;
|
||
}
|
||
.card-subtitle{
|
||
font-size: 20rpx;
|
||
color: $text-gray;
|
||
line-height: 40rpx;
|
||
}
|
||
.card-cover{
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
position: absolute;
|
||
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;
|
||
}
|
||
.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;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
// 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>
|