132 lines
2.5 KiB
Vue
132 lines
2.5 KiB
Vue
<template>
|
|
<view class="v4-project">
|
|
<view class="top-box">
|
|
<image :src="info.topImage"/>
|
|
<view class="title tc bold">{{ info.name }}</view>
|
|
</view>
|
|
<view class="space"></view>
|
|
|
|
<view class="list-box">
|
|
<view class="title">目录</view>
|
|
<view class="item flex jc-between ai-center" v-for="(item,index) in info.contents" :key="index"
|
|
@click="viewFile(item)">
|
|
<view class="flex ai-center">
|
|
<text class="index">{{ index + 1 }}</text>
|
|
<text>{{ item.name }}</text>
|
|
</view>
|
|
|
|
<image class="icon" :src="webUrl+'/20220903145836941399.png'"/>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {investmentInfo} from '@/api/shop'
|
|
import { pageListenMixins } from '@/mixins/pageListenMixins'
|
|
export default {
|
|
name: 'ProjectDetail',
|
|
mixins: [pageListenMixins],
|
|
data() {
|
|
return {
|
|
webUrl: this.$VUE_APP_RESOURCES_URL,
|
|
id: null,
|
|
info: null,
|
|
pageKeyId: ''
|
|
}
|
|
},
|
|
onLoad(option) {
|
|
const id = option.id
|
|
this.id = id
|
|
this.pageKeyId = `investmentInfo_id_${id}`
|
|
this.init()
|
|
},
|
|
methods: {
|
|
init() {
|
|
investmentInfo(this.id).then(({data}) => this.info = data)
|
|
},
|
|
viewFile(item) {
|
|
if (item.suffix === 'pdf') {
|
|
uni.downloadFile({
|
|
url: item.attachment,
|
|
success: res => {
|
|
const filePath = res.tempFilePath
|
|
uni.openDocument({
|
|
filePath
|
|
})
|
|
}
|
|
})
|
|
} else {
|
|
uni.previewImage({
|
|
urls: item.attachmentFiles
|
|
})
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.v4-project {
|
|
min-height: 100vh;
|
|
background: #fff;
|
|
|
|
.top-box {
|
|
color: #333;
|
|
font-size: 36rpx;
|
|
|
|
image {
|
|
width: 750rpx;
|
|
height: 416rpx;
|
|
}
|
|
|
|
.title {
|
|
padding: 30rpx;
|
|
}
|
|
}
|
|
|
|
.space {
|
|
height: 20rpx;
|
|
background: #f9f9f9;
|
|
}
|
|
|
|
.list-box {
|
|
padding: 30rpx 32rpx;
|
|
|
|
.title {
|
|
width: 68rpx;
|
|
height: 48rpx;
|
|
padding-bottom: 8rpx;
|
|
border-bottom: 6rpx solid #C52733;
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
line-height: 48rpx;
|
|
color: #C52733;
|
|
}
|
|
|
|
.item {
|
|
padding: 40rpx 0;
|
|
border-bottom: 2rpx solid #CDCDCD;;
|
|
|
|
|
|
text {
|
|
color: #333;
|
|
font-size: 32rpx;
|
|
line-height: 48rpx;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.index {
|
|
display: inline-block;
|
|
width: 68rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.icon {
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |