gypsy-crm-frontend-vu/pages/mine/new.vue

<template>
    <cwg-page-wrapper class="create-page" :isHeaderFixed="true">
        <view class="info-card">
            <!-- 标题栏 -->
            <view class="content-title">
                <view>{{ titleMap[title] }}</view>
                <view v-if="title == 7" class="btn crm-cursor" @click="backIndex">
                    <uni-icons type="arrowleft" size="20" color="#666"></uni-icons>
                    <text>{{ t('Custom.Settings.Title') }}</text>
                </view>
            </view>
            <!-- 内容区域 - 图文类型 -->
            <view v-if="[1, 2, 3, 5].includes(title)" class="content crm-border-radius">
                <view v-if="imgContentIf" class="img">
                    <image :src="imgContent" mode="widthFix" class="content-image" @click="previewImage" />
                </view>
                <rich-text :nodes="Content" class="rich-text"></rich-text>
            </view>
            <!-- 内容区域 - 视频类型4 -->
            <view v-if="title == 4" class="content crm-border-radius" style="overflow: auto;">
                <text class="con-title">{{ info.title }}</text>
                <view class="con-time" style="display: flex; justify-content: space-between;">
                    <text>{{ info.createTime }}</text>
                    <image src="/static/images/img/acc_logo.png" mode="aspectFit" style="height: 40px; width: auto;" />
                </view>
                <view class="my_video" style="width: 100%;">
                    <!-- 使用 video 组件 -->
                    <video :src="info.url" controls style="width: 100%;" :show-fullscreen-btn="true"
                        :enable-play-gesture="true"></video>
                </view>
                <text class="con-des">{{ info.description }}</text>
            </view>
            <!-- 内容区域 - 视频类型6 -->
            <view v-if="title == 6" class="content crm-border-radius" style="overflow: auto;">
                <text class="con-title">{{ info.title }}</text>
                <text class="con-time">{{ info.subTitle }}</text>
                <view class="my_video" style="width: 100%;">
                    <video :src="imgContent" controls style="width: 100%;" :show-fullscreen-btn="true"
                        :enable-play-gesture="true"></video>
                </view>
                <rich-text :nodes="info.content" class="con-des"></rich-text>
            </view>
            <!-- 内容区域 - 公告类型7 -->
            <view v-if="title == 7" class="content crm-border-radius" style="overflow: auto;">
                <text class="con-title">{{ info.subject }}</text>
                <rich-text :nodes="info.content" class="con-des"></rich-text>
            </view>
            <!-- 内容区域 - 交易观点8 / 财经日历9 -->
            <view v-if="title == 8 || title == 9" class="content crm-border-radius">
                <view style="width: 100%; min-height: 800px;">
                    <!-- #ifdef H5 -->
                    <iframe width="100%" height="100%" style="min-height: 800px; border: none;" :src="imgContent" />
                    <!-- #endif -->
                    <!-- #ifndef H5 -->
                    <web-view :src="imgContent"></web-view>
                    <!-- #endif -->
                </view>
            </view>

            <!-- 内容区域 - 电子书10 -->
            <view v-if="title == 10" class="content crm-border-radius" style="overflow: auto;">
                <view class="ebookBox">
                    <image :src="imgUrl + info.coverImage" mode="aspectFill" />
                    <view>
                        <text class="news-title">{{ info.title }}</text>
                        <rich-text :nodes="info.content" class="con-des"></rich-text>
                        <view class="news-status">
                            <!-- #ifdef H5 -->
                            <a :href="imgUrl + info.bookUrl" target="_blank">{{ t('blockchain.item12') }}</a>
                            <!-- #endif -->
                            <!-- #ifndef H5 -->
                            <button @click="downloadEbook" class="download-btn">{{ t('blockchain.item12') }}</button>
                            <!-- #endif -->
                        </view>
                    </view>
                </view>
            </view>

            <!-- 内容区域 - 视频类型11 -->
            <view v-if="title == 11" class="content crm-border-radius">
                <view style="display: flex; justify-content: flex-end; margin-bottom: 15px;">
                    <image src="/static/images/img/acc_logo.png" mode="aspectFit" style="height: 40px; width: auto;" />
                </view>
                <view style="width: 80%; min-height: 800px; margin: auto;">
                    <view style="position: relative; overflow: hidden; padding-bottom: 56.25%;">
                        <!-- #ifdef H5 -->
                        <iframe :src="videoSrc" width="100%" height="100%" frameborder="0" scrolling="auto"
                            style="position: absolute;" allowfullscreen></iframe>
                        <!-- #endif -->
                        <!-- #ifndef H5 -->
                        <web-view :src="videoSrc"></web-view>
                        <!-- #endif -->
                    </view>
                </view>
            </view>
        </view>
    </cwg-page-wrapper>
</template>

<script setup>
import { ref, computed, onMounted, watch } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { useI18n } from 'vue-i18n'
import { newsApi } from '@/service/news';
import Config from '@/config/index'

const { t } = useI18n()
const { Code, Host80 } = Config
const titleMap = computed(() => ({
    1: t('News.ViewAnalysis'),
    2: t('News.NewsInformation'),
    3: t('News.Announcement'),
    4: t('News.VideoCommentary'),
    5: t('News.NewsInformation'),
    6: t('News.VideoCommentary'),
    7: t('News.Notice'),
    8: t('News.TradeIdeas'),
    9: t('News.FinancialCalendar'),
    10: t('News.Ebook'),
    11: t('News.VideoCommentary')
}));
// 路由参数
const title = ref(null)
const Id = ref(null)

// 数据
const Content = ref('')
const imgContent = ref('')
const imgContentIf = ref(false)
const info = ref({})
const imgUrl = Host80

// 视频源计算属性
const videoSrc = computed(() => {
    const lang = uni.getStorageSync('lang') || 'en'
    const isChinese = ['cn', 'zhHant'].includes(lang)
    return isChinese
        ? 'https://videos.tradingcentral.cn/players/H5quTuut-iodula4l.html'
        : 'https://videos.tradingcentral.cn/players/SHILp3nA-iodula4l.html'
})

// 预览图片
const previewImage = () => {
    if (imgContent.value) {
        uni.previewImage({
            urls: [imgContent.value],
            current: 0
        })
    }
}

// 下载电子书
const downloadEbook = () => {
    const url = imgUrl + info.value.bookUrl
    // #ifdef APP-PLUS
    plus.runtime.openURL(url)
    // #endif
    // #ifdef MP-WEIXIN
    uni.downloadFile({
        url: url,
        success: (res) => {
            if (res.statusCode === 200) {
                uni.openDocument({
                    filePath: res.tempFilePath,
                    success: () => {
                        uni.showToast({
                            title: t('common.success'),
                            icon: 'success'
                        })
                    }
                })
            }
        }
    })
    // #endif
}

// 获取新闻详情
const getNewsSingle = async () => {
    uni.showLoading({ title: t('common.loading') })

    try {
        if (title.value == 1) {
            const res = await newsApi.newsAnalysisSingle({ id: Id.value })
            if (res.code == 200) {
                if (res.data) {
                    imgContent.value = res.data.media
                    Content.value = res.data.content
                    imgContentIf.value = !!res.data.media
                }
            } else {
                uni.showToast({ title: res.msg, icon: 'none' })
            }
        } else if (title.value == 3) {
            const res = await newsApi.newsInformationSingle({ id: Id.value })
            if (res.code == 200) {
                if (res.data) {
                    imgContent.value = Host80 + res.data.coverImage
                    Content.value = res.data.content
                    imgContentIf.value = !!res.data.coverImage
                }
            } else {
                uni.showToast({ title: res.msg, icon: 'none' })
            }
        } else if (title.value == 7) {
            const res = await newsApi.newsNoticeSingle({ id: Id.value })
            if (res.code == 200) {
                if (res.data) {
                    info.value = res.data
                }
            } else {
                uni.showToast({ title: res.msg, icon: 'none' })
            }
        } else if (title.value == 4) {
            const res = await newsApi.newsWebTvSearchSingle({ id: Id.value })
            if (res.code == 200) {
                if (res.data) {
                    info.value = res.data
                }
            } else {
                uni.showToast({ title: res.msg, icon: 'none' })
            }
        } else if (title.value == 5) {
            const res = await newsApi.newsInformationNewsletterSingle({ id: Id.value })
            if (res.code == 200) {
                if (res.data) {
                    imgContent.value = Host80 + res.data.coverImage
                    Content.value = res.data.content
                    imgContentIf.value = !!res.data.coverImage
                }
            } else {
                uni.showToast({ title: res.msg, icon: 'none' })
            }
        } else if (title.value == 6) {
            const res = await newsApi.newsVideoSingle({ id: Id.value })
            if (res.code == 200) {
                if (res.data) {
                    info.value = res.data
                    imgContent.value = res.data.videoUrl.indexOf('http') > -1
                        ? res.data.videoUrl
                        : (Host80 + res.data.videoUrl)
                }
            } else {
                uni.showToast({ title: res.msg, icon: 'none' })
            }
        } else if (title.value == 8) {
            const res = await newsApi.handShakeGet({})
            if (res.code == 200) {
                imgContent.value = res.msg
            } else {
                uni.showToast({ title: res.msg, icon: 'none' })
            }
        } else if (title.value == 9) {
            const res = await newsApi.handFinancialCalendar({})
            if (res.code == 200) {
                imgContent.value = res.msg
            } else {
                uni.showToast({ title: res.msg, icon: 'none' })
            }
        } else if (title.value == 10) {
            const res = await newsApi.newsEbookSingle({ id: Id.value })
            if (res.code == 200) {
                info.value = res.data
            } else {
                uni.showToast({ title: res.msg, icon: 'none' })
            }
        }
    } catch (error) {
        console.error('加载失败:', error)
        uni.showToast({ title: t('common.error'), icon: 'none' })
    } finally {
        uni.hideLoading()
    }
}

// 返回
const backIndex = () => {
    uni.navigateTo({
        url: '/pages/mine/notice'
    })
}

// 监听路由参数
onLoad((query) => {
    title.value = Number(query.title)
    Id.value = Number(query.id)
    getNewsSingle()
})

// 监听路由变化
watch([() => title.value, () => Id.value], () => {
    getNewsSingle()
})
</script>

<style scoped lang="scss">
.content {
    flex: 1;
    width: 100%;
    background-color: #fff;
    overflow: hidden;
    overflow-y: auto;
    text-align: left;
    padding: 30rpx;
    box-sizing: border-box;
    line-height: 1.8;

    .img {
        margin-bottom: 30rpx;

        .content-image {
            width: 100%;
            max-height: 400rpx;
            object-fit: contain;
        }
    }

    .con-title {
        font-size: 36rpx;
        font-weight: bold;
        margin: 20rpx 0;
        color: #333;
    }

    .con-time {
        margin-bottom: 30rpx;
        font-size: 28rpx;
        color: #999;
    }

    .con-des {
        margin: 30rpx 0;
        font-size: 28rpx;
        color: #666;
    }
}

.ebookBox {
    display: flex;
    flex-direction: column;
    align-items: center;

    @media (min-width: 768px) {
        flex-direction: row;
        align-items: flex-start;
    }

    image {
        width: 360rpx;
        height: 525rpx;
        margin-right: 50rpx;
        border-radius: 16rpx;
        object-fit: cover;
    }

    .news-title {
        color: #EB3F57;
        font-size: 36rpx;
        font-weight: bold;
        margin-bottom: 20rpx;
    }

    .news-status {
        margin-top: 30rpx;

        a,
        .download-btn {
            display: inline-block;
            color: #ffffff;
            height: 60rpx;
            line-height: 60rpx;
            background-color: #EB3F57;
            padding: 0 30rpx;
            font-weight: bold;
            border-radius: 8rpx;
            font-size: 28rpx;
        }
    }
}

// 富文本样式
:deep(.rich-text) {
    font-size: 28rpx;
    color: #666;

    table {
        border-collapse: collapse;
        width: 100%;
        margin: 20rpx 0;
    }

    th,
    td {
        border: 1rpx solid #dcdfe6;
        padding: 16rpx;
        text-align: left;
    }

    th {
        background-color: #f5f7fa;
    }

    img {
        max-width: 100%;
        height: auto;
    }
}

.content-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: px2rpx(20);
    font-weight: 500;

    .content-title-btns {
        margin: px2rpx(8) 0;

        display: flex;
        align-items: center;
        justify-content: center;
        gap: px2rpx(12);

        .btn-primary {
            min-width: px2rpx(120);
            background-color: var(--color-error);
            color: white;
            padding: 0 px2rpx(12);
            border: none;
            font-size: px2rpx(14);
            text-align: center;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: px2rpx(8);
        }

        .btn-primary:active {
            background-color: var(--color-navy-700);
        }
    }
}
</style>