no message

pages.json

@@ -147,14 +147,14 @@
     {
       "path": "pages/circle/index",
       "style": {
-        "navigationBarTitleText": "",
+        "navigationBarTitleText": "圈子",
         "enablePullDownRefresh": false
       }
     },
 		{
 		  "path": "pages/circle/recommended",
 		  "style": {
-		    "navigationBarTitleText": "",
+		    "navigationBarTitleText": "热聊话题",
 		    "enablePullDownRefresh": false
 		  }
 		},
@@ -355,6 +355,13 @@
         "enablePullDownRefresh": false
       }
     },
+		{
+		  "path": "pages/circle/interactiveCenter",
+		  "style": {
+		    "navigationBarTitleText": "互动中心",
+		    "enablePullDownRefresh": false
+		  }
+		},
 	{
 	  "path": "pages/wallet/wallet",
 	  "style": {

pages/circle/circle.vue

@@ -1,191 +1,400 @@
 <template>
-  <view class="circle-box">
-    <view class="circle-title"  :style="[{ 'margin-top': statusBarH + 'px'}]">
-      <view class="title-left">
-        <image class="title-left-back" @click.stop="back" src="/static/img/common/back.png"></image>
-        <view class="title-user">
-          <image class="user-head" src="/static/img/temporary/1.png" mode="aspectFill"></image>
-          <view class="user-data">
-            <view class="user-name sys-color-black sys-weight-600 sys-height-44">WWWWW</view>
-            <view class="user-add sys-color-gray-9 sys-height-34">2021-04-18 15:53</view>
-          </view>
-        </view>
-      </view>
-      <view class="title-right">
-        <call></call>
-        <image class="title-right-img" @click.stop="back" src="/static/img/circle/Frame-100070@2x.png" mode="heightFix"></image>
-      </view>
-    </view>
-    <scroll-view :scroll-y="true" :style="{'height':'calc(100vh - '+navHeight+'rpx - env(safe-area-inset-bottom))'}">
-      <view class="circle-data">
-        <view class="circle-img-list">
-          <swiper class="swiper" circular :indicator-dots="true" indicator-color="rgba(255,255,255,0.4)" indicator-active-color="#FFFFFF">
-            <swiper-item>
-              <image class="circle-img" @click.stop="back" src="/static/img/temporary/1.png" mode="aspectFill"></image>
-            </swiper-item>
-            <swiper-item>
-              <image class="circle-img" @click.stop="back" src="/static/img/temporary/2.png" mode="aspectFill"></image>
-            </swiper-item>
-            <swiper-item>
-              <image class="circle-img" @click.stop="back" src="/static/img/temporary/3.png" mode="aspectFill"></image>
-            </swiper-item>
-          </swiper>
-
-        </view>
-        <view class="circle-text sys-color-black">
-          我是阳光大男孩
-        </view>
-        <view class="tag-list">
-          <dynamic-tag :list="tagList" tag-bg="#F2F2F2" tag-color="#999999"></dynamic-tag>
-        </view>
-      </view>
-      <view class="evaluate-data">
-        <view class="tag-list">
-          <view class="tag-item" @click="setTitleTag(0)">
-            <text class="tag-text sys-weight-600 sys-height-44 sys-color-gray-9" :class="{'tag-text-default':tagNum===0}">评论</text>
-            <text class="tag-num sys-color-gray-9">(3)</text>
-          </view>
-          <view class="tag-item" @click="setTitleTag(1)">
-            <text class="tag-text sys-weight-600 sys-height-44 sys-color-gray-9" :class="{'tag-text-default':tagNum===1}">相关推荐</text>
-          </view>
-        </view>
-        <view class="evaluate-list">
-          <view class="evaluate-item"></view>
-        </view>
-      </view>
-    </scroll-view>
-
-
-  </view>
+	<view class="circle-box">
+		<view class="circle-title" :style="[{ 'margin-top': statusBarH + 'px'}]">
+			<view class="title-left">
+				<image class="title-left-back" @click.stop="back" src="/static/img/common/back.png"></image>
+				<view class="title-user">
+					<image class="user-head" src="/static/img/temporary/1.png" mode="aspectFill"></image>
+					<view class="user-data">
+						<view class="user-name sys-color-black sys-weight-600 sys-height-44">WWWWW</view>
+						<view class="user-add sys-color-gray-9 sys-height-34">2021-04-18 15:53</view>
+					</view>
+				</view>
+			</view>
+			<view class="title-right">
+				<call></call>
+				<image class="title-right-img" @click.stop="back" src="/static/img/circle/Frame-100070@2x.png"
+					mode="heightFix"></image>
+			</view>
+		</view>
+		<scroll-view :scroll-y="true"
+			:style="{'height':'calc(100vh - '+navHeight+'rpx - env(safe-area-inset-bottom))'}">
+			<view class="circle-data">
+				<view class="circle-img-list">
+					<swiper class="swiper" circular :indicator-dots="true" indicator-color="rgba(255,255,255,0.4)"
+						indicator-active-color="#FFFFFF">
+						<swiper-item>
+							<image class="circle-img" @click.stop="back" src="/static/img/temporary/1.png"
+								mode="aspectFill"></image>
+						</swiper-item>
+						<swiper-item>
+							<image class="circle-img" @click.stop="back" src="/static/img/temporary/2.png"
+								mode="aspectFill"></image>
+						</swiper-item>
+						<swiper-item>
+							<image class="circle-img" @click.stop="back" src="/static/img/temporary/3.png"
+								mode="aspectFill"></image>
+						</swiper-item>
+					</swiper>
+				</view>
+				<view class="circle-text sys-color-black">
+					我是阳光大男孩
+				</view>
+				<view class="tag-list">
+					<dynamic-tag :list="tagList" tag-bg="#F2F2F2" tag-color="#999999"></dynamic-tag>
+				</view>
+			</view>
+			<view class="evaluate-data">
+				<view class="tag-box">
+					<view class="tag-item" @click="setTitleTag(0)">
+						<text class="tag-text sys-weight-600 sys-height-44 sys-color-gray-9"
+							:class="{'tag-text-default':tagNum===0}">评论</text>
+						<text class="tag-num sys-color-gray-9">(3)</text>
+					</view>
+					<view class="tag-item" @click="setTitleTag(1)">
+						<text class="tag-text sys-weight-600 sys-height-44 sys-color-gray-9"
+							:class="{'tag-text-default':tagNum===1}">相关推荐</text>
+					</view>
+				</view>
+				<view class="evaluate-list" v-if="tagNum == 0">
+					<view class="evaluate-item-box" v-for="(item,index) in reviewList" :key="index">
+						<view class="evaluate-item">
+							<view class="evaluate-item-left">
+								<image :src="item.img" class="evaluate-item-img sys-radius-round" mode="">
+								</image>
+								<view class="evaluate-item-text">
+									<view class="item-text-name sys-size-32 sys-color-gray-9">
+										{{item.name}}
+									</view>
+									<view class="item-text sys-color-black sys-size-28">
+										{{item.text}}
+									</view>
+									<view class="item-text-time sys-size-24 sys-color-gray-9">
+										{{item.time}}
+									</view>
+								</view>
+							</view>
+							<view class="evaluate-item-right">
+								<uni-icons type="hand-up" size="20" @click="praise"></uni-icons>
+								<!-- <uni-icons type="hand-up-filled" size="20"></uni-icons> -->
+								<view class="sys-size-24 sys-color-gray-9">
+									{{item.num}}
+								</view>
+							</view>
+						</view>
+						<view class="evaluate-item evaluate-item-two" v-for="(itemTwo,indexTwo) in item.data"
+							:key="indexTwo">
+							<view class="evaluate-item-left">
+								<image :src="itemTwo.img" class="evaluate-item-img sys-radius-round" mode="">
+								</image>
+								<view class="evaluate-item-text">
+									<view class="item-text-name sys-size-32 sys-color-gray-9">
+										{{itemTwo.name}}
+									</view>
+									<view class="item-text sys-color-black sys-size-28">
+										{{itemTwo.text}}
+									</view>
+									<view class="item-text-time sys-size-24 sys-color-gray-9">
+										{{itemTwo.time}}
+									</view>
+									<view class="unfold-review">
+										<view class="unfold-review-text sys-size-26 sys-color-gray-6">
+											展开65条评论
+										</view>
+										<uni-icons type="bottom" size="15" color="#797979" @click="unfold"></uni-icons>
+									</view>
+								</view>
+							</view>
+							<view class="evaluate-item-right">
+								<uni-icons type="hand-up" size="20" @click="praise"></uni-icons>
+								<!-- <uni-icons type="hand-up-filled" size="20"></uni-icons> -->
+								<view class="sys-size-24 sys-color-gray-9">
+									{{itemTwo.num}}
+								</view>
+							</view>
+						</view>
+					</view>
+				</view>
+				<view class="" v-else>
+					<my-praise class="my-praise" :tagNum="1"></my-praise>
+				</view>
+			</view>
+		</scroll-view>
+		<view class="chat-box">
+			<uni-icons type="redo" size="20"></uni-icons>
+			<input type="text" class="chat-input sys-background-F2F2F2 sys-radius-200">
+			<uni-icons type="hand-up" size="20"></uni-icons>
+			<view class="give-like sys-color-gray-9 sys-size-24">
+				点赞
+			</view>
+			<uni-icons type="chat" size="20"></uni-icons>
+			<view class="give-like sys-color-gray-9 sys-size-24">
+				评论
+			</view>
+		</view>
+
+	</view>
 </template>
 
 <script>
-import tools from "@/service/tools";
-import Call from "@/pages/common/call/call";
-import DynamicTag from "@/pages/common/tag/dynamic-tag";
-
-export default {
-  components: {DynamicTag, Call},
-  data() {
-    return {
-      statusBarH:0,
-      navHeight:44,
-      tagList:[{'text':'南亭新都会商场','icon':'1'},{'text':'你好认识一哈','icon':'2'}],
-      tagNum:0
-    }
-  },
-  methods: {
-    back(){
-      tools.leftClick()
-    },
-    setTitleTag(num){
-      if(num!==this.tagNum){
-        this.tagNum=num
-      }
-    }
-  },
-  created() {
-    uni.getSystemInfo({
-      success: (e) =>{
-        this.statusBarH = e.statusBarHeight
-        this.navHeight=(50+this.statusBarH)*2+98
-      }
-    })
-
-  }
-}
+	import tools from "@/service/tools";
+	import Call from "@/pages/common/call/call";
+	import DynamicTag from "@/pages/common/tag/dynamic-tag";
+	import MyPraise from "@/pages/my/model/my-praise";
+
+	export default {
+		components: {
+			DynamicTag,
+			Call,
+			MyPraise
+		},
+		data() {
+			return {
+				statusBarH: 0,
+				navHeight: 44,
+				tagList: [{
+					'text': '南亭新都会商场',
+					'icon': '1'
+				}, {
+					'text': '你好认识一哈',
+					'icon': '2'
+				}],
+				reviewList: [{
+					'img': '/static/img/temporary/1.png',
+					'name': 'wwwww',
+					'text': '你好认识一哈',
+					'time': '2021-01-07 15:53',
+					'num': '5',
+					'data': [{
+						'img': '/static/img/temporary/1.png',
+						'name': 'wwwww',
+						'text': '你好认识一哈',
+						'time': '2021-01-07 15:53',
+						'num': '9999',
+					}]
+				}],
+				tagNum: 0
+			}
+		},
+		methods: {
+			back() {
+				tools.leftClick()
+			},
+			setTitleTag(num) {
+				if (num !== this.tagNum) {
+					this.tagNum = num
+				}
+			},
+			praise() {},
+			unfold() {},
+		},
+		created() {
+			uni.getSystemInfo({
+				success: (e) => {
+					this.statusBarH = e.statusBarHeight
+					this.navHeight = (50 + this.statusBarH) * 2 + 98
+				}
+			})
+		}
+	}
 </script>
 
 <style scoped lang="scss">
-.circle-box{
-  .circle-title{
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 12rpx 24rpx;
-    .title-left{
-      display: flex;
-      justify-content: flex-start;
-      .title-left-back{
-        width: 40rpx;
-        height: 40rpx;
-      }
-      .title-user{
-        margin-left: 30rpx;
-        display: flex;
-        justify-content: flex-start;
-        .user-head{
-          width: 64rpx;
-          height: 64rpx;
-          border-radius: 50%;
-          margin-right: 20rpx;
-        }
-        .user-data{
-          .user-name{
-            font-size: 32rpx;
-          }
-          .user-add{
-            font-size: 24rpx;
-          }
-        }
-
-      }
-    }
-    .title-right{
-      display: flex;
-      justify-content: flex-end;
-      .title-right-img{
-        margin-left: 40rpx;
-        height: 36rpx;
-      }
-    }
-  }
-  .circle-data{
-    margin-top: 4rpx;
-    border-bottom: 1rpx solid #F2F2F2;
-    .circle-img-list{
-      width: 100vw;
-      height: 920rpx;
-      .swiper{
-        height: 920rpx;
-        .circle-img{
-          width: 100vw;
-          height: 920rpx;
-        }
-      }
-    }
-    .circle-text{
-      padding:36rpx 32rpx 0 32rpx;
-      flex: 32rpx;
-      line-height: 40rpx;
-    }
-    .tag-list{
-      padding: 0 32rpx 42rpx 32rpx;
-    }
-
-  }
-  .evaluate-data{
-    padding: 40rpx 32rpx;
-    .tag-list{
-      display: flex;
-      justify-content: flex-start;
-      padding-bottom: 2rpx;
-      .tag-item{
-        margin-right: 60rpx;
-        line-height: 44rpx;
-        .tag-text{
-          font-size: 32rpx;
-          margin-right: 4rpx;
-        }
-        .tag-num{
-          font-size: 24rpx;
-        }
-        .tag-text-default{
-          color: #141414;
-        }
-      }
-    }
-  }
-}
+	.circle-box {
+		.circle-title {
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			padding: 12rpx 24rpx;
+
+			.title-left {
+				display: flex;
+				justify-content: flex-start;
+				align-items: center;
+
+				.title-left-back {
+					width: 40rpx;
+					height: 40rpx;
+				}
+
+				.title-user {
+					margin-left: 30rpx;
+					display: flex;
+					justify-content: flex-start;
+
+					.user-head {
+						width: 64rpx;
+						height: 64rpx;
+						border-radius: 50%;
+						margin-right: 20rpx;
+					}
+
+					.user-data {
+						.user-name {
+							font-size: 32rpx;
+						}
+
+						.user-add {
+							font-size: 24rpx;
+						}
+					}
+
+				}
+			}
+
+			.title-right {
+				display: flex;
+				justify-content: flex-end;
+				align-items: center;
+
+				.title-right-img {
+					margin-left: 40rpx;
+					height: 36rpx;
+				}
+			}
+		}
+
+		.circle-data {
+			margin-top: 4rpx;
+			border-bottom: 1rpx solid #F2F2F2;
+
+			.circle-img-list {
+				width: 100vw;
+				height: 920rpx;
+
+				.swiper {
+					height: 920rpx;
+
+					.circle-img {
+						width: 100vw;
+						height: 920rpx;
+					}
+				}
+			}
+
+			.circle-text {
+				padding: 36rpx 32rpx 0 32rpx;
+				flex: 32rpx;
+				line-height: 40rpx;
+			}
+
+			.tag-list {
+				padding: 0 32rpx 42rpx 32rpx;
+			}
+		}
+
+		.evaluate-data {
+			padding: 40rpx 0;
+
+			.tag-box {
+				display: flex;
+				justify-content: flex-start;
+				margin: 0 0 42rpx 0;
+				padding: 0 32rpx 2rpx;
+
+				.tag-item {
+					margin-right: 60rpx;
+					line-height: 44rpx;
+
+					.tag-text {
+						font-size: 32rpx;
+						margin-right: 4rpx;
+					}
+
+					.tag-num {
+						font-size: 24rpx;
+					}
+
+					.tag-text-default {
+						color: #141414;
+					}
+				}
+			}
+
+			.evaluate-list {
+				width: 100%;
+				height: auto;
+				display: flex;
+				flex-direction: column;
+				padding: 0 32rpx;
+				box-sizing: border-box;
+
+				// justify-content: flex-end;
+				.evaluate-item-box {
+					width: 100%;
+					height: auto;
+					display: flex;
+					flex-direction: column;
+
+					.evaluate-item {
+						width: 100%;
+						height: auto;
+						display: flex;
+						justify-content: space-between;
+						padding: 0 32rpx 32rpx;
+						box-sizing: border-box;
+
+						.evaluate-item-left {
+							display: flex;
+
+							.evaluate-item-img {
+								width: 80rpx;
+								height: 80rpx;
+								display: block;
+								margin: 0 20rpx 0 0;
+								flex-shrink: 0;
+							}
+
+							.evaluate-item-text {
+								display: flex;
+								flex-direction: column;
+
+								.item-text {
+									padding: 8rpx 0;
+									word-break: break-all
+								}
+
+								.unfold-review {
+									display: flex;
+									align-items: center;
+									padding: 24rpx 0 0 0;
+								}
+							}
+						}
+
+						.evaluate-item-right {
+							display: flex;
+							flex-shrink: 0;
+							// align-items: center;
+						}
+					}
+
+					.evaluate-item-two {
+						width: calc(100% - 132rpx);
+						align-self: flex-end;
+					}
+				}
+			}
+		}
+
+		.chat-box {
+			width: 100%;
+			height: auto;
+			display: flex;
+			align-items: center;
+			border-top: 1rpx solid #F2F2F2;
+			padding: 12rpx 0 0 34rpx;
+
+			.chat-input {
+				width: 336rpx;
+				height: 72rpx;
+				margin: 0 28rpx 0 42rpx;
+			}
+
+			.give-like {
+				margin: 0 36rpx 0 8rpx;
+			}
 
+		}
+	}
 </style>

pages/circle/interactiveCenter.vue

@@ -0,0 +1,184 @@
+<template>
+	<view class="interactive-center flex-common-css">
+		<Nav :titleColor="'#000'" :title="'互动中心'"></Nav>
+		<scroll-view :scroll-y="true" class="list-scroll" @scroll="scroll" @scrolltolower="scrolltolower">
+			<view class="info-list-box" v-for="(item,index) in dataList" :key="index">
+				<view class="info-name">
+					<view class="info-name-left">
+						<image class="info-name-left-img sys-radius-round" :src="item.img" mode="">
+						</image>
+						<view class="info-name-text">
+							<view class="sys-size-32 sys-weight-600 sys-color-black">
+								{{item.name}}
+							</view>
+							<view class="sys-size-24 sys-color-gray-9">
+								点赞了你的动态
+							</view>
+						</view>
+					</view>
+					<view class="sys-size-28 sys-weight-600 sys-radius-200" @click="selectLike"
+						:class="item.likeStyle == 1?'info-name-right sys-color-black':'info-name-right-two sys-color-gray-9'">
+						{{item.likeStyle == 1?'喜欢Ta':'已喜欢'}}
+					</view>
+				</view>
+				<view class="info-text sys-size-28 sys-color-black">
+					{{item.text}}
+				</view>
+				<view class="info-time">
+					<view class="info-time-left">
+						<image class="info-time-left-img sys-radius-4" :src="item.imgTwo" mode=""></image>
+						<view class="sys-color-gray-9 sys-size-24">
+							你发布的动态
+						</view>
+					</view>
+					<view class="info-time-right sys-color-gray-9 sys-size-24">
+						{{item.time}}
+					</view>
+				</view>
+			</view>
+		</scroll-view>
+	</view>
+</template>
+
+<script>
+	export default {
+		components: {},
+		data() {
+			return {
+				dataList: [{
+					'img': '/static/img/temporary/1.png',
+					'name': 'wwwwww',
+					'text': '今天手机好像撞邪了，拦都拦不住硬要给你打招呼~',
+					'imgTwo': '/static/img/temporary/1.png',
+					'time': '04-13 06:03:56',
+					'likeStyle': '1',
+				}, {
+					'img': '/static/img/temporary/1.png',
+					'name': 'wwwwww',
+					'text': '今天手机好像撞邪了，拦都拦不住硬要给你打招呼~',
+					'imgTwo': '/static/img/temporary/1.png',
+					'time': '04-13 06:03:56',
+					'likeStyle': '1',
+				}, {
+					'img': '/static/img/temporary/1.png',
+					'name': 'wwwwww',
+					'text': '今天手机好像撞邪了，拦都拦不住硬要给你打招呼~',
+					'imgTwo': '/static/img/temporary/1.png',
+					'time': '04-13 06:03:56',
+					'likeStyle': '2',
+				}, {
+					'img': '/static/img/temporary/1.png',
+					'name': 'wwwwww',
+					'text': '今天手机好像撞邪了，拦都拦不住硬要给你打招呼~',
+					'imgTwo': '/static/img/temporary/1.png',
+					'time': '04-13 06:03:56',
+					'likeStyle': '2',
+				}, {
+					'img': '/static/img/temporary/1.png',
+					'name': 'wwwwww',
+					'text': '今天手机好像撞邪了，拦都拦不住硬要给你打招呼~',
+					'imgTwo': '/static/img/temporary/1.png',
+					'time': '04-13 06:03:56',
+					'likeStyle': '2',
+				}, {
+					'img': '/static/img/temporary/1.png',
+					'name': 'wwwwww',
+					'text': '今天手机好像撞邪了，拦都拦不住硬要给你打招呼~',
+					'imgTwo': '/static/img/temporary/1.png',
+					'time': '04-13 06:03:56',
+					'likeStyle': '2',
+				}, {
+					'img': '/static/img/temporary/1.png',
+					'name': 'wwwwww',
+					'text': '今天手机好像撞邪了，拦都拦不住硬要给你打招呼~',
+					'imgTwo': '/static/img/temporary/1.png',
+					'time': '04-13 06:03:56',
+					'likeStyle': '2',
+				}]
+			};
+		},
+		mounted() {},
+		methods: {
+			scroll() {},
+			scrolltolower() {},
+			selectLike() {},
+		},
+	}
+</script>
+
+<style lang="scss" scoped>
+	.interactive-center {
+		.list-scroll {
+			width: 100%;
+			flex: 1;
+			overflow: auto;
+			padding: 44rpx 32rpx 0;
+			box-sizing: border-box;
+
+			.info-list-box {
+				width: 100%;
+				height: auto;
+				display: flex;
+				flex-direction: column;
+				padding: 0 0 32rpx 0;
+				border-bottom: 1rpx solid #F2F2F2;
+				margin: 0 0 32rpx 0;
+
+				.info-name {
+					display: flex;
+					align-items: center;
+					justify-content: space-between;
+					margin: 0 0 34rpx 0;
+
+					.info-name-left {
+						display: flex;
+						align-items: center;
+
+						.info-name-left-img {
+							width: 80rpx;
+							height: 80rpx;
+							margin: 0 20rpx 0 0;
+						}
+
+						.info-name-text {
+							.user-name {
+								margin: 0 0 8rpx 0;
+							}
+						}
+					}
+
+					.info-name-right {
+						padding: 6rpx 16rpx;
+						border: 2rpx solid #141414;
+					}
+
+					.info-name-right-two {
+						padding: 6rpx 16rpx;
+						border: 2rpx solid #999;
+					}
+				}
+
+				.info-text {
+					margin: 0 0 32rpx 0;
+				}
+
+				.info-time {
+					display: flex;
+					align-items: center;
+					justify-content: space-between;
+
+					.info-time-left {
+						display: flex;
+						align-items: center;
+
+						.info-time-left-img {
+							width: 48rpx;
+							height: 48rpx;
+							margin: 0 12rpx 0 0;
+						}
+					}
+				}
+			}
+		}
+	}
+</style>

static/css/sys.css

@@ -180,6 +180,9 @@
 .sys-radius-6{
   border-radius: 6rpx;
 }
+.sys-radius-4{
+  border-radius: 4rpx;
+}
 .sys-radius-round{
   border-radius: 50%;
 }