第二次冲刺08（5.22）

朋友圈发布动态页面

<template>

  <view class="container">

    <textarea v-model="content" placeholder="说点什么吧..." class="content-input"></textarea>

    <button @click="chooseImage">选择图片</button>

    <view class="image-list">

      <image v-for="(img, index) in images" :key="index" :src="img" class="post-image"></image>

    </view>

    <button @click="post">发布</button>

  </view>

</template>

 

<script>

export default {

  data() {

    return {

      content: '',

      images: []

    };

  },

  methods: {

    chooseImage() {

      uni.chooseImage({

        count: 9,

        success: (res) => {

          this.images = res.tempFilePaths;

        }

      });

    },

    post() {

      // 这里你可以将数据提交到服务器，或者存储到本地

      // 示例代码，将数据存储到本地数据中

      let newPost = {

        avatar: '/static/avatar.png',

        username: '当前用户',

        content: this.content,

        images: this.images,

        likes: 0,

        comments: []

      };

      // 将新动态添加到朋友圈

      let pages = getCurrentPages();

      let prevPage = pages[pages.length - 2];

      prevPage.$vm.posts.push(newPost);

      uni.navigateBack();

    }

  }

};

</script>

 

<style scoped>

.container {

  padding: 20px;

}

.content-input {

  width: 100%;

  height: 100px;

  border: 1px solid #ccc;

  margin-bottom: 20px;

  padding: 10px;

}

.image-list {

  display: flex;

  flex-wrap: wrap;

}

.post-image {

  width: 100px;

  height: 100px;

  margin: 5px;

}

</style>

 

评论功能

<template>

  <view class="comment-section">

    <input v-model="newComment" placeholder="添加评论..." />

    <button @click="addComment">提交</button>

    <view v-for="(comment, index) in comments" :key="index" class="comment">

      <text>{{ comment.username }}: {{ comment.content }}</text>

    </view>

  </view>

</template>

 

<script>

export default {

  data() {

    return {

      newComment: '',

      comments: [] // 示例数据，实际应从父组件传递

    };

  },

  methods: {

    addComment() {

      this.comments.push({ username: '当前用户', content: this.newComment });

      this.newComment = '';

    }

  }

};

</script>

 

<style scoped>

.comment-section {

  padding: 10px;

}

.comment {

  margin-top: 10px;

}

</style>