【Mod】增加资讯功能

pages.json

@@ -219,6 +219,20 @@
       "style": {
         "navigationBarTitleText": "抽奖"
       }
+    },
+    {
+    	"path" : "pages/article/index",
+    	"style" : 
+    	{
+    		"navigationBarTitleText" : "资讯列表"
+    	}
+    },
+    {
+    	"path" : "pages/article/detail",
+    	"style" : 
+    	{
+    		"navigationBarTitleText" : "文章详情"
+    	}
     }
   ],
   "globalStyle": {

pages/article/detail.vue

@@ -0,0 +1,222 @@
+<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>

pages/article/index.vue

@@ -0,0 +1,171 @@
+<template>
+	<view>
+		<view class="article_list">
+			<view class="article_item" v-for="(item,index) in articleList" @click.stop="goDetail(item.id)">
+				<image class="thumb_img" :src="item.poster" mode="aspectFit"></image>
+				<view class="article_info">
+					<view class="article_title">{{item.title}}</view>
+					<view class="article_census">
+						<text class="">阅读：{{item.read_count}}</text> <text class="">点赞：{{item.hand_count}}</text>
+					</view>
+					<view class="article_time">{{item.insert_time}}</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+		  return {
+		    // 产品列表
+		    articleList: [],
+		    // 请求参数
+		    requestParam: {
+		      page: 1,
+		      status: 0,
+		    },
+		    // 是否最后一页
+		    isLast: false,
+		    // 是否请求中
+		    isReqing: false,
+		  };
+		},
+		onLoad() {},
+		onShow() {
+		  // 没有数据的话，或者请求中，不允许刷新
+		  if (this.isReqing) return;
+		  // 初始化页码为1
+		  this.requestParam.page = 1;
+		  // 是否是最后一页
+		  this.isLast = false;
+		  // 设置请求中
+		  this.isReqing = true;
+		  // 请求列表
+		  this.$http.request("api/article/get_list", this.requestParam).then((re) => {
+		    // 设置非请求中
+		    this.isReqing = false;
+		    // 成功结果
+		    if (re.code == "success") {
+		      if (re.data.last_page <= this.requestParam.page) this.isLast = true;
+		      this.articleList = re.data.data;
+		    }
+		  });
+		},
+		onPullDownRefresh() {
+		  // 如果请求中，不允许请求，
+		  if (this.isReqing) return false;
+		  // 初始化页码为1
+		  this.requestParam.page = 1;
+		  // 是否是最后一页
+		  this.isLast = false;
+		  // 设置请求中
+		  this.isReqing = true;
+		  // 请求列表
+		  this.$http.request("api/article/get_list", this.requestParam).then((re) => {
+		    // 设置非请求中
+		    this.isReqing = false;
+		    // 成功结果
+		    if (re.code == "success") {
+		      if (re.data.last_page <= this.requestParam.page) this.isLast = true;
+		      this.articleList = re.data.data;
+		    }
+		  });
+		  uni.stopPullDownRefresh();
+		},
+		onReachBottom() {
+		  // 如果页码是0，避免第一页重复
+		  if (this.requestParam.page < 1) return;
+		  // 最后一页不请求
+		  if (this.isLast) return;
+		  // 请求中，不再请求
+		  if (this.isReqing) return;
+		  // 增加一页
+		  this.requestParam.page = this.requestParam.page + 1;
+		  // 设置请求中
+		  this.isReqing = true;
+		  // 请求列表
+		  this.$http.request("api/article/get_list", this.requestParam).then((re) => {
+		    // 设置非请求中
+		    this.isReqing = false;
+		    // 成功结果
+		    if (re.code == "success") {
+			  // 数据
+		      if (re.data.last_page <= this.requestParam.page) this.isLast = true;
+		      // 追加数据
+		      this.articleList.push(...re.data.data);
+		    }
+		  });
+		},
+		methods: {
+			goDetail(id) {
+			  uni.navigateTo({
+			    url: "/pages/article/detail?id=" + id,
+			  });
+			},
+		}
+	}
+</script>
+
+<style lang="less">
+	.article_list{
+		float: left;
+		width: 750rpx;
+		display: block;
+		overflow: hidden;
+		.article_item{
+			display: block;
+			width: 700rpx;
+			height: 200rpx;
+			overflow: hidden;
+			margin-bottom: 10rpx;
+			padding: 20rpx 25rpx;
+			border-radius: 10rpx;
+			background-color: #FFFFFF;
+			.thumb_img{
+				float: left;
+				width: 200rpx;
+				height: 200rpx;
+				display: block;
+				border-radius: 10rpx;
+			}
+			.article_info{
+				float: right;
+				width: 480rpx;
+				display: block;
+				margin-left: 20rpx;
+				.article_title{
+					width: 480rpx;
+					display: block;
+					height: 120rpx;
+					font-size: 34rpx;
+					overflow: hidden;
+					font-weight: bold;
+					line-height: 40rpx;
+					text-overflow: ellipsis;
+				}
+				.article_census{
+					color: #999999;
+					width: 480rpx;
+					display: block;
+					height: 40rpx;
+					font-size: 26rpx;
+					line-height: 40rpx;
+					text:nth-child(2){
+						margin-left: 20rpx;
+					}
+				}
+				.article_time{
+					color: #999999;
+					width: 480rpx;
+					display: block;
+					height: 60rpx;
+					font-size: 26rpx;
+					text-align: right;
+					line-height: 60rpx;
+				}
+			}
+		}
+	}
+</style>

pages/user/index.vue

@@ -51,6 +51,10 @@
         <image class="navigator_image" src="https://kailin-mp.oss-cn-shenzhen.aliyuncs.com/static/icon/score_gift.png" mode=""></image>
         <view class="navigator_title">拉新活动</view>
       </navigator>
+      <navigator class="navigator_item" url="/pages/article/index">
+        <image class="navigator_image" src="https://kailin-mp.oss-cn-shenzhen.aliyuncs.com/static/user/article.png" mode=""></image>
+        <view class="navigator_title">资讯</view>
+      </navigator>
     </view>
     <view class="alter_info">本程序暂不提供在线交易以及支付功能，您所提交的预约，我们将验证您的购药资质并交由有售卖药品资质的商业公司与您联系确认并提供线下后续服务。</view>
     <view class="packet_content" v-if="show_packet">