邓平艺
4 years ago
16 changed files with 1392 additions and 105 deletions
-
4common/styles/theme.css
-
14components/index-banner/index-banner.vue
-
8components/index-nav/index-nav.less
-
99components/index-nav/index-nav.vue
-
77components/lf-indexFind/lf-indexFind.vue
-
82components/lf-indexShopMatrix/lf-indexShopMatrix.vue
-
94components/lf-shopGoodsCard/lf-shopGoodsCard.vue
-
2components/lf-tabbar/lf-tabbar-box.vue
-
14components/lf-tabbar/lf-tabbar.vue
-
9pages.json
-
445pages/index/category/category.vue
-
225pages/index/category/testdata.js
-
181pages/index/classification/classification - 副本.vue
-
129pages/index/classification/classification.vue
-
96pages/index/index/index.vue
-
2store/index.js
@ -0,0 +1,77 @@ |
|||
<template> |
|||
<scroll-view class="find-scroll" :scroll-x="true"> |
|||
<view class="find-content"> |
|||
<view class="find-item" :class="{'max-item': index == 0}" v-for="(item, index) in 5" :key="index"> |
|||
<image class="img" src="https://picsum.photos/200/300"></image> |
|||
<view class="lf-line-2 info">南边开，风儿吹，北边放，花儿开，西边来，春归去，东边来，北边跑</view> |
|||
</view> |
|||
</view> |
|||
<view style="height: 10rpx;"></view> |
|||
</scroll-view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data(){ |
|||
return { |
|||
current: 0 |
|||
} |
|||
}, |
|||
created(){ |
|||
|
|||
}, |
|||
methods: { |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped="scoped"> |
|||
.find-scroll{ |
|||
padding: 30rpx 32rpx; |
|||
width: 750rpx; |
|||
height: max-content; |
|||
box-sizing: border-box; |
|||
.find-content{ |
|||
display: flex; |
|||
width: max-content; |
|||
align-items: center; |
|||
padding: 10rpx 0 0 10rpx; |
|||
} |
|||
.find-item{ |
|||
width: 380rpx; |
|||
height: 480rpx; |
|||
background: #FFFFFF; |
|||
box-shadow: 0rpx 2rpx 8rpx 1rpx rgba(0, 0, 0, 0.1); |
|||
margin-right: 20rpx; |
|||
.img{ |
|||
width: 380rpx; |
|||
height: 380rpx; |
|||
background-color: #D8D8D8; |
|||
} |
|||
.info{ |
|||
padding: 10rpx; |
|||
width: 380rpx; |
|||
height: 100rpx; |
|||
box-sizing: border-box; |
|||
font-size: 24rpx; |
|||
line-height: 1.8; |
|||
} |
|||
} |
|||
.max-item{ |
|||
height: 563rpx; |
|||
width: 425rpx; |
|||
.img{ |
|||
width: 425rpx; |
|||
height: 425rpx; |
|||
} |
|||
.info{ |
|||
width: 425rpx; |
|||
height: 138rpx; |
|||
padding: 20rpx; |
|||
font-size: 26rpx; |
|||
line-height: 2.1; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,82 @@ |
|||
<template> |
|||
<view class="content"> |
|||
<view class="item" v-for="(item, index) in 16" :key="index"> |
|||
<image class="bg-img" src="https://picsum.photos/200/300"></image> |
|||
<view class="shop"> |
|||
<image src="../../static/recommend-r.png"></image> |
|||
<view class="lf-line-1">DIOR迪奥</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data(){ |
|||
return { |
|||
|
|||
} |
|||
}, |
|||
created(){ |
|||
|
|||
}, |
|||
methods: { |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped="scoped"> |
|||
.content{ |
|||
width: 750rpx; |
|||
height: max-content; |
|||
box-sizing: border-box; |
|||
padding: 30rpx 32rpx; |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
.item{ |
|||
width: 165rpx; |
|||
height: 165rpx; |
|||
border: 1rpx solid #979797; |
|||
margin-right: 9rpx; |
|||
position: relative; |
|||
&:nth-child(4n){ |
|||
margin-right: 0rpx; |
|||
} |
|||
&:nth-child(n+5){ |
|||
margin-top: 8rpx; |
|||
} |
|||
.bg-img{ |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
.shop{ |
|||
width: 100%; |
|||
height: 100%; |
|||
background-color: rgba(0,0,0,0.1); |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: center; |
|||
align-items: center; |
|||
position: relative; |
|||
z-index: 2; |
|||
&>image{ |
|||
width: 70rpx; |
|||
height: 70rpx; |
|||
border-radius: 50%; |
|||
background-color: #FFFFFF; |
|||
} |
|||
&>view{ |
|||
font-size: 24rpx; |
|||
color: #FFFFFF; |
|||
margin-top: 4rpx; |
|||
width: 100%; |
|||
text-align: center; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,94 @@ |
|||
<template> |
|||
<view class="content"> |
|||
<view class="shop"> |
|||
<image class="img" src="https://picsum.photos/seed/picsum/200/300" mode="aspectFill"></image> |
|||
</view> |
|||
<scroll-view class="scroll-view" :scroll-x="true"> |
|||
<view class="scroll-content"> |
|||
<view class="goods-item" v-for="(item, index) in 5" :key="index"> |
|||
<image class="goods-img"></image> |
|||
<view class="goods-info"> |
|||
<view class="lf-line-1">猪大肠卖咯 5毛钱一斤咯</view> |
|||
<view>￥0.5</view> |
|||
</view> |
|||
</view> |
|||
<view class="goods-item"> |
|||
<view class="more-box"> |
|||
<text>查看更多</text> |
|||
<text class="lf-iconfont icon--2 lf-text-vertical"></text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</scroll-view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data(){ |
|||
return { |
|||
|
|||
} |
|||
}, |
|||
created(){ |
|||
|
|||
}, |
|||
methods: { |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped="scoped"> |
|||
.content{ |
|||
width: 750rpx; |
|||
height: max-content; |
|||
box-sizing: border-box; |
|||
padding: 0rpx 32rpx; |
|||
.shop{ |
|||
width: 100%; |
|||
height: 245rpx; |
|||
.img{ |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
} |
|||
.scroll-view{ |
|||
height: 280rpx; |
|||
width: 100%; |
|||
margin-top: 20rpx; |
|||
.scroll-content{ |
|||
display: flex; |
|||
width: 100%; |
|||
.goods-item{ |
|||
margin-right: 15rpx; |
|||
width: 180rpx; |
|||
} |
|||
.goods-img{ |
|||
width: 180rpx; |
|||
height: 180rpx; |
|||
background-color: #EEEEEE; |
|||
} |
|||
.goods-info{ |
|||
text-align: center; |
|||
color: #222222; |
|||
&>view:nth-child(1n){ |
|||
font-size: 24rpx; |
|||
} |
|||
&>view:nth-child(2n){ |
|||
font-size: 28rpx; |
|||
font-weight: bold; |
|||
} |
|||
} |
|||
.more-box{ |
|||
width: 180rpx; |
|||
height: 180rpx; |
|||
background-color: #EEEEEE; |
|||
text-align: center; |
|||
line-height: 180rpx; |
|||
font-size: 24rpx; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,445 @@ |
|||
<template> |
|||
<view class="centent"> |
|||
<lf-nav :title="['分类','品牌'][current]" bgColor="#fff" :search="current == 0" @changeHeight="e => nav_height = e"></lf-nav> |
|||
<view class="tabs"> |
|||
<view class="lf-tab" |
|||
:style="{width: 100 / tabs.length +'%'}" |
|||
:class="{'tab-active': current == index}" |
|||
v-for="(item, index) in tabs" :key="index" |
|||
@click="current = index">{{ item.name }} |
|||
</view> |
|||
</view> |
|||
<!-- 分类 --> |
|||
<view class="page" v-if="current == 0"> |
|||
<scroll-view class="left_view p_r" scroll-y :style="{ height: autoHeight }"> |
|||
<block v-for="(item, index) in dataArr" :key="index"> |
|||
<view :class="[left_selectIndex == index ? 'left_item_s' : '', 'left_item']" :id="'left_' + index" @click="leftTap({ item, index })">{{ item.name }}</view> |
|||
</block> |
|||
<view class="seletItem" :style="{ top: left_selectIndex * 60 - 19 + 'px' }"></view> |
|||
</scroll-view> |
|||
|
|||
<scroll-view @scroll="rightScroll" class="right_view" scroll-y :style="{ height: autoHeight }" :scroll-into-view="'left_' + right_selectIndex" scroll-with-animation> |
|||
<block v-for="(item, index) in dataArr" :key="index"> |
|||
<view :ref="'left_' + index" class="right_item " :id="'left_' + index"> |
|||
<text class="right_item_title ">{{ item.name }}</text> |
|||
<view class="right_item_view"> |
|||
<view class="item" v-for="(item, index) in item.subArr" :key="index" @click="rightTap(item)"> |
|||
<image :src="item.img" :style="{ width: '100%', height: subItemW + 'px', background: '#999999' }"></image> |
|||
<text class="lf-font-24">{{ item.name }}</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</block> |
|||
<view class="" :style="{ height: 'calc('+ scrollH / 2 +'px)' }"><!-- 站位 --></view> |
|||
</scroll-view> |
|||
</view> |
|||
<!-- 品牌 --> |
|||
<view class="brand" v-else-if="current == 1" :style="{height: autoHeight}"> |
|||
<!-- 筛选 --> |
|||
<view class="lf-filter-box"> |
|||
<view class="lf-filter" :class="{'lf-filter-after': filter_active == ''}"> |
|||
<view :class="{'filter-active': filter_active == 'floor'}" @click="filter_active = 'floor'">楼层</view> |
|||
<view :class="{'filter-active': filter_active == 'class'}" @click="filter_active = 'class'">分类</view> |
|||
</view> |
|||
<view class="filter-modal-mask" :style="{height: otherHeight}" v-if="filter_active != ''" @click="filter_active = ''"> |
|||
<view class="filter-modal"> |
|||
<view class="filter-item" v-for="(item, index) in 6" :key="index">{{ '哈哈'+ item }}</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<!-- 内容 --> |
|||
<scroll-view class="brand-scroll" :scroll-into-view="scrollAnchorId" :scroll-y="true" :style="{height: otherHeight}"> |
|||
<view class="lf-flex brand-item" :id="'anchor-'+ index" v-for="(item, index) in point_list" :key="index"> |
|||
<image class="img" src="https://picsum.photos/200"></image> |
|||
<view class="info"> |
|||
<view class="lf-font-36 lf-font-bold lf-color-black">luckin coffee 瑞幸咖啡 {{ item }}</view> |
|||
<view class="lf-font-24 lf-color-gray">餐饮·美食｜18件在售</view> |
|||
<view class="lf-font-24"> |
|||
<text class="lf-iconfont icon--1 lf-font-24"></text> |
|||
<text class="lf-color-gray lf-m-l-10">L2</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</scroll-view> |
|||
<!-- 锚点定位 --> |
|||
<view class="fixed-point" @touchmove="pointTouchmove"> |
|||
<view class="point-item" @click="pointClick" :id="'point-'+index" :style="{height: 100 / 26 +'%'}" v-for="(item, index) in point_list" :key="index">{{ item }}</view> |
|||
</view> |
|||
</view> |
|||
<lf-tabbar></lf-tabbar> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import lfNav from '@/components/lf-nav/lf-nav.vue'; |
|||
import lfTabbar from '@/components/lf-tabbar/lf-tabbar.vue'; |
|||
import testdata from './testdata.js'; |
|||
let app = getApp(); |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
scrollH: 0, |
|||
subItemW: 0, |
|||
left_selectIndex: 0, |
|||
right_selectIndex: 0, |
|||
ttscrollH: 0, //总高度 |
|||
placeholderH: 0, //占位高度 |
|||
heighArr: [], |
|||
dataArr: testdata, |
|||
current: 1, |
|||
nav_height: 0, |
|||
tabs: [{ |
|||
name: '分类' |
|||
},{ |
|||
name: '品牌' |
|||
}], |
|||
filter_active: '', |
|||
point_list: [], |
|||
scrollAnchorId: '' |
|||
}; |
|||
}, |
|||
computed: { |
|||
autoHeight(){ |
|||
return `calc(${this.scrollH}px - 50px - ${this.nav_height}px - 90rpx)`; |
|||
}, |
|||
otherHeight(){ |
|||
return `calc(${this.scrollH}px - 50px - ${this.nav_height}px - 90rpx - 105rpx)`; |
|||
} |
|||
}, |
|||
components: { |
|||
lfNav, |
|||
lfTabbar |
|||
}, |
|||
onLoad() { |
|||
// https://ext.dcloud.net.cn/plugin?id=5031 |
|||
let info = uni.getSystemInfoSync(); |
|||
|
|||
let self = this; |
|||
self.scrollH = info.screenHeight; |
|||
self.subItemW = parseInt((info.screenWidth * (2 / 3) - 15 * 2 - 24) / 3); |
|||
setTimeout(function() { |
|||
self.computerH(); |
|||
}, 100); |
|||
this.createAtoZ(); |
|||
}, |
|||
methods: { |
|||
// 生成A-Z的大写字母 |
|||
createAtoZ(){ |
|||
let point_list = []; |
|||
for(var i=0; i<26; i++){ |
|||
point_list.push(String.fromCharCode(65+i)); |
|||
} |
|||
this.point_list = point_list; |
|||
}, |
|||
pointTouchmove(event){ |
|||
console.log(event); |
|||
}, |
|||
pointClick(event){ |
|||
let index = (event.target.id).replace('point-', ''); |
|||
let letter = this.point_list[index]; |
|||
this.scrollAnchorId = ''; |
|||
this.$msg(letter); |
|||
this.$nextTick(() => { |
|||
this.scrollAnchorId = 'anchor-'+ index; |
|||
}) |
|||
}, |
|||
leftTap: function(e) { |
|||
this.left_selectIndex = e.index; |
|||
this.right_selectIndex = e.index; |
|||
}, |
|||
// 右边点击 |
|||
rightTap: function() { |
|||
uni.showModal({ |
|||
title: '点击了', |
|||
showCancel: false |
|||
}); |
|||
}, |
|||
rightScroll: function(e) { |
|||
let scrollH = e.detail.scrollTop + 30; |
|||
let cc = this.ttscrollH - this.scrollH; |
|||
|
|||
let a = 0; |
|||
let findInx = this.heighArr.findIndex(function(itemH, i) { |
|||
a = a + itemH; |
|||
return a > scrollH; |
|||
}); |
|||
// if (scrollH >= cc) { |
|||
// return; |
|||
// } |
|||
this.left_selectIndex = findInx; |
|||
}, |
|||
// 计算高度 |
|||
computerH: function() { |
|||
this.ttscrollH = 0; |
|||
for (let item of this.dataArr) { |
|||
let title_lineH = 49; //rpx |
|||
let subNum = item.subArr.length; |
|||
let subImgH = this.subItemW; //rpx |
|||
let subTitleH = 40; //rpx |
|||
let rowSpecH = 8; //rpx |
|||
let rowN = subNum % 3; |
|||
let rowSpecNum = parseInt(subNum / 3) + parseInt(rowN > 0 ? 1 : 0); |
|||
let totalRpx = title_lineH + (subImgH + subTitleH) * rowSpecNum + rowSpecH * (rowSpecNum - 1); |
|||
this.heighArr.push(totalRpx); |
|||
this.ttscrollH = this.ttscrollH + totalRpx; |
|||
} |
|||
|
|||
// this.placeholderH = this.scrollH - this.heighArr[this.heighArr.length - 1]; |
|||
|
|||
//以下方法也可以 |
|||
// let self=this |
|||
// var selectorQuery = uni.createSelectorQuery() |
|||
// selectorQuery.selectAll('.right_item').boundingClientRect(data => { |
|||
// self.heighArr = data.map(item => { |
|||
// return { |
|||
// top: Math.round(item.top), |
|||
// height: Math.round(item.height) |
|||
// } |
|||
// }) |
|||
// }).exec() |
|||
// console.log('ttscrollH',this.$refs.left_0) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.page { |
|||
display: grid; |
|||
grid-template-columns: 1fr 2fr; |
|||
grid-template-rows: auto; |
|||
position: absolute; |
|||
left: 0rpx; |
|||
right: 0rpx; |
|||
overflow: hidden; |
|||
box-sizing: border-box; |
|||
} |
|||
.left_view { |
|||
background-color: #f4f8f8; |
|||
position: relative; |
|||
box-sizing: border-box; |
|||
// 蒙版 |
|||
.seletItem { |
|||
height: 98px; |
|||
position: absolute; |
|||
top: 0rpx; |
|||
left: 0rpx; |
|||
z-index: 10; |
|||
right: 0rpx; |
|||
// background-color: rgba(255, 255, 255, 0.3); |
|||
transition: top 0.2s linear; |
|||
display: flex; |
|||
align-items: center; |
|||
box-sizing: border-box; |
|||
&::before { |
|||
content: ''; |
|||
width: 6rpx; |
|||
height: 60%; |
|||
background-color: #15716E; |
|||
left: 0rpx; |
|||
} |
|||
} |
|||
.left_item { |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
height: 60px; |
|||
margin-bottom: 0rpx; |
|||
position: relative; |
|||
font-size: 28rpx; |
|||
box-sizing: border-box; |
|||
color: #555555; |
|||
} |
|||
.left_item_s { |
|||
background-color: #ffffff; |
|||
color: #15716E; |
|||
font-weight: bold; |
|||
position: relative; |
|||
box-sizing: border-box; |
|||
} |
|||
} |
|||
|
|||
.right_view { |
|||
background-color: #ffffff; |
|||
padding: 0rpx 12px; |
|||
box-sizing: border-box; |
|||
.right_item { |
|||
.right_item_title { |
|||
display: block; |
|||
box-sizing: border-box; |
|||
line-height: 49px; |
|||
font-size: 28rpx; |
|||
font-weight: bold; |
|||
color: #15716E; |
|||
} |
|||
.right_item_view { |
|||
display: grid; |
|||
grid-template-columns: repeat(3, 1fr); |
|||
grid-template-rows: auto; |
|||
grid-gap: 8px 15px; |
|||
box-sizing: border-box; |
|||
.item { |
|||
display: flex; |
|||
flex-flow: column nowrap; |
|||
align-items: center; |
|||
box-sizing: border-box; |
|||
text { |
|||
color: #333; |
|||
line-height: 40px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.tabs{ |
|||
width: 750rpx; |
|||
height: 90rpx; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
border-bottom: 1rpx solid #e5e5e5; |
|||
background-color: #FFFFFF; |
|||
.lf-tab{ |
|||
// width: 50%; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
font-size: 28rpx; |
|||
color: #777777; |
|||
position: relative; |
|||
&.tab-active{ |
|||
color: #15716E; |
|||
} |
|||
&.tab-active::after{ |
|||
content: ''; |
|||
position: absolute; |
|||
bottom: 0; |
|||
left: 50%; |
|||
width: 80rpx; |
|||
height: 10rpx; |
|||
background-color: #15716E; |
|||
border-radius: 10rpx 10rpx 0 0; |
|||
margin-left: -40rpx; |
|||
} |
|||
} |
|||
} |
|||
.lf-filter-box{ |
|||
height: 105rpx; |
|||
width: 750rpx; |
|||
background-color: #F4F8F8; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
position: relative; |
|||
.lf-filter{ |
|||
width: 300rpx; |
|||
height: 65rpx; |
|||
border-radius: 33rpx; |
|||
border: 1rpx solid #15716E; |
|||
color: #15716E; |
|||
font-size: 24rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
position: relative; |
|||
overflow: hidden; |
|||
&.lf-filter-after::after{ |
|||
content: ''; |
|||
position: absolute; |
|||
top: 12rpx; |
|||
left: calc(50% - 1rpx); |
|||
width: 2rpx; |
|||
height: 40rpx; |
|||
background-color: #15716E; |
|||
} |
|||
&>view{ |
|||
height: 100%; |
|||
width: 50%; |
|||
display: flex; |
|||
justify-content: space-around; |
|||
align-items: center; |
|||
} |
|||
.filter-active{ |
|||
background-color: #15716E; |
|||
color: #FFFFFF; |
|||
} |
|||
} |
|||
.filter-modal-mask{ |
|||
position: absolute; |
|||
top: 105rpx; |
|||
left: 0; |
|||
width: 100%; |
|||
background-color: rgba(0,0,0,0.5); |
|||
.filter-modal{ |
|||
width: 750rpx; |
|||
height: max-content; |
|||
padding: 60rpx 32rpx; |
|||
box-sizing: border-box; |
|||
background-color: #FFFFFF; |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
.filter-item{ |
|||
width: 215rpx; |
|||
height: 65rpx; |
|||
border-radius: 10rpx; |
|||
border: 1rpx solid #555555; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
font-size: 28rpx; |
|||
color: #555555; |
|||
margin-right: 21rpx; |
|||
&:nth-child(3n){ |
|||
margin-right: 0rpx; |
|||
} |
|||
&:nth-child(n+4){ |
|||
margin-top: 21rpx; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.brand-scroll{ |
|||
padding: 0rpx 32rpx; |
|||
box-sizing: border-box; |
|||
width: 750rpx; |
|||
.brand-item{ |
|||
margin-bottom: 60rpx; |
|||
&:nth-child(1n){ |
|||
margin-top: 30rpx; |
|||
} |
|||
} |
|||
.img{ |
|||
width: 150rpx; |
|||
height: 150rpx; |
|||
border-radius: 4rpx; |
|||
margin-right: 20rpx; |
|||
} |
|||
.info{ |
|||
width: 514rpx; |
|||
height: 150rpx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: space-between; |
|||
} |
|||
} |
|||
.brand{ |
|||
position: relative; |
|||
} |
|||
.fixed-point{ |
|||
position: fixed; |
|||
right: 0; |
|||
top: 18vh; |
|||
height: 70vh; |
|||
width: 57rpx; |
|||
background-color: rgba(0,0,0,0.3); |
|||
border-radius: 30rpx 0rpx 0rpx 30rpx; |
|||
padding: 14rpx 0rpx; |
|||
.point-item{ |
|||
font-size: 24rpx; |
|||
color: #FFFFFF; |
|||
text-align: center; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,225 @@ |
|||
export default [{ |
|||
name: '面部护肤', |
|||
subArr: [{ |
|||
img: 'https://picsum.photos/200', |
|||
name: '名称' |
|||
}, |
|||
{ |
|||
img: 'https://picsum.photos/200', |
|||
name: '名称' |
|||
}, |
|||
{ |
|||
img: 'https://picsum.photos/200', |
|||
name: '名称' |
|||
}, |
|||
{ |
|||
img: 'https://picsum.photos/200', |
|||
name: '名称' |
|||
}, |
|||
{ |
|||
img: 'https://picsum.photos/200', |
|||
name: '名称' |
|||
} |
|||
] |
|||
}, |
|||
{ |
|||
name: '香水彩妆', |
|||
subArr: [{ |
|||
img: 'https://picsum.photos/200', |
|||
name: '名称' |
|||
}, |
|||
{ |
|||
img: 'https://picsum.photos/200', |
|||
name: '名称' |
|||
} |
|||
] |
|||
}, |
|||
{ |
|||
name: '精致洗护', |
|||
subArr: [{ |
|||
img: 'https://picsum.photos/200', |
|||
name: '名称2' |
|||
}, |
|||
{ |
|||
img: 'https://picsum.photos/200', |
|||
name: '名称2' |
|||
} |
|||
] |
|||
}, |
|||
{ |
|||
name: '国际精品', |
|||
subArr: [{ |
|||
img: 'https://picsum.photos/200', |
|||
name: '水果2' |
|||
}, |
|||
{ |
|||
img: 'https://picsum.photos/200', |
|||
name: '水果2' |
|||
}, |
|||
{ |
|||
img: 'https://picsum.photos/200', |
|||
name: '水果2' |
|||
}, |
|||
{ |
|||
img: 'https://picsum.photos/200', |
|||
name: '水果2' |
|||
}, |
|||
{ |
|||
img: 'https://picsum.photos/200', |
|||
name: '水果2' |
|||
}, |
|||
{ |
|||
img: 'https://picsum.photos/200', |
|||
name: '水果2' |
|||
}, |
|||
{ |
|||
img: 'https://picsum.photos/200', |
|||
name: '水果2' |
|||
}, |
|||
{ |
|||
img: 'https://picsum.photos/200', |
|||
name: '水果2' |
|||
}, |
|||
{ |
|||
img: 'https://picsum.photos/200', |
|||
name: '水果2' |
|||
}, |
|||
{ |
|||
img: 'https://picsum.photos/200', |
|||
name: '水果2' |
|||
}, |
|||
{ |
|||
img: 'https://picsum.photos/200', |
|||
name: '水果2' |
|||
}, |
|||
{ |
|||
img: 'https://picsum.photos/200', |
|||
name: '水果2' |
|||
}, |
|||
{ |
|||
img: 'https://picsum.photos/200', |
|||
name: '水果2' |
|||
} |
|||
] |
|||
}, |
|||
{ |
|||
name: '服装内衣', |
|||
subArr: [{ |
|||
img: 'https://picsum.photos/200', |
|||
name: '悲剧2' |
|||
}, |
|||
{ |
|||
img: 'https://picsum.photos/200', |
|||
name: '悲剧2' |
|||
} |
|||
] |
|||
}, |
|||
{ |
|||
name: '首饰配饰', |
|||
subArr: [{ |
|||
img: 'https://picsum.photos/200', |
|||
name: '名称' |
|||
}, |
|||
{ |
|||
img: 'https://picsum.photos/200', |
|||
name: '名称' |
|||
}, |
|||
{ |
|||
img: 'https://picsum.photos/200', |
|||
name: '名称' |
|||
}, |
|||
{ |
|||
img: 'https://picsum.photos/200', |
|||
name: '名称' |
|||
}, |
|||
{ |
|||
img: 'https://picsum.photos/200', |
|||
name: '名称' |
|||
}, |
|||
{ |
|||
img: 'https://picsum.photos/200', |
|||
name: '名称' |
|||
}, |
|||
{ |
|||
img: 'https://picsum.photos/200', |
|||
name: '名称' |
|||
}, |
|||
{ |
|||
img: 'https://picsum.photos/200', |
|||
name: '名称' |
|||
}, |
|||
{ |
|||
img: 'https://picsum.photos/200', |
|||
name: '名称' |
|||
}, |
|||
{ |
|||
img: 'https://picsum.photos/200', |
|||
name: '名称' |
|||
}, |
|||
{ |
|||
img: 'https://picsum.photos/200', |
|||
name: '名称' |
|||
}, |
|||
{ |
|||
img: 'https://picsum.photos/200', |
|||
name: '名称' |
|||
}, |
|||
{ |
|||
img: 'https://picsum.photos/200', |
|||
name: '名称' |
|||
}, |
|||
{ |
|||
img: 'https://picsum.photos/200', |
|||
name: '名称' |
|||
} |
|||
] |
|||
}, |
|||
{ |
|||
name: '服装内衣', |
|||
subArr: [{ |
|||
img: 'https://picsum.photos/200', |
|||
name: '悲剧2' |
|||
}, |
|||
{ |
|||
img: 'https://picsum.photos/200', |
|||
name: '悲剧2' |
|||
} |
|||
] |
|||
}, |
|||
{ |
|||
name: '服装内衣', |
|||
subArr: [{ |
|||
img: 'https://picsum.photos/200', |
|||
name: '悲剧2' |
|||
}, |
|||
{ |
|||
img: 'https://picsum.photos/200', |
|||
name: '悲剧2' |
|||
} |
|||
] |
|||
}, |
|||
{ |
|||
name: '滴滴滴等', |
|||
subArr: [{ |
|||
img: 'https://picsum.photos/200', |
|||
name: '悲剧2' |
|||
}, |
|||
{ |
|||
img: 'https://picsum.photos/200', |
|||
name: '悲剧2' |
|||
} |
|||
] |
|||
}, |
|||
{ |
|||
name: '好好说说', |
|||
subArr: [{ |
|||
img: 'https://picsum.photos/200', |
|||
name: '悲剧2' |
|||
}, |
|||
{ |
|||
img: 'https://picsum.photos/200', |
|||
name: '悲剧2' |
|||
} |
|||
] |
|||
} |
|||
] |
|||
@ -0,0 +1,181 @@ |
|||
<template> |
|||
<view style="height: 100%;"> |
|||
<lf-nav title="分类"></lf-nav> |
|||
<view id="classification" style="height: 100%;"> |
|||
<view :class="classData.type == 'upper_lower' ? '' : 'hiddens'" style="height: 100%;"> |
|||
<view v-if="init && classData.type == 'upper_lower'"> |
|||
<view class="class__banner" v-if="classData.CategoryListAd && classData.CategoryListAd.length"> |
|||
<swiper :style="{height:imgHeight+'px'}" indicator-dots="true" autoplay="true" circular="true"> |
|||
<swiper-item v-for="(item,index) in classData.CategoryListAd" :key="index"> |
|||
<image mode="widthFix" @load="imgLoad" :src="item.image" :data-url="item.link" @tap="jumpItem"></image> |
|||
</swiper-item> |
|||
</swiper> |
|||
</view> |
|||
<view class="class__item_box"> |
|||
<view class="class__item" v-for="(item,index) in classData.CategoryList" :key="index"> |
|||
<view class="img_item" :data-url="item.link" @tap="jumpItem"> |
|||
<image :src="item.image"></image> |
|||
<view class="img_text"> |
|||
<view class="text_top"> |
|||
<view class="text_line"></view> |
|||
<view class="text_content"> |
|||
{{item.name}} |
|||
</view> |
|||
<view class="text_line"></view> |
|||
</view> |
|||
|
|||
<view class="text_btn"> |
|||
查看全部 |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="class__tag"> |
|||
<view class="tag__item" v-for="(items,idx) in item.items" :key="idx"> |
|||
<view class="tag_flex" :data-url="items.link" @tap="jumpItem"> |
|||
<view class="tag_img"> |
|||
<image :src="items.image"></image> |
|||
</view> |
|||
<view class="tag_text"> |
|||
{{items.name}} |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view v-if="init && classData.type == 'left_right'" style="height: 100%;"> |
|||
<view class="classifical" style="height: 100%;"> |
|||
<view class="left-menu"> |
|||
<view class="item" :class="activeIndex == key ? 'active' : ''" v-for="(i,key) in classData.CategoryList" :key="key" |
|||
@tap="change" :data-index="key">{{i.name}}</view> |
|||
</view> |
|||
<view class="right-content" style="height: 100%;"> |
|||
<view class="title" @tap="jumpItem" :data-url="classData.CategoryList[activeIndex].link"> |
|||
<span>{{classData.CategoryList[activeIndex].name}}</span> |
|||
<span class="iconfont icon--xiangyoujiantou"></span> |
|||
</view> |
|||
<view v-for="(item,index) in classData.CategoryList" :key="index" v-show="activeIndex == index"> |
|||
<view class="list"> |
|||
<view class="list-item" v-for="(list,idx) in item.items" :key="idx" @tap="jumpItem" :data-url="list.link"> |
|||
<view class="photo"> |
|||
<image :src="list.image" mode="widthFix"></image> |
|||
</view> |
|||
<view class="txt">{{list.name}}</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
</view> |
|||
</view> |
|||
|
|||
|
|||
|
|||
|
|||
</view> |
|||
|
|||
<lf-tabbar></lf-tabbar> |
|||
</view> |
|||
|
|||
</template> |
|||
<script> |
|||
import { |
|||
pageLogin, |
|||
getUrl, |
|||
config |
|||
} from '@/common/js/utils.js'; |
|||
import lfNav from '@/components/lf-nav/lf-nav.vue'; |
|||
import lfTabbar from '@/components/lf-tabbar/lf-tabbar.vue'; |
|||
|
|||
export default { |
|||
components: { |
|||
lfNav, |
|||
lfTabbar |
|||
}, |
|||
data() { |
|||
return { |
|||
classData: '', |
|||
screenWidth: '', |
|||
activeIndex: 0, |
|||
init: false, |
|||
imgHeight:'' |
|||
}; |
|||
}, |
|||
|
|||
onLoad() { |
|||
this.classificationList(); |
|||
wx.getSystemInfo({ |
|||
success: res => { |
|||
this.screenWidth = res.screenWidth; |
|||
|
|||
} |
|||
}); |
|||
}, |
|||
methods: { |
|||
//切换menu |
|||
change(e) { |
|||
var activeIndex = e.currentTarget.dataset.index; |
|||
this.activeIndex = activeIndex; |
|||
}, |
|||
|
|||
jumpItem(e) { |
|||
var url = e.currentTarget.dataset.url; |
|||
wx.navigateTo({ |
|||
url: url |
|||
}); |
|||
}, |
|||
|
|||
imgLoad(e) { |
|||
var height = e.detail.height; |
|||
var width = e.detail.width; |
|||
var ratio = width / height; |
|||
var screenWidth = this.screenWidth; |
|||
this.imgHeight = screenWidth / ratio; |
|||
}, |
|||
|
|||
classificationList() { |
|||
wx.showLoading({ |
|||
title: '加载中', |
|||
mask: true |
|||
}); |
|||
this.$http.get({ |
|||
api: 'api/home/getHomeCategoryList' |
|||
}).then(res => { |
|||
if (res.statusCode == 200) { |
|||
res = res.data; |
|||
if (res.status) { |
|||
this.init = true; |
|||
this.classData = res.data; |
|||
} else { |
|||
wx.showModal({ |
|||
content: '请求失败', |
|||
showCancel: false |
|||
}); |
|||
} |
|||
} else { |
|||
wx.showModal({ |
|||
content: '请求失败', |
|||
showCancel: false |
|||
}); |
|||
} |
|||
|
|||
wx.hideLoading(); |
|||
}, err => { |
|||
wx.showModal({ |
|||
content: '请求失败', |
|||
showCancel: false |
|||
}); |
|||
wx.hideLoading(); |
|||
}); |
|||
}, |
|||
|
|||
|
|||
}, |
|||
}; |
|||
</script> |
|||
<style rel="stylesheet/less" lang="less"> |
|||
@import "classification"; |
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue