shell/pages/index/installation.vue

<template>
	<view class="content">
		<homenav :iStatusBarHeight="iStatusBarHeight" :title="'电池安装'"></homenav>
	  <view class="box">
		<!-- <video style="width:750rpx;" class="edui-faked-video twtcs" :src="videoUrl" width="420" height="280" enable-danmu danmu-btn controls></video> -->
		  <!-- <image :src="imgUrl" mode=""></image> -->
		  <view v-for="item in mtList" :key="item.id" class="parts-info-detail">
		    <view v-for="item2 in parseInfo">
		      <view v-for="item3 in item2">
		        <view v-for="item4 in Object.keys(item3)">
		          <h4>{{ item4 }}</h4>
		          <!-- <video-player class="vjs-custom-skin"
		           :options="getPlayerOptions(videoUrl)"/> -->
		           <view v-for="img in item3[item4]">
		              <image  mode="widthFix" style="width: 100%;" :src="imgUrl+img" alt="" v-if="img.substring(img.length-3)!='mp4'"></image>
		            <!-- <video-player class="vjs-custom-skin"
		              :options="getPlayerOptions(info.imgUrl+img)" v-else /> -->
		            <video style="width:750rpx;" class="edui-faked-video twtcs" v-else :src="imgUrl+img" width="420" height="280" enable-danmu danmu-btn controls></video>
		           </view>
		  
		        </view>
		      </view>
		    </view>
		  </view>
	  </view>
	</view>
</template>

<script>
	import homenav from "../../components/homenav/nav.vue"
	import nodata from '../../components/nodata/nodata.vue'
	export default {
		components: {
			homenav,nodata
		},
		data() {
			return {
				videoUrl:"https://66km.oss-cn-beijing.aliyuncs.com/yanghuziliao/jiyou/%E6%AC%A7%E6%B4%B2%E7%BB%B4%E4%BF%AE%E6%A0%87%E5%87%86%E6%8D%A2%E6%B2%B9SOP%E6%B5%81%E7%A8%8B.mp4",
				historyList:[],
				iStatusBarHeight:'',
				loading:false,
				groupIds:'',
				componentCode:'',
				mtList:'',
				imgUrl:'',
				//parseInfo:'',
			}
		},
		onLoad(opt) {
			this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight;
           // 
		   this.componentCode='005001'//opt.componentCode
		   this.groupIds=opt.groupIds
		   this.queryList()
		},
		methods: {
			goDetail(e){
				uni.navigateTo({
					url:'/pages/index/byItem?nLevelID='+e.nLevelID+'&logo='+e.logo+'&value='+e.title+'&id='+e.groupID+'&isVin='+e.ifVin+'&vin='+e.vin
				}) 
			},
           queryList(){
			 this.loading=false;
			 this.$http('partsByOpen/queryCarmodelhelp', {
			   componentCode:this.componentCode,
			   groupId:this.groupIds
			  
			  },'POST').then(res => {
					this.loading=true;	
					//	console.log(res.data.yhzl.imgUrl)
					this.imgUrl=res.data.yhzl.imgUrl
					this.mtList=res.data.yhzl.mtList
					/* var mtList=res.data.yhzl.mtList
					 mtList?.map(item => {
					  return JSON.parse(item.content.replace(/'/g, '"'))
					})
					this.parseInfo=mtList */
			 })
           },
		},
		computed:{
			parseInfo() {
			  return this.mtList?.map(item => {
			    return JSON.parse(item.content.replace(/'/g, '"'))
			  })
			}
		}
		
	}
</script>

<style scoped>
.box{
	
}
.historylinecarImg{
	width: 54rpx;
	height: 54rpx;
}
.historylinecar{
	font-weight: 400;font-size: 26rpx;
	color: #1A1A1A;
	line-height: 46rpx;width: 636rpx;
}
.historyLine{
	
	padding: 30rpx 0;border-top: 1rpx solid #EEEEEE;
}
.historyLineCar{
	display: flex;justify-content: space-between;
}
.vinms{
	width: 38rpx;
	height: 26rpx;
	background: linear-gradient(224deg, #FFDA28 0%, #FFBF35 100%);
	border-radius: 4rpx;
	text-align: center;
	line-height: 26rpx;
	font-weight: 600;
	color: #FFFFFF;
	font-size: 18rpx;
	margin-top: 2rpx;
}
.historyLineVin{
	display: flex;
}
.vinNum{
	font-weight: 400;font-size: 22rpx;padding-left: 10rpx;
	color: #999999;line-height: 30rpx;
}
.historyLogoBox{
		display: flex;align-items: center;
	}
</style>