生活服务和知识库

api/knowledge/knowledge.js

@@ -0,0 +1,15 @@
+import request from '@/utils/request'
+
+export function list(query) {
+  return request({
+    url: '/knowledge/base/list',
+    method: 'get',
+	params:query
+  })
+}
+export function getDetails(id) {
+  return request({
+    url: '/knowledge/base/' + id,
+    method: 'get',
+  })
+}

api/lifeServices/lifeServices.js

@@ -0,0 +1,15 @@
+import request from '@/utils/request'
+
+export function list(query) {
+  return request({
+    url: '/high/server/lifeServicesList',
+    method: 'get',
+	params:query
+  })
+}
+export function getDetails(id) {
+  return request({
+    url: '/high/server/lifeServicesDetails/' + id,
+    method: 'get',
+  })
+}

pages.json

@@ -1,6 +1,5 @@
 {
-	"pages": [
-		{
+	"pages": [{
 			"path": "pages/login",
 			"style": {
 				"navigationBarTitleText": "登录",
@@ -189,7 +188,7 @@
 
 
 			}
-		},{
+		}, {
 			"path": "pages/toGovernmentList/toGovernmentList",
 			"style": {
 				"usingComponents": {},
@@ -229,9 +228,8 @@
 			}
 		},
 		{
-			"path" : "pages/liveBroadcast/liveBroadcast",
-			"style" :
-			{
+			"path": "pages/liveBroadcast/liveBroadcast",
+			"style": {
 				"usingComponents": {},
 				"navigationBarBackgroundColor": "#07c160",
 				"navigationBarTextStyle": "white",
@@ -239,13 +237,49 @@
 			}
 		},
 		{
-			"path" : "pages/liveBroadcastDetails/liveBroadcastDetails",
+			"path": "pages/liveBroadcastDetails/liveBroadcastDetails",
 			"style": {
 				"usingComponents": {},
 				"navigationBarBackgroundColor": "#07c160",
 				"navigationBarTextStyle": "white",
 				"navigationBarTitleText": "直播带货详情"
 			}
+		},
+		{
+			"path": "pages/lifeServices/lifeServices",
+			"style": {
+				"usingComponents": {},
+				"navigationBarBackgroundColor": "#07c160",
+				"navigationBarTextStyle": "white",
+				"navigationBarTitleText": "生活服务"
+			}
+		},
+		{
+			"path": "pages/lifeServicesDetails/lifeServicesDetails",
+			"style": {
+				"usingComponents": {},
+				"navigationBarBackgroundColor": "#07c160",
+				"navigationBarTextStyle": "white",
+				"navigationBarTitleText": "生活服务详情"
+			}
+		},
+		{
+			"path": "pages/knowledge/knowledge",
+			"style": {
+				"usingComponents": {},
+				"navigationBarBackgroundColor": "#07c160",
+				"navigationBarTextStyle": "white",
+				"navigationBarTitleText": "知识库"
+			}
+		},
+		{
+			"path": "pages/knowledgeDetails/knowledgeDetails",
+			"style": {
+				"usingComponents": {},
+				"navigationBarBackgroundColor": "#07c160",
+				"navigationBarTextStyle": "white",
+				"navigationBarTitleText": "知识库详情"
+			}
 		}
 	],
 	"easycom": {
@@ -261,8 +295,7 @@
 		"selectedColor": "#2f2f2f",
 		"borderStyle": "black",
 		"backgroundColor": "#f9f9f9",
-		"list": [
-			{
+		"list": [{
 				"text": "服务",
 				"pagePath": "pages/index/index",
 				"iconPath": "static/pages/images/fuwu2.png",
@@ -291,15 +324,13 @@
 		"navigationBarTitleText": "Weixin",
 		"navigationBarTextStyle": "black"
 	},
-	"condition" : { //模式配置，仅开发期间生效
+	"condition": { //模式配置，仅开发期间生效
 		"current": 0, //当前激活的模式(list 的索引项)
-		"list": [
-			{
-				"name": "test", //模式名称
-				"path": "pages/index/index", //启动页面，必选
-				"query": "" //启动参数，在页面的onLoad函数里面得到
-			}
-		]
+		"list": [{
+			"name": "test", //模式名称
+			"path": "pages/index/index", //启动页面，必选
+			"query": "" //启动参数，在页面的onLoad函数里面得到
+		}]
 	},
 	"subPackages": []
-}
+}

pages/index/index.vue

@@ -118,7 +118,7 @@
                         <span>帮扶救助</span>
                     </li>
                     <li>
-                        <view class="xswz"><em class="iconfont icon-zhishi1"></em></view>
+                        <view class="xswz"><em class="iconfont icon-zhishi1" @tap="gozsk"></em></view>
                         <span>知识库</span>
                     </li>
                     <li>
@@ -410,6 +410,14 @@ export default {
 			    url: '/pages/liveBroadcast/liveBroadcast'
 			});
 		},
+		/**
+		 * 跳转知识库页面
+		 */
+		gozsk(){
+			uni.navigateTo({
+			    url: '/pages/knowledge/knowledge'
+			});
+		},
     }
 };
 </script>

pages/knowledge/knowledge.css

@@ -0,0 +1,136 @@
+/* pages/wenda/wenda.wxss */
+.wendaFL {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    margin: 30rpx 0 0 0;
+}
+.wendaFL li {
+    width: 48%;
+    height: 168rpx;
+    position: relative;
+}
+.lbBj {
+    position: absolute;
+    left: 0;
+    top: 0;
+    z-index: 0;
+    width: 100%;
+    height: 100%;
+}
+.wendaFL li h2 {
+    font-size: 36rpx;
+    position: absolute;
+    left: 30rpx;
+    top: 40rpx;
+    z-index: 1;
+    font-weight: bold;
+}
+.wendaFL li span {
+    font-size: 30rpx;
+    position: absolute;
+    left: 30rpx;
+    top: 88rpx;
+    z-index: 1;
+}
+.wendaFL li.sanNong {
+    color: #0d9970;
+}
+.wendaFL li.jiuYe {
+    color: #1e8fb4;
+}
+.wendaFL li.faLv {
+    color: #1e5dab;
+}
+.wendaFL li.jiuZhen {
+    color: #4a700d;
+}
+/* 列表 */
+.rnwdList {
+    width: 100%;
+    height: 100%;
+}
+.list {
+    border-bottom: solid 2rpx #f6f6f6;
+    padding: 10rpx 0;
+    width: 100%;
+}
+.lb {
+    background: #0d9970;
+    color: #fff;
+    font-size: 24rpx;
+    width: 12%;
+    text-align: center;
+    padding: 2rpx 0;
+    line-height: 40rpx;
+    height: 40rpx;
+    border-radius: 10rpx;
+}
+.listTitle {
+    font-size: 32rpx;
+    color: #333;
+    line-height: 40rpx;
+}
+.icon-jifen {
+    font-size: 28rpx;
+    color: #07c160;
+    margin: 0 0 0 6rpx;
+}
+.icon-pinglun,
+.icon-chakan,
+.icon-shoucang {
+    font-size: 28rpx;
+    margin: 0 6rpx 0 20rpx;
+    color: #c4c4c4;
+}
+.icon-xiangyoujiantou {
+    font-size: 30rpx;
+    color: #c4c4c4;
+    line-height: 60rpx;
+}
+.onePic {
+    width: 100%;
+    height: 360rpx;
+    border-radius: 20rpx;
+    overflow: hidden;
+    margin: 20rpx 0;
+}
+.onePic image {
+    width: 100%;
+    height: 100%;
+}
+.twoPic {
+    width: 100%;
+    height: 220rpx;
+    margin: 20rpx 0;
+    display: flex;
+    justify-content: space-between;
+}
+.twoPic image {
+    width: 49%;
+    height: auto;
+    border-radius: 20rpx;
+}
+.threePic {
+    width: 100%;
+    height: 160rpx;
+    margin: 20rpx 0;
+    display: flex;
+    justify-content: space-between;
+}
+.threePic image {
+    width: 32%;
+    height: auto;
+    border-radius: 20rpx;
+}
+.jlSj {
+    height: 40rpx;
+    display: flex;
+    justify-content: space-between;
+    font-size: 24rpx;
+    margin: 20rpx 0 0 0;
+}
+.ck {
+    color: #c4c4c4;
+	margin-left:240px;
+}

pages/knowledge/knowledge.vue

@@ -0,0 +1,98 @@
+<template>
+	<!-- 知识库列表 -->
+	<view class="container">
+		<view class="rnwdList">
+			<view class="list" @tap="goDetails(item.id)" v-for="(item, index1) in dataSource" :key="index1">
+				<span class="listTitle">{{ item.titleName }}</span>
+
+				<view class="onePic">
+					<image :src="loadImgSrcLocalhost(item.imgUrlList)">
+					</image>
+				</view>
+
+				<view class="jlSj">
+					<view class="ck">
+						<span>
+							<em class="iconfont icon-chakan"></em>
+							{{ item.likeNum }}
+						</span>
+						<span>
+							<em class="iconfont icon-shoucang"></em>
+							{{ item.watchNum }}
+						</span>
+					</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import {
+		list
+	} from '@/api/knowledge/knowledge.js';
+	export default {
+		data() {
+			return {
+				dataSource: [],
+				// 数据总量
+				total: 0,
+				queryParams: {
+					// 当前页
+					pageNum: 1,
+					// 每页数据量
+					pageSize: 10,
+				},
+				loading: false,
+			}
+		},
+		/**
+		 * 生命周期函数--监听页面加载
+		 */
+		onLoad(options) {
+			this.getList(1)
+		},
+		onReachBottom(){
+			let pageNum = this.queryParams.pageNum
+			let pageSize = this.queryParams.pageSize
+			let total = this.total
+			if(pageNum * pageSize >= total){
+				uni.showToast({
+					title:'暂无更多数据'
+				})
+				return
+			} else {
+				this.queryParams.pageNum += 1;
+				this.getList()
+			}
+		},
+		methods: {
+			goDetails(id) {
+				uni.navigateTo({
+					url: '/pages/knowledgeDetails/knowledgeDetails?id=' + id,
+				});
+			},
+			// 分页触发
+			change(e) {
+				this.getList(e.current);
+			},
+			// 获取数据
+			getList(pageNum) {
+				let params = {
+					pageSize: this.queryParams.pageSize,
+					pageNum: pageNum,
+				}
+				list(params).then(res => {
+					if (res.code == 200) {
+						this.dataSource = [...this.dataSource,...res.rows]
+						this.total = res.total
+					}
+				})
+			},
+		}
+	}
+</script>
+
+<style>
+	@import './knowledge.css';
+</style>

pages/knowledgeDetails/knowledgeDetails.css

@@ -0,0 +1,160 @@
+/* pages/wenbaxiangqing.wxss */
+.title {
+    font-size: 44rpx;
+    text-align: center;
+    line-height: 70rpx;
+    color: #333;
+    margin: 30rpx 0;
+}
+.wenzhangLy {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    border-bottom: solid 2rpx #e8e8e8;
+    padding: 0 0 14rpx 0;
+}
+.txTime {
+    display: flex;
+    flex-direction: row;
+}
+.txTime image {
+    width: 80rpx;
+    height: 80rpx;
+}
+.time {
+    display: flex;
+    flex-direction: column;
+    padding: 10rpx 0 0 8px;
+}
+.time p {
+    font-size: 28rpx;
+    color: #9c9c9c;
+}
+.time span {
+    font-size: 24rpx;
+    color: #c4c4c4;
+}
+
+.jf {
+    color: #07c160;
+    line-height: 80rpx;
+    font-size: 24rpx;
+}
+.icon-jifen {
+    font-size: 28rpx;
+    color: #07c160;
+    margin: 0 0 0 6rpx;
+}
+.ck {
+    color: #c4c4c4;
+    font-size: 28rpx;
+}
+.icon-pinglun,
+.icon-chakan,
+.ck .icon-shoucang {
+    font-size: 28rpx;
+    margin: 0 6rpx 0 20rpx;
+    color: #c4c4c4;
+    line-height: 0;
+}
+.wenzhangCont {
+    font-size: 34rpx;
+    margin: 30rpx 0;
+}
+.wenzhangCont image {
+    width: 100%;
+    height: 320rpx;
+    margin: 20rpx auto;
+}
+.pinglunTj {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    margin: 30rpx 0;
+}
+.pinglunTitle {
+    font-size: 34rpx;
+    color: #2e2e2e;
+    font-weight: 600;
+}
+.pinglunTitle em {
+    font-size: 34rpx;
+    color: #9b9b9b;
+    font-weight: normal;
+    margin: 0 0 0 10rpx;
+}
+.pinglunList {
+    width: 100%;
+    padding: 0 0 120rpx 0;
+}
+.pinglunList li {
+    margin: 20rpx 0;
+    border-bottom: solid 2rpx #e8e8e8;
+    padding: 0 0 20rpx 0;
+    display: flex;
+    flex-direction: column;
+}
+.plListcont {
+    font-size: 30rpx;
+    color: #696868;
+    margin: 20rpx 0;
+}
+.pinglunList li button {
+    width: 80%;
+    border-radius: 10rpx;
+    background: #07c160;
+    color: #fff;
+    font-size: 28rpx;
+    font-weight: normal;
+    margin: 16rpx auto;
+}
+.fabiaoPl {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    position: fixed;
+    left: 0;
+    bottom: 0;
+    height: 112rpx;
+    background: #e8e8e8;
+    box-shadow: 0rpx 0rpx 16rpx #999;
+}
+.shuRu {
+    width: 72%;
+    display: flex;
+    flex-direction: row;
+    height: 76rpx;
+    background: #e0e0e0;
+    border-radius: 60rpx;
+    margin: 20rpx 0 0 20rpx;
+}
+.shuRu input {
+    line-height: 38px;
+    height: 76rpx;
+    font-size: 30rpx;
+    width: 83%;
+}
+.icon-bianji {
+    font-size: 38rpx;
+    line-height: 76rpx;
+    margin: 0 10rpx 0 20rpx;
+    color: #828181;
+}
+.icon-shoucang {
+    font-size: 50rpx;
+    line-height: 112rpx;
+    color: #828181;
+}
+.fasong {
+    width: 58rpx;
+    height: 58rpx;
+    border-radius: 50rpx;
+    background: #07c160;
+    margin: 26rpx 20rpx 0 10rpx;
+    text-align: center;
+    line-height: 58rpx;
+}
+.icon-fasong {
+    font-size: 40rpx;
+    color: #fff;
+}

pages/knowledgeDetails/knowledgeDetails.vue

@@ -0,0 +1,238 @@
+<template>
+	<view>
+		<!-- 知识库详情 -->
+		<view class="container">
+			<h1 class="title">{{fromData.titleName}}</h1>
+			<view class="wenzhangLy">
+				<!-- 头像昵称 -->
+				<view class="txTime">
+					<img class="uni-header-image"
+						:src="initInfo.headImg == null || initInfo.headImg == '' ? 'http://116.142.80.12:9000/10_03.png' : initInfo.headImg" />
+					<view class="time">
+						<p>{{initInfo.wechatName}}</p>
+						<span>{{fromData.createTime}}</span>
+					</view>
+				</view>
+			</view>
+			<view class="wenzhangCont">
+				<view v-html="fromData.textDetails"></view>
+				<view>
+					<image :src="loadImgSrcLocalhost(fromData.imgUrlList)"></image>
+				</view>
+			</view>
+			<view class="fengexian"></view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import {
+		getDetails
+	} from '@/api/knowledge/knowledge.js';
+	import {
+		getUserInfo
+	} from '@/api/me/me.js'
+	export default {
+		data() {
+			return {
+				parentId: "",
+				fromData: {},
+				content: "",
+				initInfo: {
+					userId: null,
+					scoreNum: 0,
+					wechatName: "微信用户",
+					name: null,
+					headImg: null,
+				},
+			};
+		},
+		methods: {
+			// 获取数据
+			getDetails() {
+				getDetails(this.parentId).then(res => {
+					if (res.code == 200) {
+						this.fromData = res.data
+					}
+				})
+			},
+			getUserInfoByUserId(userId) {
+				getUserInfo(userId).then(res => {
+					this.initInfo = res.data;
+					console.log("this.initInfo", this.initInfo)
+				})
+			},
+		}
+		/**
+		 * 生命周期函数--监听页面加载
+		 */
+		,
+		onLoad(options) {
+			this.parentId = options.id
+			this.getDetails()
+		},
+		/**
+		 * 生命周期函数--监听页面初次渲染完成
+		 */
+		onReady() {
+			this.userId = getApp().globalData.userId
+			this.getUserInfoByUserId(this.userId)
+		},
+		/**
+		 * 生命周期函数--监听页面显示
+		 */
+		onShow() {},
+		/**
+		 * 生命周期函数--监听页面隐藏
+		 */
+		onHide() {},
+		/**
+		 * 生命周期函数--监听页面卸载
+		 */
+		onUnload() {},
+		/**
+		 * 页面相关事件处理函数--监听用户下拉动作
+		 */
+		onPullDownRefresh() {},
+		/**
+		 * 页面上拉触底事件的处理函数
+		 */
+		onReachBottom() {},
+		/**
+		 * 用户点击右上角分享
+		 */
+		onShareAppMessage() {},
+	};
+</script>
+<style lang="scss">
+	@import './knowledgeDetails.css';
+
+	.collect {
+		.icon-shoucang:before {
+			color: red;
+		}
+	}
+
+	.not-collect {}
+
+	.effectBix {
+		width: 56px;
+		height: 56px;
+		border-radius: 50px;
+		font-family: 'Bebas Neue', cursive;
+		background: linear-gradient(45deg, transparent 5%, #FF013C 5%);
+		border: 0;
+		color: #fff;
+		text-align: center;
+		line-height: 56px;
+		outline: transparent;
+		position: absolute;
+		transform: rotate(-30deg);
+		right: 3%;
+		top: -5%;
+	}
+
+	.effectBox,
+	.effectBox::after {
+		width: 56px;
+		height: 56px;
+		border-radius: 50px;
+		font-size: 16px;
+		font-family: 'Bebas Neue', cursive;
+		background: linear-gradient(45deg, transparent 5%, #FF013C 5%);
+		border: 0;
+		color: #fff;
+		opacity: 1;
+		letter-spacing: 3px;
+		text-align: center;
+		line-height: 56px;
+		outline: transparent;
+		position: relative;
+		left: 78%;
+		top: 113%;
+		transform: rotate(-30deg);
+		z-index: 1;
+	}
+
+	.effectBox::after {
+		--slice-0: inset(50% 50% 50% 50%);
+		--slice-1: inset(80% -6px 0 0);
+		--slice-2: inset(50% -6px 30% 0);
+		--slice-3: inset(10% -6px 85% 0);
+		--slice-4: inset(40% -6px 43% 0);
+		--slice-5: inset(80% -6px 5% 0);
+
+		content: 'AVAILABLE NOW';
+		display: block;
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		background: linear-gradient(45deg, transparent 3%, #00E6F6 3%, #00E6F6 5%, #FF013C 5%);
+		text-shadow: -3px -3px 0px #F8F005, 3px 3px 0px #00E6F6;
+		clip-path: var(--slice-0);
+	}
+
+	.effectBox:hover::after {
+		animation: 1s glitch;
+		animation-timing-function: steps(2, end);
+	}
+
+	@keyframes glitch {
+		0% {
+			clip-path: var(--slice-1);
+			transform: translate(-20px, -10px);
+		}
+
+		10% {
+			clip-path: var(--slice-3);
+			transform: translate(10px, 10px);
+		}
+
+		20% {
+			clip-path: var(--slice-1);
+			transform: translate(-10px, 10px);
+		}
+
+		30% {
+			clip-path: var(--slice-3);
+			transform: translate(0px, 5px);
+		}
+
+		40% {
+			clip-path: var(--slice-2);
+			transform: translate(-5px, 0px);
+		}
+
+		50% {
+			clip-path: var(--slice-3);
+			transform: translate(5px, 0px);
+		}
+
+		60% {
+			clip-path: var(--slice-4);
+			transform: translate(5px, 10px);
+		}
+
+		70% {
+			clip-path: var(--slice-2);
+			transform: translate(-10px, 10px);
+		}
+
+		80% {
+			clip-path: var(--slice-5);
+			transform: translate(20px, -10px);
+		}
+
+		90% {
+			clip-path: var(--slice-1);
+			transform: translate(-10px, 0px);
+		}
+
+		100% {
+			clip-path: var(--slice-1);
+			transform: translate(0);
+		}
+	}
+</style>

pages/lifeServices/lifeServices.css

@@ -0,0 +1,136 @@
+/* pages/wenda/wenda.wxss */
+.wendaFL {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    margin: 30rpx 0 0 0;
+}
+.wendaFL li {
+    width: 48%;
+    height: 168rpx;
+    position: relative;
+}
+.lbBj {
+    position: absolute;
+    left: 0;
+    top: 0;
+    z-index: 0;
+    width: 100%;
+    height: 100%;
+}
+.wendaFL li h2 {
+    font-size: 36rpx;
+    position: absolute;
+    left: 30rpx;
+    top: 40rpx;
+    z-index: 1;
+    font-weight: bold;
+}
+.wendaFL li span {
+    font-size: 30rpx;
+    position: absolute;
+    left: 30rpx;
+    top: 88rpx;
+    z-index: 1;
+}
+.wendaFL li.sanNong {
+    color: #0d9970;
+}
+.wendaFL li.jiuYe {
+    color: #1e8fb4;
+}
+.wendaFL li.faLv {
+    color: #1e5dab;
+}
+.wendaFL li.jiuZhen {
+    color: #4a700d;
+}
+/* 列表 */
+.rnwdList {
+    width: 100%;
+    height: 100%;
+}
+.list {
+    border-bottom: solid 2rpx #f6f6f6;
+    padding: 10rpx 0;
+    width: 100%;
+}
+.lb {
+    background: #0d9970;
+    color: #fff;
+    font-size: 24rpx;
+    width: 12%;
+    text-align: center;
+    padding: 2rpx 0;
+    line-height: 40rpx;
+    height: 40rpx;
+    border-radius: 10rpx;
+}
+.listTitle {
+    font-size: 32rpx;
+    color: #333;
+    line-height: 40rpx;
+}
+.icon-jifen {
+    font-size: 28rpx;
+    color: #07c160;
+    margin: 0 0 0 6rpx;
+}
+.icon-pinglun,
+.icon-chakan,
+.icon-shoucang {
+    font-size: 28rpx;
+    margin: 0 6rpx 0 20rpx;
+    color: #c4c4c4;
+}
+.icon-xiangyoujiantou {
+    font-size: 30rpx;
+    color: #c4c4c4;
+    line-height: 60rpx;
+}
+.onePic {
+    width: 100%;
+    height: 360rpx;
+    border-radius: 20rpx;
+    overflow: hidden;
+    margin: 20rpx 0;
+}
+.onePic image {
+    width: 100%;
+    height: 100%;
+}
+.twoPic {
+    width: 100%;
+    height: 220rpx;
+    margin: 20rpx 0;
+    display: flex;
+    justify-content: space-between;
+}
+.twoPic image {
+    width: 49%;
+    height: auto;
+    border-radius: 20rpx;
+}
+.threePic {
+    width: 100%;
+    height: 160rpx;
+    margin: 20rpx 0;
+    display: flex;
+    justify-content: space-between;
+}
+.threePic image {
+    width: 32%;
+    height: auto;
+    border-radius: 20rpx;
+}
+.jlSj {
+    height: 40rpx;
+    display: flex;
+    justify-content: space-between;
+    font-size: 24rpx;
+    margin: 20rpx 0 0 0;
+}
+.ck {
+    color: #c4c4c4;
+	margin-left:240px;
+}

pages/lifeServices/lifeServices.vue

@@ -0,0 +1,110 @@
+<template>
+	<!-- 生活服务列表 -->
+	<view class="container">
+		<view class="rnwdList">
+			<view class="list" @tap="goDetails(item.id)" v-for="(item, index1) in dataSource" :key="index1">
+				<span class="listTitle">{{ item.titleName }}</span>
+
+				<view class="onePic" v-if="item.pictureList != null && item.pictureList.length == 1">
+					<image :src="loadImgSrcLocalhost(item2)" v-for="(item2, index2) in item.pictureList" :key="index2">
+					</image>
+				</view>
+				<view class="twoPic" v-if="item.pictureList != null && item.pictureList.length == 2">
+					<image :src="loadImgSrcLocalhost(item2)" v-for="(item2, index2) in item.pictureList" :key="index2">
+					</image>
+				</view>
+				<view class="threePic" v-if="item.pictureList != null && item.pictureList.length == 3">
+					<image :src="loadImgSrcLocalhost(item2)" v-for="(item2, index2) in item.pictureList" :key="index2">
+					</image>
+				</view>
+				<view class="threePic" v-if="item.pictureList != null && item.pictureList.length > 3">
+					<image :src="loadImgSrcLocalhost(item2)" v-for="(item2, index2) in item.pictureList"
+						v-if="index2 < 3" :key="index2"></image>
+				</view>
+
+				<view class="jlSj">
+					<view class="ck">
+						<span>
+							<em class="iconfont icon-chakan"></em>
+							{{ item.likeNum }}
+						</span>
+						<span>
+							<em class="iconfont icon-shoucang"></em>
+							{{ item.watchNum }}
+						</span>
+					</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import {
+		list
+	} from '@/api/lifeServices/lifeServices.js';
+	export default {
+		data() {
+			return {
+				dataSource: [],
+				// 数据总量
+				total: 0,
+				queryParams: {
+					// 当前页
+					pageNum: 1,
+					// 每页数据量
+					pageSize: 10,
+				},
+				loading: false,
+			}
+		},
+		/**
+		 * 生命周期函数--监听页面加载
+		 */
+		onLoad(options) {
+			this.getList(1)
+		},
+		onReachBottom(){
+			let pageNum = this.queryParams.pageNum
+			let pageSize = this.queryParams.pageSize
+			let total = this.total
+			if(pageNum * pageSize >= total){
+				uni.showToast({
+					title:'暂无更多数据'
+				})
+				return
+			} else {
+				this.queryParams.pageNum += 1;
+				this.getList()
+			}
+		},
+		methods: {
+			goDetails(id) {
+				uni.navigateTo({
+					url: '/pages/lifeServicesDetails/lifeServicesDetails?id=' + id,
+				});
+			},
+			// 分页触发
+			change(e) {
+				this.getList(e.current);
+			},
+			// 获取数据
+			getList(pageNum) {
+				let params = {
+					pageSize: this.queryParams.pageSize,
+					pageNum: pageNum,
+				}
+				list(params).then(res => {
+					if (res.code == 200) {
+						this.dataSource = [...this.dataSource,...res.rows]
+						this.total = res.total
+					}
+				})
+			},
+		}
+	}
+</script>
+
+<style>
+	@import './lifeServices.css';
+</style>

pages/lifeServicesDetails/lifeServicesDetails.css

@@ -0,0 +1,160 @@
+/* pages/wenbaxiangqing.wxss */
+.title {
+    font-size: 44rpx;
+    text-align: center;
+    line-height: 70rpx;
+    color: #333;
+    margin: 30rpx 0;
+}
+.wenzhangLy {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    border-bottom: solid 2rpx #e8e8e8;
+    padding: 0 0 14rpx 0;
+}
+.txTime {
+    display: flex;
+    flex-direction: row;
+}
+.txTime image {
+    width: 80rpx;
+    height: 80rpx;
+}
+.time {
+    display: flex;
+    flex-direction: column;
+    padding: 10rpx 0 0 8px;
+}
+.time p {
+    font-size: 28rpx;
+    color: #9c9c9c;
+}
+.time span {
+    font-size: 24rpx;
+    color: #c4c4c4;
+}
+
+.jf {
+    color: #07c160;
+    line-height: 80rpx;
+    font-size: 24rpx;
+}
+.icon-jifen {
+    font-size: 28rpx;
+    color: #07c160;
+    margin: 0 0 0 6rpx;
+}
+.ck {
+    color: #c4c4c4;
+    font-size: 28rpx;
+}
+.icon-pinglun,
+.icon-chakan,
+.ck .icon-shoucang {
+    font-size: 28rpx;
+    margin: 0 6rpx 0 20rpx;
+    color: #c4c4c4;
+    line-height: 0;
+}
+.wenzhangCont {
+    font-size: 34rpx;
+    margin: 30rpx 0;
+}
+.wenzhangCont image {
+    width: 100%;
+    height: 320rpx;
+    margin: 20rpx auto;
+}
+.pinglunTj {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    margin: 30rpx 0;
+}
+.pinglunTitle {
+    font-size: 34rpx;
+    color: #2e2e2e;
+    font-weight: 600;
+}
+.pinglunTitle em {
+    font-size: 34rpx;
+    color: #9b9b9b;
+    font-weight: normal;
+    margin: 0 0 0 10rpx;
+}
+.pinglunList {
+    width: 100%;
+    padding: 0 0 120rpx 0;
+}
+.pinglunList li {
+    margin: 20rpx 0;
+    border-bottom: solid 2rpx #e8e8e8;
+    padding: 0 0 20rpx 0;
+    display: flex;
+    flex-direction: column;
+}
+.plListcont {
+    font-size: 30rpx;
+    color: #696868;
+    margin: 20rpx 0;
+}
+.pinglunList li button {
+    width: 80%;
+    border-radius: 10rpx;
+    background: #07c160;
+    color: #fff;
+    font-size: 28rpx;
+    font-weight: normal;
+    margin: 16rpx auto;
+}
+.fabiaoPl {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    position: fixed;
+    left: 0;
+    bottom: 0;
+    height: 112rpx;
+    background: #e8e8e8;
+    box-shadow: 0rpx 0rpx 16rpx #999;
+}
+.shuRu {
+    width: 72%;
+    display: flex;
+    flex-direction: row;
+    height: 76rpx;
+    background: #e0e0e0;
+    border-radius: 60rpx;
+    margin: 20rpx 0 0 20rpx;
+}
+.shuRu input {
+    line-height: 38px;
+    height: 76rpx;
+    font-size: 30rpx;
+    width: 83%;
+}
+.icon-bianji {
+    font-size: 38rpx;
+    line-height: 76rpx;
+    margin: 0 10rpx 0 20rpx;
+    color: #828181;
+}
+.icon-shoucang {
+    font-size: 50rpx;
+    line-height: 112rpx;
+    color: #828181;
+}
+.fasong {
+    width: 58rpx;
+    height: 58rpx;
+    border-radius: 50rpx;
+    background: #07c160;
+    margin: 26rpx 20rpx 0 10rpx;
+    text-align: center;
+    line-height: 58rpx;
+}
+.icon-fasong {
+    font-size: 40rpx;
+    color: #fff;
+}

pages/lifeServicesDetails/lifeServicesDetails.vue

@@ -0,0 +1,237 @@
+<template>
+	<view>
+		<!-- 生活服务详情 -->
+		<view class="container">
+			<h1 class="title">{{fromData.titleName}}</h1>
+			<view class="wenzhangLy">
+				<!-- 头像昵称 -->
+				<view class="txTime">
+					<img class="uni-header-image"
+						:src="initInfo.headImg == null || initInfo.headImg == '' ? 'http://116.142.80.12:9000/10_03.png' : initInfo.headImg" />
+					<view class="time">
+						<p>{{initInfo.wechatName}}</p>
+						<span>{{fromData.createTime}}</span>
+					</view>
+				</view>
+			</view>
+			<view class="wenzhangCont">
+				<view v-html="fromData.textDetails"></view>
+				<view v-for="(item, index) in fromData.pictureList" :key="index">
+					<image :src="loadImgSrcLocalhost(item)"></image>
+				</view>
+			</view>
+			<view class="fengexian"></view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import {
+		getDetails
+	} from '@/api/lifeServices/lifeServices.js';
+	import {
+		getUserInfo
+	} from '@/api/me/me.js'
+	export default {
+		data() {
+			return {
+				parentId: "",
+				fromData: {},
+				content: "",
+				initInfo: {
+					userId: null,
+					scoreNum: 0,
+					wechatName: "微信用户",
+					name: null,
+					headImg: null,
+				},
+			};
+		},
+		methods: {
+			// 获取数据
+			getDetails() {
+				getDetails(this.parentId).then(res => {
+					if (res.code == 200) {
+						this.fromData = res.data
+					}
+				})
+			},
+			getUserInfoByUserId(userId) {
+				getUserInfo(userId).then(res => {
+					this.initInfo = res.data;
+				})
+			},
+		}
+		/**
+		 * 生命周期函数--监听页面加载
+		 */
+		,
+		onLoad(options) {
+			this.parentId = options.id
+			this.getDetails()
+		},
+		/**
+		 * 生命周期函数--监听页面初次渲染完成
+		 */
+		onReady() {
+			this.userId = getApp().globalData.userId
+			this.getUserInfoByUserId(this.userId)
+		},
+		/**
+		 * 生命周期函数--监听页面显示
+		 */
+		onShow() {},
+		/**
+		 * 生命周期函数--监听页面隐藏
+		 */
+		onHide() {},
+		/**
+		 * 生命周期函数--监听页面卸载
+		 */
+		onUnload() {},
+		/**
+		 * 页面相关事件处理函数--监听用户下拉动作
+		 */
+		onPullDownRefresh() {},
+		/**
+		 * 页面上拉触底事件的处理函数
+		 */
+		onReachBottom() {},
+		/**
+		 * 用户点击右上角分享
+		 */
+		onShareAppMessage() {},
+	};
+</script>
+<style lang="scss">
+	@import './lifeServicesDetails.css';
+
+	.collect {
+		.icon-shoucang:before {
+			color: red;
+		}
+	}
+
+	.not-collect {}
+
+	.effectBix {
+		width: 56px;
+		height: 56px;
+		border-radius: 50px;
+		font-family: 'Bebas Neue', cursive;
+		background: linear-gradient(45deg, transparent 5%, #FF013C 5%);
+		border: 0;
+		color: #fff;
+		text-align: center;
+		line-height: 56px;
+		outline: transparent;
+		position: absolute;
+		transform: rotate(-30deg);
+		right: 3%;
+		top: -5%;
+	}
+
+	.effectBox,
+	.effectBox::after {
+		width: 56px;
+		height: 56px;
+		border-radius: 50px;
+		font-size: 16px;
+		font-family: 'Bebas Neue', cursive;
+		background: linear-gradient(45deg, transparent 5%, #FF013C 5%);
+		border: 0;
+		color: #fff;
+		opacity: 1;
+		letter-spacing: 3px;
+		text-align: center;
+		line-height: 56px;
+		outline: transparent;
+		position: relative;
+		left: 78%;
+		top: 113%;
+		transform: rotate(-30deg);
+		z-index: 1;
+	}
+
+	.effectBox::after {
+		--slice-0: inset(50% 50% 50% 50%);
+		--slice-1: inset(80% -6px 0 0);
+		--slice-2: inset(50% -6px 30% 0);
+		--slice-3: inset(10% -6px 85% 0);
+		--slice-4: inset(40% -6px 43% 0);
+		--slice-5: inset(80% -6px 5% 0);
+
+		content: 'AVAILABLE NOW';
+		display: block;
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		background: linear-gradient(45deg, transparent 3%, #00E6F6 3%, #00E6F6 5%, #FF013C 5%);
+		text-shadow: -3px -3px 0px #F8F005, 3px 3px 0px #00E6F6;
+		clip-path: var(--slice-0);
+	}
+
+	.effectBox:hover::after {
+		animation: 1s glitch;
+		animation-timing-function: steps(2, end);
+	}
+
+	@keyframes glitch {
+		0% {
+			clip-path: var(--slice-1);
+			transform: translate(-20px, -10px);
+		}
+
+		10% {
+			clip-path: var(--slice-3);
+			transform: translate(10px, 10px);
+		}
+
+		20% {
+			clip-path: var(--slice-1);
+			transform: translate(-10px, 10px);
+		}
+
+		30% {
+			clip-path: var(--slice-3);
+			transform: translate(0px, 5px);
+		}
+
+		40% {
+			clip-path: var(--slice-2);
+			transform: translate(-5px, 0px);
+		}
+
+		50% {
+			clip-path: var(--slice-3);
+			transform: translate(5px, 0px);
+		}
+
+		60% {
+			clip-path: var(--slice-4);
+			transform: translate(5px, 10px);
+		}
+
+		70% {
+			clip-path: var(--slice-2);
+			transform: translate(-10px, 10px);
+		}
+
+		80% {
+			clip-path: var(--slice-5);
+			transform: translate(20px, -10px);
+		}
+
+		90% {
+			clip-path: var(--slice-1);
+			transform: translate(-10px, 0px);
+		}
+
+		100% {
+			clip-path: var(--slice-1);
+			transform: translate(0);
+		}
+	}
+</style>