|
|
@@ -1,185 +0,0 @@
|
|
|
-<template>
|
|
|
- <div style="height:100%;">
|
|
|
- <van-search shape="round" v-model="value" disabled placeholder="搜索" />
|
|
|
- <div class="box">
|
|
|
- <van-sidebar v-model="activeKey" @change="getCategoryById">
|
|
|
- <van-sidebar-item v-for="item in firstCategory" :key="item.id" :title="item.name" />
|
|
|
- </van-sidebar>
|
|
|
- <div class="main">
|
|
|
- <van-tabs v-model="active" type="line" :border="true" swipe-threshold='3' title-active-color="rgb(252, 56, 56)" @change="getProductByCategoryId">
|
|
|
- <van-tab v-for="item in secondCategory" :key="item.id" :title="item.name">
|
|
|
- <van-list v-model="loading" :immediate-check="false" :finished="finished" finished-span="没有更多了" @load="onLoad">
|
|
|
- <div class='goods-item' v-for="item in goodsList" :key="item.id" @click="$router.push({path:'/goodsDetails',query:{item:encodeURI(JSON.stringify(item))}})">
|
|
|
- <img class='goods-pic' :src="item.url ? item.url : require('../../../assets/images/appIcon/appIcon_01.png')" />
|
|
|
- <div class='goods-info'>
|
|
|
- <span class='goodsName'>{{item.name}}</span>
|
|
|
- <span class="soldNum">已售 {{item.sold}}</span>
|
|
|
- <span class='goodsPrice'>¥{{item.price}}/{{item.unit}}</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </van-list>
|
|
|
- </van-tab>
|
|
|
- </van-tabs>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-<script>
|
|
|
-import {
|
|
|
- getCategoryList,
|
|
|
- getCategoryById,
|
|
|
- getProductByCategoryId,
|
|
|
-} from '../../../api/index'
|
|
|
-
|
|
|
-export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- activeKey: 0,
|
|
|
- firstCategory: [],
|
|
|
- goodsList: [],
|
|
|
- active: 0,
|
|
|
- value: '',
|
|
|
- info: [],
|
|
|
- loading: false,
|
|
|
- finished: false,
|
|
|
- secondCategory: [],
|
|
|
- }
|
|
|
- },
|
|
|
- created() {
|
|
|
- this.getCategoryList()
|
|
|
- },
|
|
|
- methods: {
|
|
|
- async getCategoryList() {
|
|
|
- const res = await getCategoryList()
|
|
|
- console.log(res, '123')
|
|
|
- this.firstCategory = res.data.first
|
|
|
- this.secondCategory = [
|
|
|
- {
|
|
|
- id: '',
|
|
|
- name: '全部',
|
|
|
- },
|
|
|
- ...res.data.second,
|
|
|
- ]
|
|
|
- this.getCategoryById(0)
|
|
|
- },
|
|
|
- async getCategoryById() {
|
|
|
- this.active = 0
|
|
|
- const res = await getCategoryById({
|
|
|
- id: this.firstCategory[this.activeKey].id,
|
|
|
- })
|
|
|
- this.secondCategory = [
|
|
|
- {
|
|
|
- id: '',
|
|
|
- name: '全部',
|
|
|
- },
|
|
|
- ...res.data.second,
|
|
|
- ]
|
|
|
- this.getProductByCategoryId()
|
|
|
- },
|
|
|
- async getProductByCategoryId() {
|
|
|
- this.loading = true
|
|
|
- const res = await getProductByCategoryId({
|
|
|
- topId: this.firstCategory[this.activeKey].id, //大类id
|
|
|
- id: this.secondCategory[this.active].id, //二级分类id
|
|
|
- })
|
|
|
- this.goodsList = res.data.list
|
|
|
- this.finished = true
|
|
|
- this.loading = false
|
|
|
- },
|
|
|
- onLoad() {
|
|
|
- // console.log('触', this.loading)
|
|
|
- // this.loading = false
|
|
|
- // console.log('触1', this.loading)
|
|
|
- },
|
|
|
- },
|
|
|
-}
|
|
|
-</script>
|
|
|
-<style lang="scss" scoped>
|
|
|
-.box {
|
|
|
- display: flex;
|
|
|
- height: calc(100% - 100px);
|
|
|
- ::v-deep .van-sidebar {
|
|
|
- flex-shrink: 1;
|
|
|
- width: 200px;
|
|
|
- height: 100%;
|
|
|
- background-color: #f5f5f5;
|
|
|
- .van-sidebar-item__text {
|
|
|
- font-size: 30px;
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-.main {
|
|
|
- width: calc(100% - 200px);
|
|
|
- height: 100%;
|
|
|
- .van-tabs {
|
|
|
- border-bottom: 0;
|
|
|
- height: 100%;
|
|
|
- text-align: left;
|
|
|
- ::v-deep .van-tab {
|
|
|
- flex: none;
|
|
|
- padding: 0;
|
|
|
- padding-right: 20px;
|
|
|
- }
|
|
|
- ::v-deep .van-tabs__nav--complete {
|
|
|
- padding: 0;
|
|
|
- }
|
|
|
- ::v-deep .van-tabs__line {
|
|
|
- height: 0;
|
|
|
- }
|
|
|
- ::v-deep .van-tabs__wrap {
|
|
|
- height: 60px;
|
|
|
- .van-tab__span {
|
|
|
- font-size: 24px;
|
|
|
- }
|
|
|
- }
|
|
|
- ::v-deep .van-tabs__content {
|
|
|
- height: calc(100% - 60px);
|
|
|
- overflow-y: auto;
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-.goods-item {
|
|
|
- width: calc(100% - 20px);
|
|
|
- height: 210px;
|
|
|
- display: flex;
|
|
|
- padding: 10px;
|
|
|
- flex-direction: row;
|
|
|
- align-items: center;
|
|
|
- justify-content: flex-start;
|
|
|
- border-bottom: 1px solid #f2f2f2;
|
|
|
-}
|
|
|
-
|
|
|
-.goods-pic {
|
|
|
- width: 160px;
|
|
|
- height: 160px;
|
|
|
- flex-shrink: 0;
|
|
|
-}
|
|
|
-
|
|
|
-.goods-info {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: flex-start;
|
|
|
- padding: 5px 5px 5px 5px;
|
|
|
- height: 160px;
|
|
|
- margin-left: 16px;
|
|
|
-}
|
|
|
-.goodsName {
|
|
|
- font-size: 30px;
|
|
|
- text-overflow: -o-ellipsis-lastline;
|
|
|
- overflow: hidden;
|
|
|
- text-overflow: ellipsis;
|
|
|
- display: -webkit-box;
|
|
|
- -webkit-line-clamp: 2;
|
|
|
- -webkit-box-orient: vertical;
|
|
|
- // height: 80px;
|
|
|
-}
|
|
|
-.soldNum {
|
|
|
- font-size: 22px;
|
|
|
- color: #9f9f9f;
|
|
|
-}
|
|
|
-.goodsPrice {
|
|
|
- color: #e64340;
|
|
|
-}
|
|
|
-</style>
|