南岸小程序我的评论

nngkxxdp/src/main/resources/static/nnzwminiapp/pages/api/user-api.js

@@ -26,8 +26,17 @@ function getFavorite(data) {
   })
 }
 
+function getComments(data) {
+  return request({
+    url: `/mini/hlw/comments`,
+		method: 'GET',
+		data: data
+  })
+}
+
 export {
   login,
 	getCanteenList,
-	getFavorite
+	getFavorite,
+	getComments
 }

nngkxxdp/src/main/resources/static/nnzwminiapp/pages/myComment/myComment.js

@@ -1,18 +1,65 @@
 // pages/myComment/myComment.js
+
+import {
+	getComments
+} from '../api/user-api'
+
 Page({
 
 	/**
 	 * 页面的初始数据
 	 */
 	data: {
+		tab: 0,
+		item: 0,
+		commentList: []
+	},
 
+	changeItem: function (e) {
+		this.setData({
+			item: e.currentTarget.dataset.item
+		})
+	},
+
+	changeTab: function (e) {
+		this.setData({
+			tab: e.detail.current
+		})
 	},
 
 	/**
 	 * 生命周期函数--监听页面加载
 	 */
 	onLoad(options) {
-
+		const params = {
+			'userId': 'test',
+			'type': 1
+		}
+		// getComments(params).then(res => {
+		// 	this.setData({
+		// 		'commentList': res.data.dataList
+		// 	})
+		// })
+		const data = [{
+			"replyId": 3172674,
+			"userId": 18001640,
+			"userName": "Mr.Caras",
+			"headerImg": "https://imagecdn.cqliving.com/images/app_4/cms/202105/2f6942bd99b36639a2a9f567b0e303ab14f10e63.jpg",
+			"content": "作者用心了，a了a了！",
+			"commentTime": "1分钟前",
+			"sourceTitle": "长江上游最大中心岛的生态蝶变"
+		},{
+			"replyId": 3172672,
+			"userId": 18001130,
+			"userName": "Mr.王",
+			"headerImg": "https://imagecdn.cqliving.com/images/app_4/cms/202105/2f6942bd99b36639a2a9f567b0e303ab14f10e63.jpg",
+			"content": "来人，把我30米大刀拿来给秀儿梳头发！",
+			"commentTime": "2022-1-1",
+			"sourceTitle": "且看汉武帝如何指江山，定乾坤"
+		}]
+		this.setData({
+			'commentList': data
+		})
 	},
 
 	/**

nngkxxdp/src/main/resources/static/nnzwminiapp/pages/myComment/myComment.wxml

@@ -1,4 +1,30 @@
 <!--pages/myComment/myComment.wxml-->
 <view style="border-top: 2rpx solid #11111130;padding: 0 20rpx 20rpx 20rpx">
-	
-</view>
+	<!-- 整体 -->
+	<view style="width: 100%">
+		<view style="height:80rpx;display:flex;align-items: center;">
+			<view class="tab-item {{tab==0?'active':''}}" bindtap="changeItem" data-item="0">
+				<view style="height: 100%;display:flex;align-items:center;justify-content:center;">发出的评论</view>
+			</view>
+			<view class="tab-item {{tab==1?'active':''}}" bindtap="changeItem" data-item="1">
+				<view style="height: 100%;display:flex;align-items:center;justify-content:center;">收到的评论</view>
+			</view>
+		</view>
+		<view style="height: 680rpx;flex: 1">
+			<swiper style="height: 100%" current="{{item}}" bindchange="changeTab">
+				<swiper-item>
+					<scroll-view scroll-y="true" style="height: 100%;padding:0;margin:0;">
+						<include src="putComment.wxml" />
+					</scroll-view>
+				</swiper-item>
+
+				<swiper-item>
+					<scroll-view scroll-y="true" style="height: 100%;padding:0;margin:0;">
+						<include src="receiveComment.wxml" />
+					</scroll-view>
+				</swiper-item>
+			</swiper>
+		</view>
+	</view>
+	<!-- 整体 -->
+</view>

nngkxxdp/src/main/resources/static/nnzwminiapp/pages/myComment/myComment.wxss

@@ -1 +1,18 @@
-/* pages/myComment/myComment.wxss */
+/* pages/myComment/myComment.wxss */
+
+.tab-item {
+  flex: 1;
+	font-size: 31rpx;
+	font-weight: 500;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+	line-height: 31rpx;
+	letter-spacing: 3rpx;
+	height: 55rpx;
+	color: #c7c7c7;
+}
+
+.tab-item.active {
+  color: #1b2b42;
+}

nngkxxdp/src/main/resources/static/nnzwminiapp/pages/myComment/putComment.wxml

@@ -0,0 +1,17 @@
+<view style="width: 100%">
+	<view wx:for="{{ commentList }}" wx:for-item="item" wx:for-index="index" wx:for-key="index" style="width: 100%">
+		<view style="height: 90rpx;display: flex;align-items: center;justify-content: start;">
+			<image style="height:60rpx;width:60rpx;background-color: #ffddcc;border-radius: 50%;"></image>
+			<view style="height:60rpx;font-size: 27rpx;color: #b4b4b4;padding-left: 20rpx;padding-bottom:8rpx;display: flex;flex-direction: column-reverse;">{{ item.userName }}</view>
+		</view>
+		<view style="display: flex;flex-direction: column;align-items: flex-start;justify-content: center;padding-left: 80rpx;width: 100%;">
+			<view style="display: flex;width: 100%;">
+				<view style="width:525rpx;padding-right: 2%;font-size: 27rpx;">{{ item.content }}</view>
+				<view style="display: flex;"><button style="font-size: 18rpx;">删除</button></view>
+			</view>
+			<view style="display: flex;align-items: center;padding-left:10rpx;margin-top: 5rpx;height: 50rpx;width: 100%;font-size: 24rpx;color: #858585;background-color: #eeeeee;">{{ item.sourceTitle }}</view>
+			<view style="font-size: 20rpx;color: #b5b5b5;margin-top: 10rpx;">{{ item.commentTime }}</view>
+		</view>
+		<view style="height: 30rpx;border-bottom: 2rpx solid #11111130;"></view>
+	</view>
+</view>

nngkxxdp/src/main/resources/static/nnzwminiapp/pages/myComment/receiveComment.wxml

@@ -0,0 +1 @@
+<view>收</view>