ChuangHengWx/pages/reportDetail.vue

<template>
	<view class="page" :style="{'min-height':h+'px', 'padding-top':mt+'px'}">
		<cus-header title='报告详情'></cus-header>
		<div class="pdf" :style="{'height':'calc(100vh - '+(mt+100)+'px)'}"
			@touchstart.prevent="touchStart" @touchmove.prevent="touchMove" @touchend.prevent="touchEnd">
			<div class="items" :style="{'transform':`translateX(${-(currentIndex * bl)}%)`,'transition':moveDistance !== 0 ? 'none' : 'transform 0.3s ease'}">
				<div class="item" v-for="(item,index) in slides" :key="index">
					<image :src="item" mode="widthFix" @touchstart="e=>touchStart2(e,item)" @touchend="touchEnd2"></image>
				</div>
			</div>
		</div>
		<div class="bottom">
			<div class="zt_btn" @tap="askReport">对报告提问</div>
		</div>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				pdfUrl:'',
				slides:[],
				startX: 0,
				currentIndex: 0,
				moveDistance: 0,
				bl:0,
				touchStartTime: 0,
				longPressTimeout: null
			}
		},
		onLoad(option) {
			this.pdfUrl = option.pdfUrl;
			this.getDetail(option.reportId);
		},
		methods:{
			getDetail(reportId){
				this.$api.get('/core/report/member/viewReport/'+reportId).then(res=>{
					if(res.data.code!==0) return this.$showToast(res.data.msg)
					this.slides = res.data.data;
					this.bl = 100/res.data.data.length;
				})
			},
			askReport(){
				uni.navigateTo({
					url:`/pages/reportAsk?pdf=${this.pdfUrl}`
				})
			},
			touchStart(event) {
			  this.startX = event.touches[0].clientX;
			  this.moveDistance = 0;
			},
			touchMove(event) {
			  const currentX = event.touches[0].clientX;
			  this.moveDistance = currentX - this.startX;
			},
			touchEnd() {
			  if (this.moveDistance > 50 && this.currentIndex > 0) {
			    this.currentIndex--;
			  } else if (this.moveDistance < -50 && this.currentIndex < this.slides.length - 1) {
			    this.currentIndex++;
			  }
			  this.moveDistance = 0; // 重置移动距离
			},
			touchStart2(e,img) {
			    this.touchStartTime = Date.now();
			    this.longPressTimeout = setTimeout(() => {
			        this.previewImage(img);
			    }, 1000);
			},
			touchEnd2() {
				clearTimeout(this.longPressTimeout);
			},
			previewImage(img) {
				uni.previewImage({
					urls: [img]
				});
			}
		}
	}
</script>

<style scoped lang="less">
	.page{
		padding: 0 24px 192rpx;
		box-sizing: border-box;
		background: #FFFFFF;
		
		.pdf{
			width: 100%;
			overflow-x: hidden;
			position: relative;
			.items{
				display: flex;
				width: fit-content; 
				.item{
					width: 702rpx;
					flex: 1;
					image{
						width: 100%;
					}
				}
			}
		}
		
		.bottom{
			width: 100%;
			height: 172rpx;
			background: #FFFFFF;
			box-shadow: 0rpx -2rpx 8rpx 0rpx rgba(0,0,0,0.06);
			padding: 34rpx 40rpx;
			box-sizing: border-box;
			position: fixed;
			left: 0;
			bottom: 0;
		}
	}
</style>