share_h5/pages/articles.vue

<template>
  <view class="article" v-if="articleMsg">
    <!-- <navbar :config="config"></navbar> -->
    <view class="title">
      {{ articleMsg.title }}
    </view>
    <view class="image-time">
      <image src="@/static/alipay.png" mode=""></image>
      <view class="time">
        {{ articleMsg.update_time }}
      </view>
    </view>
    <view class="text">
      <view class="item" v-if="articleMsg.article_type == 0">
        <jyf-parser
          :html="$mUtil.formatRichText(articleMsg.content)"
          ref="article"
        ></jyf-parser>
      </view>
      <view class="item" v-if="articleMsg.article_type == 1">
        <video :src="articleMsg.video_url" style="width: 100%"></video>
      </view>
      <view class="option">
        <view class="good">
          <image src="@/static/good.png" mode=""></image>
          <view class="num">
            {{ articleMsg.init_like_num }}
          </view>
        </view>
        <view class="message">
          <image src="@/static/message.png" mode=""></image>
          <view class="num">
            {{ articleMsg.comment_sum }}
          </view>
        </view>
        <view class="link">
          <image src="@/static/link.png" mode=""></image>
          <view class="num">
            {{ articleMsg.init_share_num }}
          </view>
        </view>
      </view>
    </view>

    <view class="bottom-btn u-bg-fff">
      <view class="pt-pb30 u-plr30 u-flex-center-sb">
        <view class="u-flex-center">
           <button class="buy-btn u-DCCDA4 u-font30" @click="open(0)">
            查看更多
          </button> <button class="buy-btn u-DCCDA4 u-font30" @click="open(1)">
           下载App
          </button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      config: {
        back: true, //false是tolbar页面 是则不写
        title: "文章详情",
        color: "#fff",
        switchnextstep: true, //切换底部样式
        //背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
        backgroundColor: [1, "#00321E"],
        statusBarFontColor: "#ffffff",
      },
      articleMsg: null,
    };
  },
    props: {
    options: {
      type: Object,
      default: null,
    },
  },
  watch: {
    options(n) {
      this.options = n;
    },
  },
  created() {
    this.getActicle(this.options.id);
  },
  methods: {
    open(number) {
       if(number==0){
        window.location.href = "lida://&pageType=2&type=" + this.type + "&id=" +  this.articleMsg.id+"&shareId="+this.options.shareId;
     
  // "lida://
       }else{
    
       uni.navigateTo({
       	url:"/pages/down"
       })
    
       }
    },

    getActicle(id) {
      this.$http.get("/bbs/article/info/" + id).then((res) => {
        if (res && res.code == 200) {
          this.articleMsg = res.data;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.bottom-btn .buy-btn{
width: 340px;
    height: 42px;
    line-height: 42px;
    background: #00321e;
    border-radius: 21px;
}
.show-bottom {
  background-color: #ffffff;
  border-radius: 50rpx 50rpx 0 0;
  padding: 37rpx 30rpx 22rpx 30rpx;
  .input {
    .texterea-item {
      background-color: #fafafa;
      padding: 22rpx 20rpx;
      border-radius: 21rpx;
      margin: 22rpx 29rpx 4rpx 30rpx;
    }
  }

  .top {
    display: flex;
    align-items: center;

    .line {
      width: 6rpx;
      height: 26rpx;
      background-color: #00321e;
      border-radius: 3rpx;
    }

    .item {
      font-size: 36rpx;
      color: #1a1a1a;
      font-weight: 700;
      margin-left: 14rpx;
      flex: 1;
    }

    .deter-mine {
      font-size: 30rpx;
      font-weight: 500;
      color: #1a1a1a;
    }
  }
}
.selected {
  padding: 0 32rpx;
  .item {
    display: flex;
    margin-top: 30rpx;
    // align-items: center;
    .personal {
      margin-left: 18rpx;
      .top-title {
        font-size: 28rpx;
        font-weight: 400;
        color: #1a1a1a;
      }
      .time {
        font-size: 24rpx;
        color: #999999;
        margin-top: 8rpx;
        font-weight: 500;
      }
      .content {
        margin-top: 14rpx;
        font-size: 28rpx;
        font-weight: 500;
        color: #999999;
      }
    }
    image {
      width: 84rpx;
      height: 84rpx;
    }
  }
  .item:nth-child(odd) {
    .content {
      margin-top: 14rpx;
      font-size: 28rpx;
      font-weight: 500;
      color: #999999;
    }
  }
  .item:nth-child(even) {
    .content {
      margin-top: 14rpx;
      font-size: 28rpx;
      font-weight: 500;
      color: #1a1a1a;
    }
  }
  .stay-msg {
    margin-top: 28rpx;
    font-size: 36rpx;
    font-weight: 700;
    color: #1a1a1a;
  }
}
.option {
  display: flex;
  .link {
    display: flex;
    align-items: center;
    margin-left: 44rpx;
    image {
      width: 38rpx;
      height: 38rpx;
    }
    .num {
      margin-left: 10rpx;
      font-size: 24rpx;
      font-weight: 500;
      color: #999999;
    }
  }
  .message {
    display: flex;
    align-items: center;
    margin-left: 44rpx;
    image {
      width: 38rpx;
      height: 38rpx;
    }
    .num {
      margin-left: 10rpx;
      font-size: 24rpx;
      font-weight: 500;
      color: #999999;
    }
  }
  .good {
    display: flex;
    align-items: center;
    image {
      width: 38rpx;
      height: 38rpx;
    }
    .num {
      margin-left: 18rpx;
      font-size: 24rpx;
      font-weight: 500;
      color: #999999;
    }
  }
}
.text {
  padding: 18rpx 30rpx 40rpx 30rpx;
  color: #666666;
  font-weight: 500;
  line-height: 48rpx;
  border-bottom: 10rpx solid #f5f5f5;
  .item {
    margin-bottom: 30rpx;
  }
  image {
    width: 690rpx;
    height: 390rpx;
    // margin-bottom: 30rpx;
  }
}
.image-time {
  display: flex;
  align-items: center;
  margin-left: 30rpx;
  image {
    width: 24rpx;
    height: 24rpx;
  }
  .time {
    margin-left: 10rpx;
    font-size: 24rpx;
    font-weight: 400;
    color: #999999;
  }
}
.title {
  padding: 48rpx 30rpx 16rpx 30rpx;
  font-size: 42rpx;
  font-weight: 700;
  color: #1a1a1a;
}
</style>