1.0yangche/pages/packageOne/service/classify/all_serve/all_serve.vue

<template>
	<view class="contain">
		<view class="contain_lf">
		    <scroll-view scroll-y  style="height:100%;">
		        <view v-for="item,index in allData.category":key="index" :class="['all_class_item',active === index?'active':'']" 
															:data-index="index" 
															:data-value="item" 
															:data-id="item.id" 
															@tap="changeActive">
					{{item}}
					<view class="line"></view>
		        </view>
		    </scroll-view>
		</view>
		<view class="contain_rh">
		    <scroll-view scroll-y="true" style="height:100%;" scroll-with-animation="true">
		        <view v-for="item,index in allData.contain_rh_item_list" :key="index" class="contain_rh_item" :id="item.id">
					<view class="contain_rh_item_top">
						<view class="contain_rh_item_top_lf">{{item.title}}</view>
					</view>
					<view class="contain_rh_item_bottom">
						<view v-for="item,index in item.arr" :key="index" class="bottom_item">{{item.title}}</view>
					</view>
		        </view>
		    </scroll-view>
		</view>
	</view>
</template>

<script>
	let app = getApp();
	import api from "../../../../../api.js";
	export default {
		data() {
			return {
				fName:'全部',
				storeId:1757,//商家id
				allData:null,//所有数据
				active: 0,//左侧导航栏指示
			}
		},
		mounted() {
			this.getData();
		},
		methods: {
			//加载数据
			getData(){
				let data = {
					fName:this.fName,
					storeId:this.storeId,
				}
				api.getShopMessage(data).then((res)=>{
					console.log(res);
					this.allData = res.data.data;
				})
			},
			//导航栏点击切换查询数据
			changeActive(e){
			    let value = e.currentTarget.dataset.value;
			    let index = e.currentTarget.dataset.index;
				this.active = index;
				this.fName = value;
			    this.getData();
			},
		}
	}
</script>

<style>
	page{
	  width:100%;
	  height:100%;
	}
	.contain{
	  width:100%;
	  height:100%;
	  padding-top:30rpx;
	  box-sizing: border-box;
	  overflow: hidden;
	  border-top:1px solid #f2f2f2;
	}
	.contain_lf{
	  width:180rpx;
	  height:100%;
	  float:left;
	  background-color: #F3F3F3;
	}
	.all_class_item{
	  height:102rpx;
	  line-height: 102rpx;
	  text-align: center;
	  color:#999999;
	  font-size: 30rpx;
	  position: relative;
	}
	.line{
	  width:6rpx;
	  height:50rpx;
	  background-color: #E77817;
	  position: absolute;
	  top:28rpx;
	  left:0;
	  display: none;
	}
	.active{
	  color:#000000;
	  font-weight: bold;
	  background-color: #ffffff;
	}
	.active .line{
	  display: block;
	}
	.contain_rh{
	  width:calc(100% - 180rpx);
	  height:100%;
	  padding: 0 32rpx 0 30rpx;
	  box-sizing: border-box;
	  overflow: hidden;
	  float:left;
	}
	.contain_rh_item_top{
	  width:100%;
	  height:72rpx;
	  line-height: 72rpx;
	}
	.contain_rh_item_top_lf{
	  color:#000000;
	  font-size: 26rpx;
	  font-weight: bold;
	  float:left;
	}
	.contain_rh_item_top_rg{
	  color:#999999;
	  font-size: 24rpx;
	  float:right;
	}
	.contain_rh_item{
	  margin-bottom:22rpx;
	}
	.shuang_you{
	  display: inline-block;
	  font-size: 24rpx;
	  color:#999999;
	}
	.contain_rh_item_bottom{
	  width:100%;
	  overflow: hidden;
	}
	.bottom_item{
	  width:152rpx;
	  height:68rpx;
	  background:rgba(247,247,247,1);
	  border-radius:6rpx;
	  text-align: center;
	  line-height: 68rpx;
	  font-size: 24rpx;
	  color:#777777;
	  float:left;
	  margin:0 26rpx 26rpx 0;
	  overflow: hidden;
	  text-overflow: ellipsis;
	  white-space: nowrap;
	}
	.bottom_item:nth-child(3n){
	  margin-right: 0;
	}
</style>