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="block">
          <!-- <span class="demonstration">完整功能</span> -->
          <el-pagination
            :current-page="currentPage"
            :page-sizes="pageArray"
            :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 challenge_data"
          :key="item"
          class="ul_style"
        >
          <div
            v-bind:class="[
              { li_active: index == challenge_loc },
              li_errorClass,
            ]"
          >
            <li @click="cssPage(index)">{{ item }}</li>
          </div>
        </ul>
      </el-card>

      <!-- 爬虫天气接口 -->
      <el-card
        class="weather_class1"
        cellpadding="1px"
        shadow="always"
        style="position: static; margin-top: 2%"
      >
        <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;
        "
        ><a href="https://blog.csdn.net/qq_38870145">
          <img class="image" src="@/assets/img/csdn.jpg"
        /></a>
      </el-card>
    </div>
    <!-- 中间 markdown-->
    <div class="midclass">
      <a name="home" id="hometitle" 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 challenge_data"
          :key="item"
          class="ul_style"
        >
          <div
            v-bind:class="[
              { li_active: index == challenge_loc },
              li_errorClass,
            ]"
          >
            <li @click="cssPage(index)">{{ item }}</li>
          </div>
        </ul>
      </el-card>

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

        </el-card> -->
      <!-- csdn头像 -->
      <el-card
        class="user_img2"
        style="
          position: static;
          margin: 2% auto auto auto;
          line-height: 10px;
          text-align: center;
        "
        ><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 id="topiconid">
            <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="open_message"
              style="background: rgb(255, 94, 0); border: none"
            >
            </el-button>
          </div>
          <br /><br />
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
import VueMarkdown from 'vue-markdown'
import ArticleComment from '@/comment/ArticleComment'
import EchartWeather from '@/weather/EchartWeather'
import axios from 'axios'
export default {
  components: {
    VueMarkdown, // 显示markdown的组件
    ArticleComment, // 子组件评论
    EchartWeather // 天气
  },
  name: 'Article',
  data () {
    return {
      // baseurl: '/api/',
      baseurl: '/api/',
      // baseurl: "http://yongma16.xyz/",
      msg: '内容',
      commmentSlogan: '评论区',
      day_challenge: '训练营',
      challenge_data: [
        'css挑战',
        'websocket聊天',
        'echarts地图配置',
        'vue3测试平台',
        '更新中'
      ],
      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: function (newvalue, oldvalue) {
      if (newvalue === true) {
        document.getElementById('topiconid').style.display = 'none'
      } else {
        document.getElementById('topiconid').style.display = 'block'
      }
    }
  },
  beforeDestroy () {
    window.removeEventListener('onload', this.topvisible())
  },
  mounted () {
    this.initPageSpliteFun()
    window.addEventListener('onload', this.topvisible())
  },
  methods: {
    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) {
        that.splitLength = that.splitLength
      } else {
        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 = new Array() // 子数组个数
      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('hometitle')
      this.topshow = this.elementIsVisibleInViewport(dom)
      setTimeout(this.topvisible)
    },
    elementIsVisibleInViewport: function (el, partiallyVisible = false) {
      try {
        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 () {},
    cssPage: function (index) {
      this.challenge_loc = index
      let name = this.challenge_data[index]
      switch (name) {
        case 'css挑战':
          this.$router
            .push({
              path: '/css'
            })
            .catch((error) => {
              throw Error(error)
            })
          break
        case 'echarts地图配置':
          this.$router
            .push({
              path: '/home'
            })
            .catch((error) => {
              throw Error(error)
            })
          break
        case 'websocket聊天':
          this.$router
            .push({
              path: '/onlinewebsocket'
            })
            .catch((error) => {
              throw Error(error)
            })
          break
        case 'vue3测试平台':
          window.open('http://yongma16.xyz/emoji_api/')
          break
        default:
          break
      }
    },
    open_message: function () {
      this.$notify({
        title: '欢迎合作',
        message: '邮箱：1432448610@qq.com',
        position: 'bottom-right'
      })
    },
    toTop: function () {
      location.href = '#home' // 定位
      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开始
      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
    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; */
}

.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; */
}
.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>