miniprogram-jituan/detail/detail.vue

<template>
	<view class="detail_body" v-if="item.avatar">
		<image v-if="item.avatar" @load="loaded" :style="'width:'+ headImg.w +'px;height:'+ headImg.h +'px'"
			:src="item.avatar" mode="scaleToFill"></image>
		<view class="dl" v-if="typeof item.introduction === 'string'" v-text="item.introduction"></view>
		<view class="dl" v-else v-for="(v, i) in item.introduction" v-text="v" :key="i"></view>
		<view class="btn" @click="()=>showPDF(item.pdfUrl)">
			详情
		</view>
		<view style="display: flex;margin-top: 5em;" v-if="item.pdfUrl_z && item.pdfUrl_z.length">
			<local-select @open="()=>open(i)" @change="url=>change(i, url)" v-for="(v,i) in item.pdfUrl_z" :key="i"
				style="flex: 1;" :url="v.url" :fOpen="v.fOpen" :btnText="v.text" :list="v.child"></local-select>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue";
	import {
		showPDF
	} from "../../unit/index.js";
	import config from "../../config/index.js";
	import localSelect from "./select.vue"
	import {
		onShareAppMessage,
		onShareTimeline,
		onLoad
	} from '@dcloudio/uni-app'
	const App = getApp();
	const info = uni.getSystemInfoSync();
	const item = ref({});
	onShareAppMessage(() => {})
	onShareTimeline(() => {})
	onLoad(option => {
		console.log(option) // 所属数列
		uni.request({
			url: config.base + option.page + ".json?" + Date.now(),
			success: res => {
				if (res.statusCode !== 200) return
				item.value = res.data[option.index];
			}
		})
	})
	const headImg = ref({
		w: 0,
		h: 0
	})

	function loaded(v) {
		const w = info.windowWidth;
		const h = v.detail.height / v.detail.width * w;
		headImg.value = {
			w,
			h
		}
	}

	function change(i, url) {
		const pdfURl = url ? url : item.value.pdfUrl_z[i].pdfurl;
		showPDF(pdfURl);
	}

	function open(i) {
		item.value.pdfUrl_z[i].fOpen = !item.value.pdfUrl_z[i].fOpen
	}
</script>

<style lang="scss">
	.detail_body {
		background-color: #fff;
		height: 100vh;
		padding-bottom: 1.5em;
		overflow-y: auto;

		.dl {
			padding: .2em .5em;
			text-indent: 2em;
		}

		.btn {
			width: 50%;
			margin: 2.5em auto;
			text-align: center;
			border-radius: 5px;
			background-color: #b5bdc3;
			line-height: 2.5em;
			color: #fff;
		}
	}
</style>