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

<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>