feat:消息中心

apis/news.js

+import { request } from "@/lib/service"
+/**
+ * @desc 消息列表
+ */
+export function newsList({pageNum = 1, pageSize = 10}) {
+	return request({
+		url: 'zsxcx/getInformationUserZS.htm',
+		method: 'post',
+		data: {
+			pageNum,
+			pageSize
+		},
+		needMask: true
+	})
+}
+
+/**
+ * @desc 消息详情
+ * @param { Number | String } text_id
+ */
+export function newsDetail(text_id) {
+	return request({
+		url: 'zsxcx/getInformationUserDetailZS.htm',
+		method: 'post',
+		data: {
+			text_id
+		},
+		needMask: true
+	})
+}
+
+/**
+ * @desc 修改消息状态  这个其实无需请求，后端可以直接做
+ * @param { Number | String } id 消息主键id
+ */
+export function newsStatus(id) {
+	return request({
+		url: 'zsxcx/readInformationUserZS.htm',
+		method: 'post',
+		data: {
+			id
+		}
+	})
+}
+
+/**
+ * @desc 软删除消息
+ */
+export function newsDel(id) {
+	return request({
+		url: 'zsxcx/delInformationUserZS.htm',
+		method: 'post',
+		data: {
+			id
+		},
+		needMask: true
+	})
+}

pages.json

@@ -186,6 +186,18 @@
 					"style": {
 						"navigationBarTitleText": "商品安全溯源信息"
 					}
+				},
+				{
+					"path": "news/index",
+					"style": {
+						"navigationBarTitleText": "消息中心"
+					}
+				},
+				{
+					"path": "news/detail",
+					"style": {
+						"navigationBarTitleText": "消息详情"
+					}
 				}
 			]
 		},

pages/mine/index.vue

@@ -83,6 +83,13 @@
 		<!-- 功能与服务 -->
 		<view class="server-wrap">
 			<view class="title font-28 font-bold pt-3">功能与服务</view>
+			<view
+				class="server-item font-28 flex j-between a-center py-3"
+				@click="nav('news')"
+			>
+				<text>消息中心</text>
+				<icon class="right_arrow" />
+			</view>
 			<view
 				class="server-item font-28 flex j-between a-center py-3"
 				@click="phoneCall"
@@ -106,7 +113,6 @@
 			</view>
 		</view>
 
-		<text class="version font-24">{{version}}</text>
 	</view>
 </template>
 
@@ -197,6 +203,11 @@ export default {
 							url: '/subPages/comments/center'
 						})
 						break;
+					case 'news':
+						uni.navigateTo({
+							url: '/subPages/news/index'
+						})
+						break;
 					default:
 						break;
 				}

styles/mixins.scss

@@ -29,9 +29,9 @@
 }
 
 /* borderBox */
-@mixin borderBox($row, $vertical){
+@mixin borderBox($vertical, $row){
 	box-sizing: border-box;
-	padding: $row $vertical;
+	padding: $vertical $row;
 }
 
 // 返回background

subPages/news/detail.vue

+<template>
+	<view class="newsDetail-wrap w-100">
+		<template v-if="detail">
+			<!-- title -->
+			<view class="title mb-2 font-36 font-bold">{{detail.title}}</view>
+			
+			<!-- introduct info -->
+			<view class="descColor font-24 mb-2 flex j-between a-center">
+				<view>
+					<span class="mr-2">{{detail.name}}</span>
+					<span>{{detail.type}}</span>
+				</view>
+				<view class="">{{detail.send_time | parseTime}}</view>
+			</view>
+			
+			<!-- img -->
+			<image
+				class="w-100 mb-2 cover" 
+				:src="baseUrl + '/' + detail.main_img"
+				mode="widthFix"
+			></image>
+			
+			<!-- 文章简介 -->
+			<view class="article-introduct descColor font-24 mb-2">{{detail.abstract}}</view>
+			
+			<!-- article -->
+			<view
+				v-if="detail"
+				class="article mb-2"
+			>
+				<u-parse
+					:content="detail.text" 
+					@preview="preview"
+					:imageProp="imageProp"
+				/>
+			</view>
+		</template>
+		<template v-else>
+			<empty-view text="暂无数据" />
+		</template>
+	</view>
+</template>
+
+<script>
+import uParse from '@/components/parse/parse.vue'
+import { newsDetail, newsStatus } from '@/apis/news.js'
+export default {
+	data() {
+		return {
+			detail: null,
+			imageProp: {
+				mode: 'widthFix',
+				lazyLoad: true
+			},
+		}
+	},
+	
+	components: {
+		uParse
+	},
+	
+	onLoad(ops) {
+		this.id = ops.id
+		this.getDetail()
+	},
+	
+	methods: {
+		async getDetail() {
+			const { status, data } = await newsDetail(this.id)
+			if(status) {
+				this.detail = data
+				newsStatus(data.id)
+			}
+		},
+		
+		// 富文本预览事件
+		preview(src, e) {
+		    // do something
+		},
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+.newsDetail-wrap {
+	min-height: 100vh;
+	background-color: #fff;
+	@include borderBox(20rpx, 30rpx);
+	.cover {
+		background-color: $mainBg;
+	}
+}
+</style>

subPages/news/index.vue

+<template>
+	<view class="news-wrapper w-100 pt-2 isIphoneX">
+		<template v-if="list.length === 0">
+			<empty-view text="暂无消息" />
+		</template>
+		<template v-else>
+			<!-- list -->
+			<pull-list
+				ref="pullList"
+				@refresh="refresh"
+				@tolower="tolower"
+			>
+				<view
+					class="list-item"
+					v-for="news in list"
+					:key="news.id"
+					@longpress="pressItem(news.id)"
+				>
+					<view class="w-100 flex j-between a-center shop-info_wrap">
+						<view class="shop-info_inner flex a-center flex-1">
+							<image
+								class="shop-cover"
+								:src="news.icon ? baseUrl + '/' + news.icon : '/static/images/common/default-avatar.png'"
+								mode="aspectFit"
+							></image>
+							<text class="shop-name">{{news.name}}</text>
+						</view>
+						<view class="time font-24 descColor">{{news.send_time | parseTime}}</view>
+					</view>
+					<view class="text-center">
+						<!-- https://d.gelifood.com/upload/banner/20211011/63887bc4ce1a0354efabc41633932041goods_img.png -->
+						<image
+							class="img"
+							:src="baseUrl + '/' + news.main_img"
+							mode="aspectFit"
+						></image>
+					</view>
+					<view class="status w-100 flex j-between a-center my-2">
+						<view>{{news.title}}</view>
+						<view class="font-24 descColor">{{news.read_status === '0' ? '未读' : '已读'}}</view>
+					</view>
+					<view class="desc font-24 descColor mb-2">{{news.abstract}}</view>
+					<view
+						class="w-100 btn"
+						@click.stop="handleDetail(news.text_id)"
+					>查看详情</view>
+				</view>
+			</pull-list>
+		</template>
+	</view>
+</template>
+
+<script>
+import pullList from '@/components/pull-list/index.vue'
+import { newsList, newsDel } from '@/apis/news.js'
+import LoadMore from '@/utils/load-more.js'
+
+export default {
+	data() {
+		return {
+			list: []
+		}
+	},
+	
+	components: {
+		pullList
+	},
+	
+	created() {
+		this.loadMore = new LoadMore()
+		this.getList()
+	},
+	
+	methods: {
+		async getList() {
+			const { status, data } = await this.loadMore.getList({}, newsList)
+			if(status) {
+				this.list = data
+			}
+		},
+
+		// 长按id
+		pressItem(id) {
+			console.log(id)
+			uni.showActionSheet({
+				itemList: ['删除'],
+				success: res => {
+					const { tapIndex } = res
+					if(tapIndex === 0) {
+						newsDel(id)
+							.then(({status, msg}) => {
+								if(status) {
+									this.loadMore.resetParams()
+									this.getList()
+									this.$toast({
+										title: msg || '删除成功'
+									})
+								}
+							})
+					}
+				}
+			})
+		},
+
+		handleDetail(id) {
+			uni.navigateTo({
+				url: `/subPages/news/detail?id=${id}`
+			})
+		},
+
+		refresh() {
+			this.loadMore.resetParams()
+			this.goods_list = []
+			this.getList()
+		},
+		
+		tolower() {
+			console.log('more')
+			this.getList()
+		}
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+.news-wrapper {
+	box-sizing: border-box;
+	height: 100vh;
+	overflow: hidden;
+	.list-item {
+		width: 690rpx;
+		margin:0 auto;
+		border-radius: 8rpx;
+		background-color: #fff;
+		.shop-info_wrap {
+			box-sizing: border-box;
+			padding: 16rpx 20rpx;
+			.shop-info_inner {
+				.shop-cover {
+					flex: 0 0 56;
+					width: 56rpx;
+					height: 56rpx;
+					margin-right: 20rpx;
+					border-radius: 50%;
+				}
+				.shop-name {
+					flex: 1;
+					@include  text-ellipsis(1);
+				}
+			}
+			.time {
+				flex: 0 0 240rpx;
+				text-align: right;
+			}
+		}
+		.img {
+			display: inline-block;
+			width: 650rpx;
+			height: 360rpx;
+			background-color: $mainBg;
+		}
+		.status, .desc {
+			box-sizing: border-box;
+			padding: 0 20rpx;;
+		}
+		.desc {
+			@include text-ellipsis(2);
+		}
+		.btn {
+			height: 88rpx;
+			line-height: 88rpx;
+			text-align: center;
+			border-top: 1rpx solid $line;
+		}
+	}
+}
+</style>