dev/dcp-web-gate/src_old/views/ThinkTankConsulting/ThinkTankArticleDetail.vue

<template>
    <div class="autoBox box">
        <div class="crumbs">
            <el-breadcrumb separator="/" style="margin:15px ">
                <el-breadcrumb-item :to="{ path: 'home' }">{{ $t('common.Home') }}</el-breadcrumb-item>
                <el-breadcrumb-item :to="{ path: 'ThinkTankConsulting2' }">{{ $t('common.ThinkTankConsulting') }}</el-breadcrumb-item>
                <el-breadcrumb-item>{{ articleDetail.title }}</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div style="margin-top: 15px;padding: 0 20px">
            <div class="leftBox">
                <div class="title">{{ articleDetail.title }}</div>
                <div class="tip">
                    <div class="detailTip" v-for="(item,index) in articleDetail.tip">
                        {{ item.title }}
                    </div>
                </div>
                <div class="time">
                    <div style="float: left;font-size: 15px">
                        {{ $t('common.ReleaseTime') }}：
                        <span>{{ formatDate(articleDetail.createDate) }}</span>
                        | {{ $t('common.Source') }}：
                        <span>{{ articleDetail.auther }}</span>
                    </div>
                    <!-- 收藏-->
                    <div style="float:right;">
                        <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>
                    </div>
                    <div style="clear: both"></div>
                </div>
                <div class="articleContent" v-html="articleDetail.contentHtml"></div>
                <div style="margin:10px 20px 0 0;line-height: 24px;color:#888;padding-top: 10px; font-size: 14px;vertical-align: top;border-top: 1px dashed #000;">
                    {{ $t('common.contentisreproduced') }}
                </div>
                <!--留言框-->
                <div class="messageBox">
                    <div class="messageTitle">
                        <div class="squireBox"></div>
                        <div class="titleSty" v-if="isLogin">
                            {{ $t('common.Message') }}（<span>{{ messageTotal }}</span>）
                        </div>
                        <div class="titleSty" v-else>
                            {{ $t('common.Message') }}（0）
                        </div>
                    </div>
                    <!--已登录-->
                    <div class="loginPublished" v-if="isLogin">
                        <div class="messagesList" v-for="(messItem,messIndex) in messageList" :key="messIndex">
                            <!-- 留言信息-->
                            <div style="margin-top: 20px;">
                                <div class="messName">
                                    <div class="messUnit">
                                        <div class="messPhoto">
                                            <img :src="'./api/file/pub/' + messItem.imagesPath" alt="" style="width: 100%;height: 100%">
                                        </div>
                                        <div style="float: left;margin-right: 20px;">
                                            {{ messItem.senderName }}
                                            <span style="color: #666" v-if="messItem.userUsertype == '会员用户'">【{{ $i18n.locale == 'zh' ? 'VIP会员' : 'VIP member' }}  】</span>
                                        </div>
                                        <div style="float: right;color: #ccc">
                                            <span>{{ $t('common.MessageTime') }} : </span>
                                            <span>{{ formatDate(messItem.createDate) }}</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="messContent" v-html="messItem.content"></div>
                            </div>
                            <!--回复信息-->
                            <div class="replyMessage" v-if="messItem.interactiveMessageWeatherInfo">
                                <div class="messName">
                                    <div class="messUnit">
                                        <div class="messPhoto">
                                            <img :src="'./api/file/pub/' + messItem.interactiveMessageWeatherInfo.imagesPath" alt="" style="width: 100%;height: 100%">
                                        </div>
                                        <div style="float: left;margin-right: 20px;">
                                            {{ messItem.interactiveMessageWeatherInfo.senderName }}
                                        </div>
                                        <div style="float: right;color: #ccc">
                                            <span>{{ $t('common.ReplyTime') }} : </span>
                                            <span>{{ formatDate(messItem.interactiveMessageWeatherInfo.createDate) }}</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="messContent" v-html="messItem.interactiveMessageWeatherInfo.content"></div>
                            </div>
                        </div>
                        <!-- 分页 -->
                        <div style="width: 100%;height: 80px;text-align: center;margin-top: 20px;" v-if="messageTotal > 0">
                            <el-pagination
                                class="pagination"
                                background
                                layout="prev, pager, next"
                                :total="messageTotal"
                                @current-change="handleCurrentChange"
                                :page-size=5>
                            </el-pagination>
                        </div>
                        <!--留言框-->
                        <div class="messOutBox">
                            <el-input
                                v-model="input1"
                                type="textarea"
                                maxlength="1000"
                                show-word-limit
                                :autosize="{ minRows: 2, maxRows: 5}"
                                :placeholder="$t('common.SaySomething')"
                                class="setMessage">
                            </el-input>
                            <div class="subBox" style="">
                                <div class="userName">
                                    <div class="messPhoto" style="margin: 5px 10px 0 10px;">
                                        <img :src="'./api/file/pub/' + user.umsUser.userPic" alt="" style="width: 100%;height: 100%">
                                    </div>
                                    <span>{{ user.umsUser.userName }}</span>
                                    <div style="clear: both"></div>
                                </div>
                                <el-button type="primary" class="messBtn" @click="submit"> {{ $t('common.release') }}</el-button>
                                <div style="clear: both"></div>
                            </div>
                        </div>
                        <div style="color: #67c23a;margin-top: 10px;">
                            {{ $i18n.locale == 'zh' ? '提示：您的留言需要平台工作人员审核后才可以对外展示，请耐心等待。' : 'Tips：Your message needs to be reviewed by the platform staff before it can be displayed. Please wait patiently.' }}
                        </div>
                    </div>
                    <!-- 未登录-->
                    <div class="loginPublished" v-else>
                        <el-input v-model="input2" :placeholder="$t('common.SaySomething')" :disabled="true" class="messInput"></el-input>
                        <el-button type="primary" class="messBtn" @click="confLogin(2)">{{ $t('common.LoginAndRelease') }}</el-button>
                        <div style="clear: both"></div>
                    </div>

                </div>
            </div>
            <!--碳中和相关资讯-->
            <div class="rightBox">
                <div class="informationTitle informationTitleAfter">
                    <img src="@/assets/img/cooperationExchange/20200608_03.gif" alt="" style="height: 20px;vertical-align: middle;">
                    {{ $t('common.InformationOnCarbon') }}
                </div>
                <div >
                    <ul>
                        <li v-for="(item,index) in articleInfo" class="infoList" @click="toView('realTimeInfoItemdetails',item.baseEntityId)">
                            {{ item.title }}
                        </li>
                    </ul>
                </div>
            </div>
            <div style="clear: both"></div>
        </div>
        <!--    登录提示-->
        <el-dialog
            :title="$i18n.locale=='zh'?'提示':'Reminder'"
            :visible.sync="toViewLogin"
            :width="$i18n.locale=='zh'?'500px':'750px'"
            :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="toView('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 {weatherArticleDetail} from '@/api/cms/cmsInformationEntity';
import {weatherArticle} from '@/api/cms/cmsInformationEntity';
import {addCollectInfo} from "@/api/baseUnitView";
import {getPortalMyCollectModelByResearch} from "@/api/operation/basePortalModelFollowInfo";
import {getInteractiveMessageWeatherInfosList, saveInteractiveMessage} from '@/api/operation/interactiveMessageWeatherInfo';
import {getToken, resetToken} from "@/utils/auth";
import Base from "@/views/base/Base";
import {carbonNeutralList} from "@/api/financialService/cmsInformationViews";

export default {
    name: 'ThinkTankArticleDetail',
    extends: Base,

    data() {
        return {
            ifcommon: false,
            messageNum: 0,
            isLogin: false,
            input1: '',
            input2: '',
            toViewLogin: false,
            num: 5,
            articleDetail: {},
            articleInfo: [],
            messageList: [],
            user: {},
            userName: '',
            aaaaa: {},
            params: {},
            interactiveMessageWeatherInfo: {
                content: '',
                replyStatus: '否',
                replyStatusDict: 'N',
                bizObjectType: '0',
                approveStatusDict: '0',
                columnCode: this.$route.query.key,
                userUsertype: ''
            },
            messageTotal: '',

        }
    },
    watch: {
        '$i18n.locale'() {
            this.getetails()
            this.getInfomationList()
            this.getMyCollect()
        },
        "toViewLogin"() {
            if (this.toViewLogin == true) {
                this.loginTipsChange()
            }
        }
    },
    mounted() {
        this.confLogin('1')
        this.getInfomationList();
        this.getetails();

    },
    methods: {
        /*
        * 登录相关方法
        * */
        loginTipsChange() {
            const that = this;
            this.num = 5;
            this.timer = setInterval(function () {
                if (that.num > 0) {
                    that.num--;
                } else {
                    if (that.toViewLogin == true) {
                        clearInterval(that.timer);
                        that.toView('login');
                    } else {
                        clearInterval(that.timer);
                    }
                }
            }, 1000)
        },
        confLogin(i) {
            if (!this.$Cookies.get('token')) {
                this.isLogin = false;
                if (i == '2') {
                    this.toViewLogin = true;
                }
            } else {
                this.isLogin = true;
                this.getMessage()
            }
        },
        // 判断未登录跳转是否关闭
        toViewLoginChange(done) {
            this.toViewLogin = false;
            this.num = 5;
            clearInterval(this.timer);
        },
        //跳转
        toView(router, json) {
            if (router == 'ThinkTankArticleDetail') {
                window.localStorage.setItem('router', router);
                const {href} = this.$router.resolve({
                    name: router,
                    query: {
                        key: json
                    }
                });
                window.open(href, '_blank');
            } else {
                clearInterval(this.timer);
                this.$router.push({
                    name: router,
                    query: {
                        key: json,
                    }
                });
            }

        },
        //获取收藏初始状态
        getMyCollect() {
            const that = this;
            if (this.$Cookies.get('token')) {
                let user = window.localStorage.getItem('user');
                var users = JSON.parse(user);
                var modelType = 'message';
                var userId = users.userId;
                var modelId = that.articleDetail.baseEntityId;
                getPortalMyCollectModelByResearch(modelId, modelType, userId).then(res => {
                    that.ifcommon = res.data.result;
                })
            }
        },
        //点击收藏按钮
        shareChange() {
            if (!this.ifcommon) {
                this.Collection("collect");
            } else {
                this.Collection("uncollect");
            }
        },
        //收藏
        Collection(stasus) {
            let user = window.localStorage.getItem("user");
            if (!this.$Cookies.get('token')) {
                this.toViewLogin = true
            } else {
                let users = JSON.parse(user);
                let token = "" + getToken();
                // this.userId = users.userId;
                let modeId = this.articleDetail.baseEntityId;
                this.submitHandler((token) => {
                    addCollectInfo(modeId, "message", users.userId, stasus, token).then((res) => {
                        if (res.status == 200) {
                            if (!this.ifcommon) {
                                this.$message({
                                    message: this.$i18n.locale == 'zh' ? "已收藏" : "Liked of success",
                                    type: 'success'
                                });
                            } else if (this.ifcommon) {
                                this.$message({
                                    message: this.$i18n.locale == 'zh' ? "取消收藏" : "Cancel the like",
                                    type: 'success'
                                });
                            }
                        }
                        this.ifcommon = !this.ifcommon;
                        this.resetToken();
                    }).catch(error => {
                        this.resetToken();
                    });
                })
            }
        },
        //获取碳中和资讯列表信息
        getInfomationList() {
            /*     let params = {
                     language: this.$i18n.locale.toUpperCase(),
                     pageNo: '1',
                     pageSize: '10'
                 }
                 weatherArticle(params).then((res) => {
                     let result = res.data
                     if (result) {
                         this.articleInfo = result.weatherArticle
                     }
                 })*/
            const that = this;
            let hotList = {
                pageSize: 5,
                pageNo: 1,
                language: ''
            }
            hotList.language = this.$i18n.locale.toUpperCase();
            carbonNeutralList(hotList).then((res) => {
                if (res.data.length > 0) {
                    this.articleInfo = res.data;
                } else {
                    hotList.pageNo = 1;
                    this.getHotFocus();
                }
            });
        },
        //获取详情内容
        getetails() {
            let prams = {
                language: this.$i18n.locale.toUpperCase(),
                id: this.$route.query.key,
                pageNo: '1',
                pageSize: '1'
            }
            this.params = prams
            weatherArticleDetail(prams).then((res) => {
                if (res.data.weatherArticleDetail) {
                    this.articleDetail = res.data.weatherArticleDetail[0];
                    this.getMyCollect();
                } else {
                    this.$message.warning(this.$i18n.locale == 'zh' ? "暂无此版本" : "This version is not available yet");
                }
            })
        },
        //获取留言内容
        getMessage(page) {
            let user = window.localStorage.getItem("user");
            this.user = JSON.parse(user)
            let params = {
                columnCode: this.$route.query.key,
                pageSize: 5,
                bizObjectType: 0,
                approveStatusDict: 2,
                pageNo: page || 1
            }
            getInteractiveMessageWeatherInfosList(params).then((res) => {
                if (res) {
                    this.messageList = res.data.interactiveMessageWeatherInfos || []
                    this.messageNum = this.messageList.length || 0;
                    this.messageTotal = Number(res.data.page.totalCount)
                }
            })
        },
        //提交留言
        submit() {
            if (!this.input1) {
                this.$message({
                    message: this.$i18n.locale == "en" ? 'Please enter the message content and publish it' : '请输入留言内容后发布',
                    type: 'info',
                });
                return
            } else {
                let user = JSON.parse(window.localStorage.getItem("user"));
                this.interactiveMessageWeatherInfo.content = this.input1;
                this.interactiveMessageWeatherInfo.userUsertype = user.umsUser.userUsertype;
                console.log('this.interactiveMessageWeatherInfo', this.interactiveMessageWeatherInfo)
                let token = getToken();
                this.submitHandler((token) => {
                    saveInteractiveMessage(JSON.stringify(this.interactiveMessageWeatherInfo), token).then((res) => {
                        if (res && res.status == "200") {
                            this.$message({
                                message: this.$i18n.locale == "en" ? 'Message success, please wait for the platform staff reply' : '留言成功,请等待平台工作人员回复',
                                type: 'success',
                            });
                        }
                        this.input1 = ""
                        this.resetToken();
                        this.getMessage()
                    }).catch(error => {
                        this.resetToken();
                        closeLoading();
                    });
                })
            }
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.getMessage(val)
        },
    }
}
</script>
<style scoped>
.box {
    margin-top: 10px;
    background: #fff;
    /* height: 500px; */
    padding: 20px 0;
}

.autoBox {
}

.leftBox {
    width: 70%;
    float: left;
}

.title {
    line-height: 50px;
    font-size: 28px;
    color: #666;
    font-weight: 700;
    text-align: center;
}

.detailTip {
    width: 84px;
    height: 24px;
    border-radius: 15px;
    background: #c9f1fb;
    display: inline-block;
    margin: 10px 10px;
    color: #666;
    text-align: center;
    line-height: 24px;
    font-size: 14px;
}

.time {
    margin: 10px 0;
    font-size: 16px;
    color: #666;
    line-height: 35px;
    height: 40px;
    border-bottom: 1px solid #000;
}

.rightBox {
    width: 28%;
    float: right;

}

.informationTitle {
    border-bottom: 1px solid #2C558A;
    padding: 0 0 10px 0;
    font-weight: 600;
    font-size: 20px;
    opacity: 0.9;
}

.informationTitleAfter {
    position: relative;
}

.infoList {
    margin: 10px 0;
    line-height: 25px;
    font-size: 15px;
    cursor: pointer;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

ul {
    list-style: inside disc;
}

.messageBox {
    margin: 50px 0;
}

.messageTitle {
    line-height: 30px;
    border-bottom: 1px solid #ccc;
}

.squireBox {
    width: 4px;
    height: 16px;
    background: #e2cc1e;
    display: inline-block;
    margin: 0 10px 0 0;
}

.titleSty {
    display: inline-block;
}

.loginPublished {
    width: 100%;
    margin-top: 50px;
}

.messInput {
    width: 85%;
    display: inline-block;
}

.messBtn {
    width: 15%;
    float: right;
    background: #0e4892;
    border-radius: unset;
    padding: 0 5px;
    height: 40px;
}

.subBox {
    width: 100%;
    height: 40px;
    background: #f5f5f5;
}

.messPhoto {
    width: 25px;
    height: 25px;
    box-sizing: border-box;
    float: left;
    margin-right: 10px;
}

.messUnit {
    width: 100%;
    color: #0e4891;
    font-size: 16px;
    display: inline-block;
}

.messContent {
    margin: 20px 0;
    line-height: 15px;
    color: #666;
}

.userName {
    float: left;
    line-height: 40px;
}

.messOutBox {
    border: 1px solid #DCDFE6;
    margin-top: 20px;
}

.setMessage {
    border-radius: unset
}

/deep/ .setMessage .el-textarea__inner {
    resize: none;
    border: none;
}

.articleContent {
    width: 100%;
    line-height: 40px;
}

/deep/ .articleContent p img {
    width: 100%;
}

.messagesList {
    border-bottom: 1px solid #ccc;
}

</style>