zdsz_WeChatApplet/pages/historyConstruction/historyDetail.vue

<template>
	<view>
		<view class="" style="margin-top: 100rpx;">
			<back></back>
		</view>
		<view v-for="(item,index) in image" :key="index" class="flex" >
			<!-- <image :src="item" mode="" class="image" @click="showPhoto(index)"></image> -->
			<image :src="item" mode="" class="image" @click="showPhoto(index)" v-if="item.substring(item.length - 3) == 'png' || item.substring(item.length - 3) == 'jpg' "></image>
			<video :src="item" controls v-else class="image"></video>
		</view>
		
	</view>
</template>

<script>
	import service from '@/api/index.js'
	export default{
		data(){
			return{
				id:0,
				image:[],
				index:0,
			}
		},
		onLoad(e) {
		   this.id = e.id;
		   this.photo()
		},
		methods:{
			photo(){
				service.getOrderPhoto({orderId:this.id}).then(res=>{
					this.image = res;
				})
			},
			showPhoto(index){
				uni.previewImage({
					current:index,
					urls:this.image,
				})
				
			}
		}
	}

</script>

<style lang="scss" scoped>
	.image{
		margin: 50rpx auto;
		width: 330rpx;
		height: 230rpx;
	}
</style>