shell/pages/index/goodsDetail.vue

<template>
	<view class="content">
	  <view class="uni-margin-wrap">
			<swiper class="swiper" circular :indicator-dots="true" :autoplay="true" :interval="3000"
				:duration="duration">
				<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="name">{{info.name}} | {{info.specificationModel}} | {{info.partsCode}}</view>
		<view style="height: 30rpx;background: #F4F5F7;"></view>
		<view class="detail">
			<view class="datailTitle">商品详情</view>
			<view v-html="info.ozContent"></view>
		</view>
	  
	</view>
</template>

<script>
	export default {
		components: {
			
		},
		data() {
			return {
				id:'',
				info:'',
			}
		},
		onLoad(opt) {
            this.id=opt.id;
			this.queryPartDetail()
		},
		methods: {
           queryPartDetail(){
			   uni.showLoading({ title: '加载中'});
			   this.$http('partsByOpen/queryPartDetail', {
			     id:this.id,
			   
			     
			    },'POST').then(res => {
					uni.hideLoading();
					this.info=res.data
			   })
		   },
		   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>
.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: 500;
	color: #1A1A1A;
	line-height: 40rpx;
	font-size: 28rpx;
	padding: 30rpx 24rpx;
}
</style>