zhongshuo/pages/index/datail.vue

<template>
	<view class="content">
		<swiper v-if="detail.imgList&&detail.imgList.length" class="swiperview" :indicator-dots='true' indicator-active-color="#3F90F7">
			<swiper-item v-for="(item,index) in detail.imgList" :key="index">
				 <img class="detail-swipe-img" :src="item.imgPath|| require('../../static/img/pic_def_bj.png')" 
				 alt="图片加载失败" @click="showImgList(detail.imgList,index)" mode="aspectFit">
			</swiper-item>
			
		</swiper>
		<view class="contTop">
			<view class="name">{{ detail.brand }} {{ detail.categoryName }} {{ detail.name }}</view>
			<view class="partsCode">{{ detail.partsCode }} | {{ detail.specificationModel }}</view>
		</view>
		<view class="sycx" @click="goApply">
			<view>适用车型</view>
			<img src="../../static/img/icon_jiantou@2x.png" alt="" class="sycyJt">
		</view>
		<view class="cont">
			<view class="contTitle">基本信息</view>
			<view class="contLine">
				<view class="contLineLeft">配件品质</view>
				<view class="contLineRight">{{ detail.partquality?detail.partquality==='0'?'原厂件':detail.partquality==='1'?'品牌件':'拆车件':'--' }}</view>
			</view>
			<view class="contLine">
				<view class="contLineLeft">出厂编码</view>
				<view class="contLineRight">{{ detail.factoryNumber }}</view>
			</view>
			<view class="contLine">
				<view class="contLineLeft">是否OE件</view>
				<view class="contLineRight">{{ detail.isoe==='1'?'是':'否' }}</view>
			</view>
			<view class="contLine">
				<view class="contLineLeft">包装规格</view>
				<view class="contLineRight">{{ detail.packagingSpecification }}</view>
			</view>
			<view class="contLine">
				<view class="contLineLeft">产地</view>
				<view class="contLineRight">{{ detail.placeProduction }}</view>
			</view>
			<view class="contLine">
				<view class="contLineLeft">单位</view>
				<view class="contLineRight">{{ detail.measurementUnit }}</view>
			</view>
		</view>
		<view class="cont" v-if="detail.extendDatas&&detail.extendDatas.length">
			<view class="contTitle">规格参数</view>
			<view class="contLine" v-for="item in detail.extendDatas" :key="item.key">
				<view class="contLineLeft">{{ item.key }}</view>
				<view class="contLineRight">{{ item.value }}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		
		data() {
			return {
				id:'',
				detail:'',
			}
		},
		onLoad(opt) {
           this.id=opt.id;
		   this.getData()
		},
		methods: {
          getData(){
			  uni.showLoading({ title: '加载中'});
			this.$http('partsByOpen/queryPartDetail', {
			  	id:this.id
			}, 'POST').then(res => {
			  	this.detail=res.data
			  	uni.hideLoading();
			}) 
		  },
		  goApply(){
			uni.navigateTo({
				url:'applyCx?id='+this.id+'&brand='+this.detail.brand+'&categoryName='+this.detail.categoryName+'&name='+this.detail.name+'&partsCode='+this.detail.partsCode+'&specificationModel='+this.detail.specificationModel
			})  
		  },
		  showImgList(){
			  
		  }
		}
	}
</script>

<style scoped>
	.content{
		min-height: 100vh;
		background: #F4F5F7;
	}
	.detail-swipe-img{
		width: 750rpx;
		height: 736rpx;
	}
	.swiperview{
		height: 736rpx;
	}
	.contTop{
		color: #999999;
		background: #FFFFFF;
		padding: 30rpx 24rpx;
	}
	.name{
		color: #333333;
		line-height: 42rpx;
		font-size: 30rpx;
		font-weight: 500;
	}
	.partsCode{
		font-size: 24rpx;padding-top: 16rpx;
	}
	.sycyJt{
		width: 12rpx;
		height: 20rpx;
		margin-top: 40rpx;
	}
	.sycx{
		background: #FFFFFF;
		display: flex;
		justify-content: space-between;
		margin-top: 20rpx;
		color: #333333;
        font-weight: 500;
		font-size: 30rpx;
		line-height: 98rpx;
		padding-left: 24rpx;
		padding-right: 24rpx;
	}
	.cont{
		background: #FFFFFF;
		padding: 28rpx 24rpx;
		margin-top: 20rpx;
	}
	.contTitle{
		color: #333333;
		font-size: 30rpx;
		font-weight: 500;
	}
	.contLine{
		display: flex;padding-top: 30rpx;
	}
	.contLineLeft{
		color: #333333;
		font-size: 26rpx;
		width: 140rpx;
	}
	.contLineRight{
		color: #666666;
		font-size: 26rpx;
	}
</style>