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="read_total">阅读：{{articleInfo.read_count}}</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?'#e03519':'#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?'#e03519':'#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,
					'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,
				        });
				      }
				    }
				  });
				}
			}
		}
	}
</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: 600rpx;
		line-height: 50rpx;
		padding: 10rpx 25rpx;
		background-color: #FFFFFF;
		[alt] {
		  //web_view图片
		  max-width: 100%; // 避免图片超宽
		  vertical-align: bottom; // 避免图片之间间隙
		}
	}
	.read_total{
		width: 700rpx;
		color: #999999;
		display: block;
		font-size: 26rpx;
		overflow: hidden;
		line-height: 40rpx;
		padding: 0rpx 25rpx;
		padding-bottom: 60rpx;
		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>