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.
1237 lines
27 KiB
1237 lines
27 KiB
<template>
|
|
<view class="body">
|
|
<!-- 头部导航栏 -->
|
|
<uni-nav-bar :statusBar="true" :title="Pet" color="#fff" backgroundColor="#000000" :border="false"
|
|
:fixed="true">
|
|
<block slot="left">
|
|
<view class="nav_left">
|
|
<image src="../../static/img/left_white.png" mode="" @click="back()"></image>
|
|
<!-- <image src="../../static/img/seach.png" mode="" @click="goPage()"></image> -->
|
|
</view>
|
|
</block>
|
|
<block slot="right">
|
|
<view class="nav_right">
|
|
<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>
|
|
</block>
|
|
</uni-nav-bar>
|
|
<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'"
|
|
:style="{width:(item.zone_code=='BANNER')?item.zone_column+'rpx':'700rpx'}">
|
|
<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" 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=""
|
|
@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_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 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_left" 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')?400+'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_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="item_img">
|
|
<image :src="item1.block_pic"
|
|
:style="{height:(item.zone_code=='HONLIST3')?item.zone_column+'rpx':'',width:400+'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 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" @click="imgTo(item1)">
|
|
<template v-slot:default="item1">
|
|
<view class="item" @click="imgTo(item1)">
|
|
<view class="title">{{item1.block_title}} {{item1.block_title3}}</view>
|
|
<view class="desc">{{item1.block_title2}}</view>
|
|
<!-- <view class="desc">{{item1.block_title3}}</view> -->
|
|
</view>
|
|
</template>
|
|
</custom-waterfalls-flow>
|
|
</view>
|
|
|
|
|
|
</view>
|
|
<!-- <view class="index_title1" v-if="catList.length>0">BEST</view>
|
|
<view class="best_item">
|
|
<view class="best_one" v-for="(item,index) in catList" :key="index">
|
|
<view class="best_img" @click="goDetails(item.id)">
|
|
<image :src="item.goods_img" mode=""></image>
|
|
</view>
|
|
<view class="best_text">
|
|
<view class="desc">US${{item.is_promote==0? item.shop_price :item.promote_price}}</view>
|
|
|
|
</view>
|
|
</view>
|
|
</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'
|
|
},
|
|
catList: [],
|
|
Pet: ''
|
|
}
|
|
},
|
|
onPullDownRefresh() {
|
|
|
|
setTimeout(() => {
|
|
// this.getIndex()
|
|
this.getList()
|
|
uni.stopPullDownRefresh()
|
|
|
|
}, 800)
|
|
},
|
|
|
|
onLoad() {
|
|
this.getIndex()
|
|
// console.info(this.curEndTime)
|
|
this.getList()
|
|
this.getMes()
|
|
this.getInfo()
|
|
this.getCatList()
|
|
uni.showTabBar()
|
|
|
|
|
|
},
|
|
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: {
|
|
// 获取页数据配置
|
|
getIndex() {
|
|
let data = {
|
|
_action: 'getpagedata',
|
|
pagecode: 'HOME-SALE'
|
|
}
|
|
defaultRequest(data).then(res => {
|
|
this.Pet = res.data.page_name
|
|
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')
|
|
}
|
|
|
|
})
|
|
}
|
|
})
|
|
defaultRequest({
|
|
_action: 'getpagedata',
|
|
pagecode: 'HOME-SALE'
|
|
}).then(res => {
|
|
// console.log(res)
|
|
if (res.error == 0) {
|
|
this.scrollList = res.data.zones
|
|
}
|
|
})
|
|
},
|
|
back() {
|
|
uni.switchTab({
|
|
url: './index'
|
|
})
|
|
},
|
|
goDetails(id) {
|
|
uni.navigateTo({
|
|
url: '/pages/productDetails/index?goodid=' + id
|
|
})
|
|
},
|
|
getMes() {
|
|
let data = {
|
|
_action: 'getpagedata',
|
|
pagecode: '006-PERSONALCENTERPAGE'
|
|
|
|
}
|
|
// let data2 ={ _action:'getpagedata',pagecode:'HOME-SALE'}
|
|
// defaultRequest(data2).then(res =>{
|
|
// console.log(res,'中间按钮')
|
|
// if(res.error ==0){
|
|
// this.indexDate = res.data
|
|
// }
|
|
// })
|
|
defaultRequest(data).then(res => {
|
|
// console.log(res,'个人页面配置信息')
|
|
res.data.zones.map(item => {
|
|
if (item.zone_code == 'XIAOXI') {
|
|
let list = item
|
|
this.mesNum = list.blocks.length
|
|
|
|
}
|
|
})
|
|
})
|
|
},
|
|
getList() {
|
|
// this.sum = uni.getStorageSync('cartSum')
|
|
|
|
let data = {
|
|
_action: 'getcartgoods'
|
|
}
|
|
defaultRequest4(data).then(res => {
|
|
console.info(res)
|
|
if (res.error == 0) {
|
|
this.sum = res.data.goods_list.length
|
|
uni.setStorageSync('cartSum', this.sum)
|
|
}
|
|
})
|
|
|
|
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) {
|
|
defaultRequest4(this.catQuery).then(res => {
|
|
// console.info(res,'最好的')
|
|
if (res.error == 0) {
|
|
if (res.data) {
|
|
this.catList = res.data
|
|
}
|
|
}
|
|
})
|
|
},
|
|
goPage() {
|
|
uni.navigateTo({
|
|
url: './search',
|
|
});
|
|
},
|
|
gotoSkillpage(e) {
|
|
uni.navigateTo({
|
|
// url:"../productDetails/index?goods_id="+e.id
|
|
url: './flashSale'
|
|
})
|
|
},
|
|
gotoProductlist(item, url) {
|
|
console.log(item, '///')
|
|
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.scroll_active = index
|
|
this.info = []
|
|
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, 'item')
|
|
let goodid = item.block_link.substring(12);
|
|
console.log(item.block_link)
|
|
if (goodid.includes('goodslist')) {
|
|
uni.navigateTo({
|
|
url: '../category/productList' + goodid
|
|
})
|
|
} else {
|
|
uni.navigateTo({
|
|
url: '../productDetails/index' + goodid + '&img=1'
|
|
})
|
|
}
|
|
|
|
},
|
|
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%;
|
|
}
|
|
}
|
|
|
|
.TWOPIC {
|
|
width: 100%;
|
|
display: flex;
|
|
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.THREEPIC {
|
|
width: 100%;
|
|
display: flex;
|
|
margin: 0;
|
|
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: 30.33rpx;
|
|
}
|
|
|
|
.uni-navbar {
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.nav_left {
|
|
image {
|
|
width: 36rpx;
|
|
height: 36rpx;
|
|
|
|
&:last-child {
|
|
margin-left: 36.67rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.nav_right {
|
|
padding-right: 30rpx;
|
|
|
|
image {
|
|
width: 44rpx;
|
|
height: 44rpx;
|
|
}
|
|
}
|
|
|
|
.flex {
|
|
display: flex;
|
|
}
|
|
|
|
.index_logo {
|
|
width: 270.33rpx !important;
|
|
height: 50rpx !important;
|
|
margin-left: 50rpx;
|
|
}
|
|
|
|
.isScrollShow {
|
|
float: right;
|
|
}
|
|
|
|
.isScrollShow1 {
|
|
float: left;
|
|
margin-top: 20rpx;
|
|
width: 60% !important;
|
|
}
|
|
|
|
.isScrollShow2 {
|
|
float: left;
|
|
}
|
|
|
|
.isScrollShow3 {
|
|
float: left;
|
|
width: 70rpx;
|
|
height: 70rpx;
|
|
margin-top: 21rpx;
|
|
margin-left: 20rpx;
|
|
margin-right: 25rpx;
|
|
|
|
image {
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.page_padding {
|
|
padding: 0 26.67rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.page_padding_left {
|
|
padding-left: 24.67rpx;
|
|
}
|
|
|
|
// .navigation1{
|
|
|
|
// position: fixed;
|
|
// background-color: white;
|
|
// z-index: 99;
|
|
// margin-top: -100rpx;
|
|
// width: 100%;
|
|
|
|
// .navigation_scroll{
|
|
// // padding-top: 10rpx;
|
|
// padding-bottom: 14rpx;
|
|
|
|
// padding-left: 14rpx;
|
|
// .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: 28.67rpx 0;
|
|
// }
|
|
// view:first-child{
|
|
// margin-left: 0;
|
|
// }
|
|
// .scroll_active{
|
|
// font-size: 32rpx;
|
|
// border-bottom: 2.67rpx solid #000000;
|
|
// }
|
|
// }
|
|
// }
|
|
|
|
// }
|
|
.navigation {
|
|
/* display: flex; */
|
|
background-color: #000000;
|
|
position: fixed;
|
|
top: 0;
|
|
z-index: 99;
|
|
// background: white;
|
|
// height: 210rpx;
|
|
width: 100%;
|
|
|
|
.navigation_title {
|
|
display: flex;
|
|
background-color: #000000;
|
|
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;
|
|
|
|
>uni-navigator: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 {
|
|
margin-top: 20rpx;
|
|
padding-top: 6rpx;
|
|
padding-bottom: 14rpx;
|
|
background-color: white;
|
|
padding-left: 20rpx;
|
|
|
|
.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: 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: 320.33rpx;
|
|
// width: 720rpx;
|
|
.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;
|
|
}
|
|
|
|
.uni-bg-black {
|
|
background-color: #000000;
|
|
}
|
|
}
|
|
}
|
|
|
|
.grid_swiper {
|
|
height: 380rpx;
|
|
|
|
|
|
.grid_content {
|
|
display: flex;
|
|
// justify-content:space-around;
|
|
flex-wrap: wrap;
|
|
// padding: 0 2rpx;
|
|
// width: 80vw;
|
|
|
|
|
|
.grid_item {
|
|
// width: 97.33rpx;
|
|
display: flex;
|
|
width: 15vw;
|
|
padding: 0 7vw 0 1vw;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
// flex-direction: flex-start;
|
|
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;
|
|
}
|
|
}
|
|
}
|
|
|
|
.item_img {
|
|
width: 100%;
|
|
margin-left: 4rpx;
|
|
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
}
|
|
}
|
|
|
|
.spike1 {
|
|
white-space: nowrap;
|
|
width: 100%;
|
|
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;
|
|
display: inline-block;
|
|
font-weight: 500;
|
|
|
|
.spike1_item_img {
|
|
width: 200rpx;
|
|
height: 200rpx;
|
|
background-color: #999999;
|
|
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.padding_honlist2 {
|
|
margin-right: 280rpx !important;
|
|
}
|
|
|
|
.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: 149.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;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|