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?'#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,
					'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>