zyejMAll-mobile/pages/seeding/seeding_fabu/seeding_fabu.vue

<template>
	<s-layout title="发布动态" :bgStyle="{ color: '#fff' }">
		<view class="container">
			<view class="media-section">
				<view class="media-btn" @click="chooseImage">
					<image v-if="imageUrl" :src="imageUrl" class="preview-img" mode="aspectFill" />
					<view v-else class="media-placeholder">
						<text>添加图片</text>
					</view>
				</view>

				<button class="media-btn" @click="chooseVideo">
					<!-- <image src="/static/icon-video.png" class="icon" /> -->
					<text>添加视频</text>
				</button>
			</view>

			<view class="tips">
				<text>填写标题会有更多赞噢~</text>
			</view>

			<textarea class="textarea" v-model="content" placeholder="分享使用体验和心得，获得更多点赞和关注哦~(600字内)" maxlength="600"
				auto-height></textarea>

			<view class="hashtag">
				<text>#话题</text>
			</view>

			<view class="options">
				<view class="option" @click="chooseItems">
					<text>🔗 添加宝贝({{ items.length }})</text>
					<text class="right">请选择 ></text>
				</view>
				<view class="option" @click="chooseCategory">
					<text>📂 内容分类</text>
					<text class="right">{{ category || '请选择 >' }}</text>
				</view>
				<view class="option">
					<text>💬 是否禁止评论</text>
					<switch :checked="disableComments" @change="disableComments = !disableComments" />
				</view>
			</view>

			<button class="submit-btn" @click="submitPost">发布</button>
		</view>
	</s-layout>
</template>

<script>
	import SeedApi from '@/sheep/api/seedComm/seedComm.js';
	import FileApi from '@/sheep/api/infra/file';
	export default {
		data() {
			return {
				content: '',
				imageUrl: '', // 上传后图片 URL
				items: [],
				category: '',
				disableComments: false
			};
		},
		methods: {
			chooseImage() {
				uni.chooseImage({
					count: 1,
					success: async (res) => {
						const tempFilePath = res.tempFilePaths[0];

						try {
							// ✅ 正确调用方式，只传路径字符串
							const uploadRes = await FileApi.uploadFile(tempFilePath);

							this.imageUrl = uploadRes.data;

							uni.showToast({
								title: '图片上传成功',
								icon: 'success'
							});
						} catch (err) {
							console.error('上传失败', err);
							uni.showToast({
								title: '图片上传失败',
								icon: 'none'
							});
						}
					},
					fail: () => {
						uni.showToast({
							title: '图片选择失败',
							icon: 'none'
						});
					}
				});
			},

			chooseVideo() {
				uni.chooseVideo({
					success: (res) => {
						console.log('选中视频:', res.tempFilePath);
					}
				});
			},
			chooseItems() {
				console.log('添加宝贝');
			},
			chooseCategory() {
				console.log('选择分类');
			},
			submitPost() {
				if (!this.content) {
					return uni.showToast({
						title: '请填写内容',
						icon: 'none'
					});
				}
				if (!this.imageUrl) {
					return uni.showToast({
						title: '请添加图片',
						icon: 'none'
					});
				}

				const payload = {
					content: this.content,
					picUrl: this.imageUrl
				};

				SeedApi.createSeed(payload)
					.then((res) => {
						uni.showToast({
							title: '发布成功',
							icon: 'success'
						});

						setTimeout(() => {
							// 回到上一个页面
							const pages = getCurrentPages();
							const prevPage = pages[pages.length - 2]; // 上一个页面

							// 如果有 onLoad 或其他刷新函数，可以手动调用
							if (prevPage && typeof prevPage.onLoad === 'function') {
								// 传参数给上一个页面时需要用 options
								prevPage.onLoad(prevPage.options);
							}

							uni.navigateBack(); // 返回上一个页面
						}, 800);
					})
					.catch((err) => {
						console.error('发布失败', err);
						uni.showToast({
							title: '发布失败',
							icon: 'none'
						});
					});
			}
		}
	};
</script>

<style scoped>
	.container {
		padding: 20rpx;
		background-color: #f5f5f5;
	}

	.media-section {
		display: flex;
		justify-content: space-around;
		margin-bottom: 20rpx;
	}

	.media-btn {
		width: 45%;
		height: 200rpx;
		background-color: #fff;
		border-radius: 12rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.icon {
		width: 60rpx;
		height: 60rpx;
		margin-bottom: 10rpx;
	}

	.tips {
		padding: 10rpx 0;
		color: #666;
	}

	.textarea {
		background: #fff;
		padding: 20rpx;
		border-radius: 12rpx;
		min-height: 200rpx;
		/* margin-bottom: 10rpx; */
		margin: 10rpx auto;
		/* 上下10rpx边距，左右自动居中 */
		display: block;
		/* 确保居中生效 */
		max-width: 90%;
		/* 限制最大宽度，适应不同屏幕 */
	}

	.hashtag {
		padding: 10rpx;
		color: #666;
	}

	.options {
		background: #fff;
		border-radius: 12rpx;
		margin: 20rpx 0;
	}

	.option {
		display: flex;
		justify-content: space-between;
		padding: 30rpx 20rpx;
		border-bottom: 1rpx solid #eee;
	}

	.option:last-child {
		border-bottom: none;
	}

	.right {
		color: #999;
	}

	.submit-btn {
		background-color: #e64340;
		color: #fff;
		border-radius: 50rpx;
		height: 90rpx;
		font-size: 34rpx;
		margin-bottom: 30rpx;
	}

	.preview-img {
		width: 100%;
		height: 100%;
		border-radius: 12rpx;
		object-fit: cover;
	}

	.media-placeholder {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 100%;
		color: #999;
	}
</style>