first commit

pages/find/myArticle.vue

@@ -0,0 +1,186 @@
+<template>
+	<!-- 我的文章 -->
+	<view class="my-article">
+		<view class="top">
+			<view class="picture">
+				<up-avatar size="180rpx" :src="info.avatar" />
+			</view>
+			<view class="nickname">
+				{{ info.nickName }}
+			</view>
+			<view class="btn-area" @click="toPublish">
+				<image src="/static/icon/publish-article.png"></image>
+				<view class="btn-text">发文</view>
+			</view>
+		</view>
+		<z-paging ref="paging" v-model="listData" use-page-scroll @query="queryList">
+			<view class="list-area">
+				<view class="list-item" v-for="(item, index) in listData" :key="index"  @click="goDetail(item)">
+					<view class="list-item-img">
+						<image :src="item.coverImageUrl"></image>
+					</view>
+					<view class="list-item-btm">
+						<view class="list-title">
+							{{ item.content }}
+						</view>
+						<view class="list-btn-area">
+							<view class="bottom-btn" @click.stop="goDelete(item)">
+								<image src="/static/icon/icon-delete.png"></image>
+								<text class="btn-text">删除</text>
+							</view>
+							<view class="bottom-btn ml16" @click.stop="goEdit(item)">
+								<image src="/static/icon/icon-eidt.png"></image>
+								<text class="btn-text">编辑</text>
+							</view>
+						</view>
+					</view>
+				</view>
+			</view>
+		</z-paging>
+	</view>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted } from 'vue';
+import { getUserArticleList, userInfo, articleDelete } from '@/api/api.js';
+import { onShow } from '@dcloudio/uni-app';
+
+const info = ref({});
+const paging = ref(null);
+const listData = ref()
+
+onMounted(async () => {
+	const res = await userInfo();
+	info.value = res;
+});
+
+onShow(() => {
+	paging.value && paging.value.reload();
+})
+
+const queryList = async (pageNo, pageSize) => {
+	getUserArticleList()
+		.then((res) => {
+			paging.value.complete(res);
+			uni.hideLoading();
+		})
+		.catch((res) => {
+			paging.value.complete(false);
+			uni.hideLoading();
+		});
+};
+
+const toPublish = () => {
+	uni.navigateTo({
+		url: `/pages/find/add`
+	});
+}
+
+const goDelete = item => {
+	articleDelete([Number(item.id)])
+		.then((res) => {
+			paging.value.reload();
+		});
+}
+
+const goEdit = item => {
+	uni.navigateTo({
+		url: `/pages/find/add?id=${item.id}`
+	});
+}
+
+const goDetail = item => {
+	uni.navigateTo({
+		url: `/pages/find/detail?id=${item.id}`
+	});
+}
+</script>
+
+<style scoped lang="scss">
+.my-article {
+	.top {
+		height: 342rpx;
+		background: #FFFFFF;
+		position: relative;
+		.picture {
+			padding-top: 40rpx;
+			display: flex;
+			justify-content: center;
+		}
+		.nickname {
+			font-weight: bold;
+			font-size: 40rpx;
+			color: #232323;
+			margin-top: 20rpx;
+			text-align: center;
+		}
+		.btn-area {
+			position: absolute;
+			top: 40rpx;
+			right: 40rpx;
+			padding: 0 12rpx;
+			image {
+				width: 40rpx;
+				height: 40rpx;
+			}
+			.btn-text {
+				font-weight: bold;
+				font-size: 20rpx;
+				color: #232323;
+			}
+		}
+	}
+	.list-area {
+		padding: 28rpx 30rpx;
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: space-between;
+		.list-item {
+			background: #fff;
+			border-radius: 8rpx;
+			width: 336rpx;
+			margin-bottom: 24rpx;
+			&-img {
+				height: 370rpx;
+				background: #fff;
+				border-radius: 8rpx 8rpx 0 0;
+				image {
+					width: 336rpx;
+					height: 370rpx;
+				}
+			}
+			&-btm {
+				height: 120rpx;
+				padding: 12rpx;
+				.list-title {
+					font-weight: bold;
+					font-size: 24rpx;
+					color: #232323;
+					overflow: hidden;
+					text-overflow: ellipsis;
+					white-space: nowrap;
+				}
+				.list-btn-area {
+					margin-top: 36rpx;
+					font-weight: 400;
+					font-size: 20rpx;
+					color: #666666;
+					display: flex;
+					justify-content: flex-end;
+					.bottom-btn {
+						display: flex;
+						align-items: center;
+						image {
+							width: 28rpx;
+							height: 28rpx;
+						}
+					}
+				}
+			}
+		}
+	}
+	.ml16 {
+		margin-left: 16rpx;
+	}
+}
+</style>