上传代码

p-BluPrint_1.0.288888/pages/announcement/announcement.vue

@@ -0,0 +1,198 @@
+<template>
+  <view>
+    <view class="navbar">
+      <view class="search">
+        <text class="icon-search">
+          <input type="text" v-model="announcement" placeholder="请输入内容" class="transparent-input"/>
+        </text>
+      </view>
+      <button @click="submitForm" class="search-button">提交</button> 
+    </view>
+    
+    <view class="contentList">
+      <view class="contentListItem" v-for="(item, index) in contentList" :key="item.id" @click.stop="deleteItem(item)">
+        <view class="contentDetail">{{ item.content }}</view>
+        <view class="contentTime">{{ formatDate(item.createTime) }}</view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      announcement: '',
+      contentList: []
+    };
+  },
+  methods: {
+    async submitForm() {
+      if (!this.announcement.trim()) {
+        uni.showToast({ title: '内容不能为空，请输入内容', icon: 'none', duration: 2000 });
+        return;
+      }
+
+      try {
+        const res = await uni.request({
+          url: `${this.apiImageUrl}/api/businessInfo/add`,
+          method: 'POST',
+          data: { content: this.announcement },
+          header: {
+            'cookie': uni.getStorageSync("cookie"),
+            'Content-Type': 'application/json'
+          }
+        });
+        console.log('提交成功:', res);
+        this.announcement = '';
+        uni.showToast({ title: '发布成功', icon: 'success', duration: 2000 });
+        await this.loadContentList();
+      } catch (err) {
+        console.error('提交失败:', err);
+        uni.showToast({ title: '发布失败', icon: 'error', duration: 2000 });
+      }
+    },
+
+    async loadContentList() {
+      try {
+        const response = await uni.request({
+          url: `${this.apiImageUrl}/api/businessInfo/list/my`,
+          method: 'POST',
+          header: {
+            'cookie': uni.getStorageSync("cookie"),
+            'Content-Type': 'application/json'
+          }
+        });
+
+        this.contentList = response[1].data.data || [];
+        console.log(this.contentList);
+      } catch (err) {
+        console.log(err);
+      }
+    },
+
+    async deleteItem(item) {
+      try {
+        const contentId = item.id;
+        console.log(`尝试删除ID为${contentId}的内容`);
+
+        const deleteRes = await uni.request({
+          url: `${this.apiImageUrl}/api/businessInfo/delete`,
+          method: 'POST',
+          data: { id: contentId },
+          header: {
+            'cookie': uni.getStorageSync("cookie"),
+            'Content-Type': 'application/json'
+          }
+        });
+
+        console.log('删除成功:', deleteRes);
+        this.contentList = this.contentList.filter(i => i.id !== contentId);
+        uni.showToast({ title: '删除成功', icon: 'success', duration: 2000 });
+      } catch (err) {
+        console.error('删除失败:', err);
+        uni.showToast({ title: '删除失败', icon: 'error', duration: 2000 });
+      }
+    },
+
+    formatDate(dateStr) {
+      const date = new Date(dateStr);
+      const year = date.getFullYear();
+      const month = String(date.getMonth() + 1).padStart(2, '0');
+      const day = String(date.getDate()).padStart(2, '0');
+      return `${year}-${month}-${day}`;
+    }
+  },
+  computed: {
+    apiImageUrl() {
+      return process.env.VUE_APP_API_IMAGE_URL || 'https://xiaokuaisong.shop:6448';
+    }
+  },
+  mounted() {
+    this.loadContentList(); 
+  }
+};
+</script>
+
+
+<style scoped lang="scss">
+
+.contentList {
+	width: 90%;
+	margin: 0 auto;
+}
+
+.contentListItem {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: 10px;
+	border-bottom: 1px solid #ccc;
+	background-color: #fff;
+}
+
+.contentDetail {
+	width: 65%;
+	height: inherit;
+	flex-grow: 1;
+	font-size: 14px;
+	color: #333;
+	padding-right: 10px;
+}
+
+.contentTime {
+	width: 25%;
+	height: inherit;
+	margin-right: auto;
+	font-size: 12px;
+	color: #666;
+	padding: 5px;
+}
+
+.navbar {
+	background-color: #4095e5;
+	display: flex;
+	flex-direction: row;
+	padding: 10px;
+
+	.search {
+		display: flex;
+		align-items: center;
+		padding: 0 10rpx 0 26rpx;
+		height: 50rpx;
+		color: #fff;
+		font-size: 28rpx;
+		border-radius: 32rpx;
+		background-color: rgba(255, 255, 255, 0.5);
+		width: 70%;
+		margin: 0 auto;
+	}
+
+	.icon-search {
+		margin-right: 10rpx;
+	}
+
+	.search-button {
+		margin-left: auto; 
+		height: 50rpx;
+		background-color: #fff; 
+		color: #4095e5;
+		border: none;
+		border-radius: 32rpx; 
+		padding: 0 20rpx; 
+		line-height: 50rpx;
+		font-size: 15px;
+	}
+
+
+	.transparent-input {
+		background-color: transparent; 
+		border: none; 
+		color: #fff;
+		outline: none; 
+		width: 100%;
+		padding: 0 10rpx; 
+		font-size: 28rpx; 
+	}
+}
+</style>