版本更新

zengh

2021-08-27 532faa49707dd6ee6c9843f39ec3d921cb17bf42

 pages/article/article_detail.vue

@@ -5,94 +5,98 @@
      </view>
      <view class="banner-title">{{article.title}}</view>
      <view class="article-meta">
			

         <view class="article-author">{{article.sourceName}}</view>
         <text class="article-text">发表于</text>
         <text class="article-time">{{article.createTime}}</text>
      </view>
		
		


      <view class="article-content">
         <!-- <video id="myVideo" class="video" v-if="video" :src="article.videoUrl" muted="false" @error="videoErrorCallback"></video> -->
         <u-parse :content="content" @navigate="navigate"></u-parse>
      </view>
		

   </view>
</template>

<script>
   import uParse from "@/components/feng-parse/parse.vue"
	

   export default {
         components:{
              uParse
          },
           data() {
               return {
               content:"",
               article:{},
               video:false,
               pathUrl:this.$store.state.piAPI + "",
            }
           },
           onLoad(event) {
            var that = this;
               this.article = JSON.parse(decodeURIComponent(event.detailData));
            //获取资讯详信息
            uni.request({
               url: that.pathUrl+'/article/article/detail?id='+this.article.id,
               method:'GET',
               success: (res) => {
                  that.article = res.data.data;
                  that.content = that.article.content;
                  if(that.article.videoUrl){
                     that.video = true;
                  }
                  console.log(that.article,121);
                  console.log(that.article.videoUrl,123);
                  //详情标题
                  uni.setNavigationBarTitle({
                      title: that.article.title
                  });
      components: {
         uParse
      },
      data() {
         return {
            content: "",
            article: {},
            video: false,
            pathUrl: this.$store.state.piAPI + "",
         }
      },
      onLoad(event) {
         var that = this;
         this.article = JSON.parse(decodeURIComponent(event.detailData));
         //获取资讯详信息
         uni.request({
            url: that.pathUrl + '/article/article/detail?id=' + this.article.id,
            method: 'GET',
            success: (res) => {
               that.article = res.data.data;
               if (that.article.createTime != null) {
                  that.article.createTime = that.article.createTime.substring(0, 11);
               }
            });
				
           },
         //创建视频
         onReady: function () {
            this.videoContext = uni.createVideoContext("myVideo");
               that.content = that.article.content;
               if (that.article.videoUrl) {
                  that.video = true;
                  that.content = '<video src="' + that.article.videoUrl + '"></video>';
               }
               //详情标题
               uni.setNavigationBarTitle({
                  title: that.article.title
               });
            }
         });

      },
      //创建视频
      onReady: function() {
         this.videoContext = uni.createVideoContext("myVideo");
      },
      methods: {
         videoErrorCallback: function(e) {
            console.log(e)
         },
           methods: {
            videoErrorCallback: function(e) {
                        console.log(e)
                     },
           }
       }
      }
   }
</script>

<style lang="scss" scoped>
    .banner {
           height: 360upx;
           overflow: hidden;
           position: relative;
           background-color: #ccc;
       }
       .banner-img {
           width: 100%;
       }
       .banner-title {
         position: relative;
         left: 20rpx;
           max-height: 84upx;
           overflow: hidden;
           width: 90%;
           color: #000000;
           font-weight: 400;
           line-height: 42upx;
           z-index: 11;
       }
		
   .article-meta{
   .banner {
      height: 360upx;
      overflow: hidden;
      position: relative;
      background-color: #ccc;
   }

   .banner-img {
      width: 100%;
   }

   .banner-title {
      position: relative;
      left: 20rpx;
      max-height: 84upx;
      overflow: hidden;
      width: 90%;
      color: #000000;
      font-weight: 400;
      line-height: 42upx;
      z-index: 11;
   }

   .article-meta {
      // background-color: #007AFF;
      width: 100%;
      height: 80rpx;
@@ -105,32 +109,32 @@
      left: 20rpx;
      // justify-content: center;
      // font-weight: 550;
		
		
      .article-author{


      .article-author {
         letter-spacing: 1px;
         float: left;
      }
		
      .article-text{

      .article-text {
         position: relative;
         left: 15px;
      }
		
      .article-time{

      .article-time {
         position: relative;
         left: 30px;
      }
   }
	
   .article-content{

   .article-content {
      position: relative;
      left: 3%;
      bottom: 2%;
      width: 94%;
      margin-bottom: 20px;
      // border-bottom: 1px solid rgba(128,128,128,0.1);
		

      // .video{
      //    width: 100%;
      // }