创建小程序

2025-12-03 16:07:38 +08:00
commit 2c10e621aa
857 changed files with 104338 additions and 0 deletions
@@ -0,0 +1,136 @@
+<template>
+	<view >
+		<image class="grid-image" @click="emitView" :src="item.media && item.media.length ? item.media[0].url_pull : fallbackImage"
+			mode="aspectFill"></image>
+		<view class="grid-footer" @click="emitView">
+			<image class="grid-avatar" :src="item.user && item.user.avatar_pull ? item.user.avatar_pull : fallbackAvatar"
+				mode="aspectFill"></image>
+			<view class="grid-info">
+				<text class="grid-tag">{{item.content}}</text>
+				<text class="grid-name">{{item.user && item.user.nickname ? item.user.nickname : '匿名用户'}}</text>
+			</view>
+		</view>
+		<view class="card-actions" v-if="isshow">
+			<view class="iconview" @click.stop="emitComment">
+				<image :src="item.is_comment == 0 ? '/static/image/msg.png' : '/static/image/msga.png'" mode="" class="icons1"></image>
+				{{item.comment}}
+			</view>
+			<view class="iconview" @click.stop="emitLike">
+				<image :src="item.is_like == 0 ? '/static/image/zan.png' : '/static/image/zana.png'" mode="" class="icons"></image>
+				{{item.like}}
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: 'SquarePostCard',
+		props: {
+			item: {
+				type: Object,
+				default: () => ({})
+			},
+			isshow: {
+				type: Boolean,
+				default: false
+			},
+			fallbackImage: {
+				type: String,
+				default: '/static/image/img.png'
+			},
+			fallbackAvatar: {
+				type: String,
+				default: '/static/image/mine/user.png'
+			}
+		},
+		methods: {
+			emitView() {
+				this.$emit('view', this.item)
+			},
+			emitComment() {
+				this.$emit('comment', this.item)
+			},
+			emitLike() {
+				this.$emit('like', this.item)
+			}
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+.grid-image {
+	width: 100%;
+	height: 320rpx;
+	background: #fff;
+	border-radius: 10rpx;
+}
+
+.grid-footer {
+	padding: 20rpx 0px;
+	display: flex;
+	align-items: center;
+	width: 100%;
+}
+
+.grid-avatar {
+	width: 48rpx;
+	height: 48rpx;
+	border-radius: 50%;
+	margin-right: 12rpx;
+	flex-shrink: 0;
+	object-fit: cover;
+	display: block;
+}
+
+.grid-info {
+	flex: 1;
+	display: flex;
+	flex-direction: column;
+}
+
+.grid-tag {
+	font-size: 24rpx;
+	color: #3F435B;
+	margin-bottom: 4rpx;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	width: 100%;
+}
+
+.grid-name {
+	font-size: 22rpx;
+	color: #8A8D97;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	width: 86%;
+}
+
+.card-actions {
+	display: flex;
+	align-items: center;
+	// justify-content: space-between;
+	padding: 0 12rpx 10rpx;
+}
+
+.iconview {
+	margin-right: 10px;
+	display: inline-flex;
+	align-items: center;
+	font-size: 22rpx;
+	color: #333;
+}
+.icons1 {
+	width: 18px;
+	height: 18px;
+	margin-right: 5px;
+}
+.icons {
+	width: 15px;
+	height: 15px;
+	margin-right: 5px;
+}
+</style>
+