lcoco/pages/circle/circle.vue

<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-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";
	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;
				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>