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.
150 lines
2.8 KiB
150 lines
2.8 KiB
<template>
|
|
<view>
|
|
<lf-nav :title="current == 1 ? '品牌' : ''" :showIcon="true" :search="showNavDiy" bgColor="#ffffff"></lf-nav>
|
|
<view class="tabs">
|
|
<view class="lf-tab" :class="{'tab-active': current == 0}" @click="current = 0">分类</view>
|
|
<view class="lf-tab" :class="{'tab-active': current == 1}" @click="current = 1">品牌</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:'',
|
|
current: 0
|
|
};
|
|
},
|
|
computed: {
|
|
showNavDiy(){
|
|
return this.current == 0;
|
|
}
|
|
},
|
|
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>
|
|
page{
|
|
background-color: #FFFFFF;
|
|
}
|
|
</style>
|
|
<style lang="scss" scoped>
|
|
.tabs{
|
|
width: 750rpx;
|
|
height: 90rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
border-bottom: 1rpx solid #e5e5e5;
|
|
.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;
|
|
}
|
|
}
|
|
}
|
|
</style>
|