sooka_consult_uniapp/pages/common/articleDetail/articleDetail.vue

<template>
  <view>
    <!-- pages/me.wxml -->
    <view class="container">
      <h1 class="title">{{ detailInfo.titleName }}</h1>
      <view class="wenzhangLy">
        <!-- 头像昵称 -->
        <view class="txTime">
<!--          <img-->
<!--              class="uni-header-image"-->
<!--              :src="initInfo.headImg == null || initInfo.headImg == '' ? initImgPath : loadImgSrcLocalhost(initInfo.headImg)"-->
<!--          />-->
          <view class="time">
<!--            <p>{{ initInfo.name == null || initInfo.name == '' ? initInfo.wechatName : initInfo.name }}</p>-->
            <span>{{ detailInfo.createTime }}</span>
          </view>
        </view>
      </view>
      <view class="wenzhangCont article">
                <span v-html="detailInfo.textDetails">
                </span>

        <view>
          <!-- 图片轮播 -->
          <swiper :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration"
                  :circular="circular">
            <block v-for="(one, index) in detailInfo.urls" :key="index">
              <swiper-item>
                <image :src="loadImgSrcLocalhost(one)" style="background-size: 100% 100%;"></image>
              </swiper-item>
            </block>
          </swiper>
        </view>
      </view>


    </view>
  </view>
</template>

<script>
import {
  getUserInfo
} from '@/api/me/me.js'

export default {
  data() {
    return {
      anwserVal: '',
      anwserList: [
        {
          deptName: '国家乡村振兴局',
          updateTime: '2023-2-27 16:04',
          desc: '用好政策效果评估成果，进一步优化巩固拓展脱贫攻坚成果同乡村振兴有效衔接政策供给，为推动工作提质增效提供有力支撑保障。',
        }
      ],
      isCollection: false,
      isAdopt: false,
      adoptTopSize: '115',
      adoptIndex: null,
      detailInfo: {},
      initInfo: {
        userId: null,
        scoreNum: 0,
        wechatName: "微信用户",
        name: null,
        headImg: null,
      },
    };
  },
  methods: {
    // 评论回答
    answerFunc() {
      this.anwserList.push({
        deptName: '国家烟草局',
        updateTime: new Date().getFullYear() + "-" + new Date().getMonth() + "-" + new Date().getDay() + " " + (new Date().getHours() < 10 ? "0" + new Date().getHours() : new Date().getHours()) + ':' + (new Date().getMinutes() < 10 ? "0" + new Date().getMinutes() : new Date().getMinutes()),
        desc: this.anwserVal,
      })
      this.anwserVal = null
    },
    adoptFunc(idx) {
      this.adoptIndex = idx
      this.isAdopt = true
    },
    // 标记喜欢
    collectionFunc() {
      this.isCollection = !this.isCollection
    },
    // 加工图片路径
    srcExcutedFunc(html) {
      let newReg = /(?<=(src="))[^"]*?(?=")/ig;
      let newHtml = html
      var allSrc = html.match(newReg);
      try {
        if (allSrc.length != 0) {
          allSrc.forEach(e => {
            newHtml = newHtml.replace(e, this.loadImgSrc(e))
          })
        }
      } catch (e) {
        //TODO handle the exception
      }

      return newHtml
    },
    getUserInfoByUserId(userId) {
      getUserInfo(userId).then(res => {
        this.initInfo = res.data;
      })
    },
  }
  /**
   * 生命周期函数--监听页面加载
   */,
  onLoad(option) {
	  let result = JSON.parse(decodeURIComponent(option.data))
	  this.detailInfo = result
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady(e) {
    this.userId = getApp().globalData.userId
    this.getUserInfoByUserId(this.userId)
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
  },
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {
  },
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {
  },
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {
  },
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
  },
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {
  },
};
</script>
<style lang="scss">
@import 'articleDetail.css';

.collect {
  .icon-shoucang:before {
    color: red;
  }
}

.not-collect {

}

.effectBix {
  width: 56px;
  height: 56px;
  border-radius: 50px;
  font-family: 'Bebas Neue', cursive;
  background: linear-gradient(45deg, transparent 5%, #FF013C 5%);
  border: 0;
  color: #fff;
  text-align: center;
  line-height: 56px;
  outline: transparent;
  position: absolute;
  transform: rotate(-30deg);
  right: 3%;
  top: -5%;
}

.effectBox, .effectBox::after {
  width: 56px;
  height: 56px;
  border-radius: 50px;
  font-size: 16px;
  font-family: 'Bebas Neue', cursive;
  background: linear-gradient(45deg, transparent 5%, #FF013C 5%);
  border: 0;
  color: #fff;
  opacity: 1;
  letter-spacing: 3px;
  text-align: center;
  line-height: 56px;
  outline: transparent;
  position: relative;
  left: 78%;
  top: 113%;
  transform: rotate(-30deg);
  z-index: 1;
}

.effectBox::after {
  --slice-0: inset(50% 50% 50% 50%);
  --slice-1: inset(80% -6px 0 0);
  --slice-2: inset(50% -6px 30% 0);
  --slice-3: inset(10% -6px 85% 0);
  --slice-4: inset(40% -6px 43% 0);
  --slice-5: inset(80% -6px 5% 0);

  content: 'AVAILABLE NOW';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, transparent 3%, #00E6F6 3%, #00E6F6 5%, #FF013C 5%);
  text-shadow: -3px -3px 0px #F8F005, 3px 3px 0px #00E6F6;
  clip-path: var(--slice-0);
}

.effectBox:hover::after {
  animation: 1s glitch;
  animation-timing-function: steps(2, end);
}

@keyframes glitch {
  0% {
    clip-path: var(--slice-1);
    transform: translate(-20px, -10px);
  }
  10% {
    clip-path: var(--slice-3);
    transform: translate(10px, 10px);
  }
  20% {
    clip-path: var(--slice-1);
    transform: translate(-10px, 10px);
  }
  30% {
    clip-path: var(--slice-3);
    transform: translate(0px, 5px);
  }
  40% {
    clip-path: var(--slice-2);
    transform: translate(-5px, 0px);
  }
  50% {
    clip-path: var(--slice-3);
    transform: translate(5px, 0px);
  }
  60% {
    clip-path: var(--slice-4);
    transform: translate(5px, 10px);
  }
  70% {
    clip-path: var(--slice-2);
    transform: translate(-10px, 10px);
  }
  80% {
    clip-path: var(--slice-5);
    transform: translate(20px, -10px);
  }
  90% {
    clip-path: var(--slice-1);
    transform: translate(-10px, 0px);
  }
  100% {
    clip-path: var(--slice-1);
    transform: translate(0);
  }
}

</style>