lift-wechat/pagesA/ProductDetails/ProductDetails.vue

<template>
	<view class="container" ref="backTop">
		<HeaderCustom title="产品详情" :showBack="true"></HeaderCustom>
<!-- 		<uv-sticky bgColor="#fff" offsetTop="90">
			<uv-tabs :list="list" @click="clickTab"></uv-tabs>
		</uv-sticky> -->
		<div class="contentBox">
			<video v-if="videoUrl" class="video" :src="videoUrl" controls></video>
			<image class="img" v-for="item in product_images_list" :key="item" :src="item" mode="widthFix" />
			<image class="img" v-for="item in qualification_images_list" :key="item" :src="item" mode="widthFix" />
		</div>
		<div class="pdf_box">
			<div class="pdf_item" v-for="(item,index) in product_pdfs_list" :key="item.url" @click="openPdf(item)">
				<div class="pdf_icon"><uv-icon name="file-text-fill" color="#2979ff" size="48"></uv-icon></div>
				<div class="nameBox">
					<div class="name">{{item.name}}</div>
					<div class="pdfInfoBox">
						<div class="size">{{item.size}}MB</div>
						<div class="date">{{item.date}}</div>
						<!-- <div class="time">{{item.time}}</div> -->
					</div>
				</div>
			</div>
		</div>
		<uv-back-top :scroll-top="scrollTop"></uv-back-top>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue";

	import {
		onPageScroll,
		onShow
	} from "@dcloudio/uni-app";
	import RPC from "@/utils/request";
	import HeaderCustom from '/components/HeaderCustom/HeaderCustom.vue'
	const props = defineProps({
		id: [String]
	});
	console.log('props', props.id)

	const list = ref([])
	
	const videoUrl = ref('')
	const images = ref([])
	
	const clickTab = item => {
		// console.log(item)
		videoUrl.value = item.video ||  ''
		images.value = item.images || []
	}
	
	const product_images_list = ref([])
	const qualification_images_list = ref([])
	const product_pdfs_list = ref([])
	
	const openPdf = (item) => {
		uni.downloadFile({
		  url: item.url,
		  success: function (res) {
		    var filePath = res.tempFilePath;
		    uni.openDocument({
		      filePath: filePath,
		      showMenu: true,
		      success: function (res) {
		        console.log('打开文档成功');
		      }
		    });
		  }
		});
	}

	const getDetail = () => {
		RPC.post('/store/detail', {
			id: Number(props.id)
		}).then(res => {
			console.log('/store/detail', res)
			// list.value = res.categories?.map(item => {
			// 	return {
			// 		...item,
			// 		images:item.images ? JSON.parse(item.images) : []
			// 	}
			// })
			videoUrl.value = res?.store?.video_intro || ''
			product_images_list.value = res?.store?.product_images ? res?.store?.product_images.split(',') : []
			qualification_images_list.value = res?.store?.qualification_images ? res?.store?.qualification_images.split(',') : []
			product_pdfs_list.value = res?.store?.product_pdfs ? JSON.parse(res?.store?.product_pdfs) : []
		})
	}

	onShow(() => getDetail())

	const scrollTop = ref(0)
	onPageScroll((e) => {
		scrollTop.value = e.scrollTop;
	})
</script>

<style lang="scss" scoped>
	.container {
		font-size: 14px;
		min-height: 100vh;
		background-color: #f8f8f8;
	}

	.contentBox {
		.video {
			width: 100%;
		}

		.img {
			width: 100%;
			height: auto;
		}
	}
	
	.pdf_box {
		background-color: #fff;
		padding: 10px;
		border-radius: 10px;
		margin-bottom: 14px;
		.pdf_item {
			display: flex;
			border-bottom: 1px solid #ccc;
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 10px 0;
			position: relative;
			.pdf_icon {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 16%;
				margin-right: 10px;
			}
			.nameBox {
				flex:1;
				.name {
					font-weight: 700;
					margin-bottom: 4px;
				}
				.pdfInfoBox {
					font-size: 12px;
					color: #aaa;
					display: flex;
					align-items: center;
					.date {
						margin: 0 14px;
					}
				}
			}
		}
	}
</style>