dvcp_v2_wxcp_app/src/apps/AppResidentActivitie/AddPosts.vue

<template>
  <div class="page">
    <div class="textarea-div mar-b16">
      <div class="title mar-b32"><span></span>帖子内容</div>
      <div class="pad-l20">
        <u-input v-model="form.content" type="textarea" :border="false" :height="140" :auto-height="true" placeholder="请输入内容（1000字以内）" placeholder-style="color:#999;font-size:16px;" maxLength="140" />
      </div>
    </div>
    <div class="textarea-div pad-b176">
      <div class="title mar-b32"><span></span>图片（最多9张）</div>
      <div class="pad-b24">
        <AiUploader :def.sync="form.images" multiple placeholder="上传图片" :limit="9" action="/admin/file/add2"></AiUploader>
      </div>
    </div>
    <div class="footer-btn">
      <div class="btn" @click="addPost">立即发布</div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: 'AddPosts',
  components: {},
  computed: {
    ...mapState(['user']),
  },
  data() {
    return {
      files: [],
      id: '',
      flag: false,
      form: {
        content: '',
        images: [],
      },
    }
  },
  onLoad(o) {
    this.id = o.id || ''
  },
  onShow() {
    document.title = '发布动态'
  },
  methods: {
    addPost() {
      if (this.flag) return

      if (!this.form.content && !this.form.images.length) {
        return this.$u.toast('帖子内容或图片不能为空')
      }
      this.flag = true

      let imagesList = []
      if (this.form.images) {
        this.form.images.map((item) => {
          imagesList.push({ id: item.id, url: item.url })
        })
      }

      this.$http
        .post(`/app/appvillageactivitypost/addOrUpdate`, {
          content: this.form.content,
          avatar: this.user.avatar,
          name: this.user.name,
          phone: this.user.phone ? this.user.phone : '',
          userId: this.user.id,
          activityId: this.id,
          images: JSON.stringify(imagesList),
        })
        .then((res) => {
          if (res.code == 0) {
            this.$u.toast('发布成功')
            uni.$emit('refresh')
            setTimeout(() => {
              uni.navigateBack()
            }, 600)
          }
        })
        .catch(() => {
          this.flag = false
          this.$u.toast('发布失败')
        })
    },
  },
}
</script>
<style lang="scss" scoped>
.textarea-div {
  width: 100%;
  padding: 32px 32px 38px 32px;
  box-sizing: border-box;
  background-color: #fff;
}
.title {
  font-size: 32px;
  font-family: PingFangSC-Regular, PingFang SC;
  color: #333;
  line-height: 44px;
  span {
    font-family: PingFangSC-Regular, PingFang SC;
    color: #ff4466;
    margin-right: 4px;
  }
}
.border {
  border-bottom: 2px solid #ddd;
}
.mar-b32 {
  margin-bottom: 32px;
}
.pad-l20 {
  padding-left: 20px;
}
.mar-b16 {
  margin-bottom: 16px;
}

.pad-b176 {
  padding-bottom: 176px;
}
.footer-btn {
  width: 100%;
  padding: 0 32px 32px 32px;
  box-sizing: border-box;
  position: fixed;
  bottom: 0;
  left: 0;
  background-color: #f3f6f9;
  z-index: 99;
  .btn {
    width: 100%;
    height: 92px;
    line-height: 92px;
    text-align: center;
    background: #1365dd;
    border-radius: 8px;
    font-size: 34px;
    color: #fff;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
  }
}
</style>