``` <template> <view class="ts-column ts-flex-item"> <view class="banner"> <image class="banner-img" :mode="imageMode" :src="cover"></image> <view class="banner-title ts-ellipsis">{{pageData.title}}</view> </view> <view class="ts-section"> <view class="ts-section-title"> <view class="ts-row"> <view class="ts-flex-item" style="align-items: flex-end;"> <text class="ts-h2 ts-text-bold">{{pageData.linkman}}</text> <text class="ts-h6 ts-padding-left">{{pageData.mobile}}</text> </view> <view style="justify-content: center; align-items: center;"> <ts-tag :text="pageData.type" type="error"></ts-tag> </view> </view> </view> <view class="ts-section-body"> <view class="ts-row ts-h2 ts-text-bold"> {{pageData.title}} </view> <view class="ts-row" style="flex-wrap: wrap;"> {{pageData.description}} </view> <ts-line></ts-line> <view class="ts-row"> <view>地址：</view> <view>{{pageData.address}}</view> </view> <view class="ts-row"> <view>時間：</view> <view>{{pageData.create_time}}</view> </view> <view class="ts-column ts-padding-top ts-center" v-for="(img,idx) in pageData.images" :key="idx" @tap="previewImage(pageData.images)"> <image :src="img" style="width: 100%;" :mode="imageMode"></image> </view> </view> </view> </view> </template> <script> import * as api from "@/common/api/lost" export default { data() { return { id: 0, isLoading: false, pageData: { title: '詳情', }, imageMode: 'widthFix', } }, computed: { cover() { if (this.pageData.images && this.pageData.images.length > 0) { return this.pageData.images[0]; } else { return 'http://via.placeholder.com/750x350' } } }, onLoad(e) { this.id = parseInt(e.id) this.getDetail(); setTimeout(() => { uni.setNavigationBarTitle({ title: this.pageData.title.substring(0, 10) }); }, 500) }, methods: { previewImage(imageList) { //預覽圖片 uni.previewImage({ urls: imageList }); }, getDetail() { //阻止重復加載網絡請求 if (this.isLoading) { // uni.stopPullDownRefresh(); return; } this.isLoading = true; api.event.getInfo(this.id, {}).then(res => { if (res.errno === 0) { this.pageData = res.data; this.isLoading = false; } else { console.log(res.errmsg); } }); } } } </script> <style> image { width: 100%; height: 100%; } .banner { position: relative; background-color: #ccc; } .banner-img { width: 100%; } .banner-title { overflow: hidden; position: absolute; bottom: 30upx; width: 100%; font-size: 32upx; line-height: 44upx; color: white; z-index: 11; background-color: rgba(0, 0, 0, 0.4); padding: 20upx; } .article-meta { padding: 20upx 40upx; display: flex; flex-direction: row; justify-content: flex-start; color: gray; } .article-text { font-size: 26upx; line-height: 50upx; margin: 0 20upx; } .article-author, .article-time { font-size: 30upx; } .article-content { padding: 0 30upx; overflow: hidden; font-size: 30upx; margin-bottom: 30upx; } </style> ```