shuquAi/pages/user/work/ticketDetail/index.vue

<template>
	<view class="container">
		<!-- #ifdef H5 -->
		<view style="color: #fff;">
			<tn-nav-bar backgroundColor="#26B3A0" :bottomShadow="false">凭证信息
				<!-- 	<template slot="right">
					课程购买记录
				</template> -->
			</tn-nav-bar>
			<view :style="{ height: tobheight + 'px' }"></view>
		</view>
		<!-- #endif -->


		<view class="detailBox">
			<view class="label1">
				凭证文案
			</view>

			<view class="content">
				{{detail.perform}}
			</view>

			<view class="label1">
				图片
			</view>
			<view class="chooscontainer">
				<view class="addpicall" v-for="(item,index) in detail.perform_image" :key="index">
					<image style="width: 184rpx;height:186rpx;border-radius: 20rpx;" @click="previewImg(item)"
						:src="item" mode="aspectFill"></image>
				</view>
			</view>
			<view class="label1">
				视频
			</view>
			<view class="chooscontainer">
				<view class="addpicall" v-for="(item,index) in detail.perform_video" :key="index">
					<!-- 	<video :src="item"></video> -->

					<image class=".image" style="width: 184rpx;height:186rpx;border-radius: 20rpx;"
						@click="previewVideo(item)" :src="item+'?x-oss-process=video/snapshot,t_0,m_fast,f_jpg,ar_auto'"
						mode="aspectFill"></image>
					<image @click="previewVideo(item)" class="playBtn" src="/static/bofang.png" mode=""></image>
				</view>
			</view>


			<view class="label1" v-if="pdfFileName">
				PDF文件
			</view>
			<view @click="viewPdf(pdfFileName)" class="pdfName" style="padding-left: 30rpx;margin-top: 10rpx;"
				v-if="pdfFileName">
				{{pdfFileName}}
			</view>
		</view>


		<!-- 全屏预览视频 -->
		<view class="preview-full" v-if="previewVideoSrc!=''">
			<video :autoplay="true" :src="previewVideoSrc" :show-fullscreen-btn="false">
				<!-- 退出全屏预览按钮 -->
				<cover-view class="preview-full-close" @click="previewVideoClose"> ×
				</cover-view>
			</video>
		</view>
	</view>
</template>

<script>
	import {
		myTaskOrderDetail
	} from '@/api/my/index.js'
	export default {
		components: {},
		data() {
			return {
				previewVideoSrc: '',

				pic_url: [],
				tobheight: 45,
				detail: {},

				pdfFileName: ''
			};
		},
		computed: {

		},
		watch: {

		},
		async onLoad(o) {
			let res = await myTaskOrderDetail({
				task_order_id: o.id
			})
			if (res.code == 0) {
				this.detail = res.data
				this.pdfFileName = res.data.perform_file[0]
			}
			console.log('任务订单凭证详情', this.detail);
		},
		onReady() {

		},
		onShow() {

		},
		onUnload() {

		},
		methods: {
			viewPdf(pdfFileName) {
				window.open(pdfFileName)
			},
			previewVideo(src) {
				console.log('1111111111111111111111', src);
				// 预览视频
				this.previewVideoSrc = src;
			},
			previewVideoClose() {
				this.previewVideoSrc = ''
			},
			//点击预览图片
			previewImg(item) {
				uni.previewImage({
					current: item,
					urls: this.detail.perform_image, //存放图片的数组
					loop: true,
					indicator: 'default'
				})
			},
		}
	};
</script>

<style lang="scss" scoped>
	@import './index.scss';
</style>