dev/dcp-web-gate/src_old/views/countryInformation/countryInformationDetails.vue

<template>
    <div class="autoBox box">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: 'home' }">{{ $t('common.Home') }}</el-breadcrumb-item>
                <el-breadcrumb-item :to="{ path: 'countryInformation' }">{{ $t('common.CountryInformation') }}</el-breadcrumb-item>
                <el-breadcrumb-item>{{ $t('common.InformationDetails') }}</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div style="margin-top: 30px;width: 100%;">
            <div style="padding:0 100px;text-align: center;line-height: 50px;color: #666;font-size: 28px;font-weight: 700;">{{ list.title }}</div>
            <div style="margin: 0 20px;padding: 0 10px; line-height: 50px;color: #bcbcbc;font-size: 15px;border-bottom: 1px solid #bcbcbc;">
                <span>{{ $t('common.ReleaseTime') }}：{{ formatDate(list.publishDate) }} | {{ $t('common.Source') }}：{{ list.auther }}</span>
                <!--                收藏按钮-->
                <!--              <span style="float: right;cursor: pointer;" @click="Collection">{{$t('common.Collection')}}</span>-->
                <span class="share cursor"
                      :style="ifcommon?'color: #66b1ff;':''"
                      style="margin-right: 20px;float: right;"
                      @click="shareChange()">
                    <i class="el-icon-star-off"
                       :style="ifcommon?'color: #66b1ff;':''"></i>
                    {{ $i18n.locale == 'zh' ? ifcommon ? "已收藏" : "收藏" : ifcommon ? "Already collected" : "Collection" }}
                  </span>
                <!-- Collected -->
            </div>
            <div style="padding:0 50px;line-height: 40px;font-size: #666;" v-html="list.contentHtml"></div>
            <div style="padding:0 50px;line-height: 40px;font-size: #666;margin-top: 30px;">
                <div v-if="cmsInfoAttachments.length > 0" class="content">
                    <div v-for="(item,index) in cmsInfoAttachments">
                        <span>{{ $t('common.enclosure') }} {{ index + 1 }} ：</span>
                        <a style="cursor: pointer" @click="downloadEnclosure(item.attachmentName,item.attachmentSavePath)">{{ item.attachmentName }}</a>
                        <div style="display:inline-block;height: 50px;background-color: #fff;margin-left: 20px">
                            <a class="func example" style="margin-right: 15px;color: #0c27ff" @click="downloadEnclosure(item.attachmentName,item.attachmentSavePath)">{{$t('common.download')}}</a>
                            <a class="func" @click="downloadP(item.attachmentSavePath)" style="color: #0c27ff">{{$t('common.preview')}}</a>
                        </div>
                    </div>
                </div>
                <div v-else>
                    <div v-for="(item,index) in enclosureName" class="content">
                        <div v-if="enclosureName.length >0">
                            <span>{{ $t('common.enclosure') }} {{ index + 1 }} ：</span>
                            <a style="cursor: pointer" @click="downloadEnclosure()">{{ item }}</a>
                            <div style="display:inline-block;height: 50px;background-color: #fff;margin-left: 20px">
                                <a class="func example" style="margin-right: 15px;color: #0c27ff" @click="downloadEnclosure()">{{$t('common.download')}}</a>
                                <a class="func" @click="downloadEnclosure()" style="color: #0c27ff">{{$t('common.preview')}}</a>
                            </div>
                        </div>

                    </div>
                </div>

            </div>
        </div>

        <!--登录-->
        <el-dialog
            :title="$i18n.locale == 'zh' ? '提示' : 'Reminder'"
            :visible.sync="toViewLogin"
            :width="$i18n.locale == 'zh' ? '30%' : '40%'"
            :height="$i18n.locale == 'zh' ? '300px' : '386px'"
            :before-close="toViewLoginChange"
        >
            <div style="width: 100%; height: 100%">
                <img src="@/assets/img/loginTips.png" alt="" style="width: 180px; height: 180px; margin-left: 20px"/>
                <div style="float: right; margin-right: 20px" :style=" $i18n.locale == 'zh' ? 'width: 49%;margin-top: 10px;' : 'width: 453px;margin-top: -25px;'">
                    <div style="
            font-size: 20px;
            font-weight: normal;
            color: #333333;
            font-family: HiraginoSansGB-W3, HiraginoSansGB;
            line-height: 40px;">
                        {{ $t("common.ReminderFirst") }}
                    </div>
                    <div style="
            font-size: 16px;
            font-family: HiraginoSansGB-W3, HiraginoSansGB;
            font-weight: normal;
            color: #666666;
            line-height: 30px;">
                        {{ $t("common.ReminderSecond") }}
                        <span style="color: #0091ff; font-size: 18px">{{ num }}</span>
                        {{ $t("common.ReminderThird") }}
                    </div>
                    <div style="
            font-size: 14px;
            font-family: HiraginoSansGB-W3, HiraginoSansGB;
            font-weight: normal;
            color: #666666;
            line-height: 30px;">
                        {{ $t("common.ReminderForth") }}
                    </div>
                    <div style="
                    font-size: 14px;
                    font-family: HiraginoSansGB-W3, HiraginoSansGB;
                    height: 33px;
                    line-height: 60px;
                    font-weight: normal;
                    color: #0091ff;">
                      <span
                          style="margin-left: 40px"
                          class="cursor"
                          @click="toViewLoginCh('login')">
                        {{ $t("common.ReminderFifth") }}
                      </span>
                        <span
                            style="margin-left: 10px"
                            class="cursor"
                            @click="toView('Register')">
                        {{ $t("common.ReminderSixth") }}
                    </span>
                    </div>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import {getInformationById} from '@/api/country/countryList'
import {addCollectInfo} from "@/api/baseUnitView";
import {getPortalMyCollectModelByResearch} from "@/api/operation/basePortalModelFollowInfo";
import {getToken} from "@/utils/auth";
import {getAttaments, download} from '@/api/file'

export default {
    name: 'countryInformationDetails',
    data() {
        return {
            listId: this.$route.query.key,
            list: {},
            ifcommon: false,
            toViewLogin: false,
            timer: "",
            num: 0,
            cmsInfoAttachments: [],
            isLogin: false,
            enclosureName: [],
        }
    },
    mounted() {
        this.isLogin = this.$Cookies.get('token') ? true : false;
        this.getList();

        // this.getMyCollecModel()
    },
    watch: {
        '$i18n.locale'() {
            this.getList();
        },
        toViewLogin() {
            if (this.toViewLogin == true) {
                this.loginTipsChange();
            }
        },
    },
    methods: {
        //登录方法
        toViewLoginCh(router) {
            clearInterval(this.timer);
            this.$router.push(router);
        },
        // 未登录跳转
        loginTipsChange() {
            const that = this;
            this.num = 5;
            clearInterval(that.timer);

            this.timer = setInterval(function () {
                if (that.num > 0) {
                    that.num--;
                    console.log(that.num)

                } else {
                    if (that.toViewLogin == true) {
                        clearInterval(that.timer);

                        that.toViewLoginCh("login");
                    } else {
                        clearInterval(that.timer);
                    }
                }
            }, 1000);
        },
        // 判断未登录跳转是否关闭
        toViewLoginChange(done) {
            this.toViewLogin = false;
            this.num = 5;
            clearInterval(this.timer);
            this.$emit('LoginBack', false)
        },
        //下载附件
        downloadEnclosure(fileName, path) {
            if (this.isLogin) {
                if (fileName && path) {
                    const link = document.createElement('a');
                    link.href = "api/file/pub/" + path;
                    link.download = fileName; //下载的文件名
                    link.click();
                }
            } else {
                this.toViewLogin = true;
            }
        },
        downloadP(url){
            let a = document.createElement('a');
            a.href ="api/file/pub/" + url;
            a.click();
        },
        //获取附件
        getEnclosureList() {
            getAttaments({
                attachmentBusinessId: this.list.id,
                attachmentBusinessType: 'cms_information_info'
            }).then(res => {
                var data = res.data;
                if (data && data.attachmentInfos) {
                    let attachments = [];
                    data.attachmentInfos.forEach((element, index) => {
                        attachments.push({
                            attachmentBusinessId: element.attachmentBusinessId,
                            attachmentId: element.id,
                            attachmentName: element.attachmentName,
                            attachmentSize: element.attachmentSize,
                            attachmentStatement: element.attachmentStatement,
                            attachmentSavePath: element.attachmentSavePath,
                            fileFunctionTypeDict: element.fileFunctionTypeDict,
                            sort: index,
                            status: element.status,
                            createBy: element.createBy,
                            createDate: element.createDate,
                        });
                    });
                    this.cmsInfoAttachments = attachments;
                }
            });
        },
        getList() {
            let list = {
                baseId: this.listId,
                language: this.$i18n.locale.toUpperCase()
            }
            getInformationById(list).then(res => {
                if (res.data.cmsInformationView) {
                    this.list = res.data.cmsInformationView;
                    this.enclosureName = this.list.remark ? this.list.remark.split(',,') : [];
                    this.getMyCollecModel();
                    let tokenDetaile = this.$Cookies.get('token');
                    if (tokenDetaile) {
                        this.getEnclosureList();
                    }
                    console.log('当前页面数据')
                    console.log(this.list)
                } else {
                    this.$message({
                        message: this.$i18n.locale == 'zh' ? "暂无此版本" : "This version is not available yet",
                    });
                    return
                }

            })
        },


        getIconUrl(url) {
            return require("@/assets/img/realTimeInfo/" + url);
        },
        toView(router, json) {
            this.$router.push({name: router, params: json})
        },
        screenBack(data) {
            console.log(data, 'screenBackscreenBackscreenBackscreenBack')
        },
        screen(i) {
            this.index = i
        },
        getInformation(num) {
            this.informationsClass = num
        },
        //查询是否收藏
        getMyCollecModel() {
            const that = this;
            if (this.$Cookies.get('token')) {
                let user = window.localStorage.getItem('user');
                let users = JSON.parse(user);
                let modelType = 'message';
                let userId = users.userId;
                let modelId = that.list.baseEntityId;
                getPortalMyCollectModelByResearch(modelId, modelType, userId).then(res => {
                    that.ifcommon = res.data.result;
                    console.log('收藏状态')
                    console.log(res.data)
                })
            }
        },
        // 项目收藏改变
        shareChange() {
            if (!this.ifcommon) {
                this.Collection("collect");
            } else {
                this.Collection("uncollect");
            }
        },
        //收藏
        Collection(collectType) {
            let user = window.localStorage.getItem('user');
            let tokenDetaile = this.$Cookies.get('token');
            console.log(tokenDetaile)
            if (!tokenDetaile) {
                this.toViewLogin = true;
            } else {
                var users = JSON.parse(user);
                this.userId = users.userId;

                let modelId = this.list.baseEntityId;
                let modelType = "message";
                let userId = users.userId;
                // let collectType= "collect";
                var token = "" + getToken();
                addCollectInfo(modelId, modelType, userId, collectType, token).then(res => {
                    if (res.status == 200) {
                        if (!this.ifcommon) {
                            this.$message({
                                message: this.$i18n.locale == 'zh' ? "已收藏" : "Collection of success",
                                type: 'success'
                            });
                        } else if (this.ifcommon) {
                            this.$message({
                                message: this.$i18n.locale == 'zh' ? "取消收藏" : "Cancel the collect",
                                type: 'success'
                            });
                        }

                    }
                    this.ifcommon = !this.ifcommon;
                }).catch(error => {

                });
            }
        },
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.content{
    vertical-align: center;
    margin-top: 20px;
    padding:0 30px;
    cursor: pointer;
    width: 100%;
}
.box {
    margin-top: 10px;
    background: #fff;
    /* height: 500px; */
    padding: 20px 0;
}

.crumbs {
    margin-left: 20px;
}

body {
    margin: 0;
}

.swipers {
    position: absolute;
    top: 30px;
    left: 100px;
    width: 460px;
    height: 390px;
}

.details {
    position: absolute;
    top: 30px;
    left: 600px;
    width: 460px;
    height: 390px;
}

.swiper-container {
    width: 100%;
    height: 300px;
    margin-left: auto;
    margin-right: auto;
}

.swiper-slide {
    background-size: cover;
    background-position: center;
}

.gallery-top {
    height: 80%;
    width: 100%;
}

.gallery-thumbs {
    height: 20%;
    box-sizing: border-box;
    padding: 10px 0;
}

.gallery-thumbs .swiper-slide {
    width: 25%;
    height: 100%;
    opacity: 0.4;
}

.gallery-thumbs .swiper-slide-thumb-active {
    opacity: 1;
}

.initData_label {
    color: #6c8c9d;
    font-weight: 700;
    font-size: 18px;
    line-height: 42px;
}

.enterprise_style {
    line-height: 40px;
    color: #6C819D;
    /* padding-left: 100px; */
    font-size: 18px;
    /* font-weight: 700; */
    margin-top: 5px;
    margin-left: 100px;
    border-bottom: 1px solid #95d13e;
}

.enterprise_style_span {
    padding: 10px;
    text-align: center;
    height: 100%;
    background: #95d13e;
    color: #fff;
    /* border-bottom: 2px solid #6699ff; */
}

.enterprise_style_product tr {
    line-height: 30px;
    width: 100%;
    display: inline-block;
    border-bottom: 1px dashed #ccc;
    font-size: 14px;
    color: #6C819D;
    margin-bottom: 5px;
}

.recommend {
    margin-top: 15px;
    margin-left: 100px;
}

.recommend li {
    display: inline-block;
    width: 170px;
    /* height: 130px; */
    text-align: center;
    margin-right: 15px;
}

.information1 {
    display: inline-block;
    width: 123px;
    height: 100%;
    border: 1px solid rgba(228, 228, 228, 1);
    text-align: center;
    background: #f9f9f9;
    color: #999;
}

.information2 {
    display: inline-block;
    width: 123px;
    height: 100%;
    border-top: 3px solid #2c5589;
    text-align: center;
    color: #2c5589;
}

.information1:hover {
    color: #FF0036;
}
</style>