ltlzx
/
cnic_buyer
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
40 Commits
1 Branch
0 Tags
63 MiB
 
 
 
 
 
 
Tree: f636691cd7
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'f636691cd7'
${ noResults }
cnic_buyer/pages/index/index.vue

750 lines
18 KiB
Raw Blame History

<template>
<view class="body" >
<!-- 头部导航栏 -->
<view class="navigation page_padding" >
<view class="status_bar"></view>
<view class="navigation_title" :class="isScrollShow?'isScrollShow':'' ">
<template v-if="!isScrollShow ">
<navigator url="/pages/account/message" class="order_info_item">
<uni-badge :text="5" type="error" absolute="rightTop">
<image src="../../static/img/msg.png" mode=""></image>
</uni-badge>
</navigator>
<!-- <text>Dope VIDEO</text> -->
<image src="/static/img/dope plus.png" mode="" class="index_logo"></image>
</template>
<view class="navigation_title_right">
<image src="../../static/img/like.png" mode=""></image>
<uni-badge :text="5" type="error" absolute="rightTop">
<image src="../../static/img/shop_cart.png" mode=""></image>
</uni-badge>
</view>
</view>
<navigator url="/pages/index/search">
<view class="navigation_seach" :class="isScrollShow?'isScrollShow1':'' ">
<image src="../../static/img/seach.png" mode=""></image>
<text>search</text>
</view>
</navigator>
<view class="navigation_scroll" :class="isScrollShow?'isScrollShow2':'' ">
<scroll-view class="scroll-view_H" scroll-x="true" :show-scrollbar="false">
<view :class="scroll_active==index?'scroll_active':''" v-for="(item,index) in scrollList" @click="scrollChange(index)" :key="index">{{item.text}}</view>
</scroll-view>
</view>
</view>
<view v-for="(item,index) in indexDate.zones" :key="item.zone_id">
<!-- 轮播图 -->
<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-item v-for="(item1,index1) in item.blocks" :key="item1.block_id">
<view class="swiper-item " v-if="item1.block_status=='NORMAL'">
<image :src="item1.block_pic" mode=""></image>
</view>
</swiper-item>
</swiper>
</view>
<!-- 宫格 -->
<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-item v-for="(item1,index1) in info" :key="item1.zone_id">
<view class="grid_content">
<view class="grid_item" v-for="(item2, index2) in item1.blocks" :key="item2.block_id">
<template v-if="item2.block_status=='NORMAL'">
<view class="grid_item_img">
<image :src="item2.block_pic" mode=""></image>
</view>
<text>{{item2.block_title}}</text>
</template>
</view>
</view>
</swiper-item>
</swiper>
</uni-swiper-dot>
<!-- ONEPIC -->
<view class="ONEPIC" v-if="item.zone_code=='ONEPIC' && item.zone_status=='NORMAL'">
<!-- class="discount page_padding" -->
<image :src="item.blocks[0].block_pic" mode="" ></image>
</view>
<!-- TWOPIC -->
<view class="TWOPIC" v-if="item.zone_code=='TWOPIC' && item.zone_status=='NORMAL'">
<image :src="item1.block_pic" mode="" v-for="(item1,index1) in item.blocks" :key="item1.block_id"></image>
</view>
<!-- THREEPIC -->
<view class="THREEPIC" v-if="item.zone_code=='THREEPIC' && item.zone_status=='NORMAL'">
<image :src="item1.block_pic" mode="" v-for="(item1,index1) in item.blocks" :key="item1.block_id"></image>
</view>
<!-- FOURPIC -->
<view class="FOURPIC" v-if="item.zone_code=='FOURPIC' && item.zone_status=='NORMAL'">
<image :src="item1.block_pic" mode="" v-for="(item1,index1) in item.blocks" :key="item1.block_id"></image>
</view>
<!-- FIVEPIC -->
<view class="FIVEPIC" v-if="item.zone_code=='FIVEPIC' && item.zone_status=='NORMAL'">
<image :src="item1.block_pic" mode="" v-for="(item1,index1) in item.blocks" :key="item1.block_id"></image>
</view>
<!-- SIXPIC -->
<view class="SIXPIC" v-if="item.zone_code=='SIXPIC' && item.zone_status=='NORMAL'">
<image :src="item1.block_pic" mode="" v-for="(item1,index1) in item.blocks" :key="item1.block_id"></image>
</view>
<!-- 标题 -->
<navigator url="/pages/index/flashSale" v-if="item.zone_code=='SPIKE1' && item.zone_status=='NORMAL'">
<view class="index_title page_padding">
<text>Flash Sale</text>
<view class="title_right">
<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>
</view>
</view>
</navigator>
<!-- SPIKE 1 -->
<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="(item1,index1) in item.blocks" :key="item1.block_id" @click="goPage">
<view class="spike1_item_img">
<image :src="item1.block_pic" mode=""></image>
</view>
<view class="spike1_item_bottom">
<text>US${{item1.block_price}}</text>
<view class="spike1_item_text">US${{item1.block_title}}</view>
</view>
</view>
</scroll-view>
<!-- 标题 -->
<view class="index_title page_padding" v-if="item.zone_code=='TITLE' && item.zone_status=='NORMAL'">
<text>{{item.blocks[0].block_title}}</text>
<view class="title_right">
<image src="../../static/img/right.png" mode=""></image>
</view>
</view>
<!-- HOT SELLS 1 -->
<view class="hotSells1 page_padding" v-if="item.zone_code=='GOODSTWO1' || item.zone_code=='GOODSTHREE1'">
<template v-if="item.zone_code=='GOODSTWO1' && item.zone_status=='NORMAL'">
<view class="hotSells1_item" v-for="(item1,index1) in item.blocks" :key="item1.block_id" >
<view class="hotSells1_item_img">
<image :src="item1.block_pic" mode=""></image>
</view>
<text>{{item1.block_title}}</text>
</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 class="index_title page_padding">
<text>Hot Selle</text>
<view class="title_right">
<image src="../../static/img/right.png" mode=""></image>
</view>
</view> -->
<!-- HOT SELLS 2 -->
<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="(item1,index1) in item.blocks" :key="item1.block_id">
<view class="spike1_item_img">
<image :src="item1.block_pic" mode=""></image>
</view>
</view>
</scroll-view>
<!-- 标题 -->
<!-- <view class="index_title page_padding">
<text>Hot Selle</text>
<view class="title_right">
<image src="../../static/img/right.png" mode=""></image>
</view>
</view> -->
<!-- HOT SELLS 3 -->
<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="(item1,index1) in item.blocks" :key="item1.block_id">
<view class="spike1_item_img">
<image :src="item1.block_pic" mode=""></image>
</view>
<view class="spike1_item_bottom">
<text>US${{item1.block_price}}</text>
<view class="spike1_item_text1">{{item1.block_title}}</view>
</view>
</view>
</scroll-view>
<!-- GOODSTHREE 2 -->
<!-- <view class="goodsthree2">
<view class="goodsthree2_item" v-for="(item,index) in 3" :key="index"></view>
</view> -->
<!-- 轮播图 -->
<!-- <view class="uni-margin-wrap">
<swiper class="swiper" circular :indicator-dots="true" :autoplay="true" >
<swiper-item>
<view class="swiper-item uni-bg-red">A</view>
</swiper-item>
<swiper-item>
<view class="swiper-item uni-bg-green">B</view>
</swiper-item>
<swiper-item>
<view class="swiper-item uni-bg-blue">C</view>
</swiper-item>
</swiper>
</view> -->
<!-- SPIKE 1 -->
<!-- <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_img"></view>
<view class="spike1_item_bottom1">
<view class="spike1_item_text">Adidas Yeezy Boost 350 DazzlingBlue Black</view>
<text>US$314.00</text>
</view>
</view>
</scroll-view> -->
<!-- 瀑布流标题 -->
<view class="index_title1" v-if="item.zone_code=='LIST1' && item.zone_status=='NORMAL'">PRODUCTS FRO YOU</view>
<view class="waterfall" v-if="item.zone_code=='LIST1' && item.zone_status=='NORMAL'">
<custom-waterfalls-flow :value="item.blocks" imageKey="block_pic">
<template v-slot:default="item1">
<view class="item">
<view class="title">{{item1.title}}</view>
<view class="desc">{{item1.block_price}}</view>
</view>
</template>
</custom-waterfalls-flow>
</view>
</view>
</view>
</template>
<script>
import {defaultRequest} from '../../api/index.js'
export default {
data() {
return {
isScrollShow:false,
scroll_active:0,
scrollList:[
{text:'DOPE'},{text:'VIDEO'},{text:'MEN'},{text:'KIDS'},{text:'PETS'},{text:'MEN'},{text:'PETS'},{text:'MEN'},
],
current:0,
list: [
{ image: 'https://via.placeholder.com/200x500.png/ff0000', 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:{},
info:[],
banner:{}
}
},
onLoad() {
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: {
// 获取首页数据配置
getIndex(){
let data={_action:'getpagedata',pagecode:'HOME'}
defaultRequest(data).then(res=>{
console.info(res)
if(res.error==0){
this.indexDate=res.data
res.data.zones.map(item=>{
if(item.zone_code=='ICON'){
item.content=''
this.info.push(item)
}
})
}
})
},
goPage(){
uni.navigateTo({
url: '/pages/productDetails/index',
});
},
scrollChange(index){
this.scroll_active=index
},
gridSwiper(e){
this.current = e.detail.current
}
},
onPageScroll(res) {
if(res.scrollTop>40){
this.isScrollShow=true
}else if(res.scrollTop<40){
this.isScrollShow=false
}
},
}
</script>
<style lang="scss" scoped>
page{
background-color: white;
// 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{
padding-top: 361.33rpx;
}
.index_logo{
width: 270.33rpx !important;
height: 50rpx !important;
margin-left: 50rpx;
}
.isScrollShow{
float: right;
}
.isScrollShow1{
float: left;
margin-top: 20rpx;
width: 80% !important;
}
.isScrollShow2{
float: left;
}
.page_padding{
padding: 0 26.67rpx;
box-sizing: border-box;
}
.page_padding_left{
padding-left: 26.67rpx;
}
.navigation{
/* display: flex; */
position: fixed;
top: 0;
z-index: 99;
background: white;
width: 100%;
.navigation_title{
display: flex;
padding: 30rpx 0;
align-items: center;
justify-content: space-between;
image{
width: 44rpx;
height: 44rpx;
}
text{
font-family: Source Han Sans CN;
font-weight: 800;
font-style: italic;
font-size: 42.67rpx;
}
.navigation_title_right{
display: flex;
align-items: center;
>image:first-child{
margin-right: 32.67rpx;
}
}
}
.navigation_seach{
width: 100%;
background-color: #F5F6FA;
border-radius: 6.67rpx;
height: 66.67rpx;
display: flex;
align-items: center;
color: #8F9094;
font-size: 26.67rpx;
padding-left: 22rpx;
box-sizing: border-box;
image{
width: 29.33rpx;
height: 29.33rpx;
margin-right: 22rpx;
}
}
.navigation_scroll{
padding-top: 28rpx;
padding-bottom: 37.33rpx;
padding-left: 40rpx;
.scroll-view_H{
white-space: nowrap;
font-size: 26.67rpx;
color: #161616;
width: 100%;
// display: flex;
::-webkit-scrollbar {
width: 0;
height: 0;
background-color: transparent;
}
view{
margin-left: 46.67rpx;
display: inline-block;
font-weight: 600;
padding: 28.67rpx 0;
}
view:first-child{
margin-left: 0;
}
.scroll_active{
font-size: 32rpx;
border-bottom: 2.67rpx solid #000000;
}
}
}
}
.uni-margin-wrap{
width: 100%;
margin-bottom: 35.33rpx;
.swiper {
height: 373.33rpx;
.swiper-item {
display: block;
height: 373.33rpx;
line-height: 373.33rpx;
text-align: center;
color: white;
image{
width: 100%;
height: 100%;
}
}
.uni-bg-red{
background-color: red;
}
.uni-bg-green{
background-color: green;
}
.uni-bg-blue{
background-color: blue;
}
}
}
.grid_swiper {
height: 380rpx;
.grid_content{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
padding: 0 28rpx;
.grid_item{
width: 97.33rpx;
display: flex;
flex-direction: column;
align-items: center;
color: #1B1B1B;
font-size: 24rpx;
margin-bottom: 53.33rpx;
margin-right: 84rpx;
font-weight: 500;
.grid_item_img{
width: 100%;
height: 97.33rpx;
margin-bottom: 6.67rpx;
background-color: #8F9094;
image{
width: 100%;
height: 100%;
}
}
}
.grid_item:nth-child(n+4){
margin-right: 0;
}
}
}
.discount{
width: 100%;
height: 239.33rpx;
margin-bottom: 72.67rpx;
}
.index_title{
display: flex;
justify-content: space-between;
align-items: center;
font-size: 32rpx;
color: #161616;
font-weight: bold;
margin-bottom: 40rpx;
.title_right{
display: flex;
align-items: center;
image{
width: 22rpx;
height: 22rpx;
margin-left: 11.33rpx;
}
}
}
.spike1{
white-space: nowrap;
width: 100%;
margin-bottom: 70.67rpx;
::-webkit-scrollbar {
width: 0;
height: 0;
background-color: transparent;
}
.spike1_item{
color: #191919;
font-size: 26.67rpx;
margin-right: 16.67rpx;
width: 200rpx;
display: inline-block;
font-weight: 500;
.spike1_item_img{
width: 200rpx;
height: 200rpx;
// background-color: #999999;
image{
width: 100%;
height: 100%;
}
}
.spike1_item_bottom{
padding-left: 9.33rpx;
margin-top: 22.67rpx;
.spike1_item_text{
color: #9D9D9D;
font-size: 21.33rpx;
text-decoration: line-through;
}
.spike1_item_text1{
color: #9D9D9D;
font-size: 21.33rpx;
}
}
.spike1_item_bottom1{
padding-left: 9.33rpx;
margin-top: 19.33rpx;
font-weight: bold;
.spike1_item_text{
color: #000000;
font-size: 16rpx;
font-weight: 400;
margin-bottom: 20.67rpx;
white-space: break-spaces;
}
}
}
.spike1_item:last-child{
margin-right: 0;
}
}
.hotSells1{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
color: #000000;
font-size: 28rpx;
font-weight: 400;
margin-bottom: 69.33rpx;
.hotSells1_item{
width: 340rpx;
display: flex;
flex-direction: column;
.hotSells1_item_img{
width: 100%;
height: 266.67rpx;
// background-color: #999999;
margin-bottom: 23.33rpx;
image{
width: 100%;
height: 100%;
}
}
}
.hotSells2_item{
width: 224rpx;
display: flex;
flex-direction: column;
margin-top: 49.33rpx;
.hotSells2_item_img{
width: 100%;
height: 224rpx;
// background-color: #999999;
margin-bottom: 25.33rpx;
image{
width: 100%;
height: 100%;
}
}
}
}
.goodsthree2{
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 29.33rpx;
.goodsthree2_item{
width: 242.67rpx;
height: 204.67rpx;
background-color: #999999;
}
}
.index_title1{
text-align: center;
position: relative;
font-size: 29.33rpx;
font-weight: bold;
margin-top: 116rpx;
padding-bottom: 52rpx;
&:before{
content: '';
background-color: #000000;
height: 4rpx;
width: 53.33rpx;
position: absolute;
bottom: 13.33rpx;
left: 50%;
margin-left: -26.67rpx;
}
}
.waterfall{
background-color: #F8F7FB;
padding:0 25.33rpx;
box-sizing: border-box;
padding-top: 52.67rpx;
.item{
padding: 0 16.67rpx;
padding-bottom: 36.67rpx;
.title{
font-size: 29.33rpx;
font-weight: 400;
margin-top: 24.67rpx;
margin-bottom: 32.67rpx;
}
.desc{
font-size: 32rpx;
font-weight: 600;
}
}
}
</style>