shell/pages/index/goodsDetail.vue

<template>
	<view class="content">
	  <homenav :iStatusBarHeight="iStatusBarHeight" :title="'商品详情'"></homenav>
	  <view class="uni-margin-wrap">
			<swiper class="swiper" circular :indicator-dots="true" :autoplay="false" :interval="3000"
				:duration="duration" indicator-active-color="rgba(0, 0, 0, .3)" indicator-color="#EAEAEA">
				<swiper-item v-for="(item,index) in info.imgList">
					<view class="swiper-item">
						<image @click="showImgList(item.imgPath)" :src="item.imgPath" mode="aspectFit" class="swiper-itemImg"></image>
					</view>
				</swiper-item>
				
			</swiper>
	  	</view>
		<view class="title-2" v-if="loading">{{ info.categoryName }} {{ info.name }}</view>
		<view class="name" v-if="loading">{{info.partsCode}} | {{info.factoryNumber}}</view>
		<view style="height: 20rpx;background: #F4F5F7;"></view>
		<view class="tdetail">
		  <view class="spcx" @click="goSuit">
		    <view class="spcxLeft">
		      <view class="spcxTitle">适用车型</view>
		      <view class="spcxCk">查看</view>
		    </view>
		
		    <img src="../../static/img/a28b1812de84495f7744583740df91bc.png" alt="" class="spcxjt">
		  </view>
		</view>
		<view style="height: 20rpx;background: #F4F5F7;"></view>
		<view class="detail-container tdetail" v-if="info.extendDatas&&info.extendDatas.length"><!-- mt10 -->
		  <!-- <h3 class="title-3">基本信息</h3>
		    <p class="info-box-1 "><span class="box-title">配件品质</span> {{ info.partquality?info.partquality==='0'?'原厂件':info.partquality==='1'?'品牌件':'拆车件':'--' }}</p>
		    <p class="info-box-1 "><span class="box-title">出厂编码</span> {{ info.factoryNumber }}</p>
		  <p class="info-box-1 "><span class="box-title">是否OE件</span> {{ info.isoe==='1'?'是':'否' }}</p>
		  <p class="info-box-1 "><span class="box-title">包装规格</span> {{ info.packagingSpecification }}</p>
		  <p class="info-box-1 "><span class="box-title">产地</span> {{ info.placeProduction }}</p>
		  <p class="info-box-1 "><span class="box-title">单位</span> {{ info.measurementUnit }}</p>
		  <p class="info-box-1 tp1"><span class="box-title">车型备注</span> <span class="tpspan1">{{ info.modelRemark }}</span> </p> -->
		  <view v-if="info.extendDatas&&info.extendDatas.length" class="extendDatasBox">
		    <h3 class="title-3">规格参数</h3>
		    <p v-for="item in info.extendDatas" :key="item.key" v-if="item.value" class="info-box-1 tp1">
		      <span class="box-title  ">{{ item.key }}</span> <span class="tpspan1"> {{ item.value }}</span>
		      </p>
		  </view>
		</view>
		
		<view style="height: 20rpx;background: #F4F5F7;"></view>
		<view class="detail">
			<view class="datailTitle">商品详情</view>
			
		   <!-- <video style="width:750rpx;" class="edui-faked-video twtcs" src="https://66km.oss-cn-beijing.aliyuncs.com/yanghuziliao/shachepan/%E6%AC%A7%E6%B4%B2%E7%BB%B4%E4%BF%AE%E5%88%B9%E8%BD%A6%E7%9B%98%E7%89%87%E6%A0%87%E5%87%86%E6%9B%B4%E6%8D%A2SOP%E6%B5%81%E7%A8%8B.mp4" width="420" height="280" enable-danmu danmu-btn controls></video> -->
			<!-- <player-component vid="f3310d4pktb"></player-component> -->
			<!-- <rich-text :nodes="html"></rich-text> -->
		    <u-parse :content="html"  ></u-parse> 
			<!-- <view v-html="html"></view> -->
		</view>
	  
	</view>
</template>

<script>
	import homenav from "../../components/homenav/nav.vue"
	import uParse from '@/components/u-parse/u-parse.vue'
	export default {
		components: {
			homenav,uParse
		},
		data() {
			return {
				id:'',
				info:'',
				iStatusBarHeight:'',
				html:'',
				loading:false,
				
			}
		},
		onLoad(opt) {
			this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight;
            this.id=opt.id;
			this.queryPartDetail()
		},
		methods: {
		   goSuit(){
			   uni.navigateTo({
			   	url:'suit?id='+this.id
			   })
		   },
           queryPartDetail(){
			   uni.showLoading({ title: '加载中'});
			   this.loading=false;
			   this.$http('partsByOpen/queryPartDetail', {
			     id:this.id,
			    },'POST').then(res => {
					this.loading=true;
					uni.hideLoading();
					 this.info=res.data;
					this.html = this.info.ozContent
					this.html = this.html.replace(/\<img/gi, '<img style="max-width:100%;height:auto" ');
					this.html = this.html.replace(/\<iframe/gi, '<video style="width:750rpx;" ');
					this.html = this.html.replace(/\<\/iframe/gi, '</video');
					console.log(this.html) 
			   })
			  
		   },
		   showImgList(img){
		   	var arr=[]
		   	arr.push(img)
		   	uni.previewImage({
		   		urls: arr,
		   		longPressActions: {
		   			itemList: ['发送给朋友', '保存图片'],
		   			success: function(data) {
		   				console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
		   			},
		   			fail: function(err) {
		   				console.log(err.errMsg);
		   			}
		   		}
		   	});
		   }
		},
		
	}
</script>

<style scoped>
.tdetail{
	padding: 24rpx;
}
.swiper-itemImg{
	width: 750rpx;
	height: 750rpx;
}
.uni-margin-wrap{
	height: 750rpx;
}
.swiper{
	height: 750rpx;
}
.datailTitle{
	font-weight: 500;
	color: #1A1A1A;
	line-height: 40rpx;
	padding: 32rpx 24rpx;
	font-size: 28rpx;
}
.name{
	font-weight: 400;
	color: #999999;
	line-height: 40rpx;
	font-size: 28rpx;
	padding: 20rpx 24rpx;
	padding-top: 5rpx;
}

.detail img{
  width: 750rpx;
		
}
.detail image{
 width: 750rpx;
}
/deep/ video{
	 width: 750rpx;
}
.title-2{
  font-size:30rpx;
  font-weight:500;
  color:#333333;
  padding: 0 24rpx;
  padding-top: 16rpx;
}
.spcxLeft{
  display: flex;line-height: 30rpx;
}
.spcxCk{
  font-weight: 400;
  color: #1A1A1A;
  padding-left: 24rpx;
}
.spcxTitle{
    font-size: 28rpx;
    font-weight: 500;
    color: #1A1A1A;
}
.spcxjt{
  width: 20rpx;height: 20rpx;
  margin-top: 10rpx;
}
.spcx{
  display: flex;color: #333333;font-size: 24rpx;
  justify-content: space-between;
}
.title-3{
  font-size:28rpx;
  font-weight:500;
  color: #1A1A1A;
}
.info-box-1{
  font-size:24rpx;
  font-weight:400;
  color:#1A1A1A;
  padding-top: 20rpx;
  display: inline-block;
  width: 100%;
}
.box-title{
    color: #999999;
    width: 140rpx;
    display: inline-block;
  }
  .extendDatasBox{
   /* padding-top: 24rpx; */
  }
</style>