ec.uniapp-master/pages/index/classification/classification.vue

<template>
	<view style="height: 100%;">
		<lf-nav title="分类"></lf-nav>
		<view id="classification" style="height: 100%;">
			<view :class="classData.type == 'upper_lower' ? '' : 'hiddens'" style="height: 100%;">
				<view v-if="init && classData.type == 'upper_lower'">
					<view class="class__banner" v-if="classData.CategoryListAd && classData.CategoryListAd.length">
						<swiper :style="{height:imgHeight+'px'}" indicator-dots="true" autoplay="true" circular="true">
							<swiper-item v-for="(item,index) in classData.CategoryListAd" :key="index">
								<image mode="widthFix" @load="imgLoad" :src="item.image" :data-url="item.link" @tap="jumpItem"></image>
							</swiper-item>
						</swiper>
					</view>
					<view class="class__item_box">
						<view class="class__item" v-for="(item,index) in classData.CategoryList" :key="index">
							<view class="img_item" :data-url="item.link" @tap="jumpItem">
								<image :src="item.image"></image>
								<view class="img_text">
									<view class="text_top">
										<view class="text_line"></view>
										<view class="text_content">
											{{item.name}}
										</view>
										<view class="text_line"></view>
									</view>

									<view class="text_btn">
										查看全部
									</view>
								</view>
							</view>
							<view class="class__tag">
								<view class="tag__item" v-for="(items,idx) in item.items" :key="idx">
									<view class="tag_flex" :data-url="items.link" @tap="jumpItem">
										<view class="tag_img">
											<image :src="items.image"></image>
										</view>
										<view class="tag_text">
											{{items.name}}
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>

				<view v-if="init && classData.type == 'left_right'" style="height: 100%;">
					<view class="classifical" style="height: 100%;">
						<view class="left-menu">
							<view class="item" :class="activeIndex == key ? 'active' : ''" v-for="(i,key) in classData.CategoryList" :key="key"
							 @tap="change" :data-index="key">{{i.name}}</view>
						</view>
						<view class="right-content" style="height: 100%;">
							<view class="title" @tap="jumpItem" :data-url="classData.CategoryList[activeIndex].link">
								<span>{{classData.CategoryList[activeIndex].name}}</span>
								<span class="iconfont icon--xiangyoujiantou"></span>
							</view>
							<view v-for="(item,index) in classData.CategoryList" :key="index" v-show="activeIndex == index">
								<view class="list">
									<view class="list-item" v-for="(list,idx) in item.items" :key="idx" @tap="jumpItem" :data-url="list.link">
										<view class="photo">
											<image :src="list.image" mode="widthFix"></image>
										</view>
										<view class="txt">{{list.name}}</view>
									</view>
								</view>
							</view>
						</view>
					</view>

				</view>
			</view>




		</view>

		<lf-tabbar></lf-tabbar>
	</view>

</template>
<script>
	import {
		pageLogin,
		getUrl,
		config
	} from '@/common/js/utils.js';
	import lfNav from '@/components/lf-nav/lf-nav.vue';
	import lfTabbar from '@/components/lf-tabbar/lf-tabbar.vue';

	export default {
		components: {
			lfNav,
			lfTabbar
		},
		data() {
			return {
				classData: '',
				screenWidth: '',
				activeIndex: 0,
				init: false,
				imgHeight:''
			};
		},

		onLoad() {
			this.classificationList();
			wx.getSystemInfo({
				success: res => {
					this.screenWidth = res.screenWidth;

				}
			});
		},
		methods: {
			//切换menu
			change(e) {
				var activeIndex = e.currentTarget.dataset.index;
				this.activeIndex = activeIndex;
			},

			jumpItem(e) {
				var url = e.currentTarget.dataset.url;
				wx.navigateTo({
					url: url
				});
			},

			imgLoad(e) {
				var height = e.detail.height;
				var width = e.detail.width;
				var ratio = width / height;
				var screenWidth = this.screenWidth;
				this.imgHeight = screenWidth / ratio;
			},

			classificationList() {
				wx.showLoading({
					title: '加载中',
					mask: true
				});
				this.$http.get({
					api: 'api/home/getHomeCategoryList'
				}).then(res => {
					if (res.statusCode == 200) {
						res = res.data;
						if (res.status) {
							this.init = true;
							this.classData = res.data;
						} else {
							wx.showModal({
								content: '请求失败',
								showCancel: false
							});
						}
					} else {
						wx.showModal({
							content: '请求失败',
							showCancel: false
						});
					}

					wx.hideLoading();
				}, err => {
					wx.showModal({
						content: '请求失败',
						showCancel: false
					});
					wx.hideLoading();
				});
			},


		},
	};
</script>
<style rel="stylesheet/less" lang="less">
	@import "classification";
</style>