yicangzongtai_app_240321/pages/research/business/article.vue

<template>
  <view class="article">

    <navbar :config="config">
      <!-- <view
			slot="left"
			>
			<view class="slotBox">
				
				<view class="hxicon back" @click="iconBtn">
					&#xe679;
				</view>
			</view>
			</view> -->
    </navbar>

    <view class="title">
      {{ articleMsg.title }}
    </view>
    <view class="image-time">
      <!-- <image src="../../../static/alipay.png" mode=""></image> -->
      <view class="iconfont u-font24 linge">&#xe64a;</view>

      <view class="time" v-if="articleMsg.update_time">
        {{ articleMsg.update_time.slice(0,11) }}
      </view>
    </view>
    <view class="text">
      <view class="item" v-if="articleMsg.article_type == 0">
        <!-- <jyfparser :html="$mUtil.formatRichText(articleMsg.content)" ref="article"></jyfparser> -->
        <view class="top ql-editor-box" v-html="articleMsg.content">
        </view>

      </view>
      <view class="item" v-if="articleMsg.article_type == 1" style="overflow: hidden;">
        <!-- <j-video class="jvideo" :url="articleMsg.media_address" width="750rpx" height="620rpx"></j-video> -->
        <video id="myvideo" style="width: 100%;border-radius: 15rpx;" :src="articleMsg.media_address"
          @fullscreenchange="fullscreenchange"></video>
      </view>
      <view class="option">
        <view class="good" @click="clickGood">
          <view v-if="isLike==true">
            <text class="iconfont" style="font-size: 40rpx;color: #03341F;">&#xe610;</text>
          </view>
          <view v-else>
            <text class="iconfont" style="font-size: 40rpx;color: #03341F;">&#xe642;</text>
          </view>
          <view class="num">
            {{ articleMsg.like_num }}
          </view>
        </view>
        <view class="message" @click="shouMsg">
          <image :src="imgUrl+'/message.png'" mode=""></image>
          <view class="num">
            {{ articleMsg.comment_sum }}
          </view>
        </view>
        <!-- @click="share" -->
        <view class="link">
          <text class="iconfont link-item">&#xea1b;</text>
          <button class="iconfont" open-type="share">&#xea1b;</button>
          <view class="num">
            {{ articleMsg.share_num }}
          </view>
        </view>
      </view>
    </view>
    <view class="selected">
      <view class="stay-msg"> 精选留言 </view>
      <view v-if="commentMsg.length > 0">
        <view class="item" v-for="(item, index) in commentMsg" :key="index">
          <image v-if="item.head_photo" style="border-radius: 50%;" :src="item.head_photo" mode=""></image>
          <image v-else style="border-radius: 50%;" :src="imgUrl+'/head-on.png'" mode=""></image>
          <view class="personal">
            <view class="top-title u-text-width-two">
              {{ item.nickname||item.mobile}}
            </view>
            <view class="time">
              {{ item.create_time }}
            </view>
            <view class="content">
              {{ item.content }}
            </view>
          </view>
        </view>
      </view>
      <nodata style="height: 500rpx;" v-else :config="{ top: 1, content: '暂无评论' }"></nodata>
    </view>
    <uni-popup ref="popup" type="bottom">
      <view class="show-bottom" :style="{ paddingBottom: inputHeight + 'px' }">
        <view class="top">
          <view class="line"> </view>
          <view class="item"> 添加评论 </view>
          <view class="deter-mine" @click="sendMsg()"> 发送 </view>
        </view>
        <view class="input">
          <textarea class="texterea-item" @focus="getHeight" @blur="leaveInput" :adjust-position="false"
            v-model="content" maxlength="100" placeholder="我要说两句"
            placeholder-style="color: #cccccc;padding:''22rpx 20rpx"></textarea>
        </view>
      </view>
    </uni-popup>
    <share ref="shares" :contentHeight="580" v-if="isvisible"></share>
  </view>
</template>

<script>
  import {
    articleInfo,
    articleComment
  } from "@/api/notice.js";
  import jyfparser from "../../../components/jyf-parser/jyf-parser.vue";
  import share from "./../../public/share";
  import jVideo from "../../../components/j-video/j-video.vue"

  export default {
    components: {
      jyfparser,
      share
    },
    data() {
      return {
        config: {
          back: true, //false是tolbar页面 是则不写
          title: "文章详情",
          color: "#fff",
          switchnextstep: true, //切换底部样式
          //背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
          backgroundColor: [1, "#0B844A"],

          // leftSlot:true
          // fixed:false
        },
        articleMsg: {},
        content: null,
        opusInfo: null,
        commentMsg: [], //留言板块
        isvisible: false,
        isLike: null, //是否点赞
        option: null, //文章id
        imgUrl: this.$mConfig.staticUrl,
        fromShare: false, // 是否分享过来的页面
        inputHeight: 0
      };
    },
    onLoad(options) {

      this.option = options.id;
      this.browseList()
      if (options.share == 1) {
        this.fromShare = true
      }
    },
    onShow() {
      this.getActicle(this.option);
    },
    onShareAppMessage(res) {
      this.$http
        .post(`/opus/cache-bbs`, {
          bbs_type: 2,
          model_type: 1,
          model_id: this.option,
        })
        .then((res) => {});

      let that = this
      return {
        title: that.articleMsg.title,
        path: "/pages/research/business/article?id=" + that.option + '&share=1',
        imageUrl: "",
        desc: "",
        content: '',
        success(res) {
          uni.showToast({
            title: "分享成功",
          });
        },
        fail(res) {
          uni.showToast({
            title: "分享失败",
            icon: "none",
          });
        },
      };
    },
    onShareTimeline(res) {
      // let imgUrl;
      // if (this.imglist.length > 0) {
      //     imgUrl = this.imglist.split(",")[0];
      // }
      return {
        title: this.articleMsg.title,
        type: 0,
        query: "/pages/research/business/article?id=" + this.option + '&share=1',
        summary: ""
        // imageUrl: imgUrl,
      };
    },
    methods: {
      fullscreenchange(e) {

      },
      //点击输入框触发
      getHeight(e) {
        this.inputHeight = e.target.height; //获取输入法的高度，动态设置输入框距离顶部距离。
      },
      // 失焦
      leaveInput(e) {
        this.inputHeight = 0
      },
      iconBtn() {
        if (this.fromShare) {
          uni.redirectTo({
            url: '/pages/index/home'
          });
        } else {
          uni.navigateBack();
        }
      },
      //浏览功能
      browseList() {
        this.$http.post("/opus/cache-bbs", {
          bbs_type: 0,
          model_type: 1,
          model_id: this.option,
          num: 1
        }).then(res => {
          if (res && res.code == 200) {
            var pages = getCurrentPages();
            var prepage = pages[pages.length - 2]; //上一个页面
            if (prepage.$vm || prepage.bottomList) {
              if (prepage.$vm) {
                console.log("11111", prepage)
                // prepage.$vm.bottomList
                prepage.$vm.bottomList.forEach((item) => {
                  if (item.id == this.option) {
                    item.browse_sum++
                  }
                })
              } else {
                console.log("22222", prepage)
                // prepage.bottomList
              }
              // prepage.bottomList.forEach((item) => {
              // 	if (item.id == this.option) {
              // 		item.browse_sum++
              // 	}
              // })
            }

          }
        })
      },
      //点赞功能
      clickGood() {
        let token = uni.getStorageSync("apiToken")
        if (!token) {
          uni.navigateTo({
            url: "../register/login"
          })
        } else {
          if (this.isLike == false) {
            this.$http.post("/opus/cache-bbs", {
              bbs_type: 1,
              model_type: 1,
              model_id: this.option
            }).then(res => {
              if (res && res.code == 200) {
                this.$mUtil.toast('点赞成功')
                this.isLike = true
                this.articleMsg.like_num++
              }
            })
          }
          if (this.isLike == true) {
            this.$http.post(`/bbs/article/cancel-like/${this.option}`).then(res => {
              if (res && res.code == 200) {
                this.$mUtil.toast('已取消点赞')
                this.isLike = false
                this.articleMsg.like_num--
              }
            })
          }

        }


      },

      share() {
        let token = uni.getStorageSync("apiToken");


        if (!token) {
          uni.navigateTo({
            url: "/pages/login/index",
          });
        } else {
          let user = uni.getStorageSync("personal");
          this.$http.get("/bbs/article/info/" + this.option).then((res) => {
            if (res && res.code == 200) {
              if (res && res.data == null) {
                this.$mUtil.toast("文章不存在")
              } else {
                this.isvisible = true;
                this.$nextTick(() => {
                  this.$refs.shares.shareInfo(
                    "/?pageType=2&type=1&id=" +
                    this.articleMsg.id +
                    "&shareId=" +
                    user.id,
                    'pages/down',
                    this.articleMsg.title,
                    "",
                    this.articleMsg.cover
                  );
                });
              }
            }
          })


        }
      },
      getActicle(id) {
        this.$http.get("/bbs/article/info/" + id).then((res) => {
          if (res && res.code == 200) {
            if (res && res.data == null) {
              this.$mUtil.toast("该文章已被删除")
              setTimeout(() => {
                uni.navigateBack()
              }, 2000)
            } else {
              this.articleMsg = res.data;
              this.articleMsg.content = res.data.content.replace(/\<img/gi,
                '<img style="max-width:100%;height:auto;display:block;border-radius: 12px;"')
              this.commentMsg = res.data.user_comment_list;
              this.isLike = res.data.is_like
            }


          }
        });
      },
      shouMsg() {
        let token = uni.getStorageSync("apiToken")
        if (!token) {
          uni.navigateTo({
            url: "../register/login"
          })
        } else {
          this.$refs.popup.open();
        }

      },
      sendMsg() {
        if (this.content == null) {
          this.$mUtil.toast("请填写留言内容");
          return false;
        }
        console.log(this.articleMsg.id);
        this.$http
          .post(articleComment, {
            model_id: this.articleMsg.id,
            content: this.content,
          })
          .then((res) => {
            if (res && res.code == 200) {
              this.$mUtil.toast("留言成功");
              this.$refs.popup.close();
              this.getActicle(this.articleMsg.id);
              this.content = "" //留言成功之后清空留言內容
            }
          });
      },
    },
  };
</script>

<style lang="scss" scoped>
  @font-face {
    font-family: 'hxicon';
    /* project id 2009392 */
    src: url(data:font/truetype;charset=utf-8;base64,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) format('truetype');
  }

  @font-face {
    font-family: 'iconfont';
    /* project id 2070236 */
    src: url('//at.alicdn.com/t/font_2070236_id1ac7qapa.eot');
    src: url('//at.alicdn.com/t/font_2070236_id1ac7qapa.eot?#iefix') format('embedded-opentype'),
      url('//at.alicdn.com/t/font_2070236_id1ac7qapa.woff2') format('woff2'),
      url('//at.alicdn.com/t/font_2070236_id1ac7qapa.woff') format('woff'),
      url('//at.alicdn.com/t/font_2070236_id1ac7qapa.ttf') format('truetype'),
      url('//at.alicdn.com/t/font_2070236_id1ac7qapa.svg#iconfont') format('svg');
  }

  .hxicon {
    font-family: hxicon;
    font-size: 20px;
    font-style: normal;
    /* #ifndef APP-PLUS-NVUE */
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
    /* #endif */

  }

  .slotBox {
    .back {
      padding: 0 13rpx;
    }
  }

  .article {
    width: 100%;
    overflow: hidden;
  }



  .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: #0B844A;
        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 {
        flex: 1;
        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;
      position: relative;

      .link-item {
        color: #03341F;
        margin-left: 44rpx;
        margin-left: 44rpx;
      }

      .num {
        margin-left: 10rpx;
        font-size: 24rpx;
        font-weight: 500;
        color: #999999;
      }

      button {
        opacity: 0;
        position: absolute;
        top: 0;
        left: 44rpx;
        z-index: 1;
      }
    }

    .message {
      display: flex;
      align-items: center;
      margin-left: 44rpx;

      image {
        width: 38rpx;
        height: 30rpx;
      }

      .num {
        margin-left: 10rpx;
        font-size: 24rpx;
        font-weight: 500;
        color: #999999;
      }
    }

    .good {
      display: flex;
      align-items: center;
      // overflow: hidden;

      image {
        margin-top: 10rpx;
        width: 38rpx;
        height: 38rpx;
      }

      .num {
        margin-left: 10rpx;
        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>