Article.vue

/* eslint-disable vue/no-duplicate-attributes */
<template>
  <div class="article" style="text-align: left; with: 100%; height: 100%">
    <!-- 左侧 -->
    <div class="leftclass">
      <el-card
        shadow="always"
        cellpadding="1px"
        style="position: static; line-height: 20px"
      >
        <div class="article_box">
          <h1>{{ slogan }}</h1>
          <ul v-for="(item, index) in md_title" :key="item" class="ul_style">
            <div
              v-bind:class="[
                { li_active: index === article_loc },
                li_errorClass,
              ]"
            >
              <li @click="getArticles(index)">{{ item }}</li>
            </div>
          </ul>
        </div>
        <!-- 分页 -->
        <div class="pagenation-block">
          <!-- <span class="demonstration">完整功能</span> -->
          <el-pagination
            :current-page="currentPage"
            :page-sizes="pageArray"
            background
            :page-count="pageCount"
            :page-size="pageSize"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </el-card>

      <!-- 评论 -->
      <el-card
        cellpadding="1px"
        shadow="always"
        style="position: static; margin-top: 2%"
      >
        <h1>{{ commmentSlogan }}</h1>
        <ArticleComment
          v-bind:articleId="postcomment.articleId"
          ref="commentRef"
        >
        </ArticleComment>
      </el-card>

      <!-- 挑战榜 -->
      <el-card
        class="challenge_title1"
        cellpadding="1px"
        shadow="always"
        style="position: static; margin-top: 2%"
      >
        <h1>{{ day_challenge }}</h1>
        <ul
          v-for="(item, index) in challengeConfig"
          :key="index"
          class="ul_style"
        >
          <div
            v-bind:class="[
              { li_active: index === challenge_loc },
              li_errorClass,
            ]"
          >
            <li @click="clickChallengeEvent(item,index)">{{ item.title }}</li>
          </div>
        </ul>
      </el-card>

      <!-- 爬虫天气接口 -->
      <el-card
        class="weather_class1"
        cellpadding="1px"
        shadow="always"
        style="position: static; margin-top: 2%;text-align: center"
      >
        <span style="line-height: 30px;" class="uni-font">未来天气</span>
        <div style="positon: relative; width: 100%; height: 100%">
          <EchartWeather> </EchartWeather>
        </div>
      </el-card>

      <!-- csdn头像 -->
      <el-card
        class="user_img1"
        style="
          position: static;
          margin: 2% auto auto auto;
          line-height: 10px;
          text-align: center;
        "
        >
        <span style="line-height: 30px;" class="uni-font">小程序</span>
          <img class="image" src="https://yongma16.xyz/staticFile/common/logo/wxProgram.jpg"
        />
      </el-card>

      <el-card
        class="user_img1"
        style="
          position: static;
          margin: 2% auto auto auto;
          line-height: 10px;
          text-align: center;
        "
        >
        <span style="line-height: 30px;" class="uni-font">点击图片前往csdn</span>
        <a href="https://blog.csdn.net/qq_38870145">
          <img class="image" src="@/assets/img/csdn.jpg"
        /></a>
      </el-card>
    </div>
    <!-- 中间 markdown-->
    <div class="midclass" ref="mark-down-ref">
      <a name="home" id="homeTitleId" style="transition: 1s"></a>
      <el-card shadow="hover" style="line-height: 10px">
        <div class="block" style="line-height: 20px">
          <h1>{{ the_title }}</h1>
          <div class="markdown-body" style="text-align: left">
            <VueMarkdown
              :source="md_data[index_page]"
              v-highlight
              style="width: 100%; text-align: left"
            ></VueMarkdown>
          </div>
        </div>
      </el-card>

      <div class="commitCard">
        <!--  -->
      </div>
      <!-- 挑战榜 -->
      <el-card
        class="challenge_title2"
        cellpadding="1px"
        shadow="always"
        style="position: static; margin-top: 2%"
      >
        <h1>{{ day_challenge }}</h1>
        <ul
          v-for="(item, index) in challengeConfig"
          :key="index"
          class="ul_style"
        >
          <div
            v-bind:class="[
              { li_active: index === challenge_loc },
              li_errorClass,
            ]"
          >
            <li @click="clickChallengeEvent(item,index)">{{ item.title }}</li>
          </div>
        </ul>
      </el-card>

      <!-- 爬虫天气接口 -->
      <!-- <el-card class="weather_class2"
          cellpadding="1px"
          shadow="always"
          style="position: myblog_static; margin-top: 2%"
        >

        </el-card> -->
      <el-card
        class="user_img2"
        style="
          position: static;
          margin: 2% auto auto auto;
          line-height: 10px;
          text-align: center;
        "
      > <span style="line-height: 30px;" class="uni-font">小程序</span>
        <img class="image" src="https://yongma16.xyz/staticFile/common/logo/wxProgram.jpg"
        />
      </el-card>
      <!-- csdn头像 -->
      <el-card
        class="user_img2"
        style="
          position: static;
          margin: 2% auto auto auto;
          line-height: 10px;
          text-align: center;
        "
        >
        <span style="line-height: 30px;" class="uni-font">点击图片前往csdn</span>
        <a href="https://blog.csdn.net/qq_38870145">
          <img class="image" src="@/assets/img/csdn.jpg"
        /></a>
      </el-card>

    </div>
    <!-- 上滑滚动图标 -->
    <div class="rightclass">
      <div class="righticon">
        <el-card
          shadow="never"
          style="
            align-content: center;
            background-color: rgba(0, 0, 0, 0);
            border: rgba(0, 0, 0, 0);
          "
        >
          <div v-if="topShow">
            <el-button
              @click="toTop"
              type="info"
              icon="el-icon-top"
              style="
                transition: 1s;
                background: rgb(255, 94, 0);
                border: none;
                color: #fff;
              "
              circle
            ></el-button>
          </div>
          <br /><br />
          <div>
            <el-button
              type="info"
              icon="el-icon-message"
              circle
              @click="openDraw"
              style="background: rgb(255, 94, 0); border: none"
            >
            </el-button>
          </div>
          <br /><br />
        </el-card>
      </div>
    </div>
    <template>
        <Email :drawObj="drawObj"></Email>
    </template>
  </div>
</template>

<script>
import Email from '@/components/email/Email'
import VueMarkdown from 'vue-markdown'
import ArticleComment from '@/comment/ArticleComment'
import EchartWeather from '@/weather/EchartWeather'
export default {
    components: {
        VueMarkdown, // 显示markdown的组件
        ArticleComment, // 子组件评论
        EchartWeather, // 天气
        Email
    },
    name: 'Article',
    data () {
        return {
            pageCount: 3,
            msgDrawTitle: '~邮件沟通~',
            direction: 'rtl',
            drawObj: {
                show: false
            },
            // baseurl: '/api/',
            baseurl: '/api/',
            // baseurl: "http://yongma16.xyz/",
            msg: '内容',
            commmentSlogan: '评论区',
            day_challenge: '训练营',
            challengeConfig: [
                {
                    title: 'css挑战',
                    order: 1,
                    isJumpPath: true,
                    isJumpUrl: false,
                    path: '/css'
                },
                {
                    title: 'websocket聊天',
                    order: 2,
                    isJumpPath: true,
                    isJumpUrl: false,
                    path: '/onlinewebsocket'
                },
                {
                    title: 'echarts地图配置',
                    order: 3,
                    isJumpPath: true,
                    isJumpUrl: false,
                    path: '/home'
                },
                {
                    title: 'vue3测试平台',
                    order: 4,
                    isJumpPath: false,
                    isJumpUrl: true,
                    url: 'http://yongma16.xyz/emoji_api/',
                    path: ''
                },
                {
                    title: '数据可视化平台',
                    order: 5,
                    isJumpPath: false,
                    isJumpUrl: true,
                    url: 'https://yongma16.xyz/fund-web',
                    path: ''
                },
                {
                    title: '更新中',
                    order: 6,
                    isJumpPath: false,
                    isJumpUrl: false,
                    path: ''
                }
            ],
            md_data: [],
            md_title: [],
            the_title: '',
            sear_page: 0,
            index_page: 0,
            data: ['threejs加载模型'],
            slogan: '记忆碎片',
            tabPosition: 'left',
            weather_title: [],
            weather_high: [],
            weather_low: [],
            toTopIsShow: false,
            article_loc: 0,
            challenge_loc: -1,
            topShow: false,
            userImg: '',
            username: '匿名',
            articleCommit: '评论区',
            // 分页实现 page1 page2 指向数组
            pageAnalys: {},
            currentPage: 1,
            splitLength: 6, // 划分条数
            total: 0,
            pageSize: 4,
            pageArray: [6, 8, 10],
            postcomment: {
                articleId: undefined,
                articleCommit: null
            },
            articleId: [] // 文章的id
        }
    },
    watch: {
        topShow: {
            handler (newValue) {
                if (newValue) {
                    console.warn(newValue)
                }
            },
            immediate: true
        }
    },
    beforeDestroy () {
        // window.removeEventListener('onload', this.topVisible())
        this.articleScrollListen('remove')
    },
    mounted () {
        this.articleScrollListen('add')
        this.initPageSpliteFun()
        // window.addEventListener('onload', this.topVisible())
    },
    methods: {
        /**
       * dom的滚动事件监听
       */
        articleScrollListen (key) {
            const dom = this.$refs['mark-down-ref']
            const that = this
            if (dom && key === 'add') {
                dom.addEventListener('scroll', function (e) {
                    that.topShow = Math.ceil(e.target.scrollTop) !== 0
                })
            } else if (dom && key === 'remove') {
                dom.removeEventListener('scroll', function (e) {
                    that.topShow = e.target.scrollTop === 0
                })
            }
        },
        initPageSpliteFun () {
            this.splitLength = this.pageArray[0]
        },
        handleSizeChange (val) {
            // 转到第一页md_title
            let that = this
            that.pageAnalysFun(that.pageAnalys.allTitle, val) // 触发修改
        },
        handleCurrentChange (val) {
            let that = this
            // 触发md_title的修改
            that.currentPage = val
            that.pageAnalysFun(that.pageAnalys.allTitle) // 触发修改
        },
        pageAnalysFun (allTitleArray, selectListLength) {
            let that = this
            that.total = allTitleArray.length // 总数
            let splitLength = that.splitLength
            if (selectListLength) {
                this.currentPage = 1
                that.splitLength = selectListLength // 划分长度
            }
            splitLength = that.splitLength
            let splitNum = Math.ceil(that.total / splitLength) // 向上取整
            that.pageAnalys.childNum = splitNum // 子数组个数
            that.pageAnalys.allTitle = allTitleArray // 所有标题
            that.pageAnalys.titleArray = [] // 子数组个数
            let locSplit = 0
            let locLength = splitLength // 每一页的条数
            while (splitNum--) {
                // 循环获取子数组
                if (splitNum >= 1) {
                    let childArray = []
                    for (
                        let temp = locSplit;
                        temp < locLength && temp < that.total;
                        ++temp, ++locSplit
                    ) {
                        childArray.push(that.pageAnalys.allTitle[temp])
                    }
                    that.pageAnalys.titleArray.push(childArray)
                    locLength += splitLength // 分割数组长度后移
                } else {
                    // 最后一个数组
                    let childArray = []
                    for (let temp = locSplit; temp < that.total; ++temp) {
                        childArray.push(that.pageAnalys.allTitle[temp])
                    }
                    that.pageAnalys.titleArray.push(childArray)
                    break
                }
            }
            try {
                that.md_title = that.pageAnalys.titleArray[this.currentPage - 1]
            } catch (e) {
                throw Error(e)
            }
        },
        increment: function () {
            this.$store.commit('increment')
        },
        topVisible: function () {
            // let dom = document.getElementById('homeTitleId')
            // this.topShow = this.elementIsVisibleInViewport(dom)
            // setTimeout(this.topVisible)
        },
        elementIsVisibleInViewport: function (el, partiallyVisible = false) {
            try {
                if (el && el.getBoundingClientRect instanceof Function) {
                    const { top, left, bottom, right } = el.getBoundingClientRect()
                    return partiallyVisible
                        ? ((top > 0 && top < innerHeight) ||
                (bottom > 0 && bottom < innerHeight)) &&
                ((left > 0 && left < innerWidth) ||
                  (right > 0 && right < innerWidth))
                        : top >= 0 &&
                left >= 0 &&
                bottom <= innerHeight &&
                right <= innerWidth
                }
            } catch (r) {
                throw Error(r)
            }
        },
        li_errorClass: function () {},
        clickChallengeEvent: function (item, index) {
            this.challenge_loc = index
            if (item.isJumpPath) {
                this.$router
                    .push({
                        path: item.path
                    })
                    .catch((error) => {
                        throw Error(error)
                    })
            } else if (item.isJumpUrl) {
                window.open(item.url)
            }
        },
        open_message: function () {
            // this.$notify({
            //     title: '欢迎合作',
            //     message: '邮箱：1432448610@qq.com',
            //     position: 'bottom-right'
            // })
        },
        openDraw () {
            this.drawObj.show = true
        },

        toTop: function () {
            const dom = this.$refs['mark-down-ref']
            if (!dom) {
                return 0
            }
            const speedValue = Math.floor(dom.scrollTop / 20)
            const second = 20
            const diffTop = function (speed, time) {
                let top = Math.ceil(dom.scrollTop)
                if (top > 0) {
                    dom.scrollTop = top - speed > 0 ? top - speed : 0
                }
                if (dom.scrollTop > 0) {
                    setTimeout(() => {
                        return diffTop(speed, time)
                    }, 10)
                }
            }
            diffTop(speedValue, second)
            if (document.getElementById('mainappid') && document.getElementById('mainappid').scrollTop > 0) {
                document.getElementById('mainappid').scrollTop = 0
            }
        }, // 返回天气相当于返回顶部
        getCommentsFromArticle (id) {
            this.$refs.commentRef.getComments(id) // 触发子组件的方法
        },
        getArticles: function (page) {
            let that = this // this指向转化
            that.article_loc = page
            // 查找文章id 从1开始
            that.postcomment.articleId =
        that.articleId[
            parseInt(page + (that.currentPage - 1) * that.splitLength)
        ]
            // 提交数据 page从0开始
            that.$axios
                .post(that.baseurl + 'article/index/', {
                    value: page + (that.currentPage - 1) * that.splitLength
                    // 传入索引
                })
                .then((res) => {
                    if (res.data.code === 1) {
                        let respdata = res.data
                        let content = respdata.article
                        that.md_data = [] // 清空
                        content.map((o) => {
                            that.md_data.push(o) // 传入一个文章
                        })
                        that.the_title = respdata.the_title
                    } else if (res.data.code === 0) {
                        // alter("失败！")
                        that.$message.error('失败')
                    }
                })
                .catch((error) => {
                    throw Error(error)
                })
            that.getCommentsFromArticle(that.postcomment.articleId)
        }
    },
    created: function () {
    // 初始化
        let that = this
        that.$axios
            .get(that.baseurl + 'article/index/')
            .then((res) => {
                let resdata = res.data
                let content = resdata.article // 传递过来的文章 进行处理
                let title = resdata.title
                that.articleId = resdata.articleObjectId
                that.postcomment.articleId = resdata.articleId
                this.$refs.commentRef.getComments(that.postcomment.articleId) // 触发子组件的方法
                content.map((o) => {
                    that.md_data.push(o)
                })
                let titleAllArray = title.map((o) => {
                    return o
                })
                that.the_title = resdata.the_title
                this.pageAnalysFun(titleAllArray) // 分页
            })
            .catch((r) => {
                throw Error(r)
            }) // get log
    }
}
</script>

<style scoped>
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
  background-image: linear-gradient(90deg, #f0ddd2, #aa8c79);
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #b0b3b6;
  background-image: linear-gradient(90deg, #f0ddd2, #aa8c79);
}

.text {
  /* align-content: center; */
  display: flex;
  margin: 0 auto;
  font-size: 14px;
}

.item {
  display: inline-block;
  /* margin: 0 auto; */
  width: 900px;
}

.box-card {
  align-self: center;
  align-content: center;
  display: inline-block;
  width: 80%;
  /* padding-left:25%; */
  margin: 0 auto;
  /* opacity: 0.95; */
  margin-top: 0px;
  background-color: #ffffff;
}

.box-cardtext {
  align-self: center;
  align-content: center;
  display: inline-block;
  width: 20%;
  /* padding-left:25%; */
  margin: 0 auto;
  opacity: 0.9;
  margin-top: 80px;
  background-color: #ffffff;
}

.article {
  opacity: 1;
  /* background-color: aliceblue; */
  align-content: inherit;
  display: flex;
  margin: 5px;
  padding: 5px;
}

/* 取消滚动并且隐藏 */
el-col::-webkit-scrollbar {
  display: none;
}

.leftclass {
  position: relative;
  width: 30%;
  height: 100%;
  overflow: auto;
  margin: 5px;
}

.leftclass::-webkit-scrollbar {
  display: none;
}

.midclass {
  position: relative;
  width: 65%;
  height: 100%;
  overflow: auto;
  margin: 5px;
  /* scrollbar-face-color: coral; */

  /* scrollbar-track-color: darkslategrey; */
}
.pagenation-block{
  overflow: auto;
}
.midclass::-webkit-scrollbar {
  width: 10px;
  /* height:5px; */
  /* display: none; */
}
.midclass::-webkit-scrollbar-track {
  background: rgba(226, 247, 255, 0.5);
  border-radius: 2px;
  /* display: none; */
}
.midclass::-webkit-scrollbar-track-piece {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  /* display: none; */
}

.uni-font{
  color: #ff995e;
  font-weight: bolder;
}
.midclass::-webkit-scrollbar-thumb {
  background: #ff995e;
  height: 2px;
  border-radius: 2px;
  /* display: none; */
}
/* 评论区 */
.commitCard {
  position: relative;
  width: 100%;
  height: 80px;
  margin-top: 10px;
  justify-content: center;
  align-content: center;
  align-items: center;
  flex-wrap: wrap;
  flex-direction: row;
  margin-left: 0;
  margin-right: 0;
}

.rightclass {
  position: relative;
  width: 5%;
  height: 100%;
  overflow: hidden;
}

.rightclass::-webkit-scrollbar {
  display: none;
}

.righticon {
  position: relative;
  width: 100%;
  height: 100%;
  top: 70%;
}

.image {
  width: 100%;
  display: block;
}

.li_active li {
  color: rgb(255, 94, 0);
}

li:active {
  color: rgb(245, 182, 10);
}

li:link {
  color: rgb(255, 94, 0);
}

li:visited {
  color: gold;
}

li:hover {
  color: rgb(255, 72, 0);
  cursor: pointer;
}

h1 {
  color: rgb(255, 102, 0);
  text-align: center;
}

h1:hover {
  font-weight: bolder;
  color: rgb(255, 72, 0);
  /* color: gold; */
  cursor: pointer;
}

.article_box {
  position: relative;
  width: 100%;
  height: 100%;
}

.ul_style {
  position: relative;
  width: 100%;
  height: 100%;
}

.weather_class2 {
  display: none;
}

.user_img2 {
  display: none;
}

.challenge_title2 {
  display: none;
}

.weather_class1 {
  display: block;
}

.user_img1 {
  display: block;
}

.challenge_title1 {
  display: block;
}

@media screen and (max-width: 450px) {
  .article {
    display: inline-block;
    max-width: 350px;
  }

  .leftclass {
    width: 100%;
    height: 50%;
    max-width: 350px;
  }

  .midclass {
    width: 100%;
    max-width: 350px;
  }

  .rightclass {
    width: 80px;
    position: fixed;
    float: right;
    bottom: 20px;
    right: -10px;
  }

  .weather_class2 {
    display: block;
  }

  .user_img2 {
    display: block;
  }

  .challenge_title2 {
    display: block;
  }

  .weather_class1 {
    display: none;
  }

  .user_img1 {
    display: none;
  }

  .challenge_title1 {
    display: none;
  }
}
</style>