Browse Source

首页对接、修改启动图

master
ltlzx 4 years ago
parent
commit
ecd1f6be62
  1. 2
      manifest.json
  2. 248
      pages/index/index.vue
  3. BIN
      unpackage/res/icons/1080_1882.9.png
  4. BIN
      unpackage/res/icons/480_8001.9.png
  5. BIN
      unpackage/res/icons/720_1242.9.png

2
manifest.json

@ -56,7 +56,7 @@
"splashscreen" : { "splashscreen" : {
"androidStyle" : "default", "androidStyle" : "default",
"android" : { "android" : {
"hdpi" : "unpackage/res/icons/480_762.9.png", "hdpi" : "unpackage/res/icons/480_8001.9.png",
"xhdpi" : "unpackage/res/icons/720_1242.9.png", "xhdpi" : "unpackage/res/icons/720_1242.9.png",
"xxhdpi" : "unpackage/res/icons/1080_1882.9.png" "xxhdpi" : "unpackage/res/icons/1080_1882.9.png"
}, },

248
pages/index/index.vue

@ -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;

BIN
unpackage/res/icons/1080_1882.9.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 95 KiB

After

Width:  |  Height:  |  Size: 20 KiB

BIN
unpackage/res/icons/480_8001.9.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.3 KiB

BIN
unpackage/res/icons/720_1242.9.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 50 KiB

After

Width:  |  Height:  |  Size: 12 KiB

Loading…
Cancel
Save