商城与首页基础页面
This commit is contained in:
唐明明
247
pages/store/index.vue
Normal file
247
pages/store/index.vue
Normal file
@@ -0,0 +1,247 @@
|
||||
<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>
|
||||
<!-- 健康产品分类 -->
|
||||
<!-- <view class="">
|
||||
<view class="">（icon）10斤挑战</view>
|
||||
<view class="">（icon）控卡主食</view>
|
||||
<view class="">（icon）轻卡小食</view>
|
||||
<view class="">（icon）肠胃呵护</view>
|
||||
<view class="">（icon）燃力嗨吃</view>
|
||||
</view> -->
|
||||
<!-- 每日上新 -->
|
||||
<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="">
|
||||
<view class="">（卡片）宝贝爱吃</view>
|
||||
<view class="">（卡片）轻卡小食</view>
|
||||
</view> -->
|
||||
<!-- goods -->
|
||||
<oct-goods
|
||||
:lists="goodsArr"
|
||||
color="#e6576b"
|
||||
@onGoods="onGoods"
|
||||
/>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
swiperCount: 0,
|
||||
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;
|
||||
}
|
||||
.new-box{
|
||||
padding: 0 $padding;
|
||||
.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>
|
||||
Reference in New Issue
Block a user