meishidaYH/msdYongHu/pages/shanpinxungou/shangjia/productlist.vue

<template>
 
	<view class="menuBox">
		<view class="menuContent">
			<scroll-view scroll-y="true" class="menuLeft">
				<view class="menuType" @click="changeCurrent(index)" v-for="(item,index) in prdList"
					:class="{currentMenu:currentIndex==index}">
					<text class="text2row">{{item.name}}</text>
				</view>
				<view class="line" :style="{top:currentIndex*100 +'rpx'}"></view>
			</scroll-view>
 
			<scroll-view :scroll-top="scrollTop" @scroll="scrollRight" class="menuRight" scroll-y="true">
				<div class="menuDetailBox" v-for="(item,index) in prdList" :key="index">
					<div class="title">{{item.name}}</div>
					<div class="menu" v-for="(menu,index) in item.children" :key="index">
						<div class="d2">
							<netImage style="margin-top: 10rpx;" width="180" height="180" :mysrc="menu.image" mymode="scaleToFill"></netImage>
						</div>
						<div class="menuName">
							<view class="contentColumnS" style="height: 200rpx;">
								<view class="contentColumn" style="width: 100%;">
									<text class="pdName text2row">{{menu.name}}</text>
									<text class="pdDetail text1row">{{menu.name}}</text>
								</view>
								<view class="contentColumn" style="width: 100%;">
									<view class="contentInRowL">
										<text class="redktext">特价</text>
										<text class="greedKtext" style="margin-left: 10rpx;">24H发货</text>
									</view>
									<view class="contentInRowS">
										<view class="">
											<text class="pricetext">123.32</text>
											<text class="pricedw">{{$t("locale.huobidw")}}</text>
											<text class="yuanjia">155.32{{$t("locale.huobidw")}}</text>
										</view>
										<image style="width: 50rpx;height: 50rpx;margin-bottom: 6rpx;" src="/static/meishi/BuyS.png" mode=""></image>
									</view>
								</view>
							</view>
							
						</div>
					</div>
				</div>
			</scroll-view>
		</view>
	</view>
</template>
 
<script>
	import api from "@/pages/api/api.js";
	export default {
		data() {
			return {
				newData:[],  // 拿到右侧所有的商品列表元素
				scrollTop: 0,
				currentIndex: 0,
				lang:'3',
				id:'',
				shangpinfenlei:[],
				prdList:[],
				menuList: [{
						"id": 1,
						"name": "手机数码",
						"children": [{
								"id": 101,
								"name": "手机"
							},
							{
								"id": 105,
								"name": "数码相机"
							}
						]
					},
					{
						"id": 2,
						"name": "家用电器",
						"children": [{
								"id": 201,
								"name": "电视机"
							},
							{
								"id": 204,
								"name": "冰箱"
							},
							{
								"id": 205,
								"name": "吸尘器"
							}
						]
					},
					{
						"id": 3,
						"name": "服饰鞋包",
						"children": [{
								"id": 301,
								"name": "男装"
							},
							{
								"id": 302,
								"name": "女装"
							},
							{
								"id": 303,
								"name": "运动鞋"
							},
							{
								"id": 304,
								"name": "箱包"
							},
							{
								"id": 305,
								"name": "配饰"
							}
						]
					},
					{
						"id": 4,
						"name": "美妆个护",
						"children": [{
								"id": 401,
								"name": "面部护肤"
							},
							{
								"id": 402,
								"name": "彩妆"
							},
							{
								"id": 403,
								"name": "洗发护发"
							},
							{
								"id": 404,
								"name": "身体护理"
							},
							{
								"id": 405,
								"name": "香水"
							}
						]
					},
					{
						"id": 5,
						"name": "母婴玩具",
						"children": [{
								"id": 501,
								"name": "奶粉"
							},
							{
								"id": 502,
								"name": "尿不湿"
							},
							{
								"id": 503,
								"name": "婴儿用品"
							},
							{
								"id": 504,
								"name": "儿童玩具"
							},
							{
								"id": 505,
								"name": "孕妇用品"
							}
						]
					},
					{
						"id": 6,
						"name": "食品饮料",
						"children": [{
								"id": 601,
								"name": "休闲零食"
							},
							{
								"id": 602,
								"name": "粮油调味"
							},
							{
								"id": 603,
								"name": "饮料酒水"
							},
							{
								"id": 604,
								"name": "冲调速食"
							},
							{
								"id": 605,
								"name": "生鲜水果"
							}
						]
					},
					{
						"id": 7,
						"name": "家居家装",
						"children": [{
								"id": 701,
								"name": "家具"
							},
							{
								"id": 702,
								"name": "灯具"
							},
							{
								"id": 703,
								"name": "床上用品"
							},
							{
								"id": 704,
								"name": "厨房用品"
							},
							{
								"id": 705,
								"name": "装饰摆件"
							}
						]
					},
					{
						"id": 8,
						"name": "运动户外",
						"children": [{
								"id": 801,
								"name": "跑步装备"
							},
							{
								"id": 802,
								"name": "健身器材"
							},
							{
								"id": 803,
								"name": "户外鞋服"
							},
							{
								"id": 804,
								"name": "骑行装备"
							},
							{
								"id": 805,
								"name": "垂钓用品"
							}
						]
					},
					{
						"id": 9,
						"name": "汽车用品",
						"children": [{
								"id": 901,
								"name": "机油"
							},
							{
								"id": 902,
								"name": "轮胎"
							},
							{
								"id": 903,
								"name": "车载电器"
							},
							{
								"id": 904,
								"name": "清洁用品"
							},
							{
								"id": 905,
								"name": "维修配件"
							}
						]
					},
					{
						"id": 10,
						"name": "图书文娱",
						"children": [{
								"id": 1001,
								"name": "文学小说"
							},
							{
								"id": 1002,
								"name": "少儿读物"
							},
							{
								"id": 1003,
								"name": "教育考试"
							},
							{
								"id": 1004,
								"name": "艺术设计"
							},
							{
								"id": 1005,
								"name": "音像制品"
							}
						]
					}
				]
 
			}
		},
		onLoad(option) {
			this.id=option.id;
			var language = uni.getStorageSync('language');
			if(language=='yuenan'){
				this.lang='0';
			}
			if(language=='zh-Hans'){
				this.lang='2';
			}
			if(language=='zh-Hant'){
				this.lang='3';
			}
			this.getmendianshangpinFL(this.id);
		},
		onReady() {
			uni.setNavigationBarTitle({
				title: '你好'
			})
			
		},
		methods: {
			changeCurrent(index) {
				this.currentIndex = index
				this.scrollTop = this.newData[index-1]?.offsetHeight || 0
			},
			scrollRight(e) {
				// console.log(e.detail.scrollTop,'scrollRight');
				const query = uni.createSelectorQuery().in(this);
				for (let i = 0; i < this.newData.length; i++) {
					let el = this.newData[i]
					if (e.detail.scrollTop < el.offsetHeight) {
						this.currentIndex = i
						return true
					}
				}
			},
			getmendianshangpinFL(id){
				uni.showLoading({
					mask:true
				})
				api('getmendianshangpinFL',{
					id:id,
					language:this.lang
				},res=>{
					uni.hideLoading();
					this.shangpinfenlei=res.data.data;
					console.log(this.shangpinfenlei)
					this.initFenlei();
				},failc=>{
					uni.hideLoading();
					//console.log('getadvertis----',failc)
				})
			},
			initFenlei(){
				this.prdList=[];
				if(this.shangpinfenlei&&this.shangpinfenlei.length>0){
					for (var i = 0; i < this.shangpinfenlei.length; i++) {
						var el = this.shangpinfenlei[i];
						var temp = {
							"id": el.id,
							"index": i+1,
							"name": el.name,
							"children": [
							]
						}
						this.prdList.push(temp);
					}
				}
				this.initproduct();
			},
			initproduct(){
				if(this.prdList.length==0){
					return;
				}
				this.getmendianshangpinList(0);
				
			},
			getmendianshangpinList(index){
				
				var obj = this.prdList[index];
				
				api('getmendianshangpinList',{
					id:obj.id,
					language:this.lang
				},r=>{
					console.log(r);
					this.prdList[index].children=r.data.data;
					if(index+1<this.prdList.length){
						this.getmendianshangpinList(index+1);
					}
					else{
						console.log(this.prdList);
						this.initNewData();
					}
				},failc=>{
					
					//console.log('getadvertis----',failc)
				})
			},
			initNewData(){
				const query = uni.createSelectorQuery().in(this);
				query.selectAll('.menuDetailBox').boundingClientRect(data => {
					console.log('所有分类项：', data);
					this.newData = data.map((item, index) => {
						function fgfg(total) {
							let sum = 0
							for (var i = 0; i <= total; i++) {
								sum += data[i].height
							}
							return sum
						}
						item.offsetHeight = fgfg(index)
						return item
					})
					
				}).exec();
			},
		},
		
	}
</script>
 
<style lang="scss" scoped>
	.menuBox {
		height: calc(100vh);
		display: flex;
		flex-direction: column;
		// border: 1px solid #ccc;
		margin: 0 10rpx;
		.menuContent {
			// height: calc(100vh);
			overflow: auto;
			position: relative;
			display: flex;
			position: sticky;
			top: 0rpx;
			.menuLeft {
				float: left;
				position: relative;
				width: 200rpx;
				background-color: #f5f5f5;
 
				.menuType {
					transition: all 0.4s;
					position: relative;
					z-index: 999999999;
					height: 100rpx;
					display: flex;
					align-items: center;
					padding-left: 20rpx;
 
					&.currentMenu {
						font-weight: 700;
					}
				}
 
			}
 
			.menuRight {
				flex: 1;
				background-color:lavender;
 
				.menuDetailBox {
					.title {
						height: 60rpx;
						display: flex;
						align-items: center;
					}
 
					.menu {
						background-color: #fff;
						height: 200rpx;
						display: flex;
						justify-content: center;
 
						&:not(:nth-last-of-type(1)) {
							margin-bottom: 20rpx;
						}
 
						.d2 {
							width: 180rpx;
							height: 180rpx;
						}
 
						.menuName {
							flex: 1;
							margin-left: 20rpx;
						}
 
					}
				}
			}
		}
	}
 
	.line {
		position: absolute;
		left: 0;
		top: 0;
		height: 100rpx;
		width: 100%;
		background-color: #fff;
		z-index: 999;
		transition: all 0.4s;
 
		&::before {
			content: '';
			position: absolute;
			left: 0;
			top: 0;
			height: 100rpx;
			width: 4rpx;
			background-color: red;
			z-index: 999;
			transition: all 0.4s
		}
	}
	
	.pdName{
		font-size: 30rpx;
		font-weight: bold;
		color: black;
	}
	.pdDetail{
		font-size: 26rpx;
		color: darkgray;
	}
	.redktext{
		color: brown;
		border-radius: 4rpx;
		border: 1px solid brown;
		font-size: 26rpx;
	}
	.greedKtext{
		color: darkgreen;
		border-radius: 4rpx;
		border: 1px solid darkgreen;
		font-size: 26rpx;
	}
	.pricetext{
		color: firebrick;
		font-size: 28rpx;
		font-weight: bold;
	}
	.pricedw{
		font-size: 24rpx;
		color: darkgray;
	}
	.yuanjia{
		font-size: 24rpx;
		color: darkgray;
		text-decoration: line-through;
	}
	
</style>