|
|
@@ -1,18 +1,17 @@
|
|
|
<template>
|
|
|
<view class="category">
|
|
|
- <view class="category-wrapper" v-if="catrgoryList.length>0">
|
|
|
+ <view class="category-wrapper" v-if="fetch.cate.length>0">
|
|
|
<!-- 左边导航 -->
|
|
|
<scroll-view scroll-y="true" class="left-wrapper" scroll-with-animation="true" :scroll-top="left_scroll">
|
|
|
<view class="left-content">
|
|
|
- <view class="title-content" :class="select_index === index?'onSelected':''" v-for="(title,index) in catrgoryList"
|
|
|
- :key="title.id" @tap="choose(index)">{{title.name}}</view>
|
|
|
+ <view class="title-content" :class="select_index === k?'onSelected':''" v-for="(v,k) in fetch.cate" :key="k" @tap="choose(k)">{{v.name}}</view>
|
|
|
</view>
|
|
|
</scroll-view>
|
|
|
<!-- 右边内容 -->
|
|
|
<scroll-view scroll-y="true" class="right-wrapper" scroll-with-animation="true" :scroll-top="right_scroll" @scroll="myscroll">
|
|
|
<view class="right-content">
|
|
|
<!-- banner区域 -->
|
|
|
- <view class="banner-wrapper">
|
|
|
+ <view class="banner-wrapper" v-if="swiperList.length > 0">
|
|
|
<swiper class="swiper-content" :autoplay="true" :interval="3000" :circular="true">
|
|
|
<swiper-item class="swiper-item" v-for="imgs in swiperList" :key="imgs.id">
|
|
|
<image class="swiper-img" :src="imgs.src"></image>
|
|
|
@@ -21,12 +20,12 @@
|
|
|
</view>
|
|
|
<!-- 产品区 -->
|
|
|
<view class="product-wrapper">
|
|
|
- <view class="category-item" :id="'list'+c_index" v-for="(c_item,c_index) in catrgoryList" :key="c_item.id">
|
|
|
- <view class="category-title">{{c_item.name}}</view>
|
|
|
+ <view class="category-item" :id="'list'+k" v-for="(v,k) in fetch.child" :key="k" v-if="v.show == 1">
|
|
|
+ <view class="category-title">{{v.name}}</view>
|
|
|
<view class="category-content">
|
|
|
- <view class="product-item" v-for="(p_item,p_index) in c_item.content" :key="p_item.id">
|
|
|
- <image class="product-img" :src="p_item.thumb"></image>
|
|
|
- <text class="product-title">{{p_item.cname}}</text>
|
|
|
+ <view class="product-item" v-for="(v1,k1) in v.content" :key="k1">
|
|
|
+ <image class="product-img" :src="v1.pic"></image>
|
|
|
+ <text class="product-title">{{v1.cname}}</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
@@ -41,6 +40,9 @@
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
+ fetch: {
|
|
|
+ cate : []
|
|
|
+ },
|
|
|
windows_height: 0, //屏幕高度
|
|
|
swiperList: [],
|
|
|
catrgoryList: [],
|
|
|
@@ -52,12 +54,16 @@
|
|
|
last: 0,
|
|
|
}
|
|
|
},
|
|
|
- onLoad() {
|
|
|
- this.init();
|
|
|
+ onLoad(option) {
|
|
|
+ this.id = option.id;
|
|
|
+ this.getData();
|
|
|
this.windows_height = uni.getSystemInfoSync().windowHeight;
|
|
|
},
|
|
|
methods: {
|
|
|
- init() {
|
|
|
+ getData : function() {
|
|
|
+ this.Dever.get(this, 'app/collection/?l=api.category', {id:this.id});
|
|
|
+ },
|
|
|
+ init : function() {
|
|
|
uni.request({
|
|
|
url: 'https://www.easy-mock.com/mock/5d351e87b5e1f213739d6498/shop/categoryList', //仅为示例，并非真实接口地址。
|
|
|
method: 'GET',
|
|
|
@@ -72,7 +78,7 @@
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
- getHeightList() {
|
|
|
+ getHeightList : function() {
|
|
|
let _this = this;
|
|
|
let selectorQuery = uni.createSelectorQuery();
|
|
|
selectorQuery.select('.left-content').boundingClientRect(function(rects) {
|
|
|
@@ -83,7 +89,7 @@
|
|
|
console.log(_this.right_height)
|
|
|
}).exec();
|
|
|
},
|
|
|
- choose(index) {
|
|
|
+ choose : function(index) {
|
|
|
if (this.select_index === index) {
|
|
|
return;
|
|
|
}
|
|
|
@@ -96,7 +102,7 @@
|
|
|
this.right_scroll = this.right_height[index] - 110;
|
|
|
}, 300)
|
|
|
},
|
|
|
- myscroll(e) {
|
|
|
+ myscroll : function(e) {
|
|
|
//引入节流
|
|
|
let right_content_height = e.detail.scrollHeight - this.windows_height;
|
|
|
if (right_content_height == e.detail.scrollTop) {
|
dever