kailin_mp/pages/article/detail.vue

<template>
  <view>
    <view class="article_title">{{ articleInfo.title }}</view>
    <view class="article_time">{{ articleInfo.insert_time }}</view>
    <view class="rich_text">
      <rich-text :nodes="articleInfo.content"></rich-text>
    </view>
    <view class="article_poster" v-if="articleInfo.poster">
      <image class="poster_img" show-menu-by-longpress @click="navigatoPage()" :src="articleInfo.poster" mode="widthFix"></image>
    </view>
    <view class="read_total">阅读：{{ articleInfo.read_count }}</view>
    <view>&nbsp;</view>
    <view class="handle_box">
      <view class="click_box" @click.stop="updateEvent(2)">
        <uni-icons :type="articleInfo.is_hand ? 'hand-up-filled' : 'hand-up'" :color="articleInfo.is_hand ? '#F89C33' : '#333333'" size="20"></uni-icons>
        <text>{{ articleInfo.hand_count }}</text>
      </view>
      <button class="click_box" open-type="share">
        <uni-icons type="upload" size="20"></uni-icons>
        <text>{{ articleInfo.share_count }}</text>
      </button>
      <view class="click_box" @click.stop="updateEvent(4)">
        <uni-icons :type="articleInfo.is_like ? 'heart-filled' : 'heart'" :color="articleInfo.is_like ? '#F89C33' : '#333333'" size="20"></uni-icons>
        <text>{{ articleInfo.like_count }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      articleInfo: {
        id: 0,
        title: '',
        poster: '',
        content: '',
        read_count: 0,
        hand_count: 0,
        like_count: 0,
        share_count: 0,
        is_hand: 0,
        is_like: 0,
        path: '',
        appid: '',
        insert_time: '',
      },
      // 请求参数
      requestParam: {
        id: 0,
      },
      isReqing: false,
    };
  },
  onLoad(param) {
    // 参数接收
    this.requestParam.id = param.id;
    // #ifdef MP-WEIXIN
    //分享按钮
    uni.showShareMenu({
      withShareTicket: true,
      menus: ['shareAppMessage', 'shareTimeline'],
    });
    // #endif
  },
  onShareAppMessage(obj) {
    this.updateEvent(3);
    return {
      title: `999智控终端平台\n${this.articleInfo.title}`,
      path: '/pages/article/detail?id=' + this.articleInfo.id,
      promise: new Promise((resolve, reject) => {
        this.$http.request('api/share_message/get_item', { item_id: this.articleInfo.id, pages: '/pages/article/detail' }).then((callback) => {
          console.log(callback, 'api/share_message/get_item');
          let obj = {
            title: callback.data?.title == '' ? `999智控终端平台\n${this.articleInfo.title}` : callback.data.title,
            path: '/pages/article/detail?id=' + this.articleInfo.id,
          };
          if (callback.data?.image_url !== '') {
            obj.imageUrl = callback.data.image_url;
          }
          resolve(obj);
        });
      }),
    };
  },
  onShow() {
    // 如果存在产品ID的话
    if (this.requestParam.id > 0) {
      // 请求详情
      this.$http.request('api/article/get_detail', this.requestParam).then((re) => {
        // 成功渲染数据
        if (re.code == 'success') {
          // 刷新数据
          this.articleInfo = re.data;
        } else {
          if (re.code != 'no_login') {
            uni.showModal({
              content: re.msg,
              showCancel: false,
            });
          }
        }
      });
    }
  },
  methods: {
    updateEvent(typeId) {
      if (this.isReqing) return;

      this.isReqing = true;
      // 如果存在产品ID的话
      if (this.articleInfo.id > 0) {
        // 请求详情
        this.$http.request('api/article/update_event', { type_id: typeId, article_id: this.articleInfo.id }).then((re) => {
          this.isReqing = false;
          // 成功渲染数据
          if (re.code == 'success') {
            // 如果是点赞
            if (typeId == 2) {
              this.articleInfo.is_hand ? (this.articleInfo.hand_count -= 1) : (this.articleInfo.hand_count += 1);
              this.articleInfo.is_hand = this.articleInfo.is_hand ? 0 : 1;
            }
            // 如果是点赞
            if (typeId == 3) {
              this.articleInfo.is_hand ? (this.articleInfo.share_count -= 1) : (this.articleInfo.share_count += 1);
            }
            // 如果是喜欢
            if (typeId == 4) {
              this.articleInfo.is_like ? (this.articleInfo.like_count -= 1) : (this.articleInfo.like_count += 1);
              this.articleInfo.is_like = this.articleInfo.is_like ? 0 : 1;
            }
          } else {
            if (re.code != 'no_login') {
              uni.showModal({
                content: re.msg,
                showCancel: false,
              });
            }
          }
        });
      }
    },
    navigatoPage() {
      // 没有跳转路径
      if (!this.articleInfo.path) return '';
      // 如果路径有http
      let url = this.articleInfo.path;

      console.log(url);

      // 判断是不是小程序链接
      if (url.includes('http')) {
        // 转码
        let link_url = encodeURIComponent(url);
        // 跳转到webview
        uni.redirectTo({
          url: `/pages/webview/index?link_url=${link_url}`,
        });
      } else {
        console.log(this.articleInfo.appid);
        // 是否有appid
        this.articleInfo.appid ? uni.navigateToMiniProgram({ appId: this.articleInfo.appid, path: url }) : uni.navigateTo({ url: url });
      }
    },
  },
};
</script>

<style lang="less">
.article_title {
  width: 700rpx;
  display: block;
  font-size: 36rpx;
  overflow: hidden;
  font-weight: bold;
  line-height: 60rpx;
  padding: 0rpx 25rpx;
  background-color: #ffffff;
}
.article_time {
  width: 700rpx;
  color: #999999;
  display: block;
  font-size: 26rpx;
  overflow: hidden;
  line-height: 40rpx;
  padding: 0rpx 25rpx;
  background-color: #ffffff;
}
.rich_text {
  width: 700rpx;
  display: block;
  overflow: hidden;
  font-size: 26rpx;
  margin: 0rpx auto;
  min-height: 50rpx;
  line-height: 50rpx;
  padding: 10rpx 25rpx;
  background-color: #ffffff;
  [alt] {
    //web_view图片
    max-width: 100%; // 避免图片超宽
    vertical-align: bottom; // 避免图片之间间隙
  }
}
.article_poster {
  width: 700rpx;
  display: block;
  overflow: hidden;
  margin: 6rpx auto;
  padding: 10rpx 25rpx;
  background-color: #ffffff;
  .poster_img {
    width: 700rpx;
    display: block;
  }
}
.read_total {
  width: 700rpx;
  color: #999999;
  display: block;
  font-size: 26rpx;
  overflow: hidden;
  line-height: 60rpx;
  padding: 0rpx 25rpx;
  margin-bottom: 122rpx;
  background-color: #ffffff;
}
.handle_box {
  left: 0rpx;
  width: 700rpx;
  height: 120rpx;
  display: block;
  position: fixed;
  overflow: hidden;
  padding: 20rpx 25rpx;
  background-color: #ffffff;
  bottom: var(--window-bottom);
  border-top: 2rpx solid #dddddd;
  .click_box {
    border: none;
    float: right;
    display: block;
    height: 120rpx;
    padding: 0rpx 0rpx;
    line-height: 120rpx;
    margin-right: 20rpx;
    font-size: 24rpx !important;
    background-color: transparent;
    .uni-icons {
      font-size: 36rpx !important;
    }
  }
  .click_box::after {
    border: none;
    background-color: transparent;
  }
}
</style>