|
@@ -0,0 +1,105 @@
|
|
|
|
+import { CommonModule } from '@angular/common';
|
|
|
|
+import { Component, OnInit } from '@angular/core';
|
|
|
|
+import { FormsModule } from '@angular/forms';
|
|
|
|
+import { Router } from '@angular/router';
|
|
|
|
+import { NavController } from '@ionic/angular';
|
|
|
|
+import { IonButton, IonButtons, IonContent, IonFooter, IonHeader, IonIcon, IonInput, IonItem, IonTextarea, IonTitle, IonToolbar, } from '@ionic/angular/standalone';
|
|
|
|
+import { addIcons } from 'ionicons';
|
|
|
|
+import { atOutline, chevronBackSharp, closeOutline, happyOutline, imageOutline } from 'ionicons/icons';
|
|
|
|
+import { CloudObject, CloudUser } from 'src/lib/ncloud';
|
|
|
|
+
|
|
|
|
+addIcons({chevronBackSharp,imageOutline,atOutline,happyOutline,closeOutline });
|
|
|
|
+@Component({
|
|
|
|
+ selector: 'app-send-post',
|
|
|
|
+ templateUrl: './send-post.component.html',
|
|
|
|
+ styleUrls: ['./send-post.component.scss'],
|
|
|
|
+ standalone: true,
|
|
|
|
+ imports: [IonHeader,IonToolbar,IonTitle,IonContent,IonItem,
|
|
|
|
+ IonButton,IonIcon,IonButtons,IonInput,IonFooter,CommonModule,FormsModule,IonTextarea,],
|
|
|
|
+})
|
|
|
|
+export class SendPostComponent implements OnInit {
|
|
|
|
+ inputText: string = ''; // 用于绑定输入框的内容
|
|
|
|
+ title: string = ''; // 帖子标题
|
|
|
|
+ showLocationTag: boolean = true; // 控制标签是否显示
|
|
|
|
+ remainingChars: number = 20; // 剩余字符数
|
|
|
|
+ images: string[] = []; // 存储图片的数组
|
|
|
|
+ tags: string[] = []; // 存储标签的数组
|
|
|
|
+ ngOnInit() {}
|
|
|
|
+
|
|
|
|
+ constructor(private router: Router,private navCtrl: NavController) {}
|
|
|
|
+
|
|
|
|
+ goBack() {
|
|
|
|
+
|
|
|
|
+ this.navCtrl.back(); // 返回上一页
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+// 发布帖子
|
|
|
|
+publishPost() {
|
|
|
|
+ // 检查发布按钮是否处于激活状态
|
|
|
|
+ if (this.inputText.length === 0 || this.remainingChars ===20) {
|
|
|
|
+ console.warn('按钮处于默认样式,无法发布帖子');
|
|
|
|
+ return; // 如果按钮处于默认样式,直接返回,不执行后续逻辑
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+ // 创建一个 CloudObject 实例,表示要保存的帖子
|
|
|
|
+ const post = new CloudObject('post'); // 表名为 'post'
|
|
|
|
+
|
|
|
|
+ // 设置帖子内容
|
|
|
|
+ post.set({
|
|
|
|
+ user: new CloudUser().toPointer(), // 指向当前用户
|
|
|
|
+ content: this.inputText, // 帖子内容
|
|
|
|
+ title: this.title, // 帖子标题
|
|
|
|
+ image: this.images, // 图片数组
|
|
|
|
+ tag: this.tags, // 标签数组
|
|
|
|
+ });
|
|
|
|
+
|
|
|
|
+ // 保存帖子到数据库
|
|
|
|
+ post.save()
|
|
|
|
+ .then(() => {
|
|
|
|
+ console.log('帖子已发布');
|
|
|
|
+ // 清空输入框和其他状态
|
|
|
|
+ this.inputText = '';
|
|
|
|
+ this.title = '';
|
|
|
|
+ this.images = [];
|
|
|
|
+ this.tags = [];
|
|
|
|
+ })
|
|
|
|
+ .catch((error:any) => {
|
|
|
|
+ console.error('发布帖子时出错:', error);
|
|
|
|
+ });
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+// 删除标签
|
|
|
|
+ removeLocationTag() {
|
|
|
|
+ this.showLocationTag = false; // 设置为 false 隐藏标签
|
|
|
|
+ }
|
|
|
|
+// 更新标题长度
|
|
|
|
+ updateTitleLength() {
|
|
|
|
+ this.remainingChars = 20 - this.title.length; // 更新剩余字符数
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ // 处理文件选择
|
|
|
|
+ uploadImage() {
|
|
|
|
+ const fileInput = document.querySelector('input[type=file]') as HTMLInputElement; // 使用类型断言;
|
|
|
|
+ if (fileInput) {
|
|
|
|
+ fileInput.click(); // 点击文件输入框
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ // 处理文件选择后的事件
|
|
|
|
+ onFileSelected(event: Event) {
|
|
|
|
+ const input = event.target as HTMLInputElement;
|
|
|
|
+ if (input.files && input.files.length > 0) {
|
|
|
|
+ const file = input.files[0];
|
|
|
|
+ const reader = new FileReader();
|
|
|
|
+
|
|
|
|
+ reader.onload = (e: any) => {
|
|
|
|
+ // 将图片数据存储到 images 数组中
|
|
|
|
+ this.images.push(e.target.result); // 将 Base64 编码的图片数据添加到数组
|
|
|
|
+ };
|
|
|
|
+
|
|
|
|
+ reader.readAsDataURL(file); // 读取文件为 Data URL
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+}
|