123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245 |
- <template>
- <view class="page" v-if="fetch && fetch.content && fetch.content.name">
- <!-- 顶部导航栏 -->
- <use-tabbar :tabbar="false"></use-tabbar>
- <!-- 标题 -->
- <view class="title">{{ fetch.content.name }}</view>
- <view class="content" v-if="fetch.content.media && fetch.content.media.length > 0">
- <u-swiper height="200px" :list="fetch.content.media" :autoplay="false" circular indicator
- indicatorMode="line" @change="onSwiperChange"></u-swiper>
- <!-- 标题 -->
- <view class="media-title">
- {{ currentTitle }}
- </view>
- </view>
- <!-- 富文本内容 -->
- <view class="content" v-if="fetch.content.content">
- <!--
- <view class="flex-center">
- <u-tabs :list="tab" @click="setTab"></u-tabs>
- </view>-->
- <u-parse :content="fetch.content.content"></u-parse>
- </view>
- <!-- 外部链接 -->
- <view class="attachment" v-if="fetch.content.link && fetch.content.link.length > 0">
- <view class="attachment-title">链接</view>
- <view>
- <view class="file-item" v-for="(item, index) in fetch.content.link" :key="index"
- @click="copy(item.link)">
- <u-icon :name="getFileIcon(item.name)" size="22" color="#007aff"></u-icon>
- <text class="file-name">{{ item.name }}</text>
- <view @click.stop="openLink(item.link)">
- <u-icon name="arrow-right" size="18" color="#ccc" style="margin-left:auto;"></u-icon>
- </view>
- </view>
- </view>
- </view>
- <!-- 附件区域 -->
- <view class="attachment" v-if="fetch.content.data && fetch.content.data.length > 0">
- <view class="attachment-title">附件</view>
- <view>
- <view class="file-item" v-for="(item, index) in fetch.content.data" :key="index"
- @click="copy(item.file)">
- <u-icon :name="getFileIcon(item.name)" size="22" color="#007aff"></u-icon>
- <text class="file-name">{{ item.name }}</text>
- <view @click.stop="openFile(item.file)">
- <u-icon name="arrow-right" size="18" color="#ccc" style="margin-left:auto;"></u-icon>
- </view>
- </view>
- </view>
- </view>
- </view>
- </template>
- <script>
- export default {
- data() {
- return {
- fetch: {},
- tab: [{
- name: '详情'
- },
- {
- name: '列表'
- },
- ],
- currentIndex: 0,
- currentTitle: ''
- }
- },
- onLoad(options) {
- this.id = options.id
- let title = '资源内容';
- if (options.title) {
- title = options.title;
- }
- uni.setNavigationBarTitle({
- title: title
- })
- this.loadData()
- },
- onPullDownRefresh() {
- this.loadData()
- },
- watch: {
- 'fetch.content.media': {
- immediate: true,
- handler(val) {
- if (val && val.length > 0) {
- this.currentTitle = val[0].title || ''
- }
- }
- }
- },
- methods: {
- onSwiperChange(e) {
- this.currentIndex = e.current
- this.currentTitle = this.fetch.content.media[e.current]?.title || ''
- },
- loadData() {
- this.DeverApi.get(this, "source.contentInfo", {
- id: this.id
- })
- },
- getFileIcon(filename) {
- const ext = filename.split('.').pop().toLowerCase()
- if (['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp'].includes(ext)) return 'photo'
- if (['mp4', 'avi', 'mov', 'mkv', 'webm'].includes(ext)) return 'play-circle'
- if (['mp3', 'wav', 'aac', 'flac', 'ogg'].includes(ext)) return 'kefu-ermai'
- return 'file-text'
- },
- openFile(file) {
- if (this.Dever.env <= 3) {
- window.open(file, '_blank')
- } else if (this.Dever.env == 4) {
- plus.runtime.openURL(file)
- } else if (this.Dever.env == 5) {
- uni.downloadFile({
- file,
- success: (res) => {
- if (res.statusCode === 200) {
- uni.openDocument({
- filePath: res.tempFilePath,
- showMenu: true
- })
- }
- }
- })
- }
- },
- openLink(value) {
- if (this.Dever.env <= 3) {
- window.open(value, '_blank')
- } else {
- this.copy(value);
- }
- },
- copy(value) {
- uni.setClipboardData({
- data: value,
- success: () => {
- uni.showToast({
- title: '已复制,可在浏览器中打开',
- icon: 'none'
- })
- }
- })
- }
- }
- }
- </script>
- <style lang="scss" scoped>
- .page {
- background-color: #f8f8f8;
- min-height: 100vh;
- padding: 14rpx;
- }
- .title {
- font-size: 40rpx;
- font-weight: bold;
- text-align: center;
- margin: 30rpx 0;
- color: #333;
- }
- .content {
- background-color: #fff;
- border-radius: 12rpx;
- padding: 30rpx;
- font-size: 28rpx;
- color: #444;
- line-height: 1.7;
- box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
- margin-bottom: 30rpx;
- }
- .link {
- display: flex;
- align-items: center;
- padding: 20rpx;
- margin-bottom: 30rpx;
- border-radius: 12rpx;
- background-color: #fff;
- box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
- }
- .link-text {
- margin-left: 12rpx;
- font-size: 28rpx;
- color: #007aff;
- }
- .attachment {
- background-color: #fff;
- border-radius: 12rpx;
- padding: 24rpx;
- box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
- }
- .attachment-title {
- font-size: 32rpx;
- font-weight: bold;
- margin-bottom: 20rpx;
- border-left: 6rpx solid #007aff;
- padding-left: 12rpx;
- color: #333;
- }
- .file-item {
- display: flex;
- align-items: center;
- padding: 20rpx;
- border-radius: 8rpx;
- background-color: #f9f9f9;
- margin-bottom: 16rpx;
- }
- .file-name {
- margin-left: 12rpx;
- font-size: 28rpx;
- color: #007aff;
- white-space: normal;
- word-break: break-all;
- flex: 1;
- }
- .flex-center {
- display: flex;
- justify-content: center;
- }
- .media-title {
- margin-top: 10rpx;
- font-size: 28rpx;
- font-weight: bold;
- text-align: center;
- }
- </style>
|