|
|
@ -37,8 +37,9 @@ |
|
|
</view> |
|
|
</view> |
|
|
|
|
|
|
|
|
<view v-for="(item,index) in indexDate.zones" :key="item.zone_id"> |
|
|
<view v-for="(item,index) in indexDate.zones" :key="item.zone_id"> |
|
|
|
|
|
|
|
|
<!-- 轮播图 --> |
|
|
<!-- 轮播图 --> |
|
|
<view class="uni-margin-wrap page_padding" v-if="item.zone_code=='BANNER2' && item.zone_status=='NORMAL'"> |
|
|
<view class="uni-margin-wrap page_padding" v-if="item.zone_code=='BANNER' && item.zone_status=='NORMAL'"> |
|
|
<swiper class="swiper" circular :indicator-dots="true" :autoplay="true" > |
|
|
<swiper class="swiper" circular :indicator-dots="true" :autoplay="true" > |
|
|
<swiper-item v-for="(item1,index1) in item.blocks" :key="item1.block_id"> |
|
|
<swiper-item v-for="(item1,index1) in item.blocks" :key="item1.block_id"> |
|
|
<view class="swiper-item " v-if="item1.block_status=='NORMAL'"> |
|
|
<view class="swiper-item " v-if="item1.block_status=='NORMAL'"> |
|
|
@ -47,36 +48,56 @@ |
|
|
</swiper-item> |
|
|
</swiper-item> |
|
|
</swiper> |
|
|
</swiper> |
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
|
|
|
|
|
|
<!-- 宫格 --> |
|
|
<!-- 宫格 --> |
|
|
<uni-swiper-dot :info="info" :current="current" field="content" mode="default" class="page_padding" |
|
|
<uni-swiper-dot :info="info" :current="current" field="content" mode="default" class="page_padding"> |
|
|
v-if="item.zone_code=='ICON' && item.zone_status=='NORMAL' && item.zone_code!=indexDate.zones[index-1].zone_code"> |
|
|
<swiper class="grid_swiper" @change="gridSwiper"> |
|
|
<swiper class="grid_swiper" @change="gridSwiper"> |
|
|
<swiper-item v-for="(item,index) in info" :key="item.zone_id"> |
|
|
<swiper-item v-for="(item1,index1) in info" :key="item1.zone_id"> |
|
|
<view class="grid_content"> |
|
|
<view class="grid_content"> |
|
|
<view class="grid_item" v-for="(item1, index1) in item.blocks" :key="item1.zone_id"> |
|
|
<view class="grid_item" v-for="(item2, index2) in item1.blocks" :key="item2.block_id"> |
|
|
<template v-if="item1.block_status=='NORMAL'"> |
|
|
<template v-if="item2.block_status=='NORMAL'"> |
|
|
<view class="grid_item_img"> |
|
|
<view class="grid_item_img"> |
|
|
<image :src="item1.block_pic" mode=""></image> |
|
|
<image :src="item2.block_pic" mode=""></image> |
|
|
</view> |
|
|
</view> |
|
|
<text>{{item.block_title}}</text> |
|
|
<text>{{item2.block_title}}</text> |
|
|
</template> |
|
|
</template> |
|
|
|
|
|
|
|
|
|
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
</swiper-item> |
|
|
</swiper-item> |
|
|
</swiper> |
|
|
</swiper> |
|
|
</uni-swiper-dot> |
|
|
</uni-swiper-dot> |
|
|
|
|
|
|
|
|
|
|
|
<!-- 打折 --> |
|
|
<!-- 打折 --> |
|
|
<image src="../../static/img/index_discount.png" mode="" class="discount page_padding"></image> |
|
|
<!-- class="discount page_padding" --> |
|
|
|
|
|
<view class="ONEPIC" v-if="item.zone_code=='ONEPIC' && item.zone_status=='NORMAL'"> |
|
|
|
|
|
<image :src="item.blocks[0].block_pic" mode="" ></image> |
|
|
|
|
|
</view> |
|
|
|
|
|
<view class="TWOPIC" v-if="item.zone_code=='TWOPIC' && item.zone_status=='NORMAL'"> |
|
|
|
|
|
<image :src="item.blocks[0].block_pic" mode="" ></image> |
|
|
|
|
|
</view> |
|
|
|
|
|
<view class="THREEPIC" v-if="item.zone_code=='THREEPIC' && item.zone_status=='NORMAL'"> |
|
|
|
|
|
<image :src="item.blocks[0].block_pic" mode="" ></image> |
|
|
|
|
|
</view> |
|
|
|
|
|
<view class="FOURPIC" v-if="item.zone_code=='FOURPIC' && item.zone_status=='NORMAL'"> |
|
|
|
|
|
<image :src="item.blocks[0].block_pic" mode="" ></image> |
|
|
|
|
|
</view> |
|
|
|
|
|
<view class="FIVEPIC" v-if="item.zone_code=='FIVEPIC' && item.zone_status=='NORMAL'"> |
|
|
|
|
|
<image :src="item.blocks[0].block_pic" mode="" ></image> |
|
|
|
|
|
</view> |
|
|
|
|
|
<view class="SIXPIC" v-if="item.zone_code=='SIXPIC' && item.zone_status=='NORMAL'"> |
|
|
|
|
|
<image :src="item.blocks[0].block_pic" mode="" ></image> |
|
|
|
|
|
</view> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 标题 --> |
|
|
<!-- 标题 --> |
|
|
<navigator url="/pages/index/flashSale"> |
|
|
<navigator url="/pages/index/flashSale" v-if="item.zone_code=='SPIKE1' && item.zone_status=='NORMAL'"> |
|
|
<view class="index_title page_padding"> |
|
|
<view class="index_title page_padding"> |
|
|
<text>Flash Sale</text> |
|
|
<text>Flash Sale</text> |
|
|
<view class="title_right"> |
|
|
<view class="title_right"> |
|
|
<uni-countdown :showDay="false" :hour="23" :minute="0" :second="0" color="#FFFFFF" background-color="#1B1B1B" /> |
|
|
<uni-countdown :showDay="false" :hour="curEndTime |hours" :minute="curEndTime|minutes" :second="curEndTime|seconds" color="#FFFFFF" background-color="#1B1B1B" /> |
|
|
<image src="../../static/img/right.png" mode=""></image> |
|
|
<image src="../../static/img/right.png" mode=""></image> |
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
@ -84,11 +105,13 @@ |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- SPIKE 1 --> |
|
|
<!-- SPIKE 1 --> |
|
|
<scroll-view class="spike1 page_padding_left" scroll-x="true" :show-scrollbar="false"> |
|
|
<scroll-view class="spike1 page_padding_left" scroll-x="true" :show-scrollbar="false" v-if="item.zone_code=='SPIKE1' && item.zone_status=='NORMAL'"> |
|
|
<view class="spike1_item" v-for="(item,index) in 8" :key="index" @click="goPage"> |
|
|
<view class="spike1_item" v-for="(item1,index1) in item.blocks" :key="item1.block_id" @click="goPage"> |
|
|
<view class="spike1_item_img"></view> |
|
|
<view class="spike1_item_img"> |
|
|
|
|
|
<image :src="item1.block_pic" mode=""></image> |
|
|
|
|
|
</view> |
|
|
<view class="spike1_item_bottom"> |
|
|
<view class="spike1_item_bottom"> |
|
|
<text>US$314.00</text> |
|
|
<text>US${{item1.block_price}}</text> |
|
|
<view class="spike1_item_text">US$12.5</view> |
|
|
<view class="spike1_item_text">US$12.5</view> |
|
|
</view> |
|
|
</view> |
|
|
|
|
|
|
|
|
@ -96,8 +119,8 @@ |
|
|
</scroll-view> |
|
|
</scroll-view> |
|
|
|
|
|
|
|
|
<!-- 标题 --> |
|
|
<!-- 标题 --> |
|
|
<view class="index_title page_padding"> |
|
|
<view class="index_title page_padding" v-if="item.zone_code=='TITLE' && item.zone_status=='NORMAL'"> |
|
|
<text>Hot Selle</text> |
|
|
<text>{{item.blocks[0].block_title}}</text> |
|
|
<view class="title_right"> |
|
|
<view class="title_right"> |
|
|
<image src="../../static/img/right.png" mode=""></image> |
|
|
<image src="../../static/img/right.png" mode=""></image> |
|
|
</view> |
|
|
</view> |
|
|
@ -105,59 +128,71 @@ |
|
|
|
|
|
|
|
|
<!-- HOT SELLS 1 --> |
|
|
<!-- HOT SELLS 1 --> |
|
|
|
|
|
|
|
|
<view class="hotSells1 page_padding"> |
|
|
<view class="hotSells1 page_padding" v-if="item.zone_code=='GOODSTWO1' || item.zone_code=='GOODSTHREE1'"> |
|
|
<view class="hotSells1_item" v-for="(item,index) in 2" :key="index"> |
|
|
<template v-if="item.zone_code=='GOODSTWO1' && item.zone_status=='NORMAL'"> |
|
|
<view class="hotSells1_item_img"></view> |
|
|
<view class="hotSells1_item" v-for="(item1,index1) in item.blocks" :key="item1.block_id" > |
|
|
<text>DazzlingBlue Black</text> |
|
|
<view class="hotSells1_item_img"> |
|
|
</view> |
|
|
<image :src="item1.block_pic" mode=""></image> |
|
|
<view class="hotSells2_item" v-for="(item,index) in 3" :key="index"> |
|
|
</view> |
|
|
<view class="hotSells2_item_img"></view> |
|
|
<text>{{item1.block_title}}</text> |
|
|
<text>DazzlingBlue</text> |
|
|
</view> |
|
|
</view> |
|
|
</template> |
|
|
|
|
|
<template v-if="item.zone_code=='GOODSTHREE1' && item.zone_status=='NORMAL'"> |
|
|
|
|
|
<view class="hotSells2_item" v-for="(item1,index1) in item.blocks" :key="item1.block_id"> |
|
|
|
|
|
<view class="hotSells2_item_img"> |
|
|
|
|
|
<image :src="item1.block_pic" mode=""></image> |
|
|
|
|
|
</view> |
|
|
|
|
|
<text>{{item1.block_title}}</text> |
|
|
|
|
|
</view> |
|
|
|
|
|
</template> |
|
|
</view> |
|
|
</view> |
|
|
|
|
|
|
|
|
<!-- 标题 --> |
|
|
<!-- 标题 --> |
|
|
<view class="index_title page_padding"> |
|
|
<!-- <view class="index_title page_padding"> |
|
|
<text>Hot Selle</text> |
|
|
<text>Hot Selle</text> |
|
|
<view class="title_right"> |
|
|
<view class="title_right"> |
|
|
<image src="../../static/img/right.png" mode=""></image> |
|
|
<image src="../../static/img/right.png" mode=""></image> |
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
</view> --> |
|
|
|
|
|
|
|
|
<!-- HOT SELLS 2 --> |
|
|
<!-- HOT SELLS 2 --> |
|
|
<scroll-view class="spike1 page_padding_left" scroll-x="true" :show-scrollbar="false"> |
|
|
<scroll-view class="spike1 page_padding_left" scroll-x="true" :show-scrollbar="false" v-if="item.zone_code=='HONLIST2' && item.zone_status=='NORMAL'"> |
|
|
<view class="spike1_item" v-for="(item,index) in 8" :key="index"> |
|
|
<view class="spike1_item" v-for="(item1,index1) in item.blocks" :key="item1.block_id"> |
|
|
<view class="spike1_item_img"></view> |
|
|
<view class="spike1_item_img"> |
|
|
|
|
|
<image :src="item1.block_pic" mode=""></image> |
|
|
|
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
</scroll-view> |
|
|
</scroll-view> |
|
|
|
|
|
|
|
|
<!-- 标题 --> |
|
|
<!-- 标题 --> |
|
|
<view class="index_title page_padding"> |
|
|
<!-- <view class="index_title page_padding"> |
|
|
<text>Hot Selle</text> |
|
|
<text>Hot Selle</text> |
|
|
<view class="title_right"> |
|
|
<view class="title_right"> |
|
|
<image src="../../static/img/right.png" mode=""></image> |
|
|
<image src="../../static/img/right.png" mode=""></image> |
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
</view> --> |
|
|
|
|
|
|
|
|
<!-- HOT SELLS 3 --> |
|
|
<!-- HOT SELLS 3 --> |
|
|
<scroll-view class="spike1 page_padding_left" scroll-x="true" :show-scrollbar="false"> |
|
|
<scroll-view class="spike1 page_padding_left" scroll-x="true" :show-scrollbar="false" v-if="item.zone_code=='HONLIST3' && item.zone_status=='NORMAL'"> |
|
|
<view class="spike1_item" v-for="(item,index) in 8" :key="index"> |
|
|
<view class="spike1_item" v-for="(item1,index1) in item.blocks" :key="item1.block_id"> |
|
|
<view class="spike1_item_img"></view> |
|
|
<view class="spike1_item_img"> |
|
|
|
|
|
<image :src="item1.block_pic" mode=""></image> |
|
|
|
|
|
</view> |
|
|
<view class="spike1_item_bottom"> |
|
|
<view class="spike1_item_bottom"> |
|
|
<text>US$314.00</text> |
|
|
<text>US${{item1.block_price}}</text> |
|
|
<view class="spike1_item_text1">Creative styling</view> |
|
|
<view class="spike1_item_text1">{{item1.block_title}}</view> |
|
|
</view> |
|
|
</view> |
|
|
|
|
|
|
|
|
</view> |
|
|
</view> |
|
|
</scroll-view> |
|
|
</scroll-view> |
|
|
|
|
|
|
|
|
<!-- GOODSTHREE 2 --> |
|
|
<!-- GOODSTHREE 2 --> |
|
|
<view class="goodsthree2"> |
|
|
<!-- <view class="goodsthree2"> |
|
|
<view class="goodsthree2_item" v-for="(item,index) in 3" :key="index"></view> |
|
|
<view class="goodsthree2_item" v-for="(item,index) in 3" :key="index"></view> |
|
|
</view> |
|
|
</view> --> |
|
|
|
|
|
|
|
|
<!-- 轮播图 --> |
|
|
<!-- 轮播图 --> |
|
|
<view class="uni-margin-wrap"> |
|
|
<!-- <view class="uni-margin-wrap"> |
|
|
<swiper class="swiper" circular :indicator-dots="true" :autoplay="true" > |
|
|
<swiper class="swiper" circular :indicator-dots="true" :autoplay="true" > |
|
|
<swiper-item> |
|
|
<swiper-item> |
|
|
<view class="swiper-item uni-bg-red">A</view> |
|
|
<view class="swiper-item uni-bg-red">A</view> |
|
|
@ -169,29 +204,28 @@ |
|
|
<view class="swiper-item uni-bg-blue">C</view> |
|
|
<view class="swiper-item uni-bg-blue">C</view> |
|
|
</swiper-item> |
|
|
</swiper-item> |
|
|
</swiper> |
|
|
</swiper> |
|
|
</view> |
|
|
</view> --> |
|
|
|
|
|
|
|
|
<!-- SPIKE 1 --> |
|
|
<!-- SPIKE 1 --> |
|
|
<scroll-view class="spike1 page_padding_left" scroll-x="true" :show-scrollbar="false"> |
|
|
<!-- <scroll-view class="spike1 page_padding_left" scroll-x="true" :show-scrollbar="false"> |
|
|
<view class="spike1_item" v-for="(item,index) in 8" :key="index"> |
|
|
<view class="spike1_item" v-for="(item,index) in 8" :key="index"> |
|
|
<view class="spike1_item_img"></view> |
|
|
<view class="spike1_item_img"></view> |
|
|
<view class="spike1_item_bottom1"> |
|
|
<view class="spike1_item_bottom1"> |
|
|
<view class="spike1_item_text">Adidas Yeezy Boost 350 DazzlingBlue Black</view> |
|
|
<view class="spike1_item_text">Adidas Yeezy Boost 350 DazzlingBlue Black</view> |
|
|
<text>US$314.00</text> |
|
|
<text>US$314.00</text> |
|
|
</view> |
|
|
</view> |
|
|
|
|
|
|
|
|
</view> |
|
|
</view> |
|
|
</scroll-view> |
|
|
</scroll-view> --> |
|
|
|
|
|
|
|
|
<!-- 瀑布流标题 --> |
|
|
<!-- 瀑布流标题 --> |
|
|
<view class="index_title1">PRODUCTS FRO YOU</view> |
|
|
<view class="index_title1" v-if="item.zone_code=='LIST1' && item.zone_status=='NORMAL'">PRODUCTS FRO YOU</view> |
|
|
|
|
|
|
|
|
<view class="waterfall"> |
|
|
<view class="waterfall" v-if="item.zone_code=='LIST1' && item.zone_status=='NORMAL'"> |
|
|
<custom-waterfalls-flow :value="list"> |
|
|
<custom-waterfalls-flow :value="item.blocks" imageKey="block_pic"> |
|
|
<template v-slot:default="item"> |
|
|
<template v-slot:default="item1"> |
|
|
<view class="item"> |
|
|
<view class="item"> |
|
|
<view class="title">{{item.title}}</view> |
|
|
<view class="title">{{item1.title}}</view> |
|
|
<view class="desc">{{item.desc}}</view> |
|
|
<view class="desc">{{item1.block_price}}</view> |
|
|
</view> |
|
|
</view> |
|
|
</template> |
|
|
</template> |
|
|
</custom-waterfalls-flow> |
|
|
</custom-waterfalls-flow> |
|
|
@ -216,11 +250,42 @@ |
|
|
{ image: 'https://via.placeholder.com/200x200.png/2878ff', title: 'Adidas Yeezy Boost 350 DazzlingBlue Black', desc: 'US$314.00' } |
|
|
{ image: 'https://via.placeholder.com/200x200.png/2878ff', title: 'Adidas Yeezy Boost 350 DazzlingBlue Black', desc: 'US$314.00' } |
|
|
], |
|
|
], |
|
|
indexDate:{}, |
|
|
indexDate:{}, |
|
|
info:[] |
|
|
info:[], |
|
|
|
|
|
banner:{} |
|
|
} |
|
|
} |
|
|
}, |
|
|
}, |
|
|
onLoad() { |
|
|
onLoad() { |
|
|
this.getIndex() |
|
|
this.getIndex() |
|
|
|
|
|
console.info(this.curEndTime) |
|
|
|
|
|
}, |
|
|
|
|
|
computed:{ |
|
|
|
|
|
//当天结束时间 |
|
|
|
|
|
curEndTime(){ |
|
|
|
|
|
const endtime = new Date(new Date().setHours(23,59,59,999)).getTime() |
|
|
|
|
|
// 获取当前时间 |
|
|
|
|
|
const nowtime=(new Date()).getTime(); |
|
|
|
|
|
var date3 = nowtime - endtime; //时间差的毫秒数 |
|
|
|
|
|
date3 = Math.abs(date3) |
|
|
|
|
|
return date3; |
|
|
|
|
|
} |
|
|
|
|
|
}, |
|
|
|
|
|
filters:{ |
|
|
|
|
|
hours (timestamp){ |
|
|
|
|
|
var leave1=timestamp%(24*3600*1000) //计算天数后剩余的毫秒数 |
|
|
|
|
|
var hours=Math.floor(leave1/(3600*1000)) |
|
|
|
|
|
return hours |
|
|
|
|
|
}, |
|
|
|
|
|
minutes(timestamp){ |
|
|
|
|
|
var leave2=(timestamp%(24*3600*1000))%(3600*1000) //计算小时数后剩余的毫秒数 |
|
|
|
|
|
var minutes=Math.floor(leave2/(60*1000)) |
|
|
|
|
|
return minutes |
|
|
|
|
|
}, |
|
|
|
|
|
seconds(timestamp){ |
|
|
|
|
|
var leave3=((timestamp%(24*3600*1000))%(3600*1000))%(60*1000) //计算分钟数后剩余的毫秒数 |
|
|
|
|
|
var seconds=Math.round(leave3/1000) |
|
|
|
|
|
return seconds |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
}, |
|
|
}, |
|
|
methods: { |
|
|
methods: { |
|
|
// 获取首页数据配置 |
|
|
// 获取首页数据配置 |
|
|
@ -236,7 +301,6 @@ |
|
|
this.info.push(item) |
|
|
this.info.push(item) |
|
|
} |
|
|
} |
|
|
}) |
|
|
}) |
|
|
console.info(this.info) |
|
|
|
|
|
} |
|
|
} |
|
|
}) |
|
|
}) |
|
|
}, |
|
|
}, |
|
|
@ -267,6 +331,53 @@ |
|
|
background-color: white; |
|
|
background-color: white; |
|
|
// position: relative; |
|
|
// position: relative; |
|
|
} |
|
|
} |
|
|
|
|
|
.ONEPIC{ |
|
|
|
|
|
width: 100%; |
|
|
|
|
|
height: auto; |
|
|
|
|
|
image{ |
|
|
|
|
|
// height: auto; |
|
|
|
|
|
width: 100%; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
.TWOPIC{ |
|
|
|
|
|
width: 100%; |
|
|
|
|
|
display: flex; |
|
|
|
|
|
image{ |
|
|
|
|
|
width: 50%; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
.THREEPIC{ |
|
|
|
|
|
width: 100%; |
|
|
|
|
|
display: flex; |
|
|
|
|
|
justify-content: space-between; |
|
|
|
|
|
image{ |
|
|
|
|
|
width: 33%; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
.FOURPIC{ |
|
|
|
|
|
width: 100%; |
|
|
|
|
|
display: flex; |
|
|
|
|
|
justify-content: space-between; |
|
|
|
|
|
image{ |
|
|
|
|
|
width: 25%; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
.FIVEPIC{ |
|
|
|
|
|
width: 100%; |
|
|
|
|
|
display: flex; |
|
|
|
|
|
justify-content: space-between; |
|
|
|
|
|
image{ |
|
|
|
|
|
width: 20%; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
.SIXPIC{ |
|
|
|
|
|
width: 100%; |
|
|
|
|
|
display: flex; |
|
|
|
|
|
justify-content: space-between; |
|
|
|
|
|
image{ |
|
|
|
|
|
width: 16.6%; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
.body{ |
|
|
.body{ |
|
|
padding-top: 361.33rpx; |
|
|
padding-top: 361.33rpx; |
|
|
} |
|
|
} |
|
|
@ -493,8 +604,11 @@ |
|
|
.spike1_item_img{ |
|
|
.spike1_item_img{ |
|
|
width: 200rpx; |
|
|
width: 200rpx; |
|
|
height: 200rpx; |
|
|
height: 200rpx; |
|
|
|
|
|
// background-color: #999999; |
|
|
background-color: #999999; |
|
|
image{ |
|
|
|
|
|
width: 100%; |
|
|
|
|
|
height: 100%; |
|
|
|
|
|
} |
|
|
} |
|
|
} |
|
|
.spike1_item_bottom{ |
|
|
.spike1_item_bottom{ |
|
|
padding-left: 9.33rpx; |
|
|
padding-left: 9.33rpx; |
|
|
|