测试

.gitignore

@@ -0,0 +1,8 @@
+node_modules/
+dist/**
+.project
+unpackage/
+.DS_Store
+wxcomponents/**/*.vue
+wxcomponents/**/*.css
+.hbuilderx/

pages/index/maintenance.vue

@@ -0,0 +1,239 @@
+<template>
+	<view class="content">
+	  <view class="tabbox">
+		  <view class="tabline" @click="tabindex=1">
+			  <view class="tabName" :class="{'tabActive':tabindex==1}">保养计划</view> 
+			  <view class="tabHx" v-if="tabindex==1"></view>
+		  </view>
+		  <view class="tabline" @click="tabindex=2">
+			  <view class="tabName " :class="{'tabActive':tabindex==2}">原厂配件参数</view> 
+		      <view class="tabHx" v-if="tabindex==2"></view>
+		  </view>
+	  </view>
+	  
+	  <view class="" v-if="tabindex==1">
+	  	<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>
+	  <view class="" v-if="tabindex==2">
+	  	<view class="pjTitleBox">
+			<view class="pjTitle">保养计划</view>
+			<view class="pjTitle">保养计划</view>
+			<view class="pjTitle">保养计划</view>
+		</view>
+		<view class="pjlineBox">
+			<view class="pjline" v-for="(item,index) in pjList">
+				<view class="pjitem">{{item[0]}}</view>
+				<view class="pjitem">{{item[1]}}</view>
+				<view class="pjitem">{{item[2]}}</view>
+			</view>
+		</view>
+	  </view>
+	  
+	</view>
+</template>
+
+<script>
+	export default {
+		components: {
+			
+		},
+		data() {
+			return {
+				tabindex:1,
+				liyangId :'',
+				itemData:[],
+				noMoreShow: false,
+				mileage: '',
+				liyangId: '',
+				scrollTop: 0,
+				old: {
+					scrollTop: 0
+				},
+				leftData:[],
+				pjList:[]
+			}
+		},
+		onLoad(opt) {
+			 this.optdata=opt;
+             this.queryPlan();
+			  this.queryOilInfoByGroupID()
+		},
+		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: {
+           queryPlan(){
+			   uni.showLoading({ title: '加载中'});
+			   this.$http('matchingByOpen/queryPlan', {
+			     mileage:'0',
+			     liyangId:this.optdata.nLevelID,
+			     
+			    },'POST').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])
+					}   
+			   })
+		   },
+		   queryOilInfoByGroupID(){
+			   this.$http('matchingByOpen/queryOilInfoByGroupID', {
+			    // mileage:'30000',
+			     groupId:this.optdata.id,
+			     
+			    },'POST').then(res => {
+			   		this.pjList=res.data
+			   })
+		   },
+		   scroll: function(e) {
+		   	  this.old.scrollTop = e.detail.scrollTop
+		   },
+		}
+	}
+</script>
+
+<style scoped>
+.tabbox{
+	display: flex;
+}
+.tabline{
+	width: 50%;
+}
+.tabHx{
+	width: 40rpx;
+	height: 4rpx;
+	background: #FF4F00;
+	margin: 0 auto;
+}
+.tabName{
+	font-weight: 400;font-size: 30rpx;
+	color: #1A1A1A;
+	line-height: 42rpx;
+	padding-top: 23rpx;padding-bottom: 8rpx;
+	text-align: center;
+}
+.tabActive{
+	color: #FF4F00;
+}
+.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: #FF4F00;
+		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;
+	}
+	.pjTitle{
+		width: 33.3%;text-align: center;font-weight: 400;
+color: #1A1A1A;font-size: 26rpx;
+	}
+	.pjTitleBox{
+		display: flex;
+		justify-content: space-between;
+		background: #F7F7F7;
+		line-height: 93rpx;
+	}
+	.pjline{
+		display: flex;justify-content: space-between;padding: 15rpx 0;
+	}
+	.pjitem{
+		width: 33.3%;text-align: center;font-weight: 400;
+		color: #1A1A1A;font-size: 26rpx;
+	}
+</style>