TmOct5/ZhHealth
1
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

[更新发现模块]

Browse Source
This commit is contained in:
zhangmanman
2022-01-11 11:25:41 +08:00
parent 6d4971bc5e
commit 906745fc14
33 changed files with 1806 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

120
pages/ranking/index.vue Normal file
View File

@@ -0,0 +1,120 @@
<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>