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.
 
 
 
 
 
 

1526 lines
37 KiB

<template>
<view class="body" >
<!-- 进入页面部分 -->
<view :style="{display:countdownTime2!=0?'none':''}">
<!-- 头部导航栏 -->
<view class="navigation " >
<view class="status_bar"></view>
<view class="page_padding">
<view class="navigation_title" :class="isScrollShow?'isScrollShow':'' ">
<template v-if="!isScrollShow ">
<navigator url="/pages/account/message" class="order_info_item">
<uni-badge :text="mesNum" type="error" absolute="rightTop">
<image src="../../static/img/msg_white.png" mode=""></image>
</uni-badge>
</navigator>
<image src="/static/img/dope plus_white.png" mode="" class="index_logo"></image>
</template>
<view class="navigation_title_right" :class="isScrollShow?'navigation_title_padding':'' ">
<navigator>
<image src="../../static/img/like_white.png" mode="" @click="Iswish()"></image>
</navigator>
<navigator url="/pages/shippingCart/index" open-type="switchTab">
<uni-badge :text="sum" type="error" absolute="rightTop">
<image src="../../static/img/shop_cart1.png" mode=""></image>
</uni-badge>
</navigator>
</view>
</view>
<navigator >
<view v-if="isScrollShow " :class="isScrollShow?'isScrollShow3':'' ">
<image src="/static/icon/home_white.png" mode=""></image>
</view>
<view class="navigation_seach" :class="isScrollShow?'isScrollShow1':'' " @click="gotoSearch()">
<image src="../../static/img/seach.png" mode=""></image>
<text>search</text>
</view>
</navigator>
</view>
<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(item,index)" :key="item.zone_name">{{item.zone_name}}</view>
</scroll-view>
</view>
</view>
<!-- <view class="navigation1">
<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(item,index)" :key="item.zone_name">{{item.zone_name}}</view>
</scroll-view>
</view>
</view> -->
<view v-for="(item,index) in indexDate.zones" :key="item.zone_id">
<!-- 轮播图 -->
<view class="uni-margin-wrap page_padding_left" v-if="item.zone_code=='BANNER' && item.zone_status=='NORMAL'">
<swiper class="swiper" circular :indicator-dots="true" :autoplay="true" :style="{width:(item.zone_code=='BANNER')?item.zone_colum+'rpx':''}" >
<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="" @click="imgTo(item1)"></image>
</view>
</swiper-item>
</swiper>
</view>
<!-- 宫格 -->
<uni-swiper-dot :info="info" :current="current" field="content" mode="default"
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="" @click="gotoProductlist(item2,item2.block_link)"></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" :style="{height:(item.zone_code=='ONEPIC')?item.zone_column+'rpx':''}" mode="" @click="imgTo(item.blocks[0])" ></image>
</view>
<!-- TWOPIC -->
<view class="TWOPIC" v-if="item.zone_code=='TWOPIC' && item.zone_status=='NORMAL'">
<image :src="item1.block_pic" :style="{height:(item.zone_code=='TWOPIC')?item.zone_column+'rpx':''}" @click="imgTo(item1)"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" :style="{height:(item.zone_code=='THREEPIC')?item.zone_column+'rpx':''}" @click="imgTo(item1)" 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" :style="{height:(item.zone_code=='FOURPIC')?item.zone_column+'rpx':''}" mode="" @click="imgTo(item1)" 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" :style="{height:(item.zone_code=='FIVEPIC')?item.zone_column+'rpx':''}" mode="" @click="imgTo(item1)" 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" :style="{height:(item.zone_code=='SIXPIC')?item.zone_column+'rpx':''}"mode="" @click="imgTo(item1)" 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" 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 skillList" :key="item1.goods_id" >
<view class="item_img" @click="gotoSkillpage(item1)">
<image :src="item1.goods_img" mode="" :style="{height:(item.zone_code=='SPIKE1')?item.zone_column+'rpx':'',width:200+'rpx'}" ></image>
</view>
<view class="spike1_item_bottom padding_left">
<text>US${{item1.promote_price}}</text>
<view class="spike1_item_text">US${{item1.shop_price}}</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="" @click="Hotgoto(item.blocks)"></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" :style="{height:(item.zone_code=='GOODSTWO1')?item.zone_column+'rpx':''}" mode="" @click="imgTo(item1)"></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":style="{height:(item.zone_code=='GOODSTHREE1')?item.zone_column+'rpx':''}" mode="" @click="imgTo(item1)"></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" scroll-x="true" :show-scrollbar="false" v-if="item.zone_code=='HONLIST2' && item.zone_status=='NORMAL'">
<view class="spike1_item padding_honlist2" v-for="(item1,index1) in item.blocks" :key="item1.block_id">
<view class="item_img":style="{width:(item.zone_code=='HONLIST2')?350+'rpx':''}" >
<image :src="item1.block_pic" mode="" :style="{height:(item.zone_code=='HONLIST2')?item.zone_column+'rpx':''}"@click="imgTo(item1)"></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" 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="item_img">
<image :src="item1.block_pic" :style="{height:(item.zone_code=='HONLIST3')?item.zone_column+'rpx':'',width:350+'rpx'}" mode="" @click="imgTo(item1)"></image>
</view>
<view class="spike1_item_bottom">
<text>{{item1.block_title}}</text>
<view class="spike1_item_text1">{{item1.block_title2}}</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>
<!-- 瀑布流标题 -->
<!-- <view class="index_title1" v-if="bestlist.length>0">PRODUCTS FRO YOU</view> -->
<!-- <view class="waterfall" v-if="bestlist.length>0" >
<custom-waterfalls-flow :value="bestlist" imageKey="block_pic"@imageClick="imgTo(bestlist)">
<template v-slot:default="item2">
<view class="item" @click="imgTo(item2)">
<view class="title">{{item2.block_title}}</view>
<view >{{item2.block_title2}}</view>
<view class="desc">{{item2.block_title3}}</view>
</view>
</template>
</custom-waterfalls-flow>
</view>
-->
<view class="container" v-if="bestlist">
<view class="left">
<view v-for="(item,index) in leftList" :key="index" >
<image :src="item.block_pic" alt="" mode="widthFix" @click="imgTo(item)"></image>
<view class="item" @click="imgTo(item)">
<view class="title" v-if="item.block_title!=0">{{item.block_title}}</view>
<view class="title">{{item.block_title2}}</view>
<view class="desc">{{item.block_title3}}</view>
</view>
</view>
</view>
<view class="right">
<view v-for="(item1,index1) in rightList" :key="index1" >
<image :src="item1.block_pic" alt="" mode="widthFix" @click="imgTo(item1)"></image>
<view class="item" @click="imgTo(item1)">
<view class="title" v-if="item1.block_title!=0">{{item1.block_title}}</view>
<view class="title" >{{item1.block_title2}}</view>
<view class="desc">{{item1.block_title3}}</view>
</view>
</view>
</view>
</view>
<!-- //弹窗广告 -->
<view style="bottom:0">
<!-- <button @click="open">打开弹窗</button> -->
<uni-popup ref="popup" :mask-click="false">
<view class="Popup">
<view class="popup_close">
<image mode=" " @click="close" src="../../static/img/close2.png"></image>
</view>
<view class="popup_img" >
<view class="popup_text"><text>{{countdownTime }}s跳过</text></view>
<image :src="popImg" mode=" " @click="popImgto"></image>
</view>
</view>
<!-- <button @click="close">关闭</button> -->
</uni-popup>
</view>
</view>
<!-- 启动页广告 -->
<view class="open_bg" :style="{display:countdownTime2==0?'none':''}">
<view class="open_text"><text @click="countdownTime2 =0,countdownTime=5">{{ countdownTime2 }}s跳过</text></view>
<swiper class ="open_bgimg" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
:duration="duration">
<swiper-item v-for="(item,index) in open_img" :key="item.block_pic">
<!-- <view class="open_text"><text>{{ countdownTime2 }}s跳过</text></view> -->
<image :src="item.block_pic" mode=""></image>
</swiper-item>
</swiper>
<!-- <image src="https://i.udongman.cn/image/2020/0207/20200207093527428.jpg" mode=""></image> -->
</view>
</view>
</template>
<script>
import {defaultRequest,defaultRequest4} 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:{},
cat_list:[],
sum:0,
mesNum:0,
skillList:[],
backButtonPress:0,
catQuery:{
_action:'getgoods',
page_index:1,
page_size:30,
type:'best'
},
bestlist:[],
// 初始化左右盒子
leftList: [],
rightList: [],
// 初始化左右盒子高度
leftH: 0,
rightH: 0,
isbest:0,
popImg:'',
countdownTime: 10,
countdownTime2:5,
popUrl:'',
myMes:{
_action:'getmessagelist',
type:0,
// importance:'',
// label:'',
page_index:1,
page_size:10
},
open_img:'',
indicatorDots: true,
autoplay: true,
interval: 2000,
duration: 500
}
},
onPullDownRefresh() {
setTimeout(()=>{
this.getList()
uni.stopPullDownRefresh()
},800)
},
onLoad() {
uni.hideTabBar()
this.getIndex()
// //console.info(this.curEndTime)
this.getList()
this.getMes()
this.getPullMes()
this.getInfo()
setTimeout( () =>{
this.open()
},1000)
},
created() {
this.getPullMes()
this.getCountdownTime()
},
onShow() {
this.getList()
this.getMes()
this.sum=0
},
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
}
},
onBackPress(options) {
this.backButtonPress++;
if (this.backButtonPress > 1) {
plus.runtime.quit();
} else {
plus.nativeUI.toast('Click again to exit');
}
setTimeout(function() {
this.backButtonPress = 0;
}, 1000);
return true;
},
methods: {
open() {
this.$refs.popup.open('center')
},
close() {
console.log(1111)
if(this.countdownTime == 0){
this.$refs.popup.close()
console.log(1111)
}
uni.setTabBarStyle({
backgroundColor: "#fff",
borderStyle: "black",
// selectedColor: "#999",
// color: "#999",
});
},
//获取广告
getPullMes(){
let data={_action:'getpagedata',pagecode:'001-STARTPAGE'}
defaultRequest(data).then( res =>{
console.log(res)
let img
let url
if(res.error == 0){
res.data.zones.map( item =>{
if(item.zone_code == "KAIPIN"){
img = item.blocks
url = item.blocks[0].block_link
}
})
this.open_img = img
this.popUrl = url
}
})
let data2={_action:'getpagedata',pagecode:'HOMEPOPUPADS'}
defaultRequest(data2).then( res =>{
console.log(res)
if(res.error == 0){
res.data.zones.map( item =>{
if(item.zone_code == 'HOMEPOPUP'){
this.popImg = item.zone_icon
}
})
}
})
let data3 ={
_action:'get_splash_ad',appcode:'DOPE+',VERS:'1.0.0'
}
defaultRequest(data3).then(res =>{
console.log(res)
})
},
//5秒倒计时
getCountdownTime() {
// uni.hideTabBar();
uni.setTabBarStyle({
backgroundColor: "#ccc",
borderStyle: "black",
// selectedColor: "#999",
// color: "#999",
});
this.countdownTime = 10
let timer = setInterval(() => {
this.countdownTime--;
if (this.countdownTime < 1) {
clearInterval(timer)
this.countdownTime = 0
}
}, 1000)
let timer2 = setInterval(() => {
uni.hideTabBar();
this.countdownTime2--;
if (this.countdownTime2 < 1) {
clearInterval(timer2)
this.countdownTime2 = 0
}
if(this.countdownTime2 ==0){
uni.showTabBar()
}
}, 1000)
},
//gaogaoye 跳转
popImgto(){
const i = this.popUrl.indexOf('?')
if(this.popUrl.includes('dope.dope://?goodslist=1')){
const url = this.popUrl.substring(i)
console.log(url)
uni.navigateTo({
url:'/pages/category/productList'+url
})
}
},
// 获取首页数据配置
getIndex(){
let data={_action:'getpagedata',pagecode:'HOME'}
defaultRequest(data).then(res=>{
if(res.error==0){
this.indexDate=res.data
//console.log(this.indexDate,'首页配置')
res.data.zones.map(item=>{
if(item.zone_code=='ICON'){
item.content=''
this.info.push(item)
//console.log(item,'info')
}
if(item.zone_code=='LIST1'){
// this.bestlist.push(item.blocks)
// //console.log(this.bestlist,'精品')
this.isbest = 1
this.getCatList()
item.blocks.map( item =>{
this.bestlist.push(item)
})
//console.log(item,'精品')
}
})
}
})
defaultRequest({
_action:'getpagedata',pagecode:'HOMECLASS'
}).then(res =>{
// //console.log(res)
if(res.error ==0){
this.scrollList = res.data.zones
}
})
},
Iswish(){
const i = uni.getStorageSync('isLogin')
if(i==1){
uni.navigateTo({
url:'../account/wishlist'
})
}else{
uni.navigateTo({
url:'../login/index'
})
}
},
getMes(){
let data ={ _action:'getpagedata',pagecode:'006-PERSONALCENTERPAGE'
}
let a=0, b =0
defaultRequest(data).then(res =>{
let list = res.data.zones
list.map(item =>{
if(item.zone_code =='XIAOXI'){
this.list = item
}
})
console.log(this.list.blocks.length)
a = this.list.blocks.length
let str = this.list.blocks[0].block_avaiable_from
})
defaultRequest(this.myMes).then(res =>{
console.log(res)
if(res.error ==0){
this.app_Mes = res.data.message_list
b = this.app_Mes.length
console.log(this.app_Mes.length)
}
let sum = parseInt(a) + parseInt(b)
// console.log(sum)
this.mesNum= sum
})
},
gotoSearch(){
uni.navigateTo({
url:'./search'
})
},
goDetails(id){
uni.navigateTo({
url:'/pages/productDetails/index?goodid='+id
})
},
getList(){
let data={_action:'getcartgoods'}
defaultRequest(data).then(res=>{
// //console.info(res.data.goods_list.length,'//////')
if(res.error==0){
this.sum = res.data.goods_list.length
}
})
let query={
_action:'getgoods',type:'promote',order_type:0,page_size:50,page_index:0
}
defaultRequest(query).then(res=>{
if(res.error==0){
let skillList = []
this.skillList = res.data
// for(let i =0;i<3;i++){
// var _num = Math.floor(Math.random()*res.data.length)
// var mm = res.data[_num]
// skillList.push(mm)
// this.skillList = skillList
// }
}
})
},
// 指定范围内,指定个数,无重复的随机整数
getRandomNumber(n,min,max){
let arr=[];
for(let i = 0; i < n; i ++){
arr[i] = parseInt(Math.random() * (max - min + 1) + min);
}
for(let i = 0; i < n; i++){
for(let j = i + 1; j < n; j ++){
if(arr[i] === arr[j]){
this.getRandomNumber(n,min,max);
return false;
}
}
}
return arr
},
//获取用户是否登录
getInfo(){
let data = {
_action:'getinfo'
}
defaultRequest(data).then(res =>{
//console.log(res,'用户信息')
if(res.error == -1){
uni.setStorageSync('isLogin',0)
}else if(res.error==0){
uni.setStorageSync('isLogin',1)
}
})
},
// 获取的推荐商品数据
getCatList(type){
if(this.isbest ==1){
defaultRequest4(this.catQuery).then(res=>{
//console.info(res,'最好的')
if(res.error==0){
if(res.data){
res.data.map( item =>{
this.bestlist.push({
block_pic:item.goods_img,
block_title3:'US$'+item.shop_price,
goodid:item.id
})
})
//console.log(this.bestlist,'合并')
const that = this
this.bestlist.forEach(res => {
// 获取图片宽高
uni.getImageInfo({
src: res.block_pic,
success: (image) => {
// //console.log(res.block_pic)
// 计算图片渲染高度
let showH = (50 * image.height) / image.width
// 判断左右盒子高度
if(that.leftH <= that.rightH) {
that.leftList.push(res)
that.leftH += showH
} else {
that.rightList.push(res)
that.rightH += showH
}
}
})
})
}
}
})
}
},
goPage(){
uni.navigateTo({
url: '/pages/productDetails/index',
});
},
gotoSkillpage(e){
uni.navigateTo({
// url:"../productDetails/index?goods_id="+e.id
url:'./flashSale'
})
},
gotoProductlist(item,url){
const a = url.substring(12);
const b = url.substring(url.length - 3)
//console.log(a)
uni.navigateTo({
url:"../category/productList?typethree="+b+'&type=0'+'&title='+item.block_title
// url:"../category/productList"+ a +'&title='+item.block_title
})
},
scrollChange(item,index){
this.info = []
this.bestlist =[]
this.scroll_active=index
let data = {
_action:'getpagedata',
pagecode:item.zone_code
}
defaultRequest(data).then( 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)
//console.log(item,'info')
}
})
}
})
},
gridSwiper(e){
this.current = e.detail.current
},
//轮播图跳转 // 热卖跳转
imgTo(item){
console.log(item.block_link,'item')
console.log(item.block_link.includes('dope.youhui'))
let goodid
const i = item.block_link.indexOf('?')
if(item.block_link){
goodid = item.block_link.substring(i);
//console.log(item.block_link)
if(item.block_link.includes('goodslist')){
uni.navigateTo({
url:'../category/productList'+ goodid
})
}else if(item.block_link.includes('goodid')){
uni.navigateTo({
url:'../productDetails/index'+goodid+'&img=1'
})
}
else if(item.block_link.includes('dope.youhui')){
uni.navigateTo({
url:'./pickUpCentre'
})
}
}
if(item.goodid){
uni.navigateTo({
url:'../productDetails/index?goodid='+item.goodid
})
}
},
Hotgoto(item1){
//console.log(item1[0].block_title + item1[0].block_link)
const url = item1[0].block_link.substring(12)
if(url.includes('goodslist')){
uni.navigateTo({
url:'../category/productList'+ url
})
}else{
uni.navigateTo({
url:'../productDetails/index'+url+'&img=1'
})
}
}
},
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: 100%;
margin: -12rpx 0;
image{
height: 100%;
width: 100%;
}
&:nth-last-child(){
margin-bottom: 10rpx;
}
}
.TWOPIC{
width: 100%;
display: flex;
image{
width: 100%;
height: 100%;
}
}
.THREEPIC{
width: 100%;
display: flex;
justify-content: space-between;
image{
width: 100%;
height: 100%;
}
}
.FOURPIC{
width: 100%;
display: flex;
justify-content: space-between;
image{
width: 100%;
height: 100%;
}
}
.FIVEPIC{
width: 100%;
display: flex;
justify-content: space-between;
image{
width: 100%;
height: 100%;
}
}
.SIXPIC{
width: 100%;
display: flex;
justify-content: space-between;
image{
width: 100%;
height: 100%;
}
}
.body{
padding-top: 300.33rpx;
}
.flex{
display: flex;
}
.index_logo{
width: 270.33rpx !important;
height: 50rpx !important;
margin-left: 50rpx;
}
.isScrollShow{
float: right;
}
.isScrollShow1{
float: left;
margin-top: 70rpx;
width: 65% !important;
}
.isScrollShow2{
float: left;
}
.isScrollShow3{
float: left;
width: 70rpx;
height: 70rpx;
margin-top: 70rpx;
// margin-left: 20rpx;
margin-right: 25rpx;
image{
height: 100%;
width: 100%;
}
}
.page_padding{
padding-left: 26.37rpx;
padding-right: 26.67rpx;
box-sizing: border-box;
margin-top: 10rpx;
}
.page_padding_left{
padding-left: 16.67rpx;
padding-right: 18.67rpx;
}
.navigation{
/* display: flex; */
background-color:#161616;
position: fixed;
top: 0;
z-index: 99;
height: 261rpx;
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_padding{
margin-top: 50rpx !important;
padding: 0 !important;
}
.navigation_title_right{
display: flex;
align-items: center;
>uni-navigator:first-child{
margin-right: 32.67rpx;
}
}
}
.navigation_seach{
width: 100%;
background-color: #F5F6FA;
border-radius: 35rpx;
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{
margin-top: 10rpx;
padding-top: 10rpx;
padding-bottom: 10rpx;
background-color: white;
// padding-right: 13rpx;
padding-left: 24rpx;
padding-right: 24rpx;
.scroll-view_H{
white-space: nowrap;
font-size: 26.67rpx;
color: #484848;
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: 12.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-top: 45.33rpx;
margin-bottom: 45.33rpx;
.swiper {
// height: 360.33rpx;
width: 720rpx;
// height: 100%;
.swiper-item {
display: block;
// width: 720rpx;
height: 100%;
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;
// margin: 0 10rpx 0 10rpx;
.grid_content{
display: flex;
flex-wrap: wrap;
.grid_item{
// width: 97.33rpx;
display: flex;
width: 150rpx;
height: 150rpx;
flex-direction: column;
align-items: center;
justify-content: space-between;
color: #1B1B1B;
font-size: 24rpx;
// margin-right: 6rpx;
margin-bottom: 13.33rpx;
font-weight: 500;
padding-right: 10rpx;
margin-left: 25.37rpx;
&:last-child(){
margin-left: 0;
}
.grid_item_img{
width: 97.33rpx;
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: 23rpx;
margin-top: 37.37rpx;
.title_right{
display: flex;
align-items: center;
image{
width: 22rpx;
height: 22rpx;
margin-left: 11.33rpx;
}
}
}
.item_img{
width: 100%;
margin-left: 4rpx;
image{
width: 100%;
height: 100%;
}
}
.spike1{
white-space: nowrap;
width: 100%;
padding-right:16rpx ;
padding-left: 16rpx;
margin-bottom: 47.67rpx;
::-webkit-scrollbar {
width: 0;
height: 0;
background-color: transparent;
}
.spike1_item{
color: #191919;
font-size: 26.67rpx;
// margin-right: 16.67rpx;
// width: 200rpx;
// margin-left: 16rpx;
padding-right:16rpx ;
display: inline-block;
font-weight: 500;
&:last-child{
margin-right: 37rpx;
}
.spike1_item_img{
width: 180rpx;
height: 180rpx;
background-color: #999999;
padding-right:16rpx ;
image{
width: 100%;
height: 100%;
}
}
// .padding_honlist2{
// margin-right: 280rpx !important;
// }
.spike1_item_bottom{
padding-left: 9.33rpx;
margin-top: 7.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: 149.33rpx;
margin-bottom: 44rpx;
.hotSells1_item{
width: 340rpx;
display: flex;
flex-direction: column;
.hotSells1_item_img{
width: 100%;
// // height: 266.67rpx;
// background-color: #999999;
margin-bottom: 5.33rpx;
image{
width: 100%;
height: 100%;
}
}
}
.hotSells2_item{
width: 224rpx;
display: flex;
flex-direction: column;
// margin-top: 49.33rpx;
margin-top: 18.33rpx;
.hotSells2_item_img{
// width: 100%;
// height: 224rpx;
// background-color: #999999;
margin-bottom: 5.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: 25.33rpx;
font-weight: 400;
// margin-top: 24.67rpx;
margin-top: 14.67rpx;
// margin-bottom: 32.67rpx;
}
.desc{
font-size: 32rpx;
font-weight: 600;
}
}
}
.padding_left{
margin-left: 17rpx;
}
.best_item{
display: flex;
flex-wrap: wrap;
flex-direction: row;
align-items: center;
margin: 0 10rpx 0 10rpx;
// width: 80vw;
// height:400rpx ;
.best_one{
width: 45vw;
height: 400rpx;
margin: 10rpx;
justify-content: center;
align-items: center;
background-color: #fff;
.best_img{
height: 360rpx;
width: 360rpx;
image{
width: 100%;
height: 100%;
}
}
.best_text{
line-height:40rpx ;
text-align: center;
}
}
}
.container {
padding: 0 30rpx;
font-size: 14rpx;
line-height: 24rpx;
}
.title{
font-size: 25.33rpx;
font-weight: 400;
// margin-top: 24.67rpx;
margin-top: 10.67rpx;
margin-bottom: 10.67rpx;
}
.desc{
font-size: 32rpx;
font-weight: bold;
margin-top: 24.67rpx;
}
.right,
.left{display: inline-block; width: 49%;vertical-align: top;}
.left{margin-right: 2%;}
.left image,
.right image{width: 100%;margin-bottom: 10rpx;margin-top: 20rpx;}
.Popup{
height: 700rpx;
width: 400rpx;
.popup_close{
height: 50rpx;
width: 50rpx;
margin-left: 400rpx;
// background-color: #000000;
image{
width: 100%;
height: 100%;
}
}
.popup_img{
height: 600rpx;
width: 400rpx;
margin-top: 10rpx;
margin-left: 20rpx;
color:white;
background-size: 100%;
background-repeat: no-repeat;
background-color: white;
border-radius:25rpx;
position: relative;
image{
width: 100%;
height: 100%;
border-radius: 25rpx;
}
.popup_text{
right:0;
height: 30rpx;
width: 60rpx;
font-size: 20rpx;
margin-right: 10rpx;
margin-top: 10rpx;
background-color:#ccc;
background-color:rgba(0,0,0,0.4);
line-height: 30rpx;
opacity: 0.5;
text-align: center;
position: absolute;
z-index:99;
border-radius: 5rpx;
}
}
}
.open_bg{
height: 100%;
width: 100%;
top:0;
color: white;
z-index: 999;
position: fixed;
// padding-top: 50rpx;
overflow: hidden;
background-size: cover;
background-repeat: no-repeat;
background-attachment:fixed;
.open_text{
right:0;
top:50rpx;
height: 50rpx;
width: 200rpx;
font-size: 28rpx;
margin-right: 10rpx;
margin-top: 10rpx;
background-color:#ececec;
background-color:rgba(0,0,0,0.5);
line-height: 50rpx;
opacity: 0.5;
text-align: center;
position: absolute;
z-index:99;
border-radius: 5rpx;
}
.open_bgimg{
top:0;
height: 100vh;
width: 100%;
position: relative;
color:white;
image{
width: 100%;
height: 100%;
}
}
}
</style>