lcoco/pages/my/model/my-praise.vue

<template>
	<view class="my-praise-box">
		<view class="" v-show="false">
			<view class="publish-box" v-show="publishBoxOff">
				<image class="publish-img sys-radius-12" src="/static/img/circle/1.png" mode=""></image>
				<view class="publish-text">
					<view class="publish-title sys-color-black-0 sys-weight-400 sys-size-34">
						不太正经的机车照片
					</view>
					<view class="sys-size-28 sys-weight-400 sys-color-gray-9">
						记录在自由路.上的轰鸣瞬间
					</view>
				</view>
				<view class="publish-button sys-background-FF9F14 sys-radius-200 sys-size-28 sys-color-white">
					去发布
				</view>
				<view class="off-button sys-background-F2F2F2 sys-radius-round-left-80" @click="publishOff">
					<image class="off-img" src="/static/img/circle/off.png" mode=""></image>
				</view>
			</view>
		</view>

		<scroll-view class="recommended-box" scroll-x="true" v-show="false">
			<view class="recommended-list" v-for="(item,i) in listTwo" :key="i" @click="goRecommended">
				<image class="recommended-list-img sys-radius-16" :src="item.img" mode=""></image>
				<view class="recommended-list-name">
					<image class="list-name-img" src="/static/dgex-tantan/like.png" mode=""></image>
					<view class="sys-color-white sys-size-28">
						{{item.text}}
					</view>
				</view>
				<view class="recommended-list-text">
					<view class="recommended-list-text-left">
						<!-- <image v-for="imgs in item.icon" class="list-text-left-img sys-radius-8" :src="imgs" mode=""></image> -->
						<image v-for="imgs in item.icon" class="list-text-left-img sys-radius-8" src="/static/img/temporary/1.png"
							mode=""></image>
					</view>
					<view class="recommended-list-text-right">
						<view class="sys-size-24 sys-color-white">
							{{item.num}}人在这里
						</view>
						<uni-icons type="forward" size="12" color="#fff"></uni-icons>
					</view>
				</view>
			</view>
		</scroll-view>

		<view class="praise-item" @click="goToDetails" v-for="(item,itemIndex) in list">
			<view class="praise-left">
				<image class="praise-head" :src="item.avatar" mode="aspectFill"></image>
			</view>
			<view class="praise-right">
				<view class="praise-top-data">
					<view class="praise-top-left">
						<view class="praise-top-left-title">
							<view class="left-title-text sys-height-44 sys-color-black sys-weight-600">{{item.nickname}}</view>
							<view class="left-title-vip">
								<image class="left-title-vip-img" src="/static/img/my/vip.png" mode="heightFix"></image>
							</view>

						</view>
						<view class="left-title-time sys-color-gray-9">{{item.createdAt}}发布</view>
					</view>
					<view class="praise-top-right">
						<call :user-id="item.userId"></call>
					</view>
				</view>

				<view class="right-text sys-color-black sys-weight-400">
					{{item.content}}
				</view>
				<view class="right-img">
					<view class="one-img" v-if="item.galleryUrls.length===1">
						<img-one :file-list="item.galleryUrls"></img-one>
					</view>
					<view class="two-img" v-else-if="item.galleryUrls.length===2 || item.galleryUrls.length===4">
						<img-two :file-list="item.galleryUrls"></img-two>
					</view>
					<view class="three-img" v-else>
						<img-three :type="2" :file-list="item.galleryUrls"></img-three>
					</view>
				</view>
				<view class="right-tag-list" v-if="false">
					<dynamic-tag :list="item.tag" :tag-bg="tagBg" :tag-color="tagColor"></dynamic-tag>
				</view>
				<view class="right-operation-list">
					<view class="operation-share">
						<view class="operation-item">
							<view class="operation-icon"><text class="iconfont" :style="{'color':operateColor}">&#xe624;</text></view>
							<view class="operation-text sys-weight-400" :style="{'color':operateColor}">分享</view>
						</view>
					</view>
					<view class="operation-items">
						<view class="operation-item">
							<view class="operation-icon" @click="setLike(itemIndex)">
								<text class="iconfont icon-dianzan" v-if="!item.liked" :style="{'color':operateColor}"> &#xe8ad;</text>
								<text class="iconfont icon-dianzan1" v-else :style="{'color':'#ED301D'}"> &#xe8c3;</text>
							</view>
							<view class="operation-text sys-weight-400" :style="{'color':operateColor}">
								{{item.likeCount>0?item.likeCount:'点赞'}}</view>
						</view>
						<view class="operation-item">
							<view class="operation-icon"><text class="iconfont icon-pinglun"
									:style="{'color':operateColor}">&#xe891;</text></view>
							<view class="operation-text sys-weight-400" :style="{'color':operateColor}">
								{{item.commentCount>0?item.commentCount:'评论'}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import ImgOne from "@/pages/common/img/img-one";
	import ImgTwo from "@/pages/common/img/img-two";
	import ImgThree from "@/pages/common/img/img-three";
	import DynamicTag from "@/pages/common/tag/dynamic-tag";
	import Call from "@/pages/common/call/call";
	import {
		setLike,
		setUnLike
	} from "@/api/community";
	import {
		getMyLikeMoments,
		getMyMoments
	} from "@/api/my";
	import tools from "@/service/tools";
	export default {
		name: "my-praise",
		components: {
			Call,
			DynamicTag,
			ImgThree,
			ImgTwo,
			ImgOne
		},
		props: {
			tagNum: {},
		},
		data() {
			return {
				tagBg: '#F2F2F2',
				tagColor: '#999999',
				operateColor: '#999999',
				list: [

				],
				listTwo: [

				],
				publishBoxOff: true,
				isAjax: false,
				total: undefined,
				page: 1,
			}
		},
		watch: {},
		mounted() {
			this.startList()
		},
		methods: {
			startList() {
				if (this.userId <= 0) {
					// return false
				}
				this.list = []
				this.isAjax = false
				this.total = undefined
				this.page = 1
				this.getMyLikeMoments()

			},
			getMyLikeMoments() {
				if (this.isAjax) {
					return
				}
				this.isAjax = true
				let that = this
				getMyLikeMoments({
					'userId': this.userId,
					'pageNo': this.page,
					'pageSize': 20
				}).then((res) => {
					this.isAjax = false
					if (res.code === 0) {
						res.data.data.forEach((item) => {
								item.dateArr = tools.getDateArr(item.createdAt)
								that.list.push(item)
							})
							++that.page
						that.total = res.data.total
					}
				})
			},
			setLike(index) {
				this.list[index].liked = !this.list[index].liked
				if (this.list[index].liked) {
					++this.list[index].likeCount
					setLike(this.list[index].id).then((res) => {})
				} else {
					--this.list[index].likeCount
					setUnLike(this.list[index].id).then((res) => {})
				}
			},
			goToDetails() {
				uni.navigateTo({
					'url': '/pages/circle/circle'
				})
			},
			goRecommended() {
				uni.navigateTo({
					'url': '/pages/circle/recommended'
				})
			},
			publishOff() {
				this.publishBoxOff = false
				console.log(this.publishBoxOff);
			},
		}
	}
</script>

<style scoped lang="scss">
	.my-praise-box {
		.publish-box {
			width: 100%;
			// height: 100%;
			display: flex;
			border-top: 20rpx solid #FAFAFA;
			border-bottom: 20rpx solid #FAFAFA;
			padding: 32rpx;
			justify-content: space-between;
			position: relative;
			align-items: center;
			box-sizing: border-box;

			.publish-img {
				width: 120rpx;
				height: 120rpx;
				flex-shrink: 0;
			}

			.publish-text {
				.publish-title {
					margin: 0 0 8rpx 0;
				}
			}

			.publish-button {
				flex-shrink: 0;
				padding: 6rpx 32rpx;
			}

			.off-button {
				position: absolute;
				right: 0;
				top: 0;
				padding: 0rpx 2rpx 6rpx 12rpx;

				.off-img {
					width: 24rpx;
					height: 24rpx;
				}
			}
		}

		.recommended-box {
			box-sizing: border-box;
			width: 100%;
			padding: 0 24rpx;
			display: flex;
			align-items: center;
			white-space: nowrap;

			.recommended-list {
				display: inline-block;
				width: 320rpx;
				height: 160rpx;
				margin: 0 8rpx;
				padding: 16rpx 4rpx 16rpx 12rpx;
				box-sizing: border-box;
				position: relative;

				// flex-shrink: 0;
				.recommended-list-img {
					width: 100%;
					height: 100%;
					position: absolute;
					left: 0;
					top: 0;
					z-index: -1;
				}

				.recommended-list-name {
					display: flex;
					align-items: center;

					.list-name-img {
						width: 28rpx;
						height: 28rpx;
						margin: 0 10rpx 0 0;
					}
				}

				.recommended-list-text {
					width: 100%;
					padding: 0 4rpx 0 16rpx;
					box-sizing: border-box;
					position: absolute;
					bottom: 16rpx;
					left: 0;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.recommended-list-text-left {
						display: flex;
						align-items: center;

						.list-text-left-img {
							width: 40rpx;
							height: 40rpx;
							margin: 0 4rpx 0 0;
						}
					}

					.recommended-list-text-right {
						display: flex;
						align-items: center;
					}
				}
			}
		}

		.praise-item {
			padding: 0 32rpx;
			margin: 40rpx 0 4rpx 0;
			border-bottom: 1rpx solid #F2F2F2;
			display: flex;
			justify-content: space-between;

			.praise-left {
				width: 80rpx;

				.praise-head {
					width: 80rpx;
					height: 80rpx;
					border-radius: 60rpx;
				}
			}

			.praise-right {
				width: calc(100% - 80rpx);
				padding-left: 22rpx;

				.praise-top-data {
					display: flex;
					justify-content: space-between;

					.praise-top-left {
						.praise-top-left-title {
							display: flex;
							justify-content: flex-start;
							align-items: center;

							.left-title-text {
								font-size: 32rpx;
								margin-right: 8rpx;
								flex-shrink: 0;
							}

							.left-title-vip-img {
								height: 28rpx;
							}
						}

						.left-title-time {
							margin-top: 8rpx;
							line-height: 34rpx;
							font-size: 24rpx;
						}
					}

				}

				.right-text {
					margin-top: 24rpx;
					font-size: 28rpx;
					height: 40rpx;
					line-height: 40rpx;
				}

				.right-img {
					margin-top: 16rpx;
				}

				.right-tag-list {
					margin-top: 8rpx;
				}

				.right-operation-list {
					margin-top: 44rpx;
					padding-bottom: 42rpx;
					display: flex;
					justify-content: space-between;

					.operation-share {
						.operation-item:first-child {
							.operation-icon {
								text {
									font-size: 30rpx;
								}
							}
						}
					}

					.operation-items {
						display: flex;
						justify-content: flex-start;

						.operation-item:first-child {
							.operation-text {
								width: 100rpx;
							}
						}

						.operation-item:last-child {
							.operation-text {
								width: 80rpx;
							}
						}

					}

					.operation-item {
						display: flex;
						justify-content: flex-start;

						.operation-icon {
							width: 40rpx;
							height: 40rpx;
							margin-right: 8rpx;

							text {
								font-size: 40rpx;
								line-height: 40rpx;
							}
						}

						.operation-text {
							height: 40rpx;
							line-height: 41rpx;
							font-size: 26rpx;

						}
					}

				}
			}

		}
	}
</style>