|
|
@@ -1,8 +1,226 @@
|
|
|
-<template>
|
|
|
+<template name="cate">
|
|
|
+ <view class="category">
|
|
|
+ <view class="category-wrapper" v-if="fetch.cate.length>0">
|
|
|
+ <!-- 左边导航 -->
|
|
|
+ <scroll-view scroll-y="true" class="left-wrapper" scroll-with-animation="true">
|
|
|
+ <view class="left-content">
|
|
|
+ <view class="title-content" :class="fetch.show[v.id] == 1?'onSelected':''" v-for="(v,k) in fetch.cate" :key="v.id" @click="choose(v.id)">{{v.name}}</view>
|
|
|
+ </view>
|
|
|
+ </scroll-view>
|
|
|
+ <!-- 右边内容 -->
|
|
|
+ <scroll-view scroll-y="true" class="right-wrapper" scroll-with-animation="true">
|
|
|
+ <view class="right-content">
|
|
|
+ <!-- banner区域 -->
|
|
|
+ <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>
|
|
|
+ </swiper-item>
|
|
|
+ </swiper>
|
|
|
+ </view>
|
|
|
+ <!-- 产品区 -->
|
|
|
+ <view class="product-wrapper">
|
|
|
+ <view class="category-item" :id="'list'+v.id" v-for="(v,k) in fetch.child" :key="k" v-if="fetch.show[v.page_id] == 1">
|
|
|
+ <view class="category-title">{{v.name}}</view>
|
|
|
+ <view class="category-content" v-if="v.content">
|
|
|
+ <view class="product-item" v-for="(v1,k1) in v.content" :key="k1" @click="go(k1,v1.page_id)">
|
|
|
+ <image class="product-img" :src="v1.pic"></image>
|
|
|
+ <text class="product-title">{{v1.name}}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="category-content" v-if="!v.content">
|
|
|
+ 录入中...
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </scroll-view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</template>
|
|
|
|
|
|
-<script>
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ name: "cate",
|
|
|
+ props: {
|
|
|
+ info_id : {
|
|
|
+ type : String,
|
|
|
+ value : null
|
|
|
+ },
|
|
|
+ page_id : {
|
|
|
+ type : String,
|
|
|
+ value : null
|
|
|
+ },
|
|
|
+ parent_page_id : {
|
|
|
+ type : String,
|
|
|
+ value : null
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ fetch: {
|
|
|
+ cate : [],
|
|
|
+ show : {},
|
|
|
+ child : [],
|
|
|
+ },
|
|
|
+ swiperList: [],
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.getData();
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ getData : function() {
|
|
|
+ this.Dever.get(this, 'app/collection/?l=api.category', {id:this.info_id, parent_page_id:this.parent_page_id, page_id:this.page_id});
|
|
|
+ },
|
|
|
+ choose : function(id) {
|
|
|
+ if (this.fetch.show[id] == 1) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ for(var i in this.fetch.show) {
|
|
|
+ if (id == i) {
|
|
|
+ this.fetch.show[id] = 1;
|
|
|
+ } else {
|
|
|
+ this.fetch.show[i] = 2;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ go : function(index, page_id) {
|
|
|
+ if (this.page_id != page_id) {
|
|
|
+ this.Dever.location('dream/view?id=' + this.info_id + '&page_id='+page_id+'&index=' + index);
|
|
|
+ } else {
|
|
|
+ this.$emit('goIndex', index);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
-<style>
|
|
|
+<style lang="less">
|
|
|
+ .category-content {
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ }
|
|
|
+ .category {
|
|
|
+
|
|
|
+ .category-wrapper {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ bottom: 0;
|
|
|
+
|
|
|
+ .left-wrapper {
|
|
|
+ width: 200rpx;
|
|
|
+ flex: 0 0 200rpx;
|
|
|
+ background-color: #f6f6f6;
|
|
|
+
|
|
|
+ .left-content {
|
|
|
+
|
|
|
+ .title-content {
|
|
|
+ width: 100%;
|
|
|
+ height: 100rpx;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 25rpx;
|
|
|
+ border-bottom: 1px solid #dedede;
|
|
|
+ cursor: pointer;
|
|
|
+
|
|
|
+ &:last-child {
|
|
|
+ border-bottom: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.onSelected {
|
|
|
+ background-color: #fff;
|
|
|
+ position: relative;
|
|
|
+ color: #feb436;
|
|
|
+
|
|
|
+ &::before {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ width: 10rpx;
|
|
|
+ height: 100%;
|
|
|
+ background: linear-gradient(124deg, #feb436 0%, #fb7c22 100%);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .right-wrapper {
|
|
|
+ flex: 1;
|
|
|
+
|
|
|
+ .right-content {
|
|
|
+ width: 100%;
|
|
|
+ padding: 20rpx 0;
|
|
|
+ border-left: 1rpx solid #efefef;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ .banner-wrapper {
|
|
|
+ padding: 0 20rpx;
|
|
|
+
|
|
|
+ .swiper-content {
|
|
|
+ width: 100%;
|
|
|
+ height: 180rpx;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+
|
|
|
+ .swiper-item {
|
|
|
+ .swiper-img {
|
|
|
+ width: 100%;
|
|
|
+ height: 180rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .product-wrapper {
|
|
|
+ .category-item {
|
|
|
+
|
|
|
+ .category-title {
|
|
|
+ height: 60rpx;
|
|
|
+ font-size: 26rpx;
|
|
|
+ line-height: 60rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ background-color: #f6f6f6;
|
|
|
+ padding-left: 20rpx;
|
|
|
+ color: #000;
|
|
|
+ }
|
|
|
+
|
|
|
+ .category-content {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ flex-flow: wrap;
|
|
|
+ padding: 20rpx 20rpx 0;
|
|
|
+
|
|
|
+
|
|
|
+ .product-item {
|
|
|
+ width: 33%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+
|
|
|
+ .product-img {
|
|
|
+ width: 120rpx;
|
|
|
+ height: 140rpx;
|
|
|
+ margin-bottom: 10rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .product-title {
|
|
|
+ font-size: 23rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
</style>
|
dever