wxThird/pages/index/handbook.vue

<template>
	<view class="content">

		<scroll-view scroll-y="true" scroll-x="true" :scroll-top="scrollTop" :scroll-left="scrollTop" @scroll="scroll">

			<!-- 内容 -->
			<view class="teamContent" :style="{width:HN_width}">
				<view v-for="(itemRow,indexRow) in itemData" :key="indexRow">
					<view class="row" :class="{grayColor:indexRow==0}">
						<view v-for="(itemCol,indexCol) in itemRow" :key="indexCol" class="colBg"  :class="{grayColor:indexCol==0}">
							<view class="col" v-if="indexCol==0">{{itemCol}}</view>
							<view class="col" v-else-if="indexRow==0">{{itemCol}}</view>
							<view class="redCol" v-else-if="indexRow!=0 && indexCol!=0 && itemCol==1"></view>
							<view class="grayCol" v-else-if="indexRow!=0 && indexCol!=0 && itemCol==0"></view>
							
						</view>
					</view>
				</view>
			</view>
			
			

		</scroll-view>
		
		<view class="leftView">
			<view v-for="(item,index) in leftData" :key="index" class="leftTitleBg">
				<view class="leftTitle" :class="{firstRow:index==0}">{{item}}</view>
			</view>
		</view>
		
		


		<!-- 无数据空白页 -->
		<nodata v-if="itemData.length==0"></nodata>

	</view>
</template>

<script>
	import nodata from '../../components/nodata/nodata.vue'
	export default {
		components: {
			nodata,
		},
		data() {
			return {
				itemData:[],
				noMoreShow: false,
				mileage: '',
				liyangId: '',
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				leftData:[],
				
			}
		},
		onLoad(opt) {
			this.mileage = opt.mileage
			this.liyangId = opt.liyangId
			
			this.getData()

		},
		computed: {

			HN_width() {
				var MaxLength = 2;
				var Row_Materials = this.itemData[0];
				if (Row_Materials != null && Row_Materials.length > 0) {
					MaxLength = Row_Materials.length * (180 + 40)
				}

				return MaxLength + 'rpx';

			},
		},
		methods: {



			scroll: function(e) {

				this.old.scrollTop = e.detail.scrollTop
			},
			getData() {
				uni.showLoading({
					title: '加载中'
				})
				let url = 'openweiXinCardInfoController/queryPlan',
					params = {
						mileage: this.mileage,
						liyangId: this.liyangId,
					}
				this.$http(url, params, 'GET').then(res => {
					uni.hideLoading()
					this.itemData = res.data

					// 首列数据
					for (var i = 0; i < res.data.length; i++) {
						var leftArr = res.data[i]
						this.leftData.push(leftArr[0])
					}       
					
					

				})
			}
		},

	}
</script>

<style scoped>
	.content {
		background: #FFFFFF;
		min-height: 100vh;

	}

	.scroll-view {
		white-space: nowrap;
		height: 1000;

	}

	.teamContent {
		width: 100%;
		align-items: center;
	}

	.row {
		display: flex;
		justify-content: space-around;
		width: 100%;
		
	}
	.colBg{
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 20rpx;
		width: 180rpx;
		border: 1rpx #EEEEEE solid;
		
		
	}
	.col {
		color: #333333;
		font-size: 28rpx;
		
	}
	.redCol,
	.grayCol{
		width: 24rpx;
		height: 24rpx;
		background-color: #EC0F0A;
		border-radius: 12rpx;
		
	}
	.grayCol{
		background-color: #DDDDDD;
	}
	.grayColor{
		background-color: #F7F7F7;
	}
	.leftView{
		display: flex;
		justify-content: space-around;
		flex-flow: column;
		
		position: absolute;
		left: 0rpx;
		top: 0rpx;
		background-color: #FFFFFF;
		z-index: 99;
		
	}
	
	.leftTitleBg{
		
		padding: 20rpx;
		width: 180rpx;
		background-color: #F7F7F7;
		border: 1rpx #EEEEEE solid;
	}
	.leftTitle{
		color: #333333;
		font-size: 28rpx;
	}
	.firstRow{
		height: 80rpx;
	}
</style>