121 lines
3.5 KiB
Vue
121 lines
3.5 KiB
Vue
<template>
|
|
<view class="content">
|
|
<view class="left">
|
|
<view class="label" :class="{active : categoryId == item.category_id}" v-for="(item, index) in rankArr" :key="index" @click="leftClick(item.category_id)">
|
|
{{ item.name }}
|
|
</view>
|
|
</view>
|
|
<view class="right">
|
|
<view class="goods">
|
|
<view class="list" @click="$Router.push({name: 'rankingList', params: {id: item.category_id, name: item.name}})" v-for="(item, index) in listArr" :key="index">
|
|
<image class="logo" :src="item.cover" mode="aspectFill"></image>
|
|
<view class="name">
|
|
{{ item.name }}
|
|
</view>
|
|
<image class="arrow" src="/static/find/menu_more.png" mode="aspectFill"></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { categories } from '@/apis/interfaces/ranking'
|
|
export default {
|
|
data() {
|
|
return {
|
|
rankArr : [],
|
|
listArr : [],
|
|
categoryId : ''
|
|
}
|
|
},
|
|
mounted() {
|
|
categories().then(res => {
|
|
this.rankArr = res
|
|
this.categoryId = res[0].category_id
|
|
this.listArr = res[0].children
|
|
})
|
|
},
|
|
methods: {
|
|
// 分类-食物
|
|
getRank(cateogoryId){
|
|
categories({
|
|
category_id: cateogoryId
|
|
}).then(res => {
|
|
this.listArr = res
|
|
})
|
|
},
|
|
|
|
// 选择分类
|
|
leftClick(id) {
|
|
this.getRank(id)
|
|
this.categoryId = id
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.left {
|
|
position: fixed;
|
|
width: 200rpx;
|
|
left: 0;
|
|
top: 0;
|
|
height: 100vh;
|
|
z-index: 9;
|
|
overflow-y: scroll;
|
|
background-color: white;
|
|
.label {
|
|
line-height: 120rpx;
|
|
text-align: center;
|
|
font-size: $title-size-lg;
|
|
color: $text-gray-m;
|
|
border-bottom: $window-color 2rpx solid;
|
|
&.active {
|
|
background-color: $window-color;
|
|
color: $main-color;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
}
|
|
.right {
|
|
position: fixed;
|
|
background-color: $window-color;
|
|
height: 100vh;
|
|
overflow-y: scroll;
|
|
width: 100%;
|
|
left: 0;
|
|
top: 0;
|
|
padding: $padding $padding $padding 230rpx;
|
|
box-sizing: border-box;
|
|
.goods {
|
|
.list {
|
|
padding: $padding;
|
|
border-radius: $radius-m;
|
|
display: flex;
|
|
background-color: white;
|
|
margin-bottom: $margin;
|
|
position: relative;
|
|
.logo {
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
border-radius: $radius-lg;
|
|
margin-right: $margin;
|
|
}
|
|
.name {
|
|
font-size: $title-size-lg;
|
|
line-height: 80rpx;
|
|
}
|
|
.arrow {
|
|
width: 28rpx;
|
|
height: 28rpx;
|
|
position: absolute;
|
|
right: $padding;
|
|
top: 58rpx;
|
|
opacity: .6;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|